https://idea-hack.com/en/blog/19532/
5 custom codes that you can use with WordPress’s Gunteberg custom block development

5 custom codes that you can use with WordPress’s Gunteberg custom block development

Gutenberg is hard to use if it is the default, I think that there is a demand to change . So, we will share Gutenberg’s custom code within the range we know.

Since the following list updates and updates at any time, it is good to save it with a bookmark etc. Also, some of these codes are used even within the free plugin I’m developing.

It should be included here how to make custom blocks, too, because the talk becomes too long, it will be away from the purpose of this section to apply a complete instant code, so we will not discuss it here.

Gutenberg’s custom code collection

Easy codes that are currently summarized are as follows.

  1. CSS enqueue method for Gutenberg
  2. Javascript enqueue method for Gutengerg
  3. How to control the validity / invalidity of Gutenberg by submission type
  4. How to add Gutenberg’s block category
  5. How to change the color panel default setting

Well, let’s see.

CSS enqueue method for Gutenberg

The enqueue of CSS for Gutenberg is somewhat different from the method so far. The CSS file needs to be divided into two files. Their roles are as follows.

CSS to load with front screen and management screen only

This type of CSS is applied to the HTML of the front output and CSS applied also to the HTML of the admin screen output. Let’s look at the sample code at once.

php
		 wp_enqueue_style(
			 'custom_gutenberg-style', // Handle.
			CUSTOM_GUTENBERG_URL , // Block style CSS.
			 array( 'wp-editor', 'wp-blocks', 'wp-edit-post' ), // Dependency to include the CSS after it.
			 filemtime( CUSTOM_GUTENBERG_URL ) // Version: filemtime — Gets file modification time.(Better for Browser cache reset)
		 );

The part and the block style CSS, and / / Version part are the same as WordPress so far.

It is noteworthy that “array (‘wp – editor’, ‘wp – blocks’, ‘wp – edit – post’), // Dependency to include the CSS after it.

For CSS code you want to apply for Gutenberg, it is necessary to apply “array (‘wp-editor’, ‘wp-blocks’, ‘wp-edit-post’).

By doing this, the Gutenberg related code is loaded first, after that customization can be applied.

Also, change “CUSTOM_GUTENBERG_URL” to the path of the file you want to load.

CSS to load with admin screen only

On the other hand, the code you want to load with just the administration screen is required to load as follows.

php
		 wp_enqueue_style(
			 'custom_gutenberg-style', // Handle.
			CUSTOM_GUTENBERG_URL , // Block style CSS.
			 array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
			 filemtime( CUSTOM_GUTENBERG_URL ) // Version: filemtime — Gets file modification time.(Better for Browser cache reset)
		 );

Now ‘array (‘ wp-edit-blocks ‘)’ is needed.
By doing this, the Gutenberg related code is loaded first, after which customization can be applied.

Javascript enqueue method for Gutengerg

Javascript is somewhat different.

However, it does not need to be divided into two kinds of files like CSS. JS is mainly used for loading custom blocks.

php
		 // Scripts.
	 	wp_enqueue_script(
	 		'custom_gutenberg-block', // Handle.
	 		CUSTOM_GUTENBERG_URL, // We register the block here.
	 		array( 'wp-editor', 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencies, defined above.
	 		filemtime( CUSTOM_GUTENBERG_URL ) // Version: filemtime — Gets file modification time.(Better for Browser cache reset)
	 	);

By writing “array (‘wp – editor’, ‘wp – blocks’, ‘wp – i18 n’, ‘wp – element’)” in JS, letting the custom code be read after Gutenberg related code is loaded.

Also, change “CUSTOM_GUTENBERG_URL” to the path of the file you want to load.

How to control the validity / invalidity of Gutenberg by submission type

If you want to invalidate Gutenberg all at once, you can use the following plugin.

However, if you want to invalidate specific “posting type” only for the purpose of plugin development, etc., you can use the following code.

php
$current_post_type = 'post';			

if($current_post_type == 'post') {
				//Disable Gutenberg hooks and filters
				remove_filter( 'replace_editor', 'gutenberg_init' );
				remove_action( 'load-post.php', 'gutenberg_intercept_edit_post' );
				remove_action( 'load-post-new.php', 'gutenberg_intercept_post_new' );
				remove_action( 'admin_init', 'gutenberg_add_edit_link_filters' );
				remove_filter( 'admin_url', 'gutenberg_modify_add_new_button_url' );
				remove_action( 'admin_print_scripts-edit.php', 'gutenberg_replace_default_add_new_button' );
				remove_action( 'admin_enqueue_scripts', 'gutenberg_editor_scripts_and_styles' );
				remove_filter( 'screen_options_show_screen', '__return_false' );
			}

In the above example, Gutenberg is invalidated only when the post type is “post”.

How to add Gutenberg’s block category

In Gutenberg development, there are times when you want to add a new block category. The code you want to use is as follows.

php
		 /**
 		 *
 		 * Add custom block category
 		 *
 		 */
		 function insert_block_categories() {
			 // Add custom block category
			 add_filter( 'block_categories', function( $categories, $post ) {
			  return array_merge(
			    $categories,
			    array(
						array(
							'slug' => 'custom-block',
							'title' => 'Custom Gutenberg',
						),
			    )
			  );
			 }, 10, 2 );
		 }

If you specify “slug” and “title”, you can add as many as you want.

How to change the color panel default setting

If you want to change the default list of the color panel, you can set them in the theme.

php
<?php
function after_setup_theme_gutenberg() {
    
    // Gutenberg support
    add_theme_support( 'gutenberg', array(
        'colors' => array(
            '#21759b', /* WordPress Blue */
            '#d54e21', /* WordPress Orange */
            '#464646', /* WordPress Grey */
        )
    ) );
    
}
add_action( 'after_setup_theme', 'after_setup_theme_gutenberg' );

In this way, it is possible to change the default color.

Summary

Since there should be more besides this, I will update it from time to time.