Palette Colori

Abbiamo visto che nel CMS si lavora a componenti che vengono poi assemblati dinamicamente per creare pagine. Tuttavia, ogni sito ha tipicamente una palette di colori che tutti i componenti devono rispettare. Questa ricetta spiega come progettare i componenti in modo che aderiscano ad una palette di colori comune.

E' possibile impostare la palette colori in due modi:

• a livello di pagina
• a livello di pagina di layout

Se si sta costruendo una landing page composta da una sola pagina, è sufficiente impostarla a livello di pagina, mentre se il sito è composto da più pagine conviene utilizzare una pagina di layout, in modo che tutte le pagine possano condividere la stessa palette. Per ulteriori informazioni sulle pagine di layout si rimanda all'apposita sezione.

In entrambi i casi, è possibile impostare la palette di colori nella sezione Settings. Una volta scelti i colori, questi saranno accessibili sul frontend. Per accedere agevolemente alla palette dai componenti si consiglia di usare l'hook usePalette(), ad esempio:

const palette = usePalette();
const bgColor = palette.background_color;
// per un elenco dei colori disponibili si consiglia di ispezionare direttamente il JSON restituito dall'API.

L'hook usePalette() verifica se la pagina è associata ad un layout o meno. Nel primo caso, restituirà la palette della pagina di layout, altrimenti quello della pagina corrente. In questo modo i componenti sviluppati funzionano in entrambi i casi, facilitandone il riuso.

Nota: l'oggetto restituito da usePalette() contiene anche gli altri attributi di pagina, quali ad esempio il titolo e lo slug. Questo perché ad oggi la palette viene salvata insieme agli altri attributi di pagina. Questa situazione potrebbe cambiare in futuro, per cui si consiglia di usare questi hook in modo da essere indipendenti dalla struttura del JSON di pagina.

Override Colori Palette (avanzato)

Immaginiamo di voler dare la massima flessibilità nella gestione dei colori per un sito composto da più pagine. Nella pagina di layout mettiamo la palette comune a tutte le pagine. In una specifica pagina, possiamo impostare una palette che fa override della palette principale, ad esempio perché vogliamo cambiare il colore dei componenti di questa pagina.

Se vogliamo permettere questa flessibilità, non bisogna usare usePalette(), ma un hook leggermente più complesso che verifica se a livello di pagina è stato impostato un determinato colore della palette (es. background) e usare quello anziché quello della pagina di layout. Gli hook forniti nel connettore, per semplicità, non gestiscono questo caso, ma è possibile creare un hook di questo tipo abbastanza facilmente.

Un'altra possibilità è di far scegliere, per un certo tipo di component, quale colore della palette usare come sfondo. In molti siti ci sono pagine che contengono lo stesso componente ripetuto, con variazioni del colore di sfondo. In tal caso, possiamo aggiungere al componente un attributo, es. bgColor, di tipo Colore. Se l'utente imposta un colore, viene usato quest'attributo. In caso contrario, come fallback si utilizza il colore della palette. Siccome spesso il colore di sfondo viene comunque dalla palette, il selettore di colori del CMS suggerisce i colori della palette, anche se poi offre la possibilità di scegliere qualsiasi colore.

I colori della palette del selettore vengono dalla pagina di layout, se è stata agganciata alla pagina che ospita il componente, o dalla pagina stessa.