Questo post approfondirà come aggiungere le impostazioni del colore al blocco Gutenberg di WordPress personalizzato. Impareremo come aggiungere lo stesso componente delle impostazioni del colore, che offre la possibilità di scegliere tra i colori della tavolozza e il colore personalizzato, come utilizzano molti dei blocchi predefiniti di WordPress.
Questo è ciò che aggiungeremo al nostro blocco personalizzato:
Usando i componenti di Gutenberg possiamo implementare molto facilmente questa sezione di tavolozza/colore nel nostro blocco personalizzato. Puoi definire le impostazioni del colore per influenzare qualsiasi colore desideri; sfondo, colore del testo, colore del bordo o qualsiasi altra cosa. Puoi anche aggiungere tutte le impostazioni di colore che desideri all’interno di questo pannello.
Prima di approfondire il codice, ci sono alcune cose di cui devi essere a conoscenza. Non saltare al codice poiché la sezione successiva spiegherà molto perché il codice deve farlo come fa.
Quello che devi sapere prima
I componenti per l’implementazione delle impostazioni di tavolozza/colore sono PanelColorSettingse withColorsdal wp.blockEditorpacchetto. Il componente withColorsè un cosiddetto componente di ordine superiore e deve essere implementato in modo leggermente diverso rispetto al semplice output di un componente normale. Entrerò un po’ più nel dettaglio più avanti. Ma prima dobbiamo essere consapevoli delle nozioni di base su come Gutenberg gestisce le impostazioni del colore dei blocchi.
Come i blocchi Gutenberg gestiscono le impostazioni del colore
Ci sono alcune regole su come Gutenberg gestisce le impostazioni dei colori nei blocchi. Se hai mai disegnato un tema supportato da Gutenberg prima, probabilmente hai già familiarità con queste regole. Li esamineremo comunque rapidamente perché dobbiamo gestirlo nel nostro codice a blocchi.
- Quando viene scelto un colore della tavolozza, l’elemento del blocco del nodo otterrà una classe di un determinato modello. La lezione inizia con ”
has-“, e poi lo slug della tavolozza viene dopo. Il finale dipende da quale elemento dovrebbe influenzare il colore. Per il colore del testo termina con ”-color“. Per il colore di sfondo termina con ”-background-color“. Ad esempio, un blocco con una tavolozza di colore “rosso" scelto come colore di sfondo otterrà la classe ”has-red-background-color“. - Quando viene scelto un colore personalizzato (dal colorpicker), l’elemento del blocco del nodo otterrà uno stile in linea con il codice esadecimale. Ad esempio un colore personalizzato #DD0000 scelto per il colore di sfondo riceverà l’attributo ”
style="background-color: #DD0000;“.
Quando implementiamo le impostazioni del colore per il nostro blocco, dovremo implementare la classe e lo stile inline corretti. Lo faremo alla fine di questo tutorial.
Come lavorare conwithColors
Come accennato in precedenza withColorsè un componente di ordine superiore. Ciò significa sostanzialmente che è un componente che prende un componente e restituisce un nuovo componente. Nel componente restituito otteniamo utili oggetti di scena dal componente di ordine superiore. Per dirla semplicemente, useremo withColorsper restituire il nostro componente per il nostro blocco personalizzato. Il nostro componente a blocchi ottiene i supporti necessari per lavorare con i colori da withColors.
Il componente withColorsgestisce lo stato e molte funzionalità per lavorare con i colori. E otteniamo molta automazione in questo processo. Questo è molto utile per capire se il colore scelto è un colore della tavolozza (dobbiamo aggiungere una classe) o un colore personalizzato (dobbiamo aggiungere uno stile in linea). withColorssemplifica molto il processo di memorizzazione del colore scelto, qualunque esso sia, negli attributi del nostro blocco. A proposito di attributi..
Attributi ewithColors
Ovviamente il tuo blocco ha bisogno di attributi per memorizzare il colore scelto. Per beneficiare dell’automazione di withColor per la memorizzazione del colore corretto è necessario definire due attributi per ciascuna impostazione del colore. Uno per memorizzare lo slug del colore della tavolozza e un altro per memorizzare il codice esadecimale. Ci sono alcune regole però.
Supponiamo di voler aggiungere un’impostazione di colore per il colore del testo del blocco, quindi decidi di definire un attributo chiamato in modo appropriato " textColor". Sarà quindi necessario definire un altro attributo nel modello ” customYourOriginalAttribute“. In questo esempio il secondo attributo dovrà essere denominato ” customTextColor“. Attenzione al camelCase (maiuscolo) qui. Seguendo questo schema withColorsautomaticamente:
- Se è stato scelto un colore della tavolozza, l’attributo ”
textColor” conterrà lo slug della tavolozza. - Se è stato scelto un colore personalizzato, ”
customTextColor” verrà popolato con il codice esadecimale.
Questi due lavorano in tandem. Se viene scelto un colore personalizzato, textColorsarà automaticamente undefinede viceversa.
E infine, un’ultima cosa da ricordare: non sarà necessario utilizzare setAttributes()per aggiornare gli attributi del colore! Gli oggetti di scena forniti da withColorsincludono una funzione che aggiorna automaticamente i tuoi attributi per te. Tutto quello che devi fare è passare questa funzione onChangeall’evento al PanelColorSettingscomponente e i tuoi attributi verranno aggiornati automaticamente.
Ok, è ora di vedere tutto questo in pratica!
Implementazione delle impostazioni del colore in un blocco personalizzato
Per iniziare, ho un blocco personalizzato piuttosto inutile che non fa altro che visualizzare un testo codificato. Questo rende facile separare ciò di cui abbiamo bisogno per codificare per aggiungere le impostazioni del colore. Ho una serie di tutorial su come creare i tuoi blocchi personalizzati se sei interessato a saperne di più.
Nota: sto scrivendo tutto il codice in ES6/ESNext. Ciò include le funzioni delle frecce che richiedono un’attenzione particolare nella configurazione di Babel/webpack. Se ricevi errori su alcuni dei codici seguenti, segui la mia guida su come configurare Webpack e Babel per ES6/ESNext o regola il codice per non utilizzare "sintassi sperimentali".
Questo è il mio blocco personalizzato di base prima di fare qualsiasi cosa con le impostazioni del colore:
const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const BlockWithColorSettings = (props) => {
return(
<div>
PanelColorSettings Demo
</div>
);
}
registerBlockType('awp/colorsettings', {
title: __('Color Settings Demo'),
icon: 'carrot',
category: 'common',
edit: BlockWithColorSettings,
save: (props) => {
return(
<div>
PanelColorSettings Demo
</div>
);
}
});È piuttosto semplice. Si noti che la editfunzione si riferisce semplicemente a un componente separato, BlockWithColorSettings, invece di scriverlo in linea. Ciò semplifica l’implementazione in un secondo momento withColors.
Ok, è ora di implementare le impostazioni del colore nel nostro blocco! Ad esempio, voglio impostare il colore del testo.
Aggiunta di attributi
Come accennato in precedenza, è necessario definire due attributi per ciascuna impostazione del colore. E dobbiamo prestare particolare attenzione alla loro denominazione. Voglio aggiungere un attributo di colore del testo, quindi sto nominando l’attributo textColor. Ciò significa che aggiungerò anche un attributo customTextColor. Entrambi dovrebbero essere di tipo string.
...
registerBlockType('awp/colorsettings', {
title: __('Color Settings Demo'),
icon: 'carrot',
category: 'common',
attributes: {
textColor: {
type: 'string'
},
customTextColor: {
type: 'string'
},
},
edit: BlockWithColorSettings,
save: (props) => {
...I nostri attributi sono pronti per memorizzare l’impostazione del colore del testo del blocco. Ora è il momento di implementare withColorse PanelColorSettings.
ImplementazionewithColors
Come accennato in precedenza withColors, è un componente di ordine superiore che dovrebbe richiedere un componente per essere restituito. Ovviamente vogliamo che restituisca il nostro componente di modifica, BlockWithColorSettings. Ma come parametro per withColorsfornire un oggetto.
Nell’oggetto passato withColorsdobbiamo dire withColorsquale attributo vogliamo usare per memorizzare il colore e che tipo di elemento colorerà (nel nostro caso il colore del testo, che significa "colore" della regola CSS). L’informazione sulla regola CSS assicura che i nomi delle classi restituiti siano corretti. Poiché questo è il colore del testo, vogliamo nomi di classe come "has-color".
Prima un po’ di destrutturazione in alto. withColorsrisiede nel wp.blockEditorpacchetto.
const { withColors } = wp.blockEditor;Cambieremo la editfunzione in:
...
attributes: {
...
},
edit: withColors({textColor: 'color'})(BlockWithColorSettings),
save: (props) => {
...Con questo codice il nostro componente BlockWithColorSettingsriceverà alcuni prop aggiuntivi:
props.textColor: È un oggetto che consiste in tutte le informazioni sul colore scelto. Se è stato scelto un colore della tavolozza, memorizzerà le proprietà per il codice esadecimale, lo slug della tavolozza, il nome della classe e altro. Se è stato scelto un colore personalizzato, l’oggetto conterrà il codice esadecimale. Il codice esadecimale si trova sempre nella proprietàcolor. E il nome della classe, (solo se è stato scelto un colore della tavolozza) verrà impostato nella proprietàclass.props.setTextColor: una funzione che aggiornerà i nostri attributi per noi. Forniamo questo per l’onChangeevento delle impostazioni del colore come vedremo in seguito. La funzione aggiornerà entrambitextColore glicustomTextColorattributi. Poiché abbiamo seguito le regole di denominazione, si aggiornerà automaticamentecustomTextColoranche se non abbiamo mai fornito questo nome di attributo.
Si noti che la funzione "set" fornita come prop seguirà la regola: " setYourAttributeName". Poiché abbiamo fornito textColor, la funzione è denominata setTextColor. Se invece nominassimo il nostro attributo awesomeColore lo withColorsfornissimo nell’oggetto, la funzione set sarebbe denominata setAwesomeColor().
ImplementazionePanelColorSettings
Il passaggio successivo è l’implementazione della sezione Ispettore effettiva. Per fare ciò aggiungiamo PanelColorSettingsall’interno un InspectorControlscomponente. Poiché React richiede che tutto sia all’interno di un nodo radice, utilizziamo anche Fragment(from wp.elements) per avvolgere tutto all’interno.
Prima un po’ di destrutturazione nella parte superiore del file:
const { Fragment } = wp.element;
const { InspectorControls, PanelColorSettings, withColors } = wp.blockEditor;E aggiorniamo il nostro BlockWithColorSettingscomponente in qualcosa del genere:
const BlockWithColorSettings = (props) => {
const { textColor, setTextColor } = props; // Props received from withColors
return(
<Fragment>
<InspectorControls>
<PanelColorSettings
title={__('Color settings')}
colorSettings={[
{
value: textColor.color,
onChange: setTextColor,
label: __('Text color')
},
]}
/>
</InspectorControls>
<div>
PanelColorSettings Demo
</div>
</Fragment>
);
}Come puoi vedere in linea #2destrutturiamo gli oggetti di scena ricevuti da withColors, textColore setTextColor. Tieni presente che props.textColorè l’oggetto ricevuto da withColors, ed props.attributes.textColorè l’attributo. Non abbiamo bisogno di fare riferimento all’attributo però.
Come supporto al componente PanelColorSettingspossiamo fornire un titolo per la sezione (titolo nella casella pieghevole in Inspector). La cosa importante qui è il supporto colorSettingsin cui dobbiamo fornire una serie di oggetti per l’impostazione del colore. Per ogni impostazione di colore (attualmente ne abbiamo solo una) dobbiamo fornire alcune proprietà. La proprietà valueprevede il codice esadecimale attualmente scelto (anche se è stato scelto un colore della tavolozza). Questo ci viene fornito nel textColorpuntello, all’interno della proprietà color. Per la onChangeproprietà forniamo semplicemente la funzione “set” fornita da withColors, setTextColor. E infine dovremmo dare un labelin modo che l’utente sappia quale elemento influenzerà questo colore. Apparirà proprio sopra l’area di scelta di un colore.
Ecco come appare il nostro componente nell’editor di Gutenberg in questo momento:
Ora 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.
Tuttavia, non accade nulla visivamente quando si cambiano i colori. La scelta del colore è memorizzata negli attributi, ma non si verifica alcun cambiamento di colore nell’editor, né durante l’anteprima del post. Questo perché abbiamo bisogno di aggiungere codice per le classi e gli stili del blocco. Dobbiamo farlo sia per la editfunzione (che è per l’editor) che per la savefunzione (frontend). Questo è il prossimo passo.
Gestione degli stili di classe e inline inedit
Abbiamo bisogno di costruire la classe del nodo del blocco e gli attributi di stile in base all’impostazione del colore scelta. Fortunatamente con withColorsotteniamo un po’ di automazione in questo. Ricorda che props.textColorè un oggetto che contiene tutte le informazioni di cui abbiamo bisogno, incluso il nome della classe.
Potremmo fare qualcosa del genere:
...
const BlockWithColorSettings = (props) => {
const { textColor, setTextColor } = props; // Props received from withColors
let divClass;
let divStyles = {};
if (textColor != undefined) {
if (textColor.class != undefined) {
divClass = textColor.class;
} else {
divStyles.color = textColor.color;
}
}
return(
<Fragment>
<InspectorControls>
...
</InspectorControls>
<div className={divClass} style={divStyles}>
PanelColorSettings Demo
</div>
...In linea #20applichiamo la classe critica e lo stile inline al nodo radice del nostro blocco. Prima di ciò, costruiamo l’attributo class e inline style controllando l’ props.textColoroggetto.
Dopo questa modifica, il tuo blocco personalizzato dovrebbe ora essere completamente funzionante nell’editor. Ogni volta che cambi colore, il blocco cambierà il colore del testo. Stupendo! Il passaggio finale è farlo anche per la savefunzione, in modo da ottenere queste classi e stili anche nel frontend.
Gestione degli stili di classe e inline insave
Il concetto di costruire la classe e gli stili inline e applicarli al nodo radice è lo stesso savedi edit. Ma c’è una differenza fondamentale. In savenon abbiamo gli oggetti di scena forniti da withColors. E non possiamo aggiungere componenti di ordine superiore alla savefunzione. Quindi nella savefunzione tutte le informazioni che abbiamo sono gli attributi.
È 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ò aiutarci a generare i nomi di classe appropriati per noi: getColorClassName().
Prima di dimenticarlo, destrutturiamolo. È anche nella wp.blockEditorconfezione.
const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;L’utilizzo della getColorClassName()funzione richiede due parametri. Prima una stringa per la regola CSS. Poiché la nostra impostazione del colore è per il colore del testo, forniamo " color". 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.
L’attributo style è costruito semplicemente impostando “color” sul valore dell’attributo customTextColor, se è definito.
save: (props) => {
const { textColor, customTextColor } = props.attributes;
let divClass;
let divStyles = {};
if (textColor != undefined) {
divClass = getColorClassName('color', textColor);
}
if (customTextColor != undefined) {
divStyles.color = customTextColor;
}
return(
<div className={divClass} style={divStyles}>
PanelColorSettings Demo
</div>
);
}E, naturalmente, non dimenticare di applicare la classe e lo stile al nodo radice del tuo blocco; come in linea #12.
PS: se stai testando il tuo blocco nell’editor mentre scrivi questo codice, ora riceverai un errore di blocco. Ciò accade perché ora abbiamo modificato l’output per la savefunzione e tutto ciò che hai salvato in precedenza è in conflitto. Dovrai rimuovere il blocco e aggiungerlo di nuovo.
Dopo questa modifica, il tuo blocco ora dovrebbe applicare correttamente anche il colore del testo scelto nel frontend.
E questo è tutto! Ora hai implementato con successo le impostazioni del colore nel tuo blocco. Se sei interessato ad aggiungere più impostazioni di colore (non solo il colore del testo), continua a leggere.
Una nota su più impostazioni di colore
A questo punto dovresti essere in grado di implementare più 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ò una rapida panoramica di ciò che dobbiamo fare per implementare più impostazioni di colore.
Supponiamo che io voglia aggiungere anche il colore di sfondo al mio blocco.
Per prima cosa ho bisogno di definire un nuovo attributo chiamato in modo creativo backgroundColor. Definisco customBackgroundColoranche un altro attributo.
Nella editfunzione cambio l’oggetto fornito withColorscome tale:
withColors({textColor: 'color', backgroundColor: 'background-color'})Questo dice withColorsche il mio textColorattributo è per la regola CSS ” color” (per il colore del testo), e l’attributo backgroundColorè per la regola CSS ” background-color“. withColorsriconoscerà e aggiornerà automaticamente anche gli attributi e customTextColor.customBackgroundColor
Nel PanelColorSettingscomponente, fornisco un altro oggetto all’array al prop colorSettings. Così:
<PanelColorSettings
title={__('Color settings')}
colorSettings={[
{
value: textColor.color,
onChange: setTextColor,
label: __('Text color')
},
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __('Background color')
},
]}
/>Con questo dovresti ottenere due impostazioni di colore separate all’interno della finestra Impostazioni per le impostazioni di colore.
L’ultimo passaggio consiste nella creazione dei nomi e degli stili di classe appropriati in entrambi edite save. Questo è 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ù 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.
PS: se devi gestire molti nomi di classi per il tuo blocco, potresti trarre vantaggio dall’installazione del classnamespacchetto. Praticamente tutti i componenti in Gutenberg usano questa libreria per combinare più facilmente i nomi delle classi.
Conclusione e codice completo
Ora dovresti aver imparato come implementare le impostazioni del colore nel tuo blocco personalizzato. Spero che questo ti sia stato di qualche utilità! Ho dovuto aggiungere questa funzionalità al mio progetto e non sono riuscito a trovare alcuna informazione o una buona documentazione. Quindi questo è il risultato del consolidamento di tutto ciò che ho imparato su questo argomento, dopo molti tentativi ed errori.
Ecco il codice finale, tutto sommato, per il blocco personalizzato di esempio con l’impostazione del colore del testo:
const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { InspectorControls, PanelColorSettings, withColors, getColorClassName } = wp.blockEditor;
const BlockWithColorSettings = (props) => {
const { textColor, setTextColor } = props; // Props received from withColors
let divClass;
let divStyles = {};
if (textColor != undefined) {
if (textColor.class != undefined) {
divClass = textColor.class;
} else {
divStyles.color = textColor.color;
}
}
return(
<Fragment>
<InspectorControls>
<PanelColorSettings
title={__('Color settings')}
colorSettings={[
{
value: textColor.color,
onChange: setTextColor,
label: __('Text color')
},
]}
/>
</InspectorControls>
<div className={divClass} style={divStyles}>
PanelColorSettings Demo
</div>
</Fragment>
);
}
registerBlockType('awp/colorsettings', {
title: __('Color Settings Demo'),
icon: 'carrot',
category: 'common',
attributes: {
textColor: {
type: 'string'
},
customTextColor: {
type: 'string'
},
},
edit: withColors({textColor: 'color'})(BlockWithColorSettings),
save: (props) => {
const { textColor, customTextColor } = props.attributes;
let divClass;
let divStyles = {};
if (textColor != undefined) {
divClass = getColorClassName('color', textColor);
}
if (customTextColor != undefined) {
divStyles.color = customTextColor;
}
return(
<div className={divClass} style={divStyles}>
PanelColorSettings Demo
</div>
);
}
});