Custom editor color pallets appear in edit; not on saved front-end posts

Resolved beatty67
(@beatty67)

4 years, 1 month ago
Hi,

Using this link to help me edit color palettes on a site I’m working on:

https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes

…I successfully added a bunch of custom colors to the color picker in Gutenberg / edit mode for posts and pages. BUT when I select a color from this palette, it looks fine in edit mode but does not appear on the front-end after I’ve saved it.

When I click “custom color” link and select and other random color, and save the post, that random color appears.

Here is an example of the code I’ve added to the functions.php file (I list many more colors on the actual file):
```
function mychild_setup_theme_supported_features() {
add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'tangerine', 'mychild' ),
        'slug' => 'tangerine',
        'color' => '#e46644',
    )
) );
}

add_action( 'after_setup_theme', 'mychild_setup_theme_supported_features' );
```
The word “PHONE” should be orange in my example as seen in the first screenshot (LINK 1).

But it’s not (LINK 2).

LINK 1:
https://pasteboard.co/IWZG0u2.jpg

LINK 2:
https://pasteboard.co/IWZGrml.jpg

What am I doing wrong?

— I am using the free version of the Astra theme, btw.

Thanks in advance.

Beatty

Viewing 4 replies - 1 through 4 (of 4 total)

Michael
(@alchymyth)

4 years, 1 month ago
what corresponding styles did you add to the CSS?

https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes

PS: for example in style.css of a child theme of Twenty Twenty, the CSS might need to be added with using !important;

example:
```
.has-tangerine-background-color {
    background-color: #e46644!important;
}
 
.has-tangerine-color {
    color: #e46644!important;
}
```
- This reply was modified 4 years, 1 month ago by Michael.
Thread Starter beatty67
(@beatty67)

4 years, 1 month ago

Yes – your suggestion works. Thank you so much!
Thread Starter beatty67
(@beatty67)

4 years, 1 month ago
Quick follow-up – how do I add “background color” palette to the editor? I currently only have color.

— never mind. It’s working now. Thank you again.
- This reply was modified 4 years, 1 month ago by beatty67.
Dani Long
(@danilong)

3 years, 12 months ago
Michael, is there a way to write that more efficiently if you’ve got multiple colors? (I’m working with a palette of 10 colors).

Also, you’re using the ‘slug’ name (from the original code), yes?

And is this code added to Appearance > Customize > Additional CSS or to Theme Editor > style-rtl.css > /*end of file*/?

FWIW, I’m using Twenty-Twenty.
- This reply was modified 3 years, 12 months ago by Dani Long.
- This reply was modified 3 years, 12 months ago by Dani Long.
- This reply was modified 3 years, 12 months ago by Dani Long.
- This reply was modified 3 years, 12 months ago by Dani Long.