The WordPress Block Editor, introduced last December, allows you to set any colour you want for elements such as text and background for some block types.
By default, the editor includes a colour palette and a “Custom Colour” colour picker, allowing you to set any colours you want.
We strongly recommend not selecting colours using the colour picker except in some one-off situations.
Maintaining consistency across a site is difficult, and updating a site’s colour scheme can become almost impossible.
Colours set with the default palette or the colour picker are hard coded into the page.
The default colour palette sets colours using colour-specific class names, resulting in hard-coded colour classes such as:
<p class="has-vivid-green-cyan-color has-very-dark-gray-background-color">Lorem ipsum ...</p>The colour picker is even more of a problem, setting colours using inline style, such as:
<p style="background-color:#f58cc6;color:#2717d7">Lorem ipsum …</p>With colours hard coded in this way, site-wide changes to colour schemes are difficult and time-consuming.
To change a colour scheme that has been set with the colour picker would mean going through every page of your site and individually modifying every instance where colours have been set.
The approach we recommend is to use a custom colour palette.
This provides a colour palette matched to your site design which makes consistent colour selection quicker and easier and can also be used to define colours by type rather than colour.
A custom colour palette can be set up to generate code such as:
<p class="has-light-color has-dark-background-color">Lorem ipsum …</p>Using non-colour-specific class names, such as has-light-color and has-dark-background-color, then defining the actual colours in your theme’s stylesheet means that a site-wide colour scheme can be modified by editing the set colours in a few lines of code.
UPDATE: Note that some WordPress core blocks (eg, Pullquote) and third-party blocks use inline colour style rather than palette names to set colours, and therefore won’t update if the palette colours are changed.