Formatez votre contenu de publication avec registerFormatType

Last updated Nov 9, 2022

Teneur

Conditions préalables

Configurer les fichiers du plugin

Mettre les scripts en file d’attente

Gérer le clic

Vous pouvez ajouter des boutons personnalisés à la barre d’outils de WordPress Gutenberg assez facilement, mais saviez-vous que vous pouvez également ajouter des contrôles de type de format au menu de format ?

Dans ce guide, nous allons voir comment ajouter un contrôle de format à l’aide registerFormatTypequi nous permettra de choisir la couleur de surbrillance du texte sélectionné à l’aide de la <mark>balise HTML sémantique.

Tout le code utilisé dans ce tutoriel se trouve dans le plugin gratuit ‘Highlighter’.

Il convient de noter que non seulement vous pouvez appliquer des formats au texte sélectionné dans vos blocs, mais vous pouvez également les utiliser pour insérer d’autres objets directement dans des blocs, tels que des images et des icônes en ligne.

Application d’un type de format à l’aide du plugin Highlighter.

La vidéo ci-dessus montre le plugin Highlighter et notre type de format 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.
Téléchargez éventuellement le plugin gratuit ‘Highlighter’ et regardez le fichier/src/formats/highlight.js

Configurer les fichiers du plugin

Si vous avez suivi les conditions préalables et suivi le guide du plugin, nous devons continuer et supprimer un tas de ces fichiers.

Dans le dossier src, supprimez tout sauf les fichiers index.jset .style.scss
Supprimez complètement le contenu de index.jset style.scss.
Dans le /builddossier, supprimez tous les fichiers. Nous les régénérerons plus tard.
Supprimer block.json. Nous ne construisons pas un bloc aujourd’hui, nous n’en avons donc pas besoin.

Mettre les scripts en file d’attente

Dans le fichier principal du plugin (wholesome-plugin.phpsi vous avez suivi mot pour mot le didacticiel précédent), ajoutez le code suivant pour mettre en file d’attente le JavaScript et le CSS de votre plugin.

<?php

function setup(): void {

    load_plugin_textdomain( 'wholesome-highlighter', false, ROOT_DIR. 'languages' );

    add_action( 'enqueue_block_editor_assets', __NAMESPACE__. 'enqueue_block_editor_assets', 10 );

    add_action( 'enqueue_block_assets', __NAMESPACE__. 'enqueue_block_styles', 10 );
}

function enqueue_block_editor_assets(): void {

    $asset_path = ROOT_DIR. '/build/index.asset.php';

    if (! file_exists( $asset_path)) {
        throw new Error(
            esc_html__( 'You need to run `npm start` or `npm run build` in the root of the plugin "wholesome-highlighter" first.', 'wholesome-highlighter') );
    }

    $scripts = '/build/index.js';
    $assets  = include $asset_path;

    wp_enqueue_script(
        PLUGIN_SLUG. '-block-scripts',
        plugins_url( $scripts, ROOT_FILE ),
        $assets['dependencies'],
        $assets['version'],
        false
    );

    wp_set_script_translations(
        PLUGIN_SLUG. '-block-scripts',
        'wholesome-highlighter',
        ROOT_DIR. 'languages'
    );
}
add_action( 'plugins_loaded', __NAMESPACE__. 'setup' );

function enqueue_block_styles(): void {

    $styles = '/build/style-index.css';

    wp_enqueue_style(
        PLUGIN_SLUG. '-block-styles',
        plugins_url( $styles, ROOT_FILE ),
        array(),
        filemtime( ROOT_DIR. $styles) );
}

add_action( 'plugins_loaded', __NAMESPACE__. 'setup' );

Enregistrer le type de format

Ouvrez votre /src/index.jsfichier et ajoutez le code suivant.


import { RichTextToolbarButton } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

const HighlighterButton = ({ isActive, onChange, value}) => {
    return (<RichTextToolbarButton
            icon='edit'
            isActive={ isActive }
            title={ __( 'Highlight', 'wholesome-highlighter') }
        />) };

Cela crée notre bouton de surligneur qui apparaîtra dans le menu de format. Maintenant, nous allons utiliser registerFormatTypepour enregistrer le format.

Tout d’abord, nous devons modifier nos importations pour importer également registerFormatTypedepuis @wordpress/rich-text.

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';

Enregistrez ensuite le format en ajoutant le nom du format (wholesome/highlighter) et en transmettant un objet avec les propriétés suivantes. toggleFormatsera utilisé plus tard pour notre événement click.

className: Le nom de classe qui sera ajouté à la balise qui entoure le texte en surbrillance.
edit: Le bouton que nous avons précédemment enregistré.
tagName: Le type de balise qui sera appliqué au texte en surbrillance. Dans ce cas, nous utilisons <mark>un balisage sémantiquement correct pour une surbrillance de texte.
title: Le titre du format.


registerFormatType(
    'wholesome/highlighter', {
        className: 'wholesome-highlight',
        edit: HighlighterButton,
        tagName: 'mark',
        title: __( 'Highlight', 'wholesome-highlighter' ),
    }
);

Gérer le clic

Maintenant que nous avons ajouté le bouton au menu de format, il ne nous reste plus qu’à gérer l’événement click.

Modifiez RichTextToolbarButtonet ajoutez l’ onClickévénement.

<RichTextToolbarButton
  icon='edit'
  isActive={ isActive }
  onClick={() => {
    onChange(
      toggleFormat( value, {
        type: 'wholesome/highlighter',
      }) );
  } }
  title={ __( 'Highlight', 'wholesome-highlighter') }
/>

Sur le déclencheur, nous appelons le toggleFormatpassage de la valeur (qui est le texte en surbrillance) et passons un objet avec la typepropriété définie sur le nom de notre format.

Maintenant, lorsque le bouton est cliqué initialement, il appliquera la <mark>balise HTML au texte sélectionné, et lorsqu’il sera cliqué à nouveau, il basculera le format en le supprimant à nouveau.

Pour afficher le code dans son intégralité et pour afficher les dernières mises à jour , consultez le fichier complet /src/formats/highlight.jsdans le plugin Highlighter.

Le code ci-dessus enregistrera le bloc pour tous les types de blocs. Cependant, si vous souhaitez que le bloc n’apparaisse que sur certains types de blocs, vous pouvez également le faire.

Pour ce faire, nous devrons utiliser le composant d’ordre supérieur ifCondition et utiliser Select pour déterminer le type de bloc que nous avons sélectionné.

Pour ce faire, ajoutez les importations suivantes en haut de votre fichier.

import { ifCondition  } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';

Au-dessus du registerFormatTypebloc de code, ajoutez le bloc de code de composition suivant.


var HighlighterButtonContainer = ifCondition( (props) => {
    const selectedBlock = useSelect( (select) => select('core/block-editor').getSelectedBlock() );
    return (selectedBlock &&
        selectedBlock.name === 'core/paragraph'
    ); 
} )( HighlighterButton );

Comme vous pouvez le voir par le code, si le bloc sélectionné est core/paragraphle composant d’ordre supérieur ifConditionrenverra true, et permettra donc au bouton de s’afficher.

Tout ce que nous devons faire maintenant est de passer le conteneur que nous venons de créer dans le registerBlockTypebloc de code et notre code est terminé.


registerFormatType(
    'wholesome/highlighter', {
        className: 'wholesome-highlight',
        edit: HighlighterButtonContainer,
        tagName: 'mark',
        title: __( 'Highlight', 'wholesome-highlighter' ),
    }
);

Pour afficher le code dans son intégralité , consultez le /src/formats/highlight-paragraph.jsfichier dans le plugin Highlighter.

Allez plus loin en ajoutant des attributs personnalisés à votre format personnalisé avec un popover modal.
Ajouter une barre latérale de bloc avec InspectorControls
Envisagez de créer une page d’options et de paramètres à l’aide de composants Gutenberg

Source d’enregistrement: wholesomecode.ltd