Dans l’éditeur de texte, lorsqu’on sélectionne un morceau de texte dans un paragraphe, il est possible de le mettre en gras, en couleur, en exposant, en italique, etc…
Si vous souhaitez ajouter une option personnalisée, par exemple, ajouter un espacement (padding) autour du morceau de texte, il suffit d’ajouter le petit script ci-dessous (code est écrit en jsx et compilé en javascript).
Dans ce code, on déclare un nouveau type de format via la fonction registerFormatType qui permet d’ajouter une option dans la liste déroulante.
import classnames from 'classnames';
( function( wp ) {
const { registerFormatType, toggleFormat } = wp.richText;
const { RichTextToolbarButton } = wp.blockEditor;
const { useSelect } = wp.data;
const allowedBlocks = [ 'core/paragraph' ];
function addCustomFormatRichtext( { isActive, onChange, value } ) {
const selectedBlock = useSelect( ( select ) => {
return select( 'core/block-editor' ).getSelectedBlock();
}, [] );
if ( selectedBlock && ! allowedBlocks.includes( selectedBlock.name ) ) {
return null;
}
return (
<RichTextToolbarButton
icon={
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5H11C10.7239 10.5 10.5 10.7239 10.5 11V15C10.5 15.2761 10.7239 15.5 11 15.5H15C15.2761 15.5 15.5 15.2761 15.5 15V11C15.5 10.7239 15.2761 10.5 15 10.5ZM11 9C9.89543 9 9 9.89543 9 11V15C9 16.1046 9.89543 17 11 17H15C16.1046 17 17 16.1046 17 15V11C17 9.89543 16.1046 9 15 9H11Z" fill="currentColor"/>
</svg>
}
title="Padding"
onClick={ () => {
onChange(
toggleFormat( value, {
type: 'sp/richtext-padding',
} )
);
} }
isActive={ isActive }
/>
);
}
registerFormatType( 'sp/richtext-padding', {
title: 'Richtext padding',
tagName: 'span',
className: 'sp-has-richtext-padding',
edit: addCustomFormatRichtext,
} );
} ) ( wp );
Ensuite, il suffit de faire le css associé en utilsant la classe sp-has-richtext-padding sur les élément span des paragraphes.
p span.sp-has-richtext-padding {
display: inline-block;
padding: 5px 10px;
}
La documentation officielle WordPress à ce sujet : Formatting Toolbar API