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

  • Resolved beatty67

    (@beatty67)


    4 years, 9 months ago

    Hi,

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

    https://developer.www.ads-software.com/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)

  • what corresponding styles did you add to the CSS?

    https://developer.www.ads-software.com/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, 9 months ago by Michael.
    Thread Starter beatty67

    (@beatty67)

    Yes – your suggestion works. Thank you so much!

    Thread Starter beatty67

    (@beatty67)

    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, 9 months ago by beatty67.

    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 4 years, 7 months ago by Dani Long.
    • This reply was modified 4 years, 7 months ago by Dani Long.
    • This reply was modified 4 years, 7 months ago by Dani Long.
    • This reply was modified 4 years, 7 months ago by Dani Long.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom editor color pallets appear in edit; not on saved front-end posts’ is closed to new replies.