{"id":234261,"date":"2023-02-23T17:27:00","date_gmt":"2023-02-23T14:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234261"},"modified":"2023-02-23T17:28:36","modified_gmt":"2023-02-23T14:28:36","slug":"tutoriel-creer-un-curseur-en-tant-que-bloc-gutenberg-dynamique","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/tutoriel-creer-un-curseur-en-tant-que-bloc-gutenberg-dynamique\/","title":{"rendered":"Tutoriel\u00a0: cr\u00e9er un curseur en tant que bloc Gutenberg dynamique"},"content":{"rendered":"\n

Ce tutoriel expliquera comment cr\u00e9er un bloc dynamique WordPress Gutenberg. Le r\u00e9sultat final est un curseur montrant l’image s\u00e9lectionn\u00e9e \u00e0 partir des publications de la cat\u00e9gorie s\u00e9lectionn\u00e9e. Le code inclut l’utilisation d’un composant d’ordre sup\u00e9rieur (withSelect<\/code>) pour r\u00e9cup\u00e9rer toutes les cat\u00e9gories dans l’\u00e9diteur de blocs.<\/p>\n

Ce que nous ferons<\/h2>\n

Le bloc affichera un simple curseur \u00e0 l’aide du script jQuery Cycle2<\/a>. Mais vous pouvez utiliser n’importe quel autre script de curseur. Le bloc affichera dans l’\u00e9diteur une liste de toutes les cat\u00e9gories permettant \u00e0 l’utilisateur de s\u00e9lectionner une cat\u00e9gorie. Lors de l’affichage du bloc dans le frontend, il r\u00e9cup\u00e8rera dynamiquement les publications de la cat\u00e9gorie choisie et affichera leurs images en vedette sous forme de diapositives. Ce didacticiel restera assez simple, vous permettant d’\u00e9tendre et d’ajuster votre curseur comme vous le souhaitez.<\/p>\n

J’ai choisi de ne pas afficher le diaporama dans l’\u00e9diteur. Habituellement, vous vous assurez que le rendu dans l’\u00e9diteur et le frontend sont les m\u00eames. Mais dans le cas d’un curseur, j’aime rester simple pour ne pas exploser l’utilisateur avec des animations constantes dans l’\u00e9diteur.<\/p>\n

Le bloc n’aura que deux param\u00e8tres\u00a0; le choix de la cat\u00e9gorie et le nombre de slides (posts). Je recommande d’ajouter plus de param\u00e8tres tels que la vitesse de glissement, les param\u00e8tres d’affichage des pilules, des fl\u00e8ches, du texte et d’autres param\u00e8tres de curseur typiques. Il devrait \u00eatre assez simple d’ajouter ces param\u00e8tres vous-m\u00eame.<\/p>\n

Tout le code est \u00e9crit en Javascript ES6 \/ ES2015+. Gardez \u00e0 l’esprit que ce code a besoin de Babel pour transformer et construire les fichiers Javascript finaux. Consultez le guide ci-dessous si vous ne savez pas comment faire.<\/p>\n

Configurer les fichiers<\/h2>\n

Dans cet exemple, nous cr\u00e9ons le bloc \u00e0 l’int\u00e9rieur d’un th\u00e8me. Dans le dossier du th\u00e8me, j’ai un sous-dossier ‘ gutenberg\/<\/code>‘ o\u00f9 j’ai plac\u00e9 mon package.json<\/code>et webpack-config.js<\/code>. Dans le sous-dossier ‘ src\/<\/code>‘ de ce dossier se trouve l’endroit o\u00f9 je place tous mes fichiers de construction. Ma configuration webpack est configur\u00e9e pour placer les fichiers de construction dans mon sous-dossier de th\u00e8me ‘ assets\/js\/<\/code>‘.<\/p>\n

Cr\u00e9ez un nouveau fichier source vide dans theme-folder\/gutenberg\/src\/block-slider.js<\/code>et configurez Webpack pour cr\u00e9er le fichier de construction dans theme-folder\/assets\/js\/block-slider.js<\/code>. Vous pouvez modifier les emplacements et\/ou les noms de fichiers comme vous le souhaitez, n’oubliez pas d’ajuster le code ci-dessous.<\/p>\n

Nous devons \u00e9galement t\u00e9l\u00e9charger le script de curseur n\u00e9cessaire. Vous pouvez t\u00e9l\u00e9charger Cycle2 sur ce lien<\/a>, ou vous pouvez utiliser n’importe quel autre script de diapositive et ajuster le code ci-dessous. Je place le jquery.cycle2.min.js<\/code>fichier dans mon dossier de dossier de th\u00e8me \/assets\/js\/<\/code>.<\/p>\n

Je vais \u00e9galement pr\u00e9parer un petit fichier CSS qui sera charg\u00e9 uniquement dans l’\u00e9diteur. Nous avons juste un petit morceau de style pour rendre la s\u00e9lection de cat\u00e9gorie optimale. Je cr\u00e9e un fichier vide editor-block-slider.css<\/code>et le place dans theme-folder\/assets\/css\/<\/code>.<\/p>\n

Enfin, nous allons dans un fichier PHP qui est charg\u00e9 dans le th\u00e8me. Par souci de simplicit\u00e9, je fais la partie PHP dans le th\u00e8me functions.php<\/code>.<\/p>\n

Enregistrez le bloc Gutenberg en PHP<\/h2>\n

Tous les blocs Gutenberg doivent \u00eatre enregistr\u00e9s avec [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Je pr\u00e9f\u00e8re l’appeler \u00e0 l’int\u00e9rieur d’une fonction accroch\u00e9e \u00e0 init<\/code>. Le premier param\u00e8tre est le nom de votre bloc, y compris l’espace de noms. J’ai d\u00e9cid\u00e9 d’appeler mon script de curseur awp\/slider<\/code>(ajustez comme vous le souhaitez). Le deuxi\u00e8me argument est un tableau d’arguments.<\/p>\n

Dans la m\u00eame fonction, je vais enregistrer le script de construction avec [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>et enregistrer mon fichier CSS d’\u00e9diteur avec [wp_register_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_style\/)()<\/code>. Ces deux poign\u00e9es seront ajout\u00e9es en tant qu’arguments \u00e0 ‘ editor_script<\/code>‘ et ‘ editor_style<\/code>‘, respectivement. En ce qui concerne les d\u00e9pendances, j’ai ajout\u00e9 certains des packages les plus \u00e9l\u00e9mentaires pour le script afin de garantir que notre script de bloc est charg\u00e9 dans le bon ordre. En ce qui concerne le style de l’\u00e9diteur, l’utilisation de ‘ wp-edit-blocks<\/code>‘ est une bonne d\u00e9pendance pour \u00e9viter que vos styles ne soient remplac\u00e9s.<\/p>\n

Et enfin parce qu’il s’agit d’un bloc dynamique, nous devons \u00e9galement ajouter l’ render_callback<\/code>argument ‘ ‘, pointant vers une fonction responsable du rendu du bloc en frontend.<\/p>\n

add_action('init', function() {\n    wp_register_script(\n        'awp-block-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/block-slider.js', \n        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data']\n    );\n    wp_register_style(\n        'awp-block-slider-style', \n        get_template_directory_uri(). '\/assets\/css\/editor-block-slider.css', \n        ['wp-edit-blocks']\n    );\n\u00a0\n    register_block_type('awp\/slider', [\n        'editor_script' => 'awp-block-slider-js',\n        'editor_style' => 'awp-block-slider-style',\n        'render_callback' => 'awp_gutenberg_slider_render',\n    ]);\n});<\/code><\/pre>\n
Enfin, nous d\u00e9finissons la fonction de rendu. Nous obtenons deux param\u00e8tres pour le rappel de la fonction\u00a0; un tableau d’attributs du bloc et le contenu interne (non utilis\u00e9 dans ce bloc). Je vais simplement retourner une cha\u00eene factice. Nous reviendrons et \u00e9tofferons la fonction de rendu plus tard. N’oubliez pas de renvoyer une cha\u00eene, pas d’\u00e9cho.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    return 'Slider render comes here.';\n}<\/code><\/pre>\n
Nous reviendrons sur la fonction de rendu PHP \u00e0 la toute fin de ce tutoriel. Il est maintenant temps de passer \u00e0 Javascript !<\/p>\n
Enregistrer un bloc Gutenberg personnalis\u00e9 en Javascript<\/h2>\n
Ouvrons notre block-slider.js<\/code>fichier source. \u00c0 ce stade, je vais d\u00e9marrer le script (npm run start<\/code>) pour transformer tout ce que nous faisons dans ce fichier dans le fichier de construction au fur et \u00e0 mesure. Nous devons enregistrer le bloc en utilisant [registerBlockType](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-registration\/)()<\/code>. Consultez le lien pour voir tous les arguments possibles.<\/p>\n
Comme nous l’avons d\u00e9cid\u00e9 en register_block_type()<\/code>PHP, notre bloc est nomm\u00e9 awp\/slider<\/code>. Nous souhaitons \u00e9galement ajouter deux attributs au bloc, comme mentionn\u00e9 pr\u00e9c\u00e9demment\u00a0: un pour l’ID de terme s\u00e9lectionn\u00e9 et un pour le nombre de diapositives.<\/p>\n
J’aime \u00e9galement ajouter la fonctionnalit\u00e9 d’alignement des blocs. Il sera ajout\u00e9 automatiquement en ajoutant ‘ align<\/code>‘ \u00e0 l’ supports<\/code>objet. Si vous voulez tous les alignements de blocs, vous pouvez simplement d\u00e9finir align<\/code>sur vrai. Cependant, un curseur align\u00e9 \u00e0 gauche ou \u00e0 droite n’a pas beaucoup de sens, je vais donc d\u00e9finir les types sp\u00e9cifiques d’alignement de blocs pris en charge par ce bloc\u00a0: "Aligner le centre" (‘ center<\/code>‘), "Large largeur" \u200b\u200b(‘ wide<\/code>‘) et " Pleine largeur" \u200b\u200b(‘ full<\/code>‘). De plus, afin de d\u00e9finir un alignement par d\u00e9faut et de le rendre accessible depuis PHP, j’ajoute ‘ align<\/code>‘ comme attribut \u00e0 notre bloc.<\/p>\n
J’ai d\u00e9fini l’argument du bloc edit<\/code>sur un composant s\u00e9par\u00e9 que nous cr\u00e9erons ensuite. Et enfin la save<\/code>fonction renvoie simplement null<\/code>, car il s’agit d’un bloc dynamique.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/slider', {\n    title: __('AWP Slider', 'awp'),\n    icon: 'slides',\n    category: 'common',\n    supports: {\n        align: ['center', 'wide', 'full']\n    },\n    attributes: {\n        align: {\n            type: 'string',\n            default: 'center'\n        },\n        termId: {\n            type: 'number',\n            default: 0\n        },\n        numSlides: {\n            type: 'number',\n            default: 3\n        },\n    },\n    edit: BlockEdit,\n    save:() => { return null; }\n});<\/code><\/pre>\n
Nous devons d\u00e9finir le composant de la edit<\/code>propri\u00e9t\u00e9. Avant le code d’enregistrement, je d\u00e9finis un composant de fonction BlockEdit<\/code>qui rend simplement a div<\/code>et a Placeholder<\/code>avec du texte factice.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { Placeholder } = wp.components;\nconst BlockEdit = (props) => {\n    return(\n        <div className={props.className}>\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                Select category comes here.\n            <\/Placeholder>\n        <\/div>\n    );\n}\n\u00a0\nregisterBlockType('awp\/slider', {\n    ...<\/code><\/pre>\n
[Placeholder](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/placeholder)<\/code>est un bon composant pour rendre une zone pour les param\u00e8tres – et pas n\u00e9cessairement pour le rendu r\u00e9el d’un bloc. \u00c0 l’int\u00e9rieur du Placeholder<\/code>composant, nous affichons une liste de termes parmi lesquels choisir.<\/p>\n
\u00c0 ce stade, notre bloc devrait \u00eatre disponible dans WordPress Gutenberg! Cr\u00e9ons un nouveau message, ajoutons un nouveau bloc et trouvons notre bloc dans la cat\u00e9gorie Commun. Voici \u00e0 quoi ressemble actuellement notre bloc\u00a0:<\/p>\n
\"Tutoriel\u00a0:<\/a>\"Tutoriel\u00a0:<\/a><\/p>\n
Ajout de param\u00e8tres d’inspecteur<\/h2>\n
Ajoutons quelques param\u00e8tres \u00e0 l’inspecteur (barre lat\u00e9rale droite de l’\u00e9diteur). Comme mentionn\u00e9, notre bloc n’a qu’un seul param\u00e8tre\u00a0; nombre de diapositives. C’est l\u00e0 que je vous recommande d’ajouter plus de param\u00e8tres pour votre bloc curseur. N’oubliez pas d’enregistrer des attributs pour chaque param\u00e8tre que vous ajoutez.<\/p>\n
Afin d’ajouter quelque chose \u00e0 l’inspecteur, nous utilisons le composant [InspectorControls](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/block-editor\/src\/components\/inspector-controls)<\/code>( wp.blockEditor<\/code>). \u00c0 l’ int\u00e9rieur, nous rendons un [PanelBody](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/panel#panelbody)<\/code>( wp.components<\/code>) afin d’ajouter une nouvelle section pliable. Ensuite, nous rendons simplement un [RangeControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/range-control)<\/code>( wp.components<\/code>) pour cr\u00e9er un param\u00e8tre d’entr\u00e9e pour choisir le nombre de diapositives. Nous fixons le minimum \u00e0 1 et le maximum \u00e0 10. Nous connectons l’ \u00e9v\u00e9nement value<\/code>et onChange<\/code>\u00e0 l’attribut numSlides<\/code>.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { InspectorControls } = wp.blockEditor;\nconst { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    return(\n        <div className={props.className}>\n            <InspectorControls>\n                <PanelBody\n                    title={__('Slider Settings', 'awp')}\n                    initialOpen={true}\n                >\n                    <RangeControl\n                        label={__('Number of slides', 'awp')}\n                        value={attributes.numSlides}\n                        onChange={(val) => setAttributes({ numSlides: val })}\n                        min={1}\n                        max={10}\n                    \/>\n                <\/PanelBody>\n            <\/InspectorControls>\n            <Placeholder\n                ...<\/code><\/pre>\n
Avec le code ci-dessus, nous devrions maintenant obtenir une belle section avec un curseur de plage pour d\u00e9finir le nombre de diapositives.<\/p>\n
\"Tutoriel\u00a0:<\/a><\/p>\n
Encore une fois, je vous recommande de jouer en ajoutant plus de param\u00e8tres \u00e0 votre curseur. L’\u00e9tape suivante consiste \u00e0 cr\u00e9er l’\u00e9l\u00e9ment pour afficher une liste de cat\u00e9gories parmi lesquelles choisir.<\/p>\n
Cr\u00e9ation d’un composant de s\u00e9lection de cat\u00e9gorie<\/h2>\n
Pour garder notre code bien rang\u00e9 et r\u00e9utilisable, cr\u00e9ons le composant s\u00e9lecteur de cat\u00e9gorie dans un fichier s\u00e9par\u00e9. Dans le dossier de construction, je cr\u00e9e un nouveau fichier awp-category-picker.js<\/code>.<\/p>\n
Dans ce fichier, nous d\u00e9finissons un composant qui parcourra toutes les cat\u00e9gories actuellement dans WordPress et les restituera d’une mani\u00e8re ou d’une autre. Afin d’obtenir des cat\u00e9gories, nous devons les encapsuler dans un soi-disant composant d’ordre sup\u00e9rieur, qui fournira \u00e0 notre composant ce dont nous avons besoin via des accessoires. Pour ce faire, nous utiliserons [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>. \u00c0 l’ int\u00e9rieur withSelect<\/code>, nous pouvons faire une demande pour r\u00e9cup\u00e9rer toutes les cat\u00e9gories dans WordPress en utilisant le s\u00e9lecteur de magasin [select](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#select)()<\/code>. On peut utiliser:<\/p>\n
select('core').getEntityRecords('taxonomy', '<category_slug>', <args>)<\/code><\/pre>\n
pour r\u00e9cup\u00e9rer tous les termes dans le slug de taxonomie fourni. Si vous n’\u00eates pas familier avec les composants et les s\u00e9lecteurs d’ordre sup\u00e9rieur dans WordPress Gutenberg, j’ai un article qui explique ce concept plus en d\u00e9tail: Cr\u00e9er un bloc Gutenberg personnalis\u00e9 – Partie 10: R\u00e9cup\u00e9ration des articles et des composants d’ordre sup\u00e9rieur<\/a>.<\/p>\n
Comme nous devons exporter un composant \u00e0 partir de ce fichier, nous pla\u00e7ons la combinaison de withSelect<\/code>et de notre composant d\u00e9fini dans l’ export default<\/code>instruction. Notre CategorySelect<\/code>composant renvoie simplement un div avec du texte factice afin que nous puissions voir que cela fonctionne. Le withSelect<\/code>devrait fournir le prop ‘ terms<\/code>‘ \u00e0 CategorySelect<\/code>. J’ai ajout\u00e9 un console.log()<\/code>sur cet accessoire pour que nous puissions voir que cela fonctionne.<\/p>\n
const { withSelect } = wp.data;\n\u00a0\nconst CategorySelect = (props) => {\n    console.log(props.terms);\n\u00a0\n    return(\n        <div>This is category select<\/div>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    return {\n        terms: select('core').getEntityRecords('taxonomy', 'category', {per_page: -1})\n    }\n})(CategorySelect);<\/code><\/pre>\n
La derni\u00e8re chose que nous devons faire est d’importer et d’utiliser ce composant de s\u00e9lecteur de cat\u00e9gorie dans notre bloc personnalis\u00e9.<\/p>\n
De retour, block-slider.js<\/code>nous devons d’abord importer le composant en haut du fichier. Et \u00e0 l’int\u00e9rieur de notre Placeholder<\/code>composant, nous rendons simplement le composant.<\/p>\n
const { Placeholder, PanelBody, RangeControl } = wp.components;\n\u00a0\nimport CategorySelect from '.\/awp-category-picker';\n\u00a0\nconst BlockEdit = (props) => {\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Avec le code ci-dessus, votre bloc devrait maintenant rendre la div du CategorySelect<\/code>composant. Si vous ouvrez la console dans votre navigateur, vous devriez \u00e9galement voir des journaux. N’oubliez pas qu’il withSelect<\/code>s’agit d’une requ\u00eate asynchrone, ce qui signifie qu’elle peut s’afficher plusieurs fois. La ou les premi\u00e8res fois, les termes de prop sont null<\/code>. Mais le ou les derniers journaux devraient se retrouver avec un tableau de termes de cat\u00e9gorie.<\/p>\n
Super! Continuons \u00e0 travailler avec notre CategorySelect<\/code>composant et faisons en sorte qu’il affiche la liste des termes permettant \u00e0 l’utilisateur d’en s\u00e9lectionner un !<\/p>\n
Affichage d’une liste de termes parmi lesquels choisir<\/h3>\n
Il existe de nombreuses fa\u00e7ons de rendre une liste de choix o\u00f9 l’utilisateur peut s\u00e9lectionner un \u00e9l\u00e9ment. Si vous voulez quelque chose de vraiment simple, vous pouvez afficher une liste d\u00e9roulante de s\u00e9lection standard ([SelectControl](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/select-control)<\/code>). Cela d\u00e9pend enti\u00e8rement de vous. J’ai opt\u00e9 pour une approche plus propre et plus agr\u00e9able en utilisant [MenuGroup](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-group)<\/code>( wp.components<\/code>) et [MenuItem](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/components\/src\/menu-item)<\/code>( wp.components<\/code>).<\/p>\n
\u00c0 l’ int\u00e9rieur d’un MenuGroup<\/code>composant, nous devons parcourir le props.terms<\/code>tableau et, pour chaque \u00e9l\u00e9ment, nous souhaitons afficher un MenuItem<\/code>composant affichant le nom du terme. Et bien s\u00fbr, nous ne voulons rendre ceci que s’il props.terms<\/code>contient r\u00e9ellement quelque chose (requ\u00eate asynchrone, vous vous souvenez ?).<\/p>\n
const { withSelect } = wp.data;\nconst { MenuGroup, MenuItem } = wp.components;\n\u00a0\nconst CategorySelect = (props) => {\n    const { terms } = props;\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        <\/MenuGroup>\n    );\n}\n\u00a0\nexport default withSelect((select, props) => {\n    ...<\/code><\/pre>\n
J’ai donn\u00e9 au MenuGroup<\/code>composant une classe personnalis\u00e9e, car nous devrons le cibler avec CSS. Et j’ai r\u00e9gl\u00e9 l’accessoire role<\/code>sur MenuItem<\/code>‘ menuitemradio<\/code>‘ pour m’assurer qu’un seul peut \u00eatre choisi \u00e0 la fois. Par d\u00e9faut, ils fonctionnent comme des cases \u00e0 cocher, permettant ainsi de choisir plusieurs \u00e9l\u00e9ments.<\/p>\n
Avec le code ci-dessus, notre bloc devrait maintenant (apr\u00e8s une petite seconde) afficher une belle liste de toutes les cat\u00e9gories de votre instance WordPress.<\/p>\n
Vous remarquerez peut-\u00eatre que notre bloc se d\u00e9veloppera pour contenir toutes les cat\u00e9gories. Si on est dans une instance WordPress avec beaucoup de cat\u00e9gories, cela devient vite un probl\u00e8me. Nous voulons nous assurer que le s\u00e9lecteur est un conteneur de hauteur maximale qui obtient une barre de d\u00e9filement verticale s’il existe de nombreuses cat\u00e9gories. C’est l\u00e0 qu’intervient notre fichier CSS.<\/p>\n
Dans notre editor-block-slider.css<\/code>dossier ajoutez :<\/p>\n
.awp-categoryselect div {\n    max-height: 200px;\n    overflow: hidden scroll;\n    border: 1px solid #b3bcc0;\n}<\/code><\/pre>\n
Ce CSS cible l’int\u00e9rieur de div<\/code>notre MenuGroup<\/code>et s’assure qu’il ne d\u00e9passe jamais 200px. Si le contenu du MenuGroup<\/code>devient plus grand (plus de cat\u00e9gories), il affichera une barre de d\u00e9filement verticale. C’est le strict minimum de CSS pour notre bloc, mais vous pouvez bien s\u00fbr ajouter plus de CSS si vous le souhaitez.<\/p>\n
La derni\u00e8re chose que nous devons corriger dans notre s\u00e9lecteur de cat\u00e9gorie est la fonctionnalit\u00e9 permettant d’afficher l’\u00e9l\u00e9ment actuellement s\u00e9lectionn\u00e9 et permettant \u00e0 l’utilisateur de s\u00e9lectionner un terme dans la liste. Pour cela, nous devons transmettre des accessoires \u00e0 ce composant \u00e0 partir de notre bloc.<\/p>\n
Dans block-slider.js<\/code>nous devons transmettre le terme actuellement s\u00e9lectionn\u00e9 (valeur de l’attribut termId<\/code>) et une fonction pour mettre \u00e0 jour le terme s\u00e9lectionn\u00e9 (setAttributes<\/code>) en tant qu’accessoires \u00e0 notre composant de s\u00e9lecteur de cat\u00e9gorie.<\/p>\n
...\n\u00a0\nconst BlockEdit = (props) => {\n    const { attributes, setAttributes } = props;\n\u00a0\n    const selectTerm = (termId) => {\n        setAttributes({ termId: termId });\n    }\n\u00a0\n    return(\n        ...\n            <Placeholder\n                label={__('Slider Category', 'awp')}\n            >\n                <CategorySelect \n                    selectedTermId={attributes.termId}\n                    selectTerm={selectTerm}\n                \/>\n            <\/Placeholder>\n        ...<\/code><\/pre>\n
Dans le code ci-dessus \u00e0 la ligne, #6<\/code>nous d\u00e9finissons une fonction qui met simplement \u00e0 jour l’attribut termId<\/code>. Nous passons ce nom de fonction comme accessoire CategorySelect<\/code>\u00e0 la ligne #17<\/code>. Et \u00e0 la ligne, #16<\/code>nous passons la valeur actuelle de termId<\/code>. Avec, nous pouvons mettre \u00e0 jour notre CategorySelect<\/code>composant pour refl\u00e9ter l’\u00e9l\u00e9ment choisi et permettre \u00e0 l’utilisateur de choisir un terme.<\/p>\n
De retour, awp-category-picker.js<\/code>nous ajoutons de nouveaux accessoires sur MenuItem<\/code>. Nous renvoyons true<\/code>ou false<\/code>pour la prop isSelected<\/code>si l’identifiant du terme actuel est le m\u00eame que celui actuellement s\u00e9lectionn\u00e9. On initie la selectTerm<\/code>fonction dans l’ onClick<\/code>\u00e9v\u00e9nement, en passant le terme ID. Et pour rendre visuel l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9, nous ajoutons conditionnellement une ic\u00f4ne avant chaque \u00e9l\u00e9ment.<\/p>\n
...\nconst CategorySelect = (props) => {\n    const { terms, selectedTermId, selectTerm } = props;\n\u00a0\n    return(\n        <MenuGroup\n            className=\"awp-categoryselect\"\n        >\n            {terms && (terms.map((item) => (<MenuItem\n                        role=\"menuitemradio\"\n                        isSelected={item.id == selectedTermId}\n                        icon={item.id == selectedTermId? 'yes': 'no-alt'}\n                        onClick={() => selectTerm(item.id)}\n                    >\n                        {item.name}\n                    <\/MenuItem>\n                ))\n            )}\n        ...<\/code><\/pre>\n
Avec cela, notre s\u00e9lecteur de cat\u00e9gorie devrait ressembler \u00e0 ceci\u00a0:<\/p>\n
\"Tutoriel\u00a0:<\/a><\/p>\n
La liste doit clairement marquer le terme s\u00e9lectionn\u00e9 avec une ic\u00f4ne de contr\u00f4le, et vous pouvez cliquer sur n’importe quel terme pour s\u00e9lectionner ce terme \u00e0 la place.<\/p>\n
C’\u00e9tait tout pour l’\u00e9diteur et la partie Javascript\u00a0! Ce qui reste maintenant est le rendu frontal, que nous ferons en PHP.<\/p>\n
Rendre le bloc dynamique en PHP<\/h2>\n
Avant de plonger dans la fonction de rendu, occupons-nous d’abord de certaines choses.<\/p>\n
Nous devons d’abord mettre en file d’attente le script cycle2 dans l’interface afin que notre code de curseur se transforme r\u00e9ellement en un curseur. Nous le faisons avec une simple fonction accroch\u00e9e \u00e0 wp_enqueue_scripts<\/code>. Ajustez ci-dessous si vous avez opt\u00e9 pour un autre script de curseur.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'cycle2-slider-js', \n        get_template_directory_uri(). '\/assets\/js\/jquery.cycle2.min.js', \n        ['jquery'], \n        '', \n        true\n    );\n});<\/code><\/pre>\n
Deuxi\u00e8mement, nous voulons revenir \u00e0 l’ register_block_type()<\/code>appel de fonction. Lorsque nous manipulons des blocs dynamiques, nous devons absolument ajouter un nouvel argument\u00a0; attributes<\/code>. Dans cet argument, nous d\u00e9finissons tous les attributs que nous avons d\u00e9finis registerBlockType<\/code>en Javascript, y compris leurs valeurs par d\u00e9faut. Si nous ne le faisons pas, tous les attributs ne seront pas disponibles dans notre rappel de rendu. Si un attribut est rest\u00e9 inchang\u00e9 dans l’\u00e9diteur de blocs, l’attribut et sa valeur ne seront pas disponibles dans le tableau des attributs en PHP. Je vous recommande donc de toujours prendre soin d’ajouter le attributes<\/code>tableau \u00e0 la register_block_type()<\/code>fonction PHP lorsque vous travaillez avec des blocs dynamiques. Pour notre bloc, cela ressemblerait \u00e0 ceci :<\/p>\n
register_block_type('awp\/slider', [\n    'editor_script' => 'awp-block-slider-js',\n    'editor_style' => 'awp-block-slider-style',\n    'render_callback' => 'awp_gutenberg_slider_render',\n    'attributes' => [\n        'align' => ['type' => 'string', 'default' => 'center'],\n        'termId' => ['type' => 'number', 'default' => 0],\n        'numSlides' => ['type' => 'number', 'default' => 3]\n    ]\n]);<\/code><\/pre>\n
Revenons maintenant \u00e0 notre fonction de rendu de rappel awp_gutenberg_slider_render()<\/code>. La sortie d\u00e9pend enti\u00e8rement de vous, surtout si vous avez choisi d’utiliser un autre script de curseur. Ce qui suit est un exemple simple.<\/p>\n
L’id\u00e9e principale est de v\u00e9rifier si un terme a \u00e9t\u00e9 choisi ou non ($attributes['termId']<\/code>). S’il est rempli, nous cr\u00e9ons un [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)()<\/code>avec des arguments pour le nombre de publications ($attributes['numSlides']<\/code>) et l’ID de cat\u00e9gorie s\u00e9lectionn\u00e9e. Ensuite, il s’agit de g\u00e9n\u00e9rer le code HTML appropri\u00e9 pour que cycle2 fonctionne, de boucler les publications et d’afficher leurs images en vedette sous forme de diapositives.<\/p>\n
function awp_gutenberg_slider_render($attributes, $content) {\n    if (empty($attributes['termId'])) {\n        return '';\n    }\n\u00a0\n    $postQuery = new WP_Query([\n        'posts_per_page' => $attributes['numSlides'],\n        'cat' => $attributes['termId']\n    ]);\n\u00a0\n    if ($postQuery->have_posts()) {\n        $output = '<div class=\"wp-block-awp-slider align'. $attributes['align']. '\">';\n        $output .= '<div class=\"cycle-slideshow\" data-cycle-timeout=4000>';\n        while ($postQuery->have_posts()) {\n            $postQuery->the_post();\n\u00a0\n            if (has_post_thumbnail()) {\n                $img_url = get_the_post_thumbnail_url(get_the_ID(), 'loop-thumbnail');\n                $output .= '<img src=\"'. $img_url. '\" \/>';\n            }\n        }\n        wp_reset_postdata();\n        $output .= '<\/div>';\n        $output .= '<\/div>';\n\u00a0\n        return $output;\n\u00a0\n    } else {\n        return '';\n    }\n}<\/code><\/pre>\n
Notez comment j’ajoute la classe d’alignement de bloc appropri\u00e9e dans line #12<\/code>. Le r\u00e9sultat devrait \u00eatre un curseur des images pr\u00e9sent\u00e9es. Gardez \u00e0 l’esprit qu’il s’agit d’un exemple de base qui a quelques d\u00e9fauts. Par exemple, nous r\u00e9cup\u00e9rons les trois derniers messages de la cat\u00e9gorie s\u00e9lectionn\u00e9e. Mais en supposant que l’un d’eux n’a pas d’image en vedette, le curseur n’affichera que deux messages.<\/p>\n
La chose importante \u00e0 retenir est de renvoyer une cha\u00eene et de ne pas l’\u00e9cho. Je recommande \u00e9galement d’utiliser une sorte de fonctionnalit\u00e9 de mod\u00e8le dans votre th\u00e8me pour les rendus de blocs dynamiques comme ceux-ci. Il peut rapidement devenir d\u00e9sordonn\u00e9 de r\u00e9parer et de construire du HTML sous forme de cha\u00eene.<\/p>\n
Derniers mots<\/h2>\n
Ce didacticiel vous a montr\u00e9 comment cr\u00e9er un bloc WordPress Gutenberg dynamique personnalis\u00e9 dans lequel vous rendez son contenu frontal en PHP. Et vous avez vu comment utiliser le composant d’ordre sup\u00e9rieur withSelect<\/code>pour rechercher tous les termes de cat\u00e9gorie et une m\u00e9thode pour afficher une liste s\u00e9lectionnable.<\/p>\n
Tout le code ci-dessus est \u00e9crit aussi simple que possible. Je n’ai ajout\u00e9 que le minimum absolu de param\u00e8tres. Le curseur fonctionne, mais vous en voulez g\u00e9n\u00e9ralement plus – par exemple, cr\u00e9er des liens vers les diapositives, afficher les titres des publications, les fl\u00e8ches du curseur ou la possibilit\u00e9 de personnaliser la vitesse ou d’autres param\u00e8tres du curseur. L’id\u00e9e est de vous montrer les bases et de vous permettre d’\u00e9tendre, de d\u00e9velopper et de modifier facilement les besoins de votre projet.<\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Un tutoriel sur la cr\u00e9ation d’un bloc WordPress Gutenberg dynamique avec withSelect et le rendu PHP. Le r\u00e9sultat final est un curseur.<\/p>\n","protected":false},"author":1,"featured_media":151907,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,936,936,1110,811,811,841,841,862,862],"tags":[1167],"class_list":["post-234261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-gutenberg-3","category-n-a","category-plugins-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234261","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=234261"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234261\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/151907"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}