Highlighted words in block editor does not change color

  • Resolved tigmewp

    (@tigmewp)


    2 years ago

    This is a difficult question to define, but here goes:

    I’ve created a custom color palette in my child theme’s functions.php (base theme: Rife-free) and have set up the corresponding CSS styles. Everything works as expected on the frontend as well as in the WordPress blocks backend editor, except when a few words are highlighted in a paragraph. The colour of the words doesn’t change in the editor but the correct colour selection displays on the frontend.

    Below is an example of the HTML when you inspect the highlighted words while in the blocks editor:

    <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-custom-color">example text</mark>

    Thank you in advance for any feedback or help steering me in the right direction.

    • This topic was modified 2 years ago by tigmewp.
Viewing 1 replies (of 1 total)
  • Thread Starter tigmewp

    (@tigmewp)

    I found a (the) solution for the issue where a custom colour palette has been created for a child theme and you:

    • select individual words of a paragraph in the backend block editor;
    • change the colour of the selected words using the highlight text feature; and
    • the colour of the words stay the same colour as the rest of the paragraph in the block editor; but
    • displays the new colour of the highlighted words correctly on the frontend.

    Setting a highlight background colour for individual words displays correctly in both front- and backend from the get-go. It is only the “color:” property of the “<mark>” tag that does not work immediately.

    Step #1. Enqueue a stylesheet for the admin area in your child theme’s functions.php file (replace “example” with your own name):

    /* ADMIN UI MENU: add style sheet to control dashboard ui colours */
function example_custom_admin_style() {
    wp_enqueue_style('example-admin-style', get_stylesheet_directory_uri() . '/admin-ui-style.css');
}
add_action('admin_enqueue_scripts', 'example_custom_admin_style');

    Step #2. Declare styles in the newly created admin-ui-style.css file for each custom palette colour that you use for the mark tag (replace “example” with the same colour name you used for the corresponding custom palette colour):

    <style>
mark.has-example-text-color {
	color: #00ff00;
}

mark.has-example-color {
	color: #ff0000;
}
</style>

    Upload both files (functions.php and admin-ui-style.css) into your child theme folder.

    I hope this solution helps anyone out there that experience the same issue in the WordPress block editor when using a custom colour palette in a child theme.

    • This reply was modified 2 years ago by tigmewp.
Viewing 1 replies (of 1 total)
  • The topic ‘Highlighted words in block editor does not change color’ is closed to new replies.