[Resolved] Custom Block Palette Text Colors Don’t Apply On Front End Using This Code

Home Forums Support Custom Block Palette Text Colors Don’t Apply On Front End Using This Code

  • This topic has 9 replies, 3 voices, and was last updated 2 weeks ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1433841
    itesla

    Hello
    I have added a code shared by developer of GP theme here in a Forum topic to replace the default Block Text colors, but it does not apply on front end only in backend, and that is the reason for my topic here.

    The code i used is this one:

    add_action( 'after_setup_theme', function() {
        add_theme_support( 'editor-color-palette', array(
            array(
                'name'  => __( 'Blue' ),
                'slug'  => 'blue',
                'color' => '#59BACC',
            ),
            array(
                'name'  => __( 'Green' ),
                'slug'  => 'green',
                'color' => '#58AD69',
            ),
            array(
                'name'  => __( 'Orange' ),
                'slug'  => 'orange',
                'color' => '#FFBC49',
            ),
            array(
                'name'  => __( 'Red' ),
                'slug'  => 'red',
                'color' => '#E2574C',
            ),
        ) );
    } );

    My WP posts are protected only for members access!
    I can’t give Admin access!
    The only thing is i can do is inspect element.
    It show this as an example when inspecting my new post with custom colors specified in functions php file using the above code with more colors added by me:

    <p class="has-golden-color has-text-color"><strong>PP_VDD_MAIN = {3.7V/4.3V} PWR</strong></p>
    <p class="has-plum-color has-text-color"><strong>PP1V2_CODEC_S2 = {1.2V} PWR</strong></p>
    <p class="has-cherry-color has-text-color"><strong>PP1V8_S2 = {1.8V} PWR</strong></p>

    If i look at non updated post with my new colors and i see that in place of “has-text-color” there is specified a color code but here it show as without color.
    Hope this is enough to troubleshoot if not i can look and provide more info per request.
    Thank you.

    #1433894
    David
    Staff
    Customer Support

    Hi there,

    just to be clear your custom colors work if you create a new post or update an existing post?

    #1434376
    itesla

    The colors work only when i add them in Admin backend, after the post is published or if i edit old post with my custom added colors they are black without color on front end, even when i do Preview of post there are no colors.
    Hope this make sense.

    P.s. i posted about this on WP forums, they gave me a code which looks similar to this one found here on GP forums, also they did not tell me where in WP files are stored the default Block colors so i can edit them or add new ones, i get the feeling that they hide something or as i suspect the Block text colors load remotely from some SVG file.

    #1435016
    David
    Staff
    Customer Support

    Could you point me to a post/page where i can see the issue and a screenshot of the editor – so i can see whats missing.

    #1435285
    itesla

    Hello
    See this backend photo.
    Then visit this test page, it does not matter is it post or page same issue, no colors are applied.
    Hope now is sufficient to detect where is the problem.
    Thank you.

    #1435864
    Tom
    Lead Developer
    Lead Developer

    Ah, it looks like core blocks don’t add the color, they add a utility class with the slug. So you need to do this:

    .has-blue-color {
        color: #59BACC;
    }

    I’m not sure why they do this, but it seems to be the case.

    Our GenerateBlocks plugin outputs the actual color without the need for the utility classes if you’re using its blocks.

    #1436383
    itesla

    Hello Tom
    But where to add this, in place of what and between what?
    Thank you!

    #1436413
    itesla

    Ok i have added it in style css file and after editing or i did not look before edit the post, the color has applied so now as i understand i must create this for each color right?
    Do the codes must be both the ones in functions and this to create in style css right?
    Sorry for too many questions but need to make sure which codes do i keep.
    Thank you.

    #1436440
    itesla

    Ok as i have foresee, the codes in functions php are for backend and codes in style css are for frontend, so they must be created and work together, they work hand in hand.
    Hope this will be useful for someone else.

    Thank you all for help, case closed.

    #1436444
    David
    Staff
    Customer Support

    Yes, you need to apply the PHP Function and create a CSS rule for each of the colors you set in the function.

    Then its case of copying and pasting Toms CSS – changing the -color and the #color property

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.