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;}