{"id":228777,"date":"2022-10-19T15:30:00","date_gmt":"2022-10-19T12:30:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228777"},"modified":"2022-11-09T04:14:11","modified_gmt":"2022-11-09T01:14:11","slug":"creer-un-panneau-de-personnalisation-a-laide-des-composants-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-un-panneau-de-personnalisation-a-laide-des-composants-wordpress-block-editor-gutenberg\/","title":{"rendered":"Cr\u00e9er un panneau de personnalisation \u00e0 l&rsquo;aide des composants WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>Dans notre dernier guide, nous avons examin\u00e9 <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la cr\u00e9ation d&rsquo;une page de param\u00e8tres \u00e0 l&rsquo;aide des composants WordPress Block Editor (Gutenberg)<\/a>. Dans ce guide, nous allons aller encore plus loin et utiliser les composants Gutenberg dans WordPress Customizer.<\/p>\n<p>Le personnalisateur avec les composants Gutenberg<\/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\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Utilisation des options pour stocker des donn\u00e9es dans l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg)<\/a><\/li>\n<li>Avoir suivi le guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ajouter des points d&rsquo;entr\u00e9e au<\/a> guide WordPress Cr\u00e9er un script de bloc<\/li>\n<li>Avoir suivi le guide des <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">composants Cr\u00e9er une page de param\u00e8tres \u00e0 l&rsquo;aide de WordPress Block Editor (Gutenberg)<\/a><\/li>\n<\/ul>\n<h2>Cr\u00e9er un point d&rsquo;entr\u00e9e dans le webpack<\/h2>\n<p>Suite au guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ajouter des points d&rsquo;entr\u00e9e au guide WordPress Cr\u00e9er un script de bloc<\/a>, cr\u00e9ez un nouveau point d&rsquo;entr\u00e9e dans le fichier \u00e9tendu <code>webpack.config.js<\/code>que vous avez cr\u00e9\u00e9 dans ce guide.<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        customizer: path.resolve( process.cwd(), 'src', 'customizer.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Cr\u00e9ez deux nouveaux fichiers dans votre solution\u00a0:<\/p>\n<ul>\n<li><code>\/src\/customizer.js<\/code><\/li>\n<li><code>\/src\/customizer.scss<\/code><\/li>\n<\/ul>\n<p>Nous les utiliserons pour cr\u00e9er notre plugin.<\/p>\n<h2>Enregistrez les param\u00e8tres et les composants du personnalisateur en PHP<\/h2>\n<p>Suite aux guides des pr\u00e9requis, ouvrez le fichier PHP racine du plugin (dans ce cas <code>wholesome-plugin.php<\/code>) et ajoutez ce qui suit :<\/p>\n<h3>Enregistrez le contr\u00f4le de personnalisation<\/h3>\n<p>Nous devons cr\u00e9er un contr\u00f4le Customizer personnalis\u00e9. Ajoutez le code suivant \u00e0 votre fichier qui rendra un appel qui sortira le a <code>&lt;div&gt;<\/code>avec un ID auquel notre JavaScript peut se connecter.<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_customizer_register( $wp_customize) {\n\n    class Wholesome_Plugin_Gutenberg_Control extends WP_Customize_Control {\n\n        public $type = 'wholesome-plugin-gutenberg-control';\n\n        public function render_content() {}\n\n        public function content_template() {\n            ?&gt;\n                &lt;div id=\"wholesome-plugin-customizer\"&gt;&lt;\/div&gt;\n            &lt;?php\n        }\n    }\n\n    $wp_customize-&gt;register_control_type( 'Wholesome_Plugin_Gutenberg_Control' );\n}\nadd_action( 'customize_register', 'wholesomecode_wholesome_plugin_customizer_register', 10 );\n<\/code><\/pre>\n<p>En bas de ce fichier nous enregistrons le contr\u00f4le avec <code>register_control_type<\/code>qui nous permet d&rsquo;acc\u00e9der \u00e0 ce contr\u00f4le en JavaScript.<\/p>\n<h3>Enregistrer les param\u00e8tres de personnalisation<\/h3>\n<p>Dans le m\u00eame bloc de code, nous devons enregistrer les param\u00e8tres que nous allons utiliser dans le personnalisateur. Pour ce faire, ajoutez le bloc de code suivant apr\u00e8s la ligne qui fait le <code>register_control_type<\/code>.<\/p>\n<pre><code>\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_select' );\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_text' );\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_text_2', [ 'type' =&gt; 'option' ] );\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_toggle', [ 'type' =&gt; 'option' ] );\n<\/code><\/pre>\n<p>Notez que les deux premiers param\u00e8tres seront accessibles via la <code>get_theme_mod<\/code>fonction par d\u00e9faut, tandis que les deux derniers param\u00e8tres passent dans les arguments <code>'type' =&gt; 'option'<\/code>, ce qui signifie que ces param\u00e8tres seront enregistr\u00e9s en tant que champs uniques dans la table des options et seront accessibles via <code>get_option<\/code>.<\/p>\n<p>Pour ces deux param\u00e8tres inf\u00e9rieurs, nous devons nous assurer qu&rsquo;ils sont enregistr\u00e9s via <code>register_setting<\/code>et <code>show_in_rest<\/code>pour <code>true<\/code>chacun d&rsquo;eux, afin qu&rsquo;ils soient accessibles via Gutenberg.<\/p>\n<h3>Enregistrez les param\u00e8tres &lsquo;Option&rsquo;<\/h3>\n<p>Enregistrez les deux derniers param\u00e8tres de personnalisation (auxquels nous acc\u00e9derons via <code>get_option<\/code>) avec le bloc de code suivant\u00a0:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_settings() {\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_toggle',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_settings', 10 );\n<\/code><\/pre>\n<h3>Mettre les scripts en file d&rsquo;attente<\/h3>\n<p>Enfin, enregistrez les actifs du personnalisateur avec le code suivant (voir le <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Ajouter des points d&rsquo;entr\u00e9e<\/a> pour plus d&rsquo;informations).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_customizer_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/customizer.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $customizer_js = 'build\/customizer.js';\n    $script_asset  = require( $script_asset_path );\n    wp_enqueue_script(\n        'wholesomecode-wholesome-plugin-customizer-editor',\n        plugins_url( $customizer_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    wp_localize_script(\n        'wholesomecode-wholesome-plugin-customizer-editor',\n        'WholesomePluginSettings',\n        [\n            'wholesomecode_wholesome_plugin_example_select' =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),\n            'wholesomecode_wholesome_plugin_example_text'   =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),\n        ]\n    );\n\n    $customizer_css = 'build\/customizer.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-customizer',\n        plugins_url( $customizer_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$customizer_css\") );\n}\nadd_action( 'customize_controls_enqueue_scripts', 'wholesomecode_wholesome_plugin_customizer_scripts', 10 );\n<\/code><\/pre>\n<p>Notez que nous utilisons \u00e9galement <code>wp_localize_script<\/code>dans ce bloc de code pour transmettre les param\u00e8tres auxquels nous acc\u00e9derons via <code>get_theme_mod<\/code>en JavaScript.<\/p>\n<p>Voyons plus en d\u00e9tail cette partie du code\u00a0:<\/p>\n<pre><code>wp_localize_script(\n  'wholesomecode-wholesome-plugin-customizer-editor',\n  'WholesomePluginSettings',\n  [\n    'wholesomecode_wholesome_plugin_example_select' =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),\n    'wholesomecode_wholesome_plugin_example_text'   =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),\n  ]\n);\n<\/code><\/pre>\n<p>Notez que nous utilisons les m\u00eames cl\u00e9s de r\u00e9glage que nous avons enregistr\u00e9es lorsque nous avons enregistr\u00e9 les param\u00e8tres de personnalisation avec <code>$wp_customize-&gt;add_setting<\/code>plus t\u00f4t (ceux qui n&rsquo;ont pas \u00e9t\u00e9 configur\u00e9s pour utiliser une option).<\/p>\n<h2>Construire le panneau de personnalisation en JavaScript<\/h2>\n<p>Ajoutez le code suivant dans le <code>\/src\/customizer.js<\/code>fichier.<\/p>\n<p>Pour l&rsquo;essentiel, ce code (le <code>App<\/code>composant) est une refonte du code du <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Cr\u00e9er une page de param\u00e8tres<\/a>. Il utilise les m\u00eames composants et d\u00e9finit toujours <code>state<\/code>les param\u00e8tres de l&rsquo;API, mais supprime le bouton de sauvegarde et la zone des avis.<\/p>\n<pre><code>import '.\/customizer.scss';\n\nconst { api } = wp;\n\nimport {\n    Panel,\n    PanelBody,\n    Placeholder,\n    SelectControl,\n    Spinner,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n\nimport {\n    Fragment,\n    render,\n    Component,\n} from '@wordpress\/element';\n\nimport { __ } from '@wordpress\/i18n';\n\nconst { customize } = wp;\n\nclass App extends Component {\n    constructor() {\n        super( ...arguments );\n\n        this.state = {\n            exampleSelect: '',\n            exampleText: '',\n            exampleText2: '',\n            exampleText3: '',\n            exampleToggle: false,\n            isAPILoaded: false,\n        };\n    }\n\n    componentDidMount() {\n\n        api.loadPromise.then(() =&gt; {\n            this.settings = new api.models.Settings();\n\n            const { isAPILoaded } = this.state;\n\n            if (isAPILoaded === false) {\n                this.settings.fetch().then( (response) =&gt; {\n                    this.setState( {\n                        exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],\n                        exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],\n                        exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n                        exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n                        exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n                        isAPILoaded: true,\n                    } );\n                } );\n            }\n        } );\n    }\n\n    render() {\n        const {\n            exampleSelect,\n            exampleText,\n            exampleText2,\n            exampleToggle,\n            isAPILoaded,\n        } = this.state;\n\n        if (! isAPILoaded) {\n            return (&lt;Placeholder&gt;\n                    &lt;Spinner \/&gt;\n                &lt;\/Placeholder&gt;\n            );\n        }\n\n        return (&lt;Fragment&gt;\n                &lt;div className=\"wholesome-plugin__main\"&gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body One', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;SelectControl\n                                help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                                label={ __( 'Example Select', 'wholesome-plugin') }\n                                onChange={ (exampleSelect) =&gt; {\n                                    this.setState( { exampleSelect } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);\n                                }}\n                                options={ [\n                                    {\n                                        label: __( 'Please Select...', 'wholesome-plugin' ),\n                                        value: '',\n                                    },\n                                    {\n                                        label: __( 'Option 1', 'wholesome-plugin' ),\n                                        value: 'option-1',\n                                    },\n                                    {\n                                        label: __( 'Option 2', 'wholesome-plugin' ),\n                                        value: 'option-2',\n                                    },\n                                ] }\n                                value={ exampleSelect }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Two', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;TextControl\n                                help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                                label={ __( 'Example Text', 'wholesome-plugin') }\n                                onChange={ (exampleText) =&gt; {\n                                    this.setState( { exampleText } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_text')(exampleText);\n                                }}\n                                value={ exampleText }\n                            \/&gt;\n\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Three', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;TextControl\n                                help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                                label={ __( 'Example Text 2', 'wholesome-plugin') }\n                                onChange={ (exampleText2) =&gt; {\n                                    this.setState( { exampleText2 } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_text_2')(exampleText2);\n                                }}\n                                value={ exampleText2 }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Four', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'An example toggle.', 'wholesome-plugin') }\n                                label={ __( 'Example Toggle', 'wholesome-plugin') }\n                                onChange={ (exampleToggle) =&gt; {\n                                    this.setState( { exampleToggle } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_toggle')(exampleToggle);\n                                }}\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/div&gt;\n            &lt;\/Fragment&gt;) }\n}\n<\/code><\/pre>\n<p>Un changement notable est celui \u00e0 l&rsquo;int\u00e9rieur <code>componentDidMount<\/code>de, o\u00f9 les param\u00e8tres sont charg\u00e9s \u00e0 partir de l&rsquo;API. Notez que les deux param\u00e8tres accessibles via <code>get_theme_mod<\/code>sont accessibles \u00e0 l&rsquo;aide de la variable <code>WholesomePluginSettings<\/code>que nous avons cr\u00e9\u00e9e dans la <code>wp_localize_script<\/code>fonction plus haut dans ce guide.<\/p>\n<pre><code>this.setState( {\n  exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],\n  exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],\n  exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n  exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n  exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n  isAPILoaded: true,\n} );\n<\/code><\/pre>\n<h3>G\u00e9rer la sauvegarde<\/h3>\n<p>Nous n&rsquo;avons pas vraiment besoin de faire quoi que ce soit de sp\u00e9cial pour g\u00e9rer les changements. La seule chose que nous devons faire est de nous connecter <code>customize<\/code>et de laisser le WordPress Customizer g\u00e9rer la sauvegarde, par exemple :<\/p>\n<pre><code>onChange={ (exampleSelect) =&gt; {\n  this.setState( { exampleSelect } );\n  customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);\n}}\n<\/code><\/pre>\n<p>Dans cet exemple, le <code>onChange<\/code>passe la valeur du champ de saisie (dans ce cas, notre <code>&lt;select&gt;<\/code>) et met \u00e0 jour l&rsquo;\u00e9tat, puis passe cette valeur dans le Customizer via la <code>wp.customize.value()<\/code>fonction.<\/p>\n<h3>Construire la section et le panneau de personnalisation avec JavaScript<\/h3>\n<p>En bas du <code>\/src\/customizer.js<\/code>fichier ajoutez le code suivant :<\/p>\n<pre><code>customize.bind('ready', function() {\n    const panelKey = 'wholesomecode-wholesome-plugin-customizer-panel';\n    const sectionKey = 'wholesomecode-wholesome-plugin-customizer-section';\n\n    customize.panel.add(\n        new customize.Panel( panelKey, {\n              description: __( 'Wholesome Plugin Example Panel', 'wholesome-plugin' ),\n            priority: 1000,\n            title: __( 'Wholesome Plugin Panel', 'wholesome-plugin' ),\n        })\n    );\n    customize.section.add(\n        new customize.Section( sectionKey, {\n            customizeAction: __( 'Wholesome Plugin \u25b8 Section', 'wholesome-plugin' ),\n            panel: panelKey,\n             title: __( 'Wholesome Plugin Section', 'wholesome-plugin' ),\n        })\n    );\n\n    customize.control.add(\n        new customize.Control( 'wholesomecode-wholesome-plugin-customizer-gutenberg-control', {\n            section: sectionKey,\n            type: 'wholesome-plugin-gutenberg-control',\n        })\n    );\n\n    const htmlOutput = document.getElementById( 'wholesome-plugin-customizer' );\n    if (htmlOutput) {\n        render(\n            &lt;App \/&gt;,\n            htmlOutput\n        );\n    }\n});\n<\/code><\/pre>\n<p>Ce code cr\u00e9e une section et un panneau de personnalisation en JavaScript.<\/p>\n<p>Le code ajoute \u00e9galement notre contr\u00f4le Gutenberg personnalis\u00e9 en enregistrant une <code>new customize.Control<\/code>classe et en transmettant le <code>type<\/code>avec le m\u00eame nom que celui que <code>type<\/code>nous avons d\u00e9fini lorsque nous avons enregistr\u00e9 le contr\u00f4le en PHP.<\/p>\n<p>Nous utilisons \u00e9galement ce code pour trouver le <code>&lt;div&gt;<\/code>we enregistr\u00e9 dans notre contr\u00f4le Gutenberg personnalis\u00e9 et restituer les composants Gutenberg dans this <code>&lt;div&gt;<\/code>.<\/p>\n<h2>Ajouter le SCSS<\/h2>\n<p>Nous devons ranger un peu le panneau en ajoutant le SCSS suivant dans<code>\/src\/customizer.scss<\/code>\u00a0:<\/p>\n<pre><code>#wholesome-plugin-customizer {\n\n    .components-placeholder {\n        background: #f1f1f1;\n    }\n\n    .wholesome-plugin__main {\n        margin-left: auto;\n        margin-right: auto;\n\n        .components-panel {\n            background: none;\n            border: none;\n        }\n\n        .components-panel__body {\n            background: #ffffff;\n            border: 1px solid #e2e4e7;\n            margin-bottom: 1rem;\n        }\n    }\n\n    .components-base-control__help {\n        margin-top: .5rem;\n    }\n\n    .components-panel__row {\n        &gt; div {\n            flex-grow: 1;\n            margin-right: 1rem;\n\n            &amp;:last-of-type {\n                margin-right: 0;\n            }\n        }\n    }\n\n    .wholesome-plugin__notices {\n        .components-snackbar {\n            bottom: .5rem;\n            position: fixed;\n        }\n    }\n}\n<\/code><\/pre>\n<h2>Affichage du personnalisateur<\/h2>\n<p>Acc\u00e9dez \u00e0 WordPress Customizer et affichez le panneau Gutenberg Customizer en action\u00a0:<\/p>\n<p>Le personnalisateur avec les composants Gutenberg<\/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<\/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 examin\u00e9 la cr\u00e9ation d&rsquo;une page de param\u00e8tres \u00e0 l&rsquo;aide des composants WordPress Block Editor (Gutenberg). Dans ce guide, nous allons aller encore plus loin et utiliser Gutenberg co&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223674,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,936,811],"tags":[1167],"class_list":["post-228777","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-gutenberg-3","category-plugins-2","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228777","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=228777"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228777\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223674"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}