![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc6b47b23.png\")
<\/a><\/p>\nOra sta aggiornando con successo i nostri attributi durante la scelta dei colori. Puoi vedere che ricorda la tua scelta di colore quando salvi il post.<\/p>\n
Tuttavia, non accade nulla visivamente quando si cambiano i colori. La scelta del colore \u00e8 memorizzata negli attributi, ma non si verifica alcun cambiamento di colore nell’editor, n\u00e9 durante l’anteprima del post. Questo perch\u00e9 abbiamo bisogno di aggiungere codice per le classi e gli stili del blocco. Dobbiamo farlo sia per la edit<\/code>funzione (che \u00e8 per l’editor) che per la save<\/code>funzione (frontend). Questo \u00e8 il prossimo passo.<\/p>\nGestione degli stili di classe e inline inedit<\/code><\/h3>\nAbbiamo bisogno di costruire la classe del nodo del blocco e gli attributi di stile in base all’impostazione del colore scelta. Fortunatamente con withColors<\/code>otteniamo un po’ di automazione in questo. Ricorda che props.textColor<\/code>\u00e8 un oggetto che contiene tutte le informazioni di cui abbiamo bisogno, incluso il nome della classe.<\/p>\nPotremmo fare qualcosa del genere:<\/p>\n
...\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n ...\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n ...<\/code><\/pre>\nIn linea #20<\/code>applichiamo la classe critica e lo stile inline al nodo radice del nostro blocco. Prima di ci\u00f2, costruiamo l’attributo class e inline style controllando l’ props.textColor<\/code>oggetto.<\/p>\nDopo questa modifica, il tuo blocco personalizzato dovrebbe ora essere completamente funzionante nell’editor. Ogni volta che cambi colore, il blocco cambier\u00e0 il colore del testo. Stupendo! Il passaggio finale \u00e8 farlo anche per la save<\/code>funzione, in modo da ottenere queste classi e stili anche nel frontend.<\/p>\nGestione degli stili di classe e inline insave<\/code><\/h3>\nIl concetto di costruire la classe e gli stili inline e applicarli al nodo radice \u00e8 lo stesso save<\/code>di edit<\/code>. Ma c’\u00e8 una differenza fondamentale. In save<\/code>non abbiamo gli oggetti di scena forniti da withColors<\/code>. E non possiamo aggiungere componenti di ordine superiore alla save<\/code>funzione. Quindi nella save<\/code>funzione tutte le informazioni che abbiamo sono gli attributi.<\/p>\n\u00c8 una buona regola empirica evitare di codificare i nomi delle classi "ha". E se WordPress decidesse di modificare questa regola in futuro? Fortunatamente abbiamo una funzione che pu\u00f2 aiutarci a generare i nomi di classe appropriati per noi: getColorClassName()<\/code>.<\/p>\nPrima di dimenticarlo, destrutturiamolo. \u00c8 anche nella wp.blockEditor<\/code>confezione.<\/p>\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;<\/code><\/pre>\nL’utilizzo della getColorClassName()<\/code>funzione richiede due parametri. Prima una stringa per la regola CSS. Poich\u00e9 la nostra impostazione del colore \u00e8 per il colore del testo, forniamo " color<\/code>". Questo dice alla funzione che dovrebbe restituire un nome di classe di "ha-qualcosa-colore" e non "ha-qualcosa-colore-di-sfondo", per esempio. Come secondo parametro dobbiamo fornire il valore dell’attributo.<\/p>\nL’attributo style \u00e8 costruito semplicemente impostando “color” sul valore dell’attributo customTextColor<\/code>, se \u00e8 definito.<\/p>\nsave: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n}<\/code><\/pre>\nE, naturalmente, non dimenticare di applicare la classe e lo stile al nodo radice del tuo blocco; come in linea #12<\/code>.<\/p>\nPS: se stai testando il tuo blocco nell’editor mentre scrivi questo codice, ora riceverai un errore di blocco. Ci\u00f2 accade perch\u00e9 ora abbiamo modificato l’output per la save<\/code>funzione e tutto ci\u00f2 che hai salvato in precedenza \u00e8 in conflitto. Dovrai rimuovere il blocco e aggiungerlo di nuovo.<\/p>\nDopo questa modifica, il tuo blocco ora dovrebbe applicare correttamente anche il colore del testo scelto nel frontend.<\/p>\n
E questo \u00e8 tutto! Ora hai implementato con successo le impostazioni del colore nel tuo blocco. Se sei interessato ad aggiungere pi\u00f9 impostazioni di colore (non solo il colore del testo), continua a leggere.<\/p>\n
Una nota su pi\u00f9 impostazioni di colore<\/h2>\n
A questo punto dovresti essere in grado di implementare pi\u00f9 impostazioni di colore. Potresti voler aggiungere impostazioni per il colore di sfondo, il colore del testo, il colore del bordo o qualsiasi altra cosa per il tuo blocco. In questa sezione far\u00f2 una rapida panoramica di ci\u00f2 che dobbiamo fare per implementare pi\u00f9 impostazioni di colore.<\/p>\n
Supponiamo che io voglia aggiungere anche il colore di sfondo al mio blocco.<\/p>\n
Per prima cosa ho bisogno di definire un nuovo attributo chiamato in modo creativo backgroundColor<\/code>. Definisco customBackgroundColor<\/code>anche un altro attributo.<\/p>\nNella edit<\/code>funzione cambio l’oggetto fornito withColors<\/code>come tale:<\/p>\nwithColors({textColor: 'color', backgroundColor: 'background-color'})<\/code><\/pre>\nQuesto dice withColors<\/code>che il mio textColor<\/code>attributo \u00e8 per la regola CSS ” color<\/code>” (per il colore del testo), e l’attributo backgroundColor<\/code>\u00e8 per la regola CSS ” background-color<\/code>“. withColors<\/code>riconoscer\u00e0 e aggiorner\u00e0 automaticamente anche gli attributi e customTextColor<\/code>.customBackgroundColor<\/code><\/p>\nNel PanelColorSettings<\/code>componente, fornisco un altro oggetto all’array al prop colorSettings<\/code>. Cos\u00ec:<\/p>\n<PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n {\n value: backgroundColor.color,\n onChange: setBackgroundColor,\n label: __('Background color')\n },\n ]}\n\/><\/code><\/pre>\nCon questo dovresti ottenere due impostazioni di colore separate all’interno della finestra Impostazioni per le impostazioni di colore.<\/p>\n
L’ultimo passaggio consiste nella creazione dei nomi e degli stili di classe appropriati in entrambi edit<\/code>e save<\/code>. Questo \u00e8 un passaggio piuttosto semplice in quanto si tratta semplicemente di costruire correttamente una stringa o un oggetto di stile. Ricorda che il nome della tua classe deve supportare pi\u00f9 classi di colore (ad esempio se sono stati scelti sia il colore del testo che il colore dello sfondo). Basta aggiungere uno spazio tra ogni nome di classe.<\/p>\nPS: se devi gestire molti nomi di classi per il tuo blocco, potresti trarre vantaggio dall’installazione del classnames<\/code>pacchetto. Praticamente tutti i componenti in Gutenberg usano questa libreria per combinare pi\u00f9 facilmente i nomi delle classi.<\/p>\nConclusione e codice completo<\/h2>\n
Ora dovresti aver imparato come implementare le impostazioni del colore nel tuo blocco personalizzato. Spero che questo ti sia stato di qualche utilit\u00e0! Ho dovuto aggiungere questa funzionalit\u00e0 al mio progetto e non sono riuscito a trovare alcuna informazione o una buona documentazione. Quindi questo \u00e8 il risultato del consolidamento di tutto ci\u00f2 che ho imparato su questo argomento, dopo molti tentativi ed errori.<\/p>\n
Ecco il codice finale, tutto sommato, per il blocco personalizzato di esempio con l’impostazione del colore del testo:<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;\n\u00a0\nconst BlockWithColorSettings = (props) => {\n const { textColor, setTextColor } = props; \/\/ Props received from withColors\n\u00a0\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n if (textColor.class != undefined) {\n divClass = textColor.class;\n } else {\n divStyles.color = textColor.color;\n }\n }\n return(\n <Fragment>\n <InspectorControls>\n <PanelColorSettings \n title={__('Color settings')}\n colorSettings={[\n {\n value: textColor.color,\n onChange: setTextColor,\n label: __('Text color')\n },\n ]}\n \/>\n <\/InspectorControls>\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n <\/Fragment>\n );\n}\n\u00a0\nregisterBlockType('awp\/colorsettings', {\n title: __('Color Settings Demo'),\n icon: 'carrot',\n category: 'common',\n attributes: {\n textColor: {\n type: 'string'\n },\n customTextColor: {\n type: 'string'\n },\n },\n edit: withColors({textColor: 'color'})(BlockWithColorSettings),\n save: (props) => { \n const { textColor, customTextColor } = props.attributes;\n let divClass;\n let divStyles = {};\n if (textColor != undefined) {\n divClass = getColorClassName('color', textColor);\n }\n if (customTextColor != undefined) {\n divStyles.color = customTextColor;\n }\n return(\n <div className={divClass} style={divStyles}>\n PanelColorSettings Demo\n <\/div>\n );\n }\n});<\/code><\/pre>\nFonte di registrazione:
awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"Questo post approfondisce come aggiungere le impostazioni del colore al blocco Gutenberg personalizzato di WordPress, nel modo corretto, proprio come fanno i blocchi di WordPress.<\/p>\n","protected":false},"author":1,"featured_media":151573,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[939,939,1110,804,804,814,814,844,844,865,865],"tags":[1168],"class_list":["post-233986","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-6","category-n-a","category-php-6","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233986"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233986\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/151573"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151572-61e4cc69ead10.png\")
<\/a><\/p>\n