{"id":228749,"date":"2022-10-19T12:19:00","date_gmt":"2022-10-19T09:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228749"},"modified":"2022-11-09T04:08:31","modified_gmt":"2022-11-09T01:08:31","slug":"ajouter-des-controles-a-la-barre-laterale-des-blocs-principaux-et-tiers-avec-des-filtres-et-des-composants-dordre-superieur","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/ajouter-des-controles-a-la-barre-laterale-des-blocs-principaux-et-tiers-avec-des-filtres-et-des-composants-dordre-superieur\/","title":{"rendered":"Ajouter des contr\u00f4les \u00e0 la barre lat\u00e9rale des blocs principaux et tiers avec des filtres et des composants d&rsquo;ordre sup\u00e9rieur"},"content":{"rendered":"\n<p>Dans notre dernier guide, nous avons envisag\u00e9 d&rsquo; <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ajouter <code>InspectorControls<\/code>\u00e0 nos blocs personnalis\u00e9s<\/a> pour nous permettre d&rsquo;utiliser des contr\u00f4les dans la barre lat\u00e9rale des blocs. Dans ce guide, nous allons nous appuyer sur cela et ajouter un contr\u00f4le \u00e0 bascule \u00e0 la barre lat\u00e9rale des blocs de tous nos blocs, y compris tous les blocs principaux et tiers que nous utilisons.<\/p>\n<p>Dans ce guide, nous allons cr\u00e9er la fonctionnalit\u00e9 de &quot;bloc de brouillon&quot; qui figurait dans mon <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plugin Wholesome Publishing<\/a>.<\/p>\n<h2>Conditions pr\u00e9alables<\/h2>\n<ul>\n<li>Avoir suivi le guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Cr\u00e9ation d&rsquo;un plugin pour l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg)<\/a><\/li>\n<li>Avoir suivi le guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ajouter une barre lat\u00e9rale \u00e0 votre bloc WordPress personnalis\u00e9 avec InspectorControls<\/a><\/li>\n<\/ul>\n<h2>Se pr\u00e9parer pour ce guide<\/h2>\n<p>Si vous avez suivi le <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Ajouter une barre lat\u00e9rale<\/a>, c&rsquo;est parfait. Mais je vais maintenant devoir vous demander d&rsquo;annuler les modifications que vous avez apport\u00e9es \u00e0 l&rsquo;\u00e9tape 4 de ce guide (le Draft Block Toggle), car nous allons extrapoler cette fonctionnalit\u00e9 et l&rsquo;appliquer \u00e0 tous nos blocs.<\/p>\n<p>Si vous n&rsquo;avez pas suivi ce guide, veuillez d&rsquo;abord vous assurer de le suivre jusqu&rsquo;\u00e0 l&rsquo;\u00e9tape 4, car ce guide fait directement suite \u00e0 celui-l\u00e0.<\/p>\n<h2>Cr\u00e9er des composants d&rsquo;ordre sup\u00e9rieur<\/h2>\n<p>Les composants d&rsquo;ordre sup\u00e9rieur (HoC) sont utilis\u00e9s dans React pour envelopper un composant existant et transmettre des fonctionnalit\u00e9s ou des accessoires \u00e0 ce composant. Ils sont appel\u00e9s HoCs car ils sont ins\u00e9r\u00e9s dans le DOM avant le composant existant, ou vous pourriez dire dans un &quot;ordre sup\u00e9rieur&quot;.<\/p>\n<p>Nous allons cr\u00e9er deux nouveaux HoCs, donc cr\u00e9ez un nouveau dossier dans votre plugin appel\u00e9 <code>components<\/code>et cr\u00e9ez les deux fichiers suivants :<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>withInspectorControls<\/h3>\n<p>Ouvrez <code>\/components\/withInspectorControls.js<\/code>et ajoutez le code suivant\u00a0:<\/p>\n<pre><code>import { InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, ToggleControl } from '@wordpress\/components';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment }    from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default createHigherOrderComponent( (BlockEdit) =&gt; {\n     return (props) =&gt; {\n        const {\n            attributes: {\n                isBlockDraft,\n            },\n            setAttributes,\n        } = props;\n\n        return (&lt;Fragment&gt;\n                &lt;BlockEdit { ...props } \/&gt;\n                &lt;InspectorControls&gt;\n                    &lt;PanelBody\n                        title={ __( 'Block Display Settings', 'wholesome-plugin') }\n                        icon=\"visibility\"\n                        initialOpen={ false }\n                    &gt;\n                        &lt;ToggleControl\n                            label={ __( 'Set Block as Draft', 'wholesome-plugin') }\n                            checked={ isBlockDraft }\n                            onChange={ (isBlockDraft) =&gt; setAttributes( { isBlockDraft }) }\n                            help={ __( 'If the block is set to draft it will not show on the front end.',\n                                'wholesome-plugin') }\n                        \/&gt;\n                    &lt;\/PanelBody&gt;\n                &lt;\/InspectorControls&gt;\n            &lt;\/Fragment&gt;\n        );\n    };\n }, 'withInspectorControls' );\n<\/code><\/pre>\n<p>Vous reconna\u00eetrez peut-\u00eatre ce code \u00e0 partir de l&rsquo;\u00e9tape 4 du <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sidebar Guide<\/a>. C&rsquo;est \u00e0 peu pr\u00e8s le m\u00eame code, \u00e0 part que nous l&rsquo;avons envelopp\u00e9 dans <code>createHigherOrderComponent<\/code>.<\/p>\n<p><code>createHigherOrderComponent<\/code>Cela nous permet d&rsquo;acc\u00e9der \u00e0 la <code>BlockEdit<\/code>fonction d&rsquo;\u00e9dition d&rsquo;origine du bloc que ce composant enveloppera. Nous d\u00e9couvrirons comment cela est transmis lorsque nous cr\u00e9erons les filtres sous peu.<\/p>\n<h3>withIsBlockDraft<\/h3>\n<p>Ouvrez <code>\/components\/withIsBlockDraft.js<\/code>et collez le code suivant\u00a0:<\/p>\n<pre><code>import { createHigherOrderComponent } from '@wordpress\/compose';\n\nexport default createHigherOrderComponent( (BlockListBlock) =&gt; {\n     return (props) =&gt; {\n         const { attributes } = props;\n         const { isBlockDraft } = attributes;\n\n         return &lt;BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } \/&gt;;\n     };\n }, 'withIsBlockDraft' );\n<\/code><\/pre>\n<p>Cela <code>createHigherOrderComponent<\/code>nous permet d&rsquo;acc\u00e9der \u00e0 <code>BlockListBlock<\/code>ce qui nous permet de transmettre des attributs \u00e0 l&rsquo;encapsuleur de bloc de l&rsquo;\u00e9diteur. Nous l&rsquo;utilisons ici pour d\u00e9finir une classe &lsquo;draft-block&rsquo; sur le wrapper si la bascule Draft Block a \u00e9t\u00e9 d\u00e9finie. Cela recr\u00e9e ce que nous avions pr\u00e9c\u00e9demment ajout\u00e9 \u00e0 la m\u00e9thode d&rsquo;\u00e9dition \u00e0 l&rsquo;\u00e9tape 4 du <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Guide de la barre lat\u00e9rale<\/a>.<\/p>\n<p>Encore une fois, nous devons configurer un filtre pour que les \u00e9l\u00e9ments <code>BlockListBlock<\/code>soient transmis \u00e0 ce contr\u00f4le.<\/p>\n<h2>Configurer les filtres<\/h2>\n<p>En haut du <code>\/src\/index.js<\/code>fichier, ajoutez ce qui suit\u00a0:<\/p>\n<pre><code>import { addFilter } from '@wordpress\/hooks';\n\nimport withIsBlockDraft from '.\/components\/withIsBlockDraft';\nimport withInspectorControls from '.\/components\/withInspectorControls';\n<\/code><\/pre>\n<p>Nous devrions vraiment penser \u00e0 modifier la structure de notre plugin afin que le code qui enregistre le bloc soit import\u00e9 d&rsquo;un autre fichier, mais pour plus de simplicit\u00e9, nous utiliserons le m\u00eame fichier.<\/p>\n<h3>Filtrer les attributs<\/h3>\n<p>Dans le m\u00eame fichier ajoutez le code suivant :<\/p>\n<pre><code>addFilter(\n    'blocks.registerBlockType',\n    'wholesome-plugin\/block-draft-attributes', (settings) =&gt; {\n        const { attributes } = settings;\n        return {\n            ...settings,\n            attributes: {\n                ...attributes,\n                isBlockDraft: {\n                    default: false,\n                    type: 'boolean',\n                },\n            },\n        };\n    }\n);\n<\/code><\/pre>\n<p>Ce filtre ajoute des attributs suppl\u00e9mentaires \u00e0 tous les blocs de la construction. En th\u00e9orie, nous pourrions filtrer cela pour n&rsquo;\u00eatre que pour certains blocs, mais nous n&rsquo;allons pas le faire pour notre exemple.<\/p>\n<p>Si nous voulions limiter ce filtre \u00e0 certains blocs, nous pourrions le faire comme suit\u00a0:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Filtrer les InspectorControls<\/h3>\n<p>Ajoutez le code suivant au <code>\/src\/index.js<\/code>fichier\u00a0:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>Ici, nous <code>BlockEdit<\/code>filtrons afin qu&rsquo;il transmette cela \u00e0 notre HoC que nous avons cr\u00e9\u00e9 pr\u00e9c\u00e9demment.<\/p>\n<p>Si nous voulions limiter ce filtre \u00e0 certains blocs, nous ferions ce qui suit <strong>au sein de la HoC<\/strong>\u00a0:<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Filtrer le BlockListBlock<\/h3>\n<p>Ajoutons enfin le filtre pour notre <code>BlockListBlock<\/code>:<\/p>\n<pre><code>addFilter(\n    'editor.BlockListBlock',\n    'wholesome-plugin\/block-draft-class',\n    withIsBlockDraft\n);\n<\/code><\/pre>\n<p>Encore une fois, si vous souhaitez restreindre ce bloc, vous pouvez le faire \u00e0 l&rsquo;int\u00e9rieur du HoC.<\/p>\n<h2>Ajouter le PHP et le SCSS<\/h2>\n<p>Ajoutez ce qui suit pour <code>\/editor.scss<\/code>que notre banni\u00e8re de brouillon soit jolie (cela peut \u00eatre fait beaucoup mieux, mais ce n&rsquo;est qu&rsquo;un exemple).<\/p>\n<pre><code>.editor-styles-wrapper {\n    .draft-block {\n\n        border-bottom: 1px dotted #cfcfcf;\n        border-left: 1px solid #cfcfcf;\n        border-right: 1px solid #cfcfcf;\n        margin-top: 3em;\n\n        &amp;::before {\n            background: #cfcfcf;\n            background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);\n            background-size: 8.49px 8.49px;\n            border-left: 1px solid #cfcfcf;\n            border-right: 1px solid #cfcfcf;\n            border-top: 1px solid #cfcfcf;\n            color: black;\n            content: 'Draft Block';\n            display: block;\n            font-family: monospace;\n            font-size: 1rem;\n            left: 0;\n            padding-left: 5px;\n            position: absolute;\n            top: -27px;\n            width: 100%;\n        }\n\n        opacity: .4;\n\n        &amp;.is-selected {\n            opacity: .8;\n        }\n    }\n}\n<\/code><\/pre>\n<p>Ajoutez ce qui suit au fichier racine du plugin (dans notre cas <code>wholesome-plugin.php<\/code>).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {\n\n    if (is_admin()) {\n        return $pre_render;\n    }\n\n    if (isset( $block['attrs']) &amp;&amp;\n        isset( $block['attrs']['isBlockDraft']) &amp;&amp;\n        $block['attrs']['isBlockDraft']) {\n        return false;\n    }\n\n    return $pre_render;\n}\nadd_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );\n<\/code><\/pre>\n<p>Cela arr\u00eatera la sortie des blocs de brouillon sur le frontend.<\/p>\n<h2>Le voir en action<\/h2>\n<p>N&rsquo;oubliez pas de compiler avec <code>npm start<\/code>et nous pouvons maintenant d\u00e9finir n&rsquo;importe quel type de bloc sur un brouillon\u00a0:<\/p>\n<p>D\u00e9finition et d\u00e9sactivation des blocs de brouillon<\/p>\n<ul>\n<li>D\u00e9couvrez comment cr\u00e9er <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">des blocs enfants imbriqu\u00e9s avec le <code>InnerBlocks<\/code>composant<\/a><\/li>\n<li>Jetez un \u0153il \u00e0 <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;utilisation des champs post-m\u00e9ta dans les blocs Gutenberg<\/a><\/li>\n<li>Essayez d&rsquo; <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ajouter des contr\u00f4les \u00e0 la barre lat\u00e9rale de publication<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans notre dernier guide, nous avons envisag\u00e9 d&rsquo;ajouter InspectorControls \u00e0 nos blocs personnalis\u00e9s pour nous permettre d&rsquo;utiliser des contr\u00f4les dans la barre lat\u00e9rale du bloc. Dans ce guide, nous allons nous appuyer sur cela et ajouter&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,936,780],"tags":[1167],"class_list":["post-228749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-gutenberg-3","category-logiciels-open-source","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228749"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228749\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}