March 1

1 comments

Change how Gutenberg looks

By NickLitten

March 1, 2022

Gutenberg, moment

Change how Gutenberg looks when editing a page

1 – I like the WordPress Gutenberg Editor

OK… OK…. I know there are two camps of people in the WordPress content editing world. There are those that like the new layout of the GUTENBERG editor with its block functions and, those that prefer the old tried and tested TINYMCE layout:

Change how gutenberg looks

2 – I don’t like how it defaults to a plain black on white edit layout

I’m using Gutenberg to edit this block and while this plain editing style doesn’t bother me, it would be nice to see the final layout while I am editing.

For example, this blog page looks like this while I am in edit:

Change how gutenberg looks

3 – I wish it was a true GUI editor

When I finally publish this blog it will look completely different suing all my themes formatting. I wish I could switch in and out of the final layout form when editing in Gutenberg.

For example, if I preview this page how it looks right now, it will look like this in final layout:

Change how gutenberg looks

I can hear you thinking –

“That doesn’t look that different, why is this English bloke waffling about this?”

Your Brain

If you use a dark theme, writing on white text, or any other kind of funky CSS layout changes, then you might just want to see what the final layout looks like.

Yesterday, I was helping a friend of mine, Gabriel Powter to set up his new blogging website. He likes a dark website with white text and was fighting a battle when adding the text in plain Gutenberg mode (because it showed as black on white background by default) and he found it confusing to then see it colored the other way around on the live site when it was published.

With some WordPress shenanigans, we can over-ride how Gutenberg looks in the EDIT mode.

Let’s Change how Gutenberg looks

We are going to add this PHP code to inject some CSS to WordPress to change how it looks in Gutenberg Edit mode:

function gb_gutenberg_admin_styles() {
    echo '<style>
            /* Set main elements to BLACK background. Obviously you could add any CSS you like here */
            .wp-block, .wp-block[data-align="wide"], .wp-block[data-align="full"] {
                background-color: black;
            }
          </style>';
}

add_action('admin_head', 'gb_gutenberg_admin_styles');

How does this work?

The gb_gutenberg_admin_styles() function is simply saying add this CSS to the .wp-block WordPress block. In this case, the only CSS I am changing is to say “make the background of this block BLACK”

The add_action is then saying “automatically run the gb_gutenberg_admin_styles() function whenever the Gutenberg editor is launched”.

How do we add this?

Adding this to your themes functions.php file or use this custom plugin to make life easy.

Grab the rather excellent My Custom Functions from WordPress plugin installer:

Change how gutenberg looks with my custom functions
Change how gutenberg looks 1

Once you have download and installed the plugin, activate it and paste in the CSS snippet like this:

Change how gutenberg looks

Now if you edit a page with it turned OFF you will see this:

Change how gutenberg looks

Here we can see Gabe’s problem — one of his many problems 😉 — because the native Gutenberg text is in white, making it unreadable on his white background.

Activate the FUNCTION to change Gutenberg style in Edit

Click ON in the My Custom Functions plugin:

Change how gutenberg looks

and BOOM the edit screen now shows using our custom CSS

Change how gutenberg looks

I know this quick technique isn’t beautiful. It’s not pretending to be a glorious WYSIWYG editor like Thrive Architect, Divi or Elementor, but it’s a technique to allow you to edit that lay out all you like.

When published, his blog still looks the same as well 🙂

Moment music gabriel powter

Hope this helps someone out!

  • Reading your article has greatly helped me, and I agree with you. But I still have some questions. Can you help me? I will pay attention to your answer. thank you.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Join the IBM i Community for FREE Presentations, Lessons, Hints and Tips

    >