NO BUG: Highlight / Mark text in Gutenberg (Posts)

Bugs
1

Hello, does anyone else have the following issue:

You’re defining custom colors for the Gutenberg Editor via the functions.php. When you highlight/mark a text with these colors, it doesn’t apply. And yes this is a behavior in Bricks. I have tried this on a fresh installation (local). Does anyone have a solution for this?

2

Hello @Faton,

how did you define the color for Gutenberg? Can you give me the code and all the steps from defining a color to the testing, so I can reproduce it? Maybe best if you record a voiced video. :slight_smile:

Thank you,
Matej

3

Hello Matej

Another Bricks supporter is currently looking at the problem on my site. But I can show you the code:
WPCodeBox2:

<?php 
function mytheme_gutenberg_color_palette() {
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => __( 'Hellgrau' ),
            'slug'  => 'hellgrau',
            'color' => '#999999',
        ),
        array(
            'name'  => __( 'Grün' ),
            'slug'  => 'gruen',
            'color' => '#008000',
        ),
    ));
}
add_action('after_setup_theme', 'mytheme_gutenberg_color_palette');

and this is the Website. fresh installation:

4

Hey @Faton,

as described in the documentation you are responsible for creating the classes.

Themes are responsible for creating the classes that apply the colors in different contexts. Core blocks use “color”, “background-color”, and “border-color” contexts. So to correctly apply “strong magenta” to all contexts of core blocks a theme should implement the classes itself. The class name is built appending ‘has-‘, followed by the class name using kebab case and ending with the context name.

So in your case you have to add the following CSS:

.has-hellgrau-color {
    color: #999999;
}

.has-hellgrau-background-color {
    background-color: #999999
}

.has-hellgrau-border-color {
    border-color: #999999;
}

.has-gruen-color {
    color: #008000;
}

.has-gruen-background-color {
    background-color: #008000
}

.has-gruen-border-color {
    border-color: #008000;
}

Best,

André

1 Like
5

Hello @Faton,

I’ll agree with what @aslotta wrote (thanks!), and that it works like it was intended to. We close the ticket and I’ll mark this topic as a no-bug. :slight_smile:

Additionally, for future reports, please just use one channel (Forum or email), as one is enough - we will see and answer, anywhere you post :wink:

Best regards,
Matej

1 Like
6

Problem solved:

I made the following setting in WPCodeBox 2 in the CSS file:

Where to insert the snippet: Custom Action: after_setup_theme

————-

Hello, thank you for your help. The colors are displayed on the frontend, thanks. But unfortunately, they are not displayed up in the backend, in the editor. Is there a solution for this? It’s really exhausting to work with the Gutenberg Editor.