Utiliser une fenêtre contextuelle modale pour ajouter des attributs supplémentaires avec registerBlockFormat
Nous avons examiné Appliquer des formats à votre contenu de publication avec registerFormatType. Mais que se passe-t-il si nous voulons ajouter des couleurs supplémentaires à notre surligneur ?
Dans ce guide, nous allons développer ce sur quoi nous avons travaillé précédemment et ajouter une fenêtre contextuelle modale qui nous permettra de sélectionner une couleur de surbrillance.
Notez que cette fenêtre contextuelle modale peut contenir n’importe quel nombre d’éléments, y compris des icônes personnalisées, des images ou même des champs de formulaire.
Tout le code utilisé dans ce tutoriel se trouve dans le plugin gratuit ‘Highlighter’.
Application d’un type de format à l’aide du plugin Highlighter.
La vidéo ci-dessus montre le plugin Highlighter, notre type de format et le popup en action. Allons-y.
Conditions préalables
- Lisez le guide Création d’un plugin pour l’éditeur de blocs WordPress (Gutenberg) afin de prendre une longueur d’avance dans la création du plugin.
- Suivez les étapes de l’ article Formater le contenu de votre publication avec registerFormatType.
- Téléchargez éventuellement le plugin gratuit ‘Highlighter’ de GitHub et regardez le fichier
/src/formats/highlight-colours.js
Créer le modal
Pour créer le popover modal, nous allons utiliser state, pour déterminer si le bouton a été cliqué ou non. Pour ce faire, importez useStatedepuis '@wordpress/element'.
Dans le composant de bouton, au-dessus de l’instruction de retour, nous allons l’utiliser pour définir un état initial et créer nos fonctions de définition d’état.
// State to show popover.
const [ showPopover, setShowPopover ] = useState( false );
Nous allons ensuite modifier l’événement de clic du bouton pour définir l’état.
onClick={() => {
setShowPopover( true );
} }
Maintenant que l’état est défini, nous pouvons l’utiliser pour déclencher le popover. Importez d’abord le URLPopovercomposant depuis '@wordpress/block-editor'. Ensuite, dans l’instruction return, sous le bouton, ajoutez une condition qui prend la showPopovervariable et rend le fichier URLPopover.
return (<>
<RichTextToolbarButton
icon='edit'
onClick={() => {
setShowPopover( true );
} }
title={ __( 'Highlight', 'wholesome-highlighter') }
/>
{ showPopover && (<URLPopover
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
...
</URLPopover>) }
</>) Notez que nous avons enveloppé les deux composants avec des balises vides <></>. Ceux-ci servent l’objectif de la <Fragment>balise et permettent à deux composants JSX de s’afficher sans générer de balisage sur le frontend.
Ajouter le contenu du popover modal
Comme il s’agit d’un plugin de surligneur, nous allons l’importer et le placer ColorPalettedans '@wordpress/block-editor'le popover modal.
<URLPopover
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
<ColorPalette
onChange={ (color) => {
setShowPopover( false );
if (color) {
onChange(
applyFormat( value, {
type: name,
attributes: { style: `background-color: ${color};` },
}
));
} else {
onChange( toggleFormat( value, { type: name }) );
}
} }
/>
</URLPopover>
Le code ci-dessus utilisera la palette de couleurs par défaut dans le popover. Plus de travail sera nécessaire pour ajouter nos couleurs personnalisées.
Le code en entier
Pour montrer comment nous ajoutons des couleurs personnalisées à la palette, il est probablement préférable de montrer le code complet. Vous pouvez également télécharger ce fichier, ainsi que les dernières mises à jour de Github.
import { ColorPalette, RichTextToolbarButton, URLPopover } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { applyFormat, registerFormatType, toggleFormat, useAnchorRef } from '@wordpress/rich-text';
import '../style.scss';
const name = 'wholesome/highlighter';
const cssClass = 'wholesome-highlight';
const HighlighterButton = (props) => {
const { contentRef, isActive, onChange, value } = props;
const { activeFormats } = value;
const anchorRef = useAnchorRef( { ref: contentRef, value } );
const highlighterIcon = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.2186 3.31061C13.7838 2.89252 13.0834 2.89708 12.6543 3.32078L9.22512 6.70711C9.17494 6.75668 9.13068 6.80978 9.09236 6.86558L7.36613 8.57021L11.393 12.4419L16.362 7.50771L16.6812 7.1925C17.1103 6.76879 17.1056 6.08638 16.6708 5.66828L14.2186 3.31061Z" fill="black"/>
<path d="M6.81914 9.10588L10.8041 12.9457L9.79592 13.9391C9.42424 14.3053 8.84982 14.3575 8.42039 14.0938L7.83675 13.8883L7.01822 14.6819L5.03321 12.7381L5.86163 11.9349L5.67624 11.454C5.39121 11.0373 5.43547 10.4692 5.811 10.0992L6.81914 9.10588Z" fill="black"/>
<path d="M5.11329 13.6189L6.13911 14.5945L5.70907 15L4 14.592L5.11329 13.6189Z" fill="black"/>
</svg>;
const [ showPopover, setShowPopover ] = useState( false );
const [ activeColor, setActiveColor ] = useState( false );
const colors = [
{ name: 'Yellow', color: '#fff300' },
{ name: 'Green', color: '#79fe0c' },
{ name: 'Blue', color: '#4af1f2' },
{ name: 'Purple', color: '#df00ff' },
{ name: 'Red', color: '#ff2226' },
{ name: 'Orange', color: '#ff7b19' },
{ name: 'Pink', color: '#ff70c5' },
];
const getActiveColor = () => {
const formats = activeFormats.filter( format => name === format['type'] );
if (formats.length > 0) {
const format = formats[0];
const { attributes, unregisteredAttributes } = format;
let atts = unregisteredAttributes;
if (attributes && attributes.length) {
atts = attributes;
}
if (! atts) {
if (activeColor) {
return { backgroundColor: activeColor };
}
return;
}
if (atts.hasOwnProperty('class')) {
const parts = atts.class.split( '--' );
const colorName = parts[ parts.length - 1 ];
const selectedColor = colors.filter( item => colorName === item.name.toLowerCase() )[0];
return { backgroundColor: selectedColor.color };
} else if (atts.hasOwnProperty('style')) {
const { style } = atts;
const parts = style.split( ': ' );
const selectedColor = parts[ parts.length - 1 ].replace( ';', '' );
return { backgroundColor: selectedColor };
}
}
};
return (<>
<RichTextToolbarButton
icon={
<>
<Icon icon={ highlighterIcon } />
{ isActive && (<span
className="format-library-text-color-button__indicator"
style={ getActiveColor() }
/>) }
</>
}
key={ isActive? 'text-color': 'text-color-not-active' }
name={ isActive? 'text-color': undefined }
onClick={ () => {
setShowPopover( true );
} }
title={ __( 'Highlight', 'wholesome-highlighter') }
/>
{ showPopover && (<URLPopover
anchorRef={ anchorRef }
className="components-inline-color-popover"
onClose={ () => setShowPopover( false) }
>
<ColorPalette
colors={ colors }
onChange={ (color) => {
setShowPopover( false );
setActiveColor( color );
if (color) {
const selectedColor = colors.filter( item => color === item.color );
const attributes = {};
if (selectedColor.length) {
attributes.class = `${cssClass}--${selectedColor[0].name.toLowerCase()}`;
} else {
attributes.style = `background-color: ${color};`;
}
onChange(
applyFormat( value, {
type: name,
attributes,
}
));
} else {
onChange( toggleFormat( value, { type: name }) );
}
} }
/>
</URLPopover>) }
</>) };
registerFormatType(
name, {
className: cssClass,
edit: HighlighterButton,
tagName: 'mark',
title: __( 'Highlight', 'wholesome-highlighter' ),
}
);
Assurez-vous de définir les couleurs de vos couleurs personnalisées dans le /src/style.scssfichier, et voilà, un format de stylo surligneur avec palette de couleurs.
.wholesome-highlight {
&.wholesome-highlight--yellow {
background-color: #fff300;
}
&.wholesome-highlight--green {
background-color: #79fe0c;
}
&.wholesome-highlight--blue {
background-color: #4af1f2;
}
&.wholesome-highlight--purple {
background-color: #df00ff;
}
&.wholesome-highlight--red {
background-color: #ff2226;
}
&.wholesome-highlight--orange {
background-color: #ff7b19;
}
&.wholesome-highlight--pink {
background-color: #ff70c5;
}
}
Icône de couleur sélectionnée surligneur
- Ajouter une barre latérale de bloc avec InspectorControls
- Regardez comment utiliser les champs post-méta dans les blocs Gutenberg
- Regardez comment utiliser les options et les paramètres dans les blocs Gutenberg
- Envisagez de créer une page d’options et de paramètres à l’aide de composants Gutenberg