Změna barevné palety pro Gutenberg

Mám ráda Gutenberg editor, protože je součástí WP jako takového a dobře se s ním pracuje (skoro jako s wordem). A ráda ho nechávám klientům jako editor, protože na psaní blogů a podobných věcí jim to stačí bohatě (a pro složitější mají builder nebo šablonu).

Textovým blokům jde změnit barva a většině modulů i pozadí. Proto je vhodné jim přebarvit barevnou paletu, aby se používaly “týmové” barvy všude.

1. Definice barev v Gutenberg editoru

Nejprve je třeba barevnou paletu definovat, aby ji bylo možné v Gutenbergu používat. To se dělá php kódem (z child theme nebo snippetu).

name je jméno barvy po najetí na ni, slug je třeba pro definici v CSS stylech (viz bod 2) a color je barva, která se zobrazí v Gutenberg editoru jako náhledová.

Pozor: definice smaže starou sadu barev a nahradí je novými!

Následující kód přijde do child theme a nebo do snippetu:

/**
 * Add custom color palette in Block editor.
 */
function jk_gutenberg_custom_colors()
{
    add_theme_support(
        'editor-color-palette', array(
            array(
                'name' => esc_html__('Primary', '@@textdomain'),
                'slug' => 'primary',
                'color' => '#da251c',
            ),
            array(
                'name' => esc_html__('Secondary', '@@textdomain'),
                'slug' => 'secondary',
                'color' => '#0066ad',
            ),
            array(
                'name' => esc_html__('Headings', '@@textdomain'),
                'slug' => 'headings',
                'color' => '#0066ad',
            )
        )
    );
}

add_action('after_setup_theme', 'jk_gutenberg_custom_colors');

Tím se vytvoří stejná paleta pro barvu textů i pozadí.

2. Definice CSS stylů

Jednotlivé barvy je pak třeba nadefinovat v CSS, aby se promítly na frontendu. Klasické CSS, které jde dát kamkoli.

Princip složení

Pro každou barvu je třeba nadefinovat dvě CSS pravidla (kde [SLUG] nahradíte řetězcem definovaným ve slug z 1. bodu):

.has-[SLUG]-background-color {background-color: #da251c;}
.has-[SLUG]-color {color: #da251c;}

Konkrétní příklad

Pro barvy z našeho příkladu do bude např. takto:

.has-primary-background-color {background-color: #da251c;}
.has-primary-color {color: #da251c;}

.has-secondary-background-color {background-color: #0066ad;}
.has-secondary-color {color: #0066ad;}

.has-headings-background-color {background-color: #0066ad;}
.has-headings-color {color: #0066ad;}

Zdroje

• https://wpblockz.com/tutorial/change-the-color-palette-of-gutenberg-block-editor/