{"id":1855,"date":"2024-06-09T11:31:03","date_gmt":"2024-06-09T09:31:03","guid":{"rendered":"https:\/\/wypo.io\/gutenberg-modifier-supports-bloc\/"},"modified":"2024-06-26T23:49:34","modified_gmt":"2024-06-26T21:49:34","slug":"gutenberg-modifying-block-supports","status":"publish","type":"post","link":"https:\/\/wypo.io\/en\/gutenberg-modifying-block-supports\/","title":{"rendered":"Gutenberg: Modifying block supports"},"content":{"rendered":"\n<div class=\"wp-block-group  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"\">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&#8217;ll show you how to disable certain block supports to make your site even more personalized.<\/p>\n\n\n\n<p class=\"\">Pour commencer, vous devez cr\u00e9er un fichier <code>editor.js<\/code> \u00e0 la racine de votre th\u00e8me. Ce fichier contiendra le code JavaScript n\u00e9cessaire pour modifier les supports des blocs. Ensuite, vous devez inclure ce fichier dans votre th\u00e8me en ajoutant le code suivant \u00e0 votre fichier <code>functions.php<\/code> :<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-512004540\"\n        id=\"codemirror-512004540\"\n      >add_action(&#039;enqueue_block_editor_assets&#039;,function(){\n\twp_enqueue_script(&#039;custom-blocks-editor&#039;,get_stylesheet_directory_uri().&#039;\/editor.js&#039;,array(&#039;wp-blocks&#039;,&#039;wp-dom&#039;),&quot;1&quot;,true);\n});<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-512004540'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\">This code ensures that the <code>editor.js<\/code> file is loaded into the WordPress block editor, allowing you to modify existing blocks.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-deactivate-existing-block-supports\">Deactivate existing block supports<\/h2>\n\n\n\n<p class=\"\">You can disable support for each block by adding the following code to your <code>editor.js<\/code> file:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-js\">\n          JS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-255519391\"\n        id=\"codemirror-255519391\"\n      >function disableBlockSupports(settings,name){\n  if(name===&#039;core\/buttons&#039;){\n    settings.supports.spacing = false;\n    if ( settings.innerBlocks ) {\n      settings.innerBlocks = settings.innerBlocks.map( block =&gt; {\n        if ( block.name === &#039;core\/button&#039; ) { \/\/ D\u00e9sactive les dimensions pour le sous-bloc &quot;core\/button&quot;\n          return {\n            &#8230;block,\n            supports: {\n              &#8230;block.supports,\n              spacing: false\n            }\n          };\n        }\n        return block;\n      } );\n    }\n  }else if(name===&#039;core\/button&#039;){\n    if(settings.supports){\n      settings.supports.spacing = false;\n    }\n  }\n  return settings;\n}\nwp.hooks.addFilter(&#039;blocks.registerBlockType&#039;,&#039;habefast\/disableBlockSupports&#039;,disableBlockSupports);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-255519391'), {\n          mode: 'javascript',\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\">This JavaScript script modifies block parameters to disable support for sizing properties (padding, margin and gap) for buttons (<code>core\/buttons<\/code> for parent and <code>core\/button<\/code> for sub-blocks).<\/p>\n\n\n\n<p class=\"\"><strong>Detailed code explanations<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\"><strong>Function <code>disableBlockSupports<\/code><\/strong>: This function takes two arguments, <code>settings<\/code> and <code>name<\/code>. <code>settings<\/code> contains the block parameters, and <code>name<\/code> is the block name.<\/li>\n\n\n\n<li class=\"\"><strong>Disabling Dimensions<\/strong>: If the block name is <code>core\/buttons<\/code>, we disable the spacing support (<code>spacing<\/code>). If the block contains inner blocks (<code>innerBlocks<\/code>), we iterate through each inner block to also disable spacing for blocks of type <code>core\/button<\/code>.<\/li>\n\n\n\n<li class=\"\"><strong>Block Registration Filter<\/strong>: We add a filter to <code>blocks.registerBlockType<\/code> that applies our <code>disableBlockSupports<\/code> function whenever a block is registered. This ensures our modification is applied to all blocks of type <code>core\/buttons<\/code> and <code>core\/button<\/code>.<\/li>\n<\/ol>\n\n\n\n<p class=\"\">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!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Deactivate existing block supports You can disable support for each block by adding the following code to your editor.js file: 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 With these adjustments, you can customize Gutenberg [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Modify Gutenberg block supports [separator] [sitetitle]","hf_wpseo_meta_description":"Learn how to customize Gutenberg blocks in WordPress by modifying media, styles and HTML classes. A quick tutorial for developers, with code examples in JavaScript and PHP.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","footnotes":""},"categories":[36],"tags":[],"class_list":["post-1855","post","type-post","status-publish","format-standard","hentry","category-gutenberg"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/1855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/comments?post=1855"}],"version-history":[{"count":1,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/1855\/revisions"}],"predecessor-version":[{"id":1858,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/1855\/revisions\/1858"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=1855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/categories?post=1855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/tags?post=1855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}