BlockControls<\/code>(da wp.blockEditor<\/code>). All’interno di questo componente possiamo aggiungere uno dei componenti di WordPress per le barre degli strumenti standard che conosciamo da altri blocchi (ad esempio l’allineamento) oppure possiamo aggiungere la nostra barra degli strumenti.<\/p>\nDi default un blocco avr\u00e0 una barra degli strumenti contenente solo l’icona del blocco (per la funzionalit\u00e0 Trasforma in) e il menu del blocco per es. rimuovere il blocco. Non possiamo rimuoverli, ma possiamo aggiungere i nostri pulsanti e barre degli strumenti nel mezzo.<\/p>\n
Tuttavia, alcuni componenti di WordPress aggiungeranno da soli le proprie barre degli strumenti. A partire da ora il nostro blocco mostra una barra degli strumenti per la formattazione del testo che proviene dal RichText<\/code>componente che abbiamo aggiunto.<\/p>\n![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7785e80.png\")
<\/a><\/p>\nAggiunta di una barra degli strumenti di allineamento dei blocchi<\/h2>\n
La barra degli strumenti di allineamento dei blocchi esiste praticamente su tutti i tipi di blocchi di WordPress, quindi aggiungiamo anche quella al nostro blocco. Dietro le quinte esiste un componente BlockAlignmentToolbar<\/code>che potremmo aggiungere, tuttavia mi raccomando di non farlo. Il suo utilizzo richiede di gestire manualmente le classi per l’allineamento dei blocchi e assicurarsi che il blocco estenda la sua larghezza nell’editor quando si sceglie "Larghezza ampia" o "Larghezza intera". Fortunatamente WordPress ha reso davvero semplice l’implementazione, completamente automatica.<\/p>\nPS: il tema attivo deve avere attivamente aggiunto il supporto del tema per questi due allineamenti di blocchi. Puoi aggiungere il supporto per questi avendo add_theme_support('align-wide')<\/code>nel after_setup_theme<\/code>gancio.<\/p>\nPossiamo aggiungere una nuova propriet\u00e0 alla nostra configurazione di oggetti in registerBlockType()<\/code>, chiamata supports<\/code>. Ci sono alcune altre funzionalit\u00e0, ma ci\u00f2 che ci interessa qui \u00e8 align<\/code>. Possiamo impostare align<\/code>per true<\/code>aggiungere tutti i possibili allineamenti, oppure possiamo fornire una matrice di esattamente quali allineamenti consentiamo per il nostro blocco.<\/p>\n...\nregisterBlockType('awp\/firstblock', {\n ...\n supports: {\n align: true\n },\n edit: (props) => {\n ...\n});<\/code><\/pre>\nIl che ci d\u00e0 questo nell’editor:<\/p>\n
![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7967acd.png\")
<\/a><\/p>\nSe si desidera, ad esempio, impedire a chiunque di utilizzare Wide Width o Full Width, \u00e8 possibile fornire un array ed escludere quei due. I nomi degli allineamenti dei blocchi sono i seguenti: left<\/code>, right<\/code>, center<\/code>, wide<\/code>, e full<\/code>.<\/p>\nsupports: {\n align: ['left', 'right', 'center']\n},<\/code><\/pre>\nHai bisogno di un allineamento predefinito?<\/h3>\n
Per impostazione predefinita, il blocco non ottiene alcun allineamento del blocco. Se lo desideri, puoi impostare un valore predefinito creando un attributo con la chiave align<\/code>, imposta il tipo su string<\/code>e imposta l\u00ec il valore predefinito. WordPress collegher\u00e0 automaticamente questo attributo all’allineamento dei blocchi.<\/p>\nattributes: {\n align: {\n type: 'string',\n default: 'center'\n }\n},\nsupports: {\n align: true\n},<\/code><\/pre>\nCon questo ogni volta che viene creato un nuovo blocco del nostro tipo, l’allineamento del blocco predefinito \u00e8 centrato.<\/p>\n
Blocca il disordine dello stile di allineamento? Non \u00e8 colpa nostra<\/h3>\n
Nota:<\/strong> lo stile di blocco predefinito di WordPress roviner\u00e0 il flusso del contenuto del tuo post quando utilizzi l’allineamento dei blocchi sinistro e destro. La stessa cosa accade anche con altri tipi di blocchi di WordPress e non \u00e8 esclusivamente un problema del nostro blocco. Ci\u00f2 \u00e8 causato dall’aggiunta di float all’elemento, che comprime l’elemento padre. Credimi, ho provato a costruire il blocco per evitare questo problema. L’unica cosa che ho scoperto che funziona correttamente senza pasticciare con gli altri allineamenti di blocchi \u00e8 l’aggiunta di uno stile all’editor e la regolazione dello stile del float.<\/p>\n![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7baa1f0.png\")
<\/a><\/p>\nIndipendentemente da ci\u00f2, WordPress ha semplificato l’implementazione dell’allineamento dei blocchi. Ora diamo un’occhiata ad altre barre degli strumenti che possiamo usare.<\/p>\n
Aggiunta di una barra degli strumenti di allineamento del testo<\/h2>\n
Se preferisci la barra degli strumenti per l’allineamento del testo, puoi farlo invece dell’allineamento a blocchi: in questa barra degli strumenti abbiamo solo l’allineamento a sinistra, al centro e a destra. In effetti, puoi utilizzare sia l’allineamento del testo che l’allineamento dei blocchi insieme: funzionano separatamente. Per non confondere gli utenti, puoi ad esempio aggiungere solo il supporto per l’allineamento dei blocchi a larghezza e larghezza intera e utilizzare la barra degli strumenti di allineamento del testo per controllare l’allineamento a sinistra, al centro o a destra. In questo modo eviti il \u200b\u200bproblema sopra menzionato<\/strong> con il flusso di blocchi nell’editor. Sta a te decidere come vuoi che funzioni il tuo blocco.<\/p>\nWordPress ha un componente per l’output della barra degli strumenti di allineamento del testo, tuttavia nessuna gestione automatica dell’aggiunta delle classi corrette per allineare effettivamente il contenuto, sia all’interno dell’editor che nel frontend (per quanto ho scoperto almeno!). Dobbiamo aggiungere e aggiornare manualmente un attributo per l’allineamento del testo.<\/p>\n
Aggiunta BlockControls<\/code>eAlignmentToolbar<\/code><\/h3>\nInfine aggiungiamo BlockControls<\/code>alla nostra edit<\/code>funzione per il nostro output nella barra degli strumenti. Il componente per l’allineamento del testo AlignmentToolbar<\/code>proviene dal wp.blockEditor<\/code>pacchetto.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n attributes: {\n myRichHeading: {\n type: 'string',\n },\n myRichText: {\n type: 'string',\n source: 'html',\n selector: 'p'\n },\n textAlignment: {\n type: 'string',\n }\n },\n supports: {\n align: ['wide', 'full']\n },\n edit: (props) => {\n const { attributes, setAttributes } = props;\n const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n return (<div className={alignmentClass}>\n <InspectorControls>\n ... \n <\/InspectorControls>\n <BlockControls>\n <AlignmentToolbar\n value={attributes.textAlignment}\n onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n \/>\n <\/BlockControls>\n <RichText \n tagName=\"h2\"\n placeholder=\"Write your heading here\"\n value={attributes.myRichHeading}\n onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n \/>\n <RichText\n tagName=\"p\"\n placeholder=\"Write your paragraph here\"\n value={attributes.myRichText}\n onChange={(newtext) => setAttributes({ myRichText: newtext })}\n \/>\n <\/div>\n );\n\u00a0\n },\n save: (props) => { \n const { attributes } = props;\n\u00a0\n const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n return (<div className={alignmentClass}>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n {attributes.activateLasers && \n <div className=\"lasers\">Lasers activated<\/div>\n }\n <\/div>\n );\n }\n});<\/code><\/pre>\nNota che ho escluso il contenuto di tutto ci\u00f2 che abbiamo creato nel InspectorControls<\/code>passaggio precedente per abbreviare il codice.<\/p>\nTra la riga #37<\/code>e #42<\/code>l’altro c’\u00e8 l’intero contenuto della nostra barra degli strumenti (a parte l’allineamento dei blocchi automaticamente aggiunto dalla supports<\/code>propriet\u00e0 e la formattazione del testo aggiunta dai nostri RichText<\/code>componenti). Usiamo BlockControls<\/code>per accedere alla barra degli strumenti e all’interno aggiungiamo il AlignmentToolbar<\/code>componente.<\/p>\nCome abbiamo fatto diverse volte con gli input, forniamo un value<\/code>supporto per mostrare il valore salvato e un onChange<\/code>supporto per aggiornare il nostro attributo al AlignmentToolbar<\/code>componente. L’attributo che utilizzeremo per memorizzare l’allineamento del testo scelto \u00e8 definito textAlignment<\/code>e deve essere di tipo string<\/code>. Come al solito puoi fornire un default<\/code>per assicurarti che i blocchi appena creati ottengano un allineamento predefinito.<\/p>\nPer garantire che il blocco emetta le informazioni sull’allineamento e venga anche disegnato correttamente (quindi vediamo effettivamente l’allineamento della modifica del testo) sia nell’editor che nel frontend, \u00e8 necessario impostare manualmente la classe corretta sul div di wrapping. In entrambi edit<\/code>e save<\/code>definisco una variabile che controlla se attributes.textAlignment<\/code>\u00e8 impostata. Se lo \u00e8, costruisco il nome della classe seguendo gli standard di WordPress per gli allineamenti del testo, che \u00e8 "has-text-align-(left|center|right)". Con questa classe WordPress applicher\u00e0 il suo stile al nostro blocco e si assicurer\u00e0 che il nostro blocco venga allineato visivamente correttamente, sia nell’editor che nel frontend.<\/p>\nAggiunta di barre degli strumenti personalizzate con i nostri pulsanti<\/h3>\n
Puoi anche aggiungere i tuoi pulsanti nella barra degli strumenti per fare tutto ci\u00f2 che desideri quando fai clic su di essi. Per fare ci\u00f2 ti consigliamo di aggiungere il componente Toolbar<\/code>e all’interno di questo elemento aggiungere un IconButton<\/code>(entrambi nel wp.components<\/code>pacchetto). Tutto dentro BlockControls<\/code>ovviamente.<\/p>\nNota<\/strong>: secondo WordPress, il log delle modifiche di Gutenberg IconButton<\/code>\u00e8 deprecato a favore dell’utilizzo di Button<\/code>. Tuttavia, non riesco a visualizzare un’icona utilizzando il Button<\/code>componente, indipendentemente da ci\u00f2 che faccio, anche se dovrebbe supportarlo. Quindi d’ora in poi user\u00f2 IconButton<\/code>.<\/p>\nOvviamente puoi combinare pi\u00f9 componenti della barra degli strumenti all’interno di BlockControls<\/code>. Con il codice qui sotto aggiungiamo la barra degli strumenti di allineamento del testo e la nostra barra degli strumenti personalizzata con un pulsante dopo di essa.<\/p>\n<BlockControls>\n <AlignmentToolbar\n value={attributes.textAlignment}\n onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n \/>\n <Toolbar>\n <IconButton\n label=\"My very own custom button\"\n icon=\"edit\"\n className=\"my-custom-button\"\n onClick={() => console.log('pressed button')}\n \/>\n <\/Toolbar>\n<\/BlockControls><\/code><\/pre>\n