Ajouter des contrôles à la barre latérale des blocs principaux et tiers avec des filtres et des composants d’ordre supérieur
Dans notre dernier guide, nous avons envisagé d’ ajouter InspectorControlsà nos blocs personnalisés pour nous permettre d’utiliser des contrôles dans la barre latérale des blocs. Dans ce guide, nous allons nous appuyer sur cela et ajouter un contrôle à bascule à la barre latérale des blocs de tous nos blocs, y compris tous les blocs principaux et tiers que nous utilisons.
Dans ce guide, nous allons créer la fonctionnalité de "bloc de brouillon" qui figurait dans mon plugin Wholesome Publishing.
Conditions préalables
- Avoir suivi le guide Création d’un plugin pour l’éditeur de blocs WordPress (Gutenberg)
- Avoir suivi le guide Ajouter une barre latérale à votre bloc WordPress personnalisé avec InspectorControls
Se préparer pour ce guide
Si vous avez suivi le guide Ajouter une barre latérale, c’est parfait. Mais je vais maintenant devoir vous demander d’annuler les modifications que vous avez apportées à l’étape 4 de ce guide (le Draft Block Toggle), car nous allons extrapoler cette fonctionnalité et l’appliquer à tous nos blocs.
Si vous n’avez pas suivi ce guide, veuillez d’abord vous assurer de le suivre jusqu’à l’étape 4, car ce guide fait directement suite à celui-là.
Créer des composants d’ordre supérieur
Les composants d’ordre supérieur (HoC) sont utilisés dans React pour envelopper un composant existant et transmettre des fonctionnalités ou des accessoires à ce composant. Ils sont appelés HoCs car ils sont insérés dans le DOM avant le composant existant, ou vous pourriez dire dans un "ordre supérieur".
Nous allons créer deux nouveaux HoCs, donc créez un nouveau dossier dans votre plugin appelé componentset créez les deux fichiers suivants :
/components/withInspectorControls.js/components/withIsBlockDraft.js
withInspectorControls
Ouvrez /components/withInspectorControls.jset ajoutez le code suivant :
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default createHigherOrderComponent( (BlockEdit) => {
return (props) => {
const {
attributes: {
isBlockDraft,
},
setAttributes,
} = props;
return (<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title={ __( 'Block Display Settings', 'wholesome-plugin') }
icon="visibility"
initialOpen={ false }
>
<ToggleControl
label={ __( 'Set Block as Draft', 'wholesome-plugin') }
checked={ isBlockDraft }
onChange={ (isBlockDraft) => setAttributes( { isBlockDraft }) }
help={ __( 'If the block is set to draft it will not show on the front end.',
'wholesome-plugin') }
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withInspectorControls' );
Vous reconnaîtrez peut-être ce code à partir de l’étape 4 du Sidebar Guide. C’est à peu près le même code, à part que nous l’avons enveloppé dans createHigherOrderComponent.
createHigherOrderComponentCela nous permet d’accéder à la BlockEditfonction d’édition d’origine du bloc que ce composant enveloppera. Nous découvrirons comment cela est transmis lorsque nous créerons les filtres sous peu.
withIsBlockDraft
Ouvrez /components/withIsBlockDraft.jset collez le code suivant :
import { createHigherOrderComponent } from '@wordpress/compose';
export default createHigherOrderComponent( (BlockListBlock) => {
return (props) => {
const { attributes } = props;
const { isBlockDraft } = attributes;
return <BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } />;
};
}, 'withIsBlockDraft' );
Cela createHigherOrderComponentnous permet d’accéder à BlockListBlockce qui nous permet de transmettre des attributs à l’encapsuleur de bloc de l’éditeur. Nous l’utilisons ici pour définir une classe ‘draft-block’ sur le wrapper si la bascule Draft Block a été définie. Cela recrée ce que nous avions précédemment ajouté à la méthode d’édition à l’étape 4 du Guide de la barre latérale.
Encore une fois, nous devons configurer un filtre pour que les éléments BlockListBlocksoient transmis à ce contrôle.
Configurer les filtres
En haut du /src/index.jsfichier, ajoutez ce qui suit :
import { addFilter } from '@wordpress/hooks';
import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';
Nous devrions vraiment penser à modifier la structure de notre plugin afin que le code qui enregistre le bloc soit importé d’un autre fichier, mais pour plus de simplicité, nous utiliserons le même fichier.
Filtrer les attributs
Dans le même fichier ajoutez le code suivant :
addFilter(
'blocks.registerBlockType',
'wholesome-plugin/block-draft-attributes', (settings) => {
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
isBlockDraft: {
default: false,
type: 'boolean',
},
},
};
}
);
Ce filtre ajoute des attributs supplémentaires à tous les blocs de la construction. En théorie, nous pourrions filtrer cela pour n’être que pour certains blocs, mais nous n’allons pas le faire pour notre exemple.
Si nous voulions limiter ce filtre à certains blocs, nous pourrions le faire comme suit :
const { attributes, name } = settings;
if ('core/paragraph' !== name) {
return;
}
Filtrer les InspectorControls
Ajoutez le code suivant au /src/index.jsfichier :
addFilter(
'editor.BlockEdit',
'wholesome-plugin/block-draft-inspector',
withInspectorControls,
);
Ici, nous BlockEditfiltrons afin qu’il transmette cela à notre HoC que nous avons créé précédemment.
Si nous voulions limiter ce filtre à certains blocs, nous ferions ce qui suit au sein de la HoC :
if ('core/paragraph' === props.name) {
return <BlockEdit { ...props } />
}
Filtrer le BlockListBlock
Ajoutons enfin le filtre pour notre BlockListBlock:
addFilter(
'editor.BlockListBlock',
'wholesome-plugin/block-draft-class',
withIsBlockDraft
);
Encore une fois, si vous souhaitez restreindre ce bloc, vous pouvez le faire à l’intérieur du HoC.
Ajouter le PHP et le SCSS
Ajoutez ce qui suit pour /editor.scssque notre bannière de brouillon soit jolie (cela peut être fait beaucoup mieux, mais ce n’est qu’un exemple).
.editor-styles-wrapper {
.draft-block {
border-bottom: 1px dotted #cfcfcf;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
margin-top: 3em;
&::before {
background: #cfcfcf;
background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);
background-size: 8.49px 8.49px;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
border-top: 1px solid #cfcfcf;
color: black;
content: 'Draft Block';
display: block;
font-family: monospace;
font-size: 1rem;
left: 0;
padding-left: 5px;
position: absolute;
top: -27px;
width: 100%;
}
opacity: .4;
&.is-selected {
opacity: .8;
}
}
}
Ajoutez ce qui suit au fichier racine du plugin (dans notre cas wholesome-plugin.php).
function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {
if (is_admin()) {
return $pre_render;
}
if (isset( $block['attrs']) &&
isset( $block['attrs']['isBlockDraft']) &&
$block['attrs']['isBlockDraft']) {
return false;
}
return $pre_render;
}
add_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );
Cela arrêtera la sortie des blocs de brouillon sur le frontend.
Le voir en action
N’oubliez pas de compiler avec npm startet nous pouvons maintenant définir n’importe quel type de bloc sur un brouillon :
Définition et désactivation des blocs de brouillon
- Découvrez comment créer des blocs enfants imbriqués avec le
InnerBlockscomposant - Jetez un œil à l’utilisation des champs post-méta dans les blocs Gutenberg
- Essayez d’ ajouter des contrôles à la barre latérale de publication