Improve block editor UX with MRW Simplified Editor

How to only show the options and blocks you need in the Gutenberg block editor, making it simpler and cleaner for editors, authors, and you.

How to hide options your editor doesn’t need

Look at the two screenshots of the core group block’s style tab below.

By default, you can change color, background, typography, margin, padding, block spacing, min-height, and border settings.

Enable the MRW Simplified Editor, and the options are reduced to just color and typography.

How to show a curated selection of blocks

WordPress core, along with my theme, offers me a total of 106 blocks, of which I use 22. By disabling unused blocks, the block insertion workflow gets a lot simpler. Furthermore, I avoid situations where an editor or post author uses blocks that are not styled properly or that I cannot support.

For instance, I’m disabling the verse, footnotes, and classic block, which may cause all sorts of design and accessibility issues if not implemented carefully.

No external patterns that might hurt privacy.

You probably know where this is going.

WordPress, by default, provides a diverse range of patterns. You can use these for inspiration, but they might not work for your design. Many of them rely on external assets like pictures, potentially causing performance and privacy issues.

Patterns on WordPress are a great feature that I use on many sites, but you should definitely create them within your design guide, using your own assets.

But wait, there is more! (that needs to go)

You probably don’t use multiple H1’s on your page, the default gradients, or the duotones. Nor is it likely that you want inline images floating around in strange places on different devices.

So these options are taken care of by the MRW Simplified Editor by taking them away. The complete list is in the plugin description on WordPress.org.

Lastly, the “Upload” and “Insert from URL” image options are removed from the image block, to encourage use of Media Library, where you should consider site wide alt-texts and captions anyway.

Customize the plugin to meet your needs.

MRW Simplified Editor is an opinionated plugin written by Mark Root-Wiley for his specific needs. But every site is different, so Mark has been so thoughtful to provide a set of filters that we can use to customize the editor experience for our own projects.

I use the inline code or the kbd markup in some blog posts, so these options should stay enabled. I also rely on the audio and video blocks, so they must be available as well.

On the other hand, I don’t want clients to embed content from Issuu or TikTok. If they have needs like that, we will discuss a solution that ensures at least some level of privacy and accessibility.

MRW Simplified Editor customization filters

Here’s the code snippet I use to customize the MRW Simplified Editor plugin here on oldrup.dk

<?php

// MRW Simplified Editor; Unhide specific inline options in the block editor

add_filter("mrw_hidden_block_editor_settings", "oldrup_unhide_inline");
function oldrup_unhide_inline($features)
{
    // Unhide the kbd and code html elements, I use those :)
    return array_diff($features, ["keyboard", "inline-code"]);
}

// MRW Simplified Editor; Unhide, and hide, selected blocks from the block-editor

add_filter("mrw_hidden_blocks", "oldrup_unhide_and_hide_blocks", 10, 2);
function oldrup_unhide_and_hide_blocks($blocks, $context)
{
    // Unhide the following blocks (which are hidden by default)
    $blocks = array_diff($blocks, [
        "core/audio",
        "core/code",
        "core/details",
        "core/preformatted",
        "core/table",
        "core/video",
    ]);

    // In addition to the defaults, hide the following blocks
    $additional_blocks_to_hide = [
        "core/comment-author-name",
        "core/comment-content",
        "core/comment-date",
        "core/comment-edit-link",
        "core/comment-reply-link",
        "core/comments-title",
        "core/embed",
        "core/file",
        "core/html",
        "core/latest-posts",
        "core/template-part",
        "core/social-links",
    ];

    return array_merge($blocks, $additional_blocks_to_hide);
}

// MRW Simplified Editor; Hide specific embeds in the block editor
// Note: Don't hide core/embed above, if you want to use embeds

add_filter("mrw_hidden_embeds", "oldrup_hide_embeds", 10, 2);
function oldrup_hide_embeds($hidden_embeds)
{
    // In addition to the defaults, hide the following unused embeds
    $new_embeds_to_hide = [
        "flickr",
        "imgur",
        "issuu",
        "kickstarter",
        "pinterest",
        "reddit",
        "screencast",
        "scribd",
        "slideshare",
        "soundcloud",
        "speaker-deck",
        "spotify",
        "ted",
        "tiktok",
        "tumblr",
        "twitter",
        "wordpress",
    ];
    return array_merge($hidden_embeds, $new_embeds_to_hide);
}

// Plugin: https://wordpress.org/plugins/mrw-web-design-simple-tinymce/
// Full core block list: https://www.wpexplorer.com/wordpress-core-blocks-list/

Patterns are not affected

If you wonder whether you can insert patterns that contain blocks that are unavailable in the block inserter, you absolutely can. That is the beauty of this combination. You can create, say, a table pattern with accessible placeholder content and styling, and an author can use that pattern even though the blank table block is hidden.

By constraining a content creator to well-tested and self-describing patterns, we help them focus on the content instead of typewriter mechanics.

Create different rules for different roles

Does your editor need access to a different set of blocks and options than your administrator or author? If so, you can create different sets of rules and apply them depending on the role of the logged-in user. You can do it with a few lines of code or by using the “conditions” feature in most code snippet plugins.

This code snippet is run only in the admin area and users having the editor role.
This code snippet is run only in the admin area and users having the editor role.

Compatibility and conclusion

I’m using the MRW Simplified Editor on a handful of sites, and so far, the experience, especially with well-crafted patterns, is absolutely great.

The sites run WordPress 6.4 and PHP 8.1+.

The process of creating customized snippets may require some time; however, it is highly adaptable. By utilizing the code provided above as a starting point, a more user-friendly and simplified block editor experience can be created within minutes.

How can the block editor be more approachable to the average Joe? Please let me know in the comments below.

Read more about Bjarne Oldrup, Sønderborg

Bjarne Oldrup

Bjarne is a web developer with a passion for the sustainable, inclusive and respectful internet.

With a background as a computer technician anno 1992, he worked as a programmer, sysadmin and network specialist. Today, he focuses on website carbon footprint, web accessibility and GDPR compliance.

WordPress, HTML, CSS and LiteSpeed hosts are Bjarne's favourite tools, and the open-source community is his comfort zone.

Leave a Reply

Your email address will not be published. Required fields are marked *