registerFormatType<\/code>che ci permetter\u00e0 di scegliere il colore di evidenziazione del testo selezionato usando il <mark><\/code>tag HTML semantico.<\/p>\nTutto il codice utilizzato in questo tutorial pu\u00f2 essere trovato nel plugin gratuito<\/strong> ‘Evidenziatore’<\/a>.<\/p>\nVale la pena notare che non solo puoi applicare formati al testo selezionato all’interno dei tuoi blocchi, ma puoi anche usarli per inserire altri oggetti direttamente nei blocchi, come immagini e icone in linea.<\/p>\n
Applicazione di un tipo di formato utilizzando il plug-in Evidenziatore.<\/p>\n
Il video sopra mostra il plug-in Highlighter e il nostro tipo di formato in azione. Saltiamo ad esso.<\/p>\n
Prerequisiti<\/h2>\n\n- Leggi la guida Creazione di un plug-in per l’editor di blocchi di WordPress (Gutenberg)<\/a> in modo da poter ottenere un vantaggio nella creazione del plug-in.<\/li>\n
- Facoltativamente , scarica il plug-in ‘Evidenziatore’ gratuito<\/a> e guarda il file
\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\nImposta i file plug-in<\/h2>\n
Se hai seguito il prerequisito e seguito la guida del plug-in, dobbiamo procedere e rimuovere un sacco di quei file.<\/p>\n
\n- Nella cartella src rimuovi tutto tranne i file
index.js<\/code>e style.scss<\/code>.<\/li>\n- Elimina il contenuto di
index.js<\/code>e style.scss<\/code>completamente.<\/li>\n- Nella
\/build<\/code>cartella elimina tutti i file. Li rigenereremo pi\u00f9 tardi.<\/li>\n- Rimuovi
block.json<\/code>. Oggi non stiamo costruendo un blocco, quindi non ne abbiamo bisogno.<\/li>\n<\/ul>\nAccoda gli script<\/h3>\n
Nel file del plugin principale (wholesome-plugin.php<\/code>se hai seguito testualmente il tutorial precedente) aggiungi il codice seguente per accodare JavaScript e CSS per il tuo 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- Registra il tipo di formato<\/li>\n<\/ol>\n
\nApri il tuo \/src\/index.js<\/code>file e aggiungi il codice seguente.<\/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>\nQuesto crea il nostro pulsante evidenziatore che apparir\u00e0 nel menu del formato. Ora useremo registerFormatType<\/code>per registrare il formato.<\/p>\nPer prima cosa, dobbiamo modificare le nostre importazioni per importare anche registerFormatType<\/code>da @wordpress\/rich-text<\/code>.<\/p>\nimport { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\nQuindi registrare il formato aggiungendo il nome del formato (wholesome\/highlighter<\/code>) e passando un oggetto con le seguenti propriet\u00e0. toggleFormat<\/code>verr\u00e0 utilizzato in seguito per il nostro evento di clic.<\/p>\n\nclassName<\/code>: il nome della classe che verr\u00e0 aggiunto al tag che circonda il testo evidenziato.<\/li>\nedit<\/code>: Il pulsante che abbiamo registrato in precedenza.<\/li>\ntagName<\/code>: il tipo di tag che verr\u00e0 applicato al testo evidenziato. In questo caso stiamo usando <mark><\/code>il markup semanticamente corretto per l’evidenziazione del testo.<\/li>\ntitle<\/code>: Il titolo del formato.<\/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>\nGestisci il clic<\/h3>\n
Ora che abbiamo aggiunto il pulsante al menu del formato, tutto ci\u00f2 che dobbiamo fare \u00e8 gestire l’evento click.<\/p>\n
![\"Formatta](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\")
<\/a><\/p>\nModifica RichTextToolbarButton<\/code>e aggiungi l’ onClick<\/code>evento.<\/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>\nSul trigger chiamiamo toggleFormat<\/code>passando il valore (che \u00e8 il testo evidenziato) e passiamo un oggetto con la type<\/code>propriet\u00e0 impostata al nome del nostro formato.<\/p>\nOra, quando si fa clic inizialmente sul pulsante, applicher\u00e0 il <mark><\/code>tag HTML al testo selezionato e, quando si fa nuovamente clic, cambier\u00e0 il formato rimuovendolo di nuovo.<\/p>\nPer visualizzare il codice per intero e per visualizzare gli ultimi aggiornamenti , dai un’occhiata al \/src\/formats\/highlight.js<\/code>file completo all’interno del plug-in Highlighter<\/a>.<\/p>\nIl codice sopra registrer\u00e0 il blocco per tutti i tipi di blocco. Tuttavia, se vuoi che il blocco appaia solo su determinati tipi di blocco, puoi farlo anche tu.<\/p>\n
Per fare ci\u00f2 avremo bisogno di utilizzare il componente di ordine superiore ifCondition e useSelect per determinare il tipo di blocco che abbiamo selezionato.<\/p>\n
Per fare ci\u00f2, aggiungi le seguenti importazioni all’inizio del tuo file.<\/p>\n
import { ifCondition } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\nSopra il registerFormatType<\/code>blocco di codice, aggiungi il seguente blocco di codice di composizione.<\/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>\nCome puoi vedere dal codice, se il blocco selezionato \u00e8 core\/paragraph<\/code>il componente di ordine superiore ifCondition<\/code>restituir\u00e0 true e quindi consentir\u00e0 il rendering del pulsante.<\/p>\nTutto ci\u00f2 che dobbiamo fare ora \u00e8 passare il Container che abbiamo appena creato nel registerBlockType<\/code>blocco di codice e il nostro codice \u00e8 finito.<\/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>\nPer visualizzare il codice per intero dai un’occhiata al \/src\/formats\/highlight-paragraph.js<\/code>file nel plugin Highlighter<\/a>.<\/p>\n\n- Porta le cose oltre aggiungendo attributi personalizzati al tuo formato personalizzato con un popover modale<\/a>.<\/li>\n
- Aggiungi una barra laterale del blocco con InspectorControls<\/a><\/li>\n
- Guarda la creazione di una pagina di opzioni e impostazioni utilizzando i componenti Gutenberg<\/a><\/li>\n<\/ul>\n