Modify Gutenberg block supports

Modifying existing blocks in Gutenberg may seem complex, but with WordPress, there are various JavaScript functions for adjusting supports, styles, adding HTML classes, and more. In this article, we’ll show you how to disable certain block supports to make your site even more personalized.

Pour commencer, vous devez créer un fichier editor.js à la racine de votre thème. Ce fichier contiendra le code JavaScript nécessaire pour modifier les supports des blocs. Ensuite, vous devez inclure ce fichier dans votre thème en ajoutant le code suivant à votre fichier functions.php :

PHP

add_action('enqueue_block_editor_assets',function(){
	wp_enqueue_script('custom-blocks-editor',get_stylesheet_directory_uri().'/editor.js',array('wp-blocks','wp-dom'),"1",true);
});

This code ensures that the editor.js file is loaded into the WordPress block editor, allowing you to modify existing blocks.

Deactivate existing block supports

You can disable support for each block by adding the following code to your editor.js file:

function disableBlockSupports(settings,name){
  if(name==='core/buttons'){
    settings.supports.spacing = false;
    if ( settings.innerBlocks ) {
      settings.innerBlocks = settings.innerBlocks.map( block => {
        if ( block.name === 'core/button' ) { // Désactive les dimensions pour le sous-bloc "core/button"
          return {
            …block,
            supports: {
              …block.supports,
              spacing: false
            }
          };
        }
        return block;
      } );
    }
  }else if(name==='core/button'){
    if(settings.supports){
      settings.supports.spacing = false;
    }
  }
  return settings;
}
wp.hooks.addFilter('blocks.registerBlockType','habefast/disableBlockSupports',disableBlockSupports);

This JavaScript script modifies block parameters to disable support for sizing properties (padding, margin and gap) for buttons (core/buttons for parent and core/button for sub-blocks).

Detailed code explanations

Function disableBlockSupports: This function takes two arguments, settings and name. settings contains the block parameters, and name is the block name.
Disabling Dimensions: If the block name is core/buttons, we disable the spacing support (spacing). If the block contains inner blocks (innerBlocks), we iterate through each inner block to also disable spacing for blocks of type core/button.
Block Registration Filter: We add a filter to blocks.registerBlockType that applies our disableBlockSupports function whenever a block is registered. This ensures our modification is applied to all blocks of type core/buttons and core/button.

With these adjustments, you can customize Gutenberg block supports to better suit the needs of your WordPress site. Test these modifications to see how they can improve the appearance and functionality of your blocks!

Gutenberg: Modifying block supports

Deactivate existing block supports