InspectorControls<\/code>. Qualunque cosa tu metta all’interno di questo componente verr\u00e0 emessa nella barra laterale e non all’interno del blocco\/editor stesso. Puoi praticamente mettere il componente e il suo contenuto ovunque nella restituzione della edit<\/code>funzione.<\/p>\nA parte questo, gestiresti le impostazioni all’interno della barra laterale come se fossero all’interno del blocco. Ogni impostazione richiede un attributo e tu carichi e aggiorni gli attributi allo stesso modo.<\/p>\n
![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nDiamo prima una rapida occhiata a come appare la barra laterale del nostro blocco (quando il nostro blocco \u00e8 attivo nell’editor), in base al codice che abbiamo trovato nel passaggio precedente.<\/p>\n
Tutti i blocchi mostreranno per impostazione predefinita l’icona, il nome e la descrizione del blocco e la sezione Avanzate \u2013 compresso. All’interno di Advanced troverai un input di testo per fornire una classe CSS per il blocco.<\/p>\n
Aggiunta di una sezione della barra laterale e di alcune impostazioni<\/h2>\n
La barra laterale \u00e8 suddivisa in sezioni (denominate pannelli nel codice) e per un design e una funzionalit\u00e0 ottimali (inclusa la funzionalit\u00e0 di compressione aperta) dovremmo utilizzare i componenti di WordPress per produrre correttamente i pannelli.<\/p>\n
Utilizza il componente PanelBody<\/code>per aggiungere una sezione (quelle che puoi aprire o comprimere), che si trova nel wp.components<\/code>pacchetto. Il componente accetta alcuni oggetti di scena, ad esempio per il titolo e se il pannello deve essere aperto o chiuso come predefinito. Puoi anche fornire una classe personalizzata, un’icona e allegare una funzione evento al trigger di apertura-chiusura.<\/p>\nAll’interno PanelBody<\/code>di WordPress consiglia quindi di utilizzare il PanelRow<\/code>componente che agisce come contenitori generici all’interno del pannello, per garantire la razionalizzazione del design. Questo componente applica automaticamente uno stile di margine e riga flessibile per i tuoi contenuti. A causa dello flex-direction: row<\/code>stile " ", dovresti avvolgere ogni impostazione all’interno di uno PanelRow<\/code>. Oppure puoi saltarlo del tutto e assumerti la responsabilit\u00e0 di modellarlo tu stesso con div e simili.<\/p>\nAggiunta di un pannello e delle impostazioni<\/h3>\n
Aggiungiamo un pannello della barra laterale per il nostro blocco con alcune impostazioni all’interno, solo per vederlo in pratica. Aggiungeremo un controllo di attivazione\/disattivazione, un input selezionato, un colorpicker e una casella di controllo, solo per fare un po’ di esperienza con diversi tipi di componenti di input. Ho lasciato il contenuto del blocco (con le due RichText<\/code>s) e la save<\/code>funzione proprio come prima.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = 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 toggle: {\n type: 'boolean',\n default: true\n },\n favoriteAnimal: {\n type: 'string',\n default: 'dogs'\n },\n favoriteColor: {\n type: 'string',\n default: '#DDDDDD'\n },\n activateLasers: {\n type: 'boolean',\n default: false\n }\n },\n edit: (props) => { \n const { attributes, setAttributes } = props;\n return (<div>\n <InspectorControls>\n <PanelBody\n title=\"Most awesome settings ever\"\n initialOpen={true}\n >\n <PanelRow>\n <ToggleControl\n label=\"Toggle me\"\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <SelectControl\n label=\"What's your favorite animal?\"\n value={attributes.favoriteAnimal}\n options={[\n {label: \"Dogs\", value: 'dogs'},\n {label: \"Cats\", value: 'cats'},\n {label: \"Something else\", value: 'weird_one'},\n ]}\n onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <ColorPicker\n color={attributes.favoriteColor}\n onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n disableAlpha\n \/>\n <\/PanelRow>\n <PanelRow>\n <CheckboxControl\n label=\"Activate lasers?\"\n checked={attributes.activateLasers}\n onChange={(newval) => setAttributes({ activateLasers: newval })}\n \/>\n <\/PanelRow>\n <\/PanelBody>\n <\/InspectorControls>\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 },\n save: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n <\/div>\n );\n }\n});<\/code><\/pre>\nCome sempre iniziamo destrutturando i componenti e la funzione che vogliamo utilizzare. All’interno definiamo un attributo per input e abbiniamo il tipo, ad esempio il controllo toggle si aspetta un valore booleano e poich\u00e9 i valori del menu a discesa sono stringhe anche quell’attributo dovrebbe essere una stringa di tipo attributes<\/code>.registerBlockType()<\/code><\/p>\nAlla riga #41<\/code>iniziamo il InspectorControls<\/code>componente e tutto da quel punto fino alla riga #80<\/code>apparir\u00e0 nella barra laterale. Il resto apparir\u00e0 all’interno dell’editor stesso e non ho apportato modifiche l\u00ec.<\/p>\n![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\nAll’interno creiamo prima un pannello con PanelBody<\/code>e con il prop initialOpen<\/code>impostato su true diciamo a Gutenberg che questo pannello dovrebbe essere aperto per impostazione predefinita. E poi sta a noi cosa aggiungere all’interno di ogni PanelRow<\/code>.<\/p>\nPer il componente ToggleControl<\/code>utilizziamo gli stessi prop come abbiamo fatto prima con gli input di testo, tranne per il fatto che al posto del prop value<\/code>forniamo il valore dell’attributo all’interno del prop checked<\/code>. Questo si applica a tutti gli input che si aspettano un attributo selezionato in HTML semplice, ad esempio le caselle di controllo. Per i pulsanti di opzione useresti il \u200b\u200bsupporto selected<\/code>in quanto questo \u00e8 ci\u00f2 che useresti anche nel semplice HTML. Tieni presente che l’attributo per questo input deve essere di tipo boolean<\/code>.<\/p>\nPer quanto riguarda la CheckboxControl<\/code>gestione di una casella di controllo singolare funziona esattamente come ToggleControl<\/code>: restituisce un booleano indipendentemente dal fatto che sia selezionato o meno.<\/p>\nIl SelectControl<\/code>genera un menu a tendina select e si aspetta le possibili scelte come un array nel prop options<\/code>. Ogni elemento deve essere un oggetto con le propriet\u00e0 label<\/code>e value<\/code>. Lo stesso vale per le caselle di controllo e i pulsanti di opzione (RadioControl<\/code>). In circostanze normali probabilmente genereresti le scelte come variabile al di fuori dell’output HTML.<\/p>\nPotresti notare che ColorPicker<\/code>funziona in modo leggermente diverso dagli altri poich\u00e9 si tratta di un componente pi\u00f9 complesso e non di un input HTML standard. Fornisci il supporto color<\/code>per il colore salvato e invece di onChange<\/code>(si attiva una volta quando si fa clic ma anche ogni volta che il valore viene modificato durante il trascinamento, il che pu\u00f2 causare molti incendi) utilizzare onChangeComplete<\/code>. Il prop restituito in questo evento \u00e8 anche un oggetto in cui dobbiamo decidere quale parte vogliamo salvare nel nostro attributo. In questo esempio vogliamo salvare il valore esadecimale (senza alfa\/opacit\u00e0), quindi all’interno setAttributes()<\/code>estraiamo la hex<\/code>propriet\u00e0 color<\/code>dell’oggetto restituito. Anche per questo aggiungiamo la propriet\u00e0disableAlpha<\/code>come rimuovere l’interfaccia utente del canale alfa (per controllare l’opacit\u00e0) poich\u00e9 non ha senso offrire all’utente questo quando non salviamo mai il valore di opacit\u00e0.<\/p>\nCiascuno dei componenti ha un label<\/code>supporto disponibile tranne il colorpicker. Se vuoi produrre un’etichetta o un testo prima di esso, dovrai giocherellare con HTML o stile per assicurarti che abbia un bell’aspetto.<\/p>\nOvviamente puoi aggiungere tutti i pannelli che vuoi, basta aggiungere un altro PanelBody<\/code>componente dopo il precedente.<\/p>\nSe sei interessato a saperne di pi\u00f9 sull’aggiunta di impostazioni di blocco, ho tutorial separati per impostazioni e componenti pi\u00f9 complessi per Inspector; Come aggiungere una selezione di immagini<\/a> e come aggiungere un pannello delle impostazioni del colore<\/a>.<\/p>\nGestionesave<\/code><\/h3>\nHo lasciato la save<\/code>funzione come era prima. Dipende da te e tutto dipende da ci\u00f2 che le impostazioni controllano nell’output. Sai gi\u00e0 come ottenere i valori di ogni impostazione. Ad esempio, supponiamo che l’attributo booleano activateLasers<\/code>controlli se un elemento HTML personalizzato viene visualizzato o meno. Se l’attributo \u00e8 true<\/code>un div dovrebbe essere emesso, altrimenti no. Potresti farlo con il tradizionale se-check o utilizzare l’inline if<\/code>e l’ &&<\/code>operatore di JSX. Maggiori informazioni su questo nella guida di React per il rendering condizionale<\/a>.<\/p>\nsave: (props) => { \n const { attributes } = props;\n return (<div>\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}<\/code><\/pre>\nPoich\u00e9 utilizziamo RichText<\/code>questo output non sarebbe visibile nell’editor, ma apparir\u00e0 nel frontend.<\/p>\nTroverai pi\u00f9 componenti nel wp.components<\/code> repository Github<\/a>. La maggior parte di queste cartelle dovrebbe fornire un file readme con della documentazione su come utilizzarlo. Ho imparato la maggior parte di questo guardando in questo repository e anche sui componenti principali di WordPress come hanno fatto.<\/p>\n