registerFormatType<\/code>qui nous permettra de choisir la couleur de surbrillance du texte s\u00e9lectionn\u00e9 \u00e0 l’aide de la <mark><\/code>balise HTML s\u00e9mantique.<\/p>\nTout le code utilis\u00e9 dans ce tutoriel se trouve dans le plugin gratuit<\/strong> ‘Highlighter’<\/a>.<\/p>\nIl convient de noter que non seulement vous pouvez appliquer des formats au texte s\u00e9lectionn\u00e9 dans vos blocs, mais vous pouvez \u00e9galement les utiliser pour ins\u00e9rer d’autres objets directement dans des blocs, tels que des images et des ic\u00f4nes en ligne.<\/p>\n
Application d’un type de format \u00e0 l’aide du plugin Highlighter.<\/p>\n
La vid\u00e9o ci-dessus montre le plugin Highlighter et notre type de format en action. Allons-y.<\/p>\n
Conditions pr\u00e9alables<\/h2>\n\n- Lisez le guide Cr\u00e9ation d’un plugin pour l’\u00e9diteur de blocs WordPress (Gutenberg)<\/a> afin de prendre une longueur d’avance dans la cr\u00e9ation du plugin.<\/li>\n
- T\u00e9l\u00e9chargez \u00e9ventuellement le plugin gratuit ‘Highlighter’<\/a> et regardez le fichier
\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\nConfigurer les fichiers du plugin<\/h2>\n
Si vous avez suivi les conditions pr\u00e9alables et suivi le guide du plugin, nous devons continuer et supprimer un tas de ces fichiers.<\/p>\n
\n- Dans le dossier src, supprimez tout sauf les fichiers
index.js<\/code>et .style.scss<\/code><\/li>\n- Supprimez compl\u00e8tement le contenu de
index.js<\/code>et style.scss<\/code>.<\/li>\n- Dans le
\/build<\/code>dossier, supprimez tous les fichiers. Nous les r\u00e9g\u00e9n\u00e9rerons plus tard.<\/li>\n- Supprimer
block.json<\/code>. Nous ne construisons pas un bloc aujourd’hui, nous n’en avons donc pas besoin.<\/li>\n<\/ul>\nMettre les scripts en file d’attente<\/h3>\n
Dans le fichier principal du plugin (wholesome-plugin.php<\/code>si vous avez suivi mot pour mot le didacticiel pr\u00e9c\u00e9dent), ajoutez le code suivant pour mettre en file d’attente le JavaScript et le CSS de votre plugin.<\/p>\n<?php\n\nfunction setup(): void {\n\n load_plugin_textdomain( 'wholesome-highlighter', false, ROOT_DIR. 'languages' );\n\n add_action( 'enqueue_block_editor_assets', __NAMESPACE__. 'enqueue_block_editor_assets', 10 );\n\n add_action( 'enqueue_block_assets', __NAMESPACE__. 'enqueue_block_styles', 10 );\n}\n\nfunction enqueue_block_editor_assets(): void {\n\n $asset_path = ROOT_DIR. '\/build\/index.asset.php';\n\n if (! file_exists( $asset_path)) {\n throw new Error(\n esc_html__( 'You need to run `npm start` or `npm run build` in the root of the plugin \"wholesome-highlighter\" first.', 'wholesome-highlighter') );\n }\n\n $scripts = '\/build\/index.js';\n $assets = include $asset_path;\n\n wp_enqueue_script(\n PLUGIN_SLUG. '-block-scripts',\n plugins_url( $scripts, ROOT_FILE ),\n $assets['dependencies'],\n $assets['version'],\n false\n );\n\n wp_set_script_translations(\n PLUGIN_SLUG. '-block-scripts',\n 'wholesome-highlighter',\n ROOT_DIR. 'languages'\n );\n}\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n\nfunction enqueue_block_styles(): void {\n\n $styles = '\/build\/style-index.css';\n\n wp_enqueue_style(\n PLUGIN_SLUG. '-block-styles',\n plugins_url( $styles, ROOT_FILE ),\n array(),\n filemtime( ROOT_DIR. $styles) );\n}\n\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n<\/code><\/pre>\n\n- Enregistrer le type de format<\/li>\n<\/ol>\n
\nOuvrez votre \/src\/index.js<\/code>fichier et ajoutez le code suivant.<\/p>\n\nimport { RichTextToolbarButton } from '@wordpress\/block-editor';\nimport { __ } from '@wordpress\/i18n';\n\nconst HighlighterButton = ({ isActive, onChange, value}) => {\n return (<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n \/>) };\n<\/code><\/pre>\nCela cr\u00e9e notre bouton de surligneur qui appara\u00eetra dans le menu de format. Maintenant, nous allons utiliser registerFormatType<\/code>pour enregistrer le format.<\/p>\nTout d’abord, nous devons modifier nos importations pour importer \u00e9galement registerFormatType<\/code>depuis @wordpress\/rich-text<\/code>.<\/p>\nimport { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\nEnregistrez ensuite le format en ajoutant le nom du format (wholesome\/highlighter<\/code>) et en transmettant un objet avec les propri\u00e9t\u00e9s suivantes. toggleFormat<\/code>sera utilis\u00e9 plus tard pour notre \u00e9v\u00e9nement click.<\/p>\n\nclassName<\/code>: Le nom de classe qui sera ajout\u00e9 \u00e0 la balise qui entoure le texte en surbrillance.<\/li>\nedit<\/code>: Le bouton que nous avons pr\u00e9c\u00e9demment enregistr\u00e9.<\/li>\ntagName<\/code>: Le type de balise qui sera appliqu\u00e9 au texte en surbrillance. Dans ce cas, nous utilisons <mark><\/code>un balisage s\u00e9mantiquement correct pour une surbrillance de texte.<\/li>\ntitle<\/code>: Le titre du format.<\/li>\n<\/ul>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButton,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nG\u00e9rer le clic<\/h3>\n
Maintenant que nous avons ajout\u00e9 le bouton au menu de format, il ne nous reste plus qu’\u00e0 g\u00e9rer l’\u00e9v\u00e9nement click.<\/p>\n
![\"Formatez](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\")
<\/a><\/p>\nModifiez RichTextToolbarButton<\/code>et ajoutez l’ onClick<\/code>\u00e9v\u00e9nement.<\/p>\n<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n onClick={() => {\n onChange(\n toggleFormat( value, {\n type: 'wholesome\/highlighter',\n }) );\n } }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n\/>\n<\/code><\/pre>\nSur le d\u00e9clencheur, nous appelons le toggleFormat<\/code>passage de la valeur (qui est le texte en surbrillance) et passons un objet avec la type<\/code>propri\u00e9t\u00e9 d\u00e9finie sur le nom de notre format.<\/p>\nMaintenant, lorsque le bouton est cliqu\u00e9 initialement, il appliquera la <mark><\/code>balise HTML au texte s\u00e9lectionn\u00e9, et lorsqu’il sera cliqu\u00e9 \u00e0 nouveau, il basculera le format en le supprimant \u00e0 nouveau.<\/p>\nPour afficher le code dans son int\u00e9gralit\u00e9 et pour afficher les derni\u00e8res mises \u00e0 jour , consultez le fichier complet \/src\/formats\/highlight.js<\/code>dans le plugin Highlighter<\/a>.<\/p>\nLe 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 \u00e9galement le faire.<\/p>\n
Pour ce faire, nous devrons utiliser le composant d’ordre sup\u00e9rieur ifCondition et utiliser Select pour d\u00e9terminer le type de bloc que nous avons s\u00e9lectionn\u00e9.<\/p>\n
Pour ce faire, ajoutez les importations suivantes en haut de votre fichier.<\/p>\n
import { ifCondition } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\nAu-dessus du registerFormatType<\/code>bloc de code, ajoutez le bloc de code de composition suivant.<\/p>\n\nvar HighlighterButtonContainer = ifCondition( (props) => {\n const selectedBlock = useSelect( (select) => select('core\/block-editor').getSelectedBlock() );\n return (selectedBlock &&\n selectedBlock.name === 'core\/paragraph'\n ); \n} )( HighlighterButton );\n<\/code><\/pre>\nComme vous pouvez le voir par le code, si le bloc s\u00e9lectionn\u00e9 est core\/paragraph<\/code>le composant d’ordre sup\u00e9rieur ifCondition<\/code>renverra true, et permettra donc au bouton de s’afficher.<\/p>\nTout ce que nous devons faire maintenant est de passer le conteneur que nous venons de cr\u00e9er dans le registerBlockType<\/code>bloc de code et notre code est termin\u00e9.<\/p>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButtonContainer,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nPour afficher le code dans son int\u00e9gralit\u00e9 , consultez le \/src\/formats\/highlight-paragraph.js<\/code>fichier dans le plugin Highlighter<\/a>.<\/p>\n\n- Allez plus loin en ajoutant des attributs personnalis\u00e9s \u00e0 votre format personnalis\u00e9 avec un popover modal<\/a>.<\/li>\n
- Ajouter une barre lat\u00e9rale de bloc avec InspectorControls<\/a><\/li>\n
- Envisagez de cr\u00e9er une page d’options et de param\u00e8tres \u00e0 l’aide de composants Gutenberg<\/a><\/li>\n<\/ul>\n