{"id":1856,"date":"2024-06-09T11:25:04","date_gmt":"2024-06-09T09:25:04","guid":{"rendered":"https:\/\/wypo.io\/gutenberg-modifier-variantes-bloc\/"},"modified":"2024-06-26T23:52:51","modified_gmt":"2024-06-26T21:52:51","slug":"gutenberg-modifying-block-variants","status":"publish","type":"post","link":"https:\/\/wypo.io\/en\/gutenberg-modifying-block-variants\/","title":{"rendered":"Gutenberg: Modifying block variants"},"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-440869124\"\n        id=\"codemirror-440869124\"\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-440869124'), {\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-delete-existing-styles\">Delete existing styles<\/h2>\n\n\n\n<p class=\"\">You can delete the styles for each block using the following code in 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-1905323356\"\n        id=\"codemirror-1905323356\"\n      >wp.domReady(()=&gt;{\n\twp.blocks.unregisterBlockStyle(&#039;core\/button&#039;,&#039;outline&#039;);\n\twp.blocks.unregisterBlockStyle(&#039;core\/button&#039;,&#039;fill&#039;);\n});<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1905323356'), {\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=\"\">In this example, we remove the styles for <code>core\/buttons<\/code>. This can be useful if you want to simplify the options available to users or impose a more consistent style on your site.<\/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-adding-block-styles\">Adding block styles<\/h2>\n\n\n\n<p class=\"\">You can add styles for each block using the following code in 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-979069533\"\n        id=\"codemirror-979069533\"\n      >wp.domReady(()=&gt;{\n\twp.blocks.registerBlockStyle(&#039;core\/button&#039;, {\n    \tname: &#039;primary-button&#039;,\n    \tlabel: &#039;Blue&#039;,\n    \tisDefault: true\n  \t});\n  \twp.blocks.registerBlockStyle(&#039;core\/button&#039;, {\n    \tname: &#039;secondary-button&#039;,\n    \tlabel: &#039;Orange&#039;\n  \t});\n  \twp.blocks.registerBlockStyle(&#039;core\/button&#039;, {\n    \tname: &#039;white-button&#039;,\n    \tlabel: &#039;White&#039;\n  \t<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-979069533'), {\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=\"\">In this example, we&#8217;re adding three new button styles (<code>core\/button<\/code>). The default style will be the blue button (<code>primary-button<\/code>), and we&#8217;re also adding styles for the orange button (<code>secondary-button<\/code>) and the white button (<code>white-button<\/code>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-add-css-code-to-customize-each-style\">Add CSS code to customize each style<\/h3>\n\n\n\n<p class=\"\">These CSS rules define the appearance of the buttons according to the styles we saved earlier. You can customize the styles to suit the aesthetics of your site.<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-css\">\n          CSS        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1625134831\"\n        id=\"codemirror-1625134831\"\n      >.wp-block-buttons .wp-block-button .wp-element-button {\n  background: blue;\n}\n\n.wp-block-buttons .wp-block-button.is-style-secondary-button .wp-element-button {\n  background: red;\n}\n\n.wp-block-buttons .wp-block-button.is-style-white-button .wp-element-button {\n  background: white;\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1625134831'), {\n          mode: 'css',\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    <\/div>\n\n\n            <div class=\"hf_animated fade_bottom none default is-style-smallbordertop wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--50);--_hfal-cg-m-t-lg:var(--wp--preset--spacing--50);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--50);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--50);--_hfal-cg-m-t-md:var(--wp--preset--spacing--50);--_hfal-cg-m-t-sm:var(--wp--preset--spacing--50);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-conclusion\">Conclusion<\/h2>\n\n\n\n<p class=\"\">Editing block variants in Gutenberg is a powerful way to customize the block editor to meet your site&#8217;s specific needs. By following these steps, you can remove unwanted styles and add your own, creating a more consistent and aesthetically pleasing experience for users of your WordPress site. Try out these modifications and see how they can improve the presentation and functionality of your blocks!<\/p>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            ","protected":false},"excerpt":{"rendered":"<p>Delete existing styles You can delete the styles for each block using the following code in your editor.js file: In this example, we remove the styles for core\/buttons. This can be useful if you want to simplify the options available to users or impose a more consistent style on your site. Adding block styles You [&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 variants [separator] [sitetitle]","hf_wpseo_meta_description":"Learn how to customize Gutenberg block variants in WordPress. Discover how to add and remove block styles 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-1856","post","type-post","status-publish","format-standard","hentry","category-gutenberg"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/1856","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=1856"}],"version-history":[{"count":1,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/1856\/revisions"}],"predecessor-version":[{"id":1860,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/1856\/revisions\/1860"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=1856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/categories?post=1856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/tags?post=1856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}