In the studio this week, we’ve been working 100% in the new block-based editor evaluating 5.0 specific themes and block plugins. It’s been exciting testing out all of the new toys, but I’ve noticed a disturbing pattern, or perhaps the better description is a disturbing anti-pattern.
While we couldn’t make buttons natively in the WordPress editor before, in the wild, wild west of WordPress blocks, we now have a gold mine of button editing options.
It’s a bit of the chicken and the egg scenario here. Is the button functionality or design, plugin or theme or core? If we consider the humble button as one of the most basic page elements as defined by Atomic Design, obviously the style is defined as part of a Style Library. But where should the styling control for that component live?
During my explorations I discovered a plugin that adds it’s own button providing handy underlying functionality that ties into the plugin. However, the button styling is not customizable as a block element. That makes the rounded-edge grey button placed by this plugin not only out of place, but within the context of the site pattern library just wrong.
In this use case, the website owner should be able to change the button options, and indeed other plugins and button blocks provide styling tools like a color picker. But is this block the best place to allow styling?
Opinionated vs. Options
Let’s say we are building a site where we’ve decided the button UI is rounded and blue. Out of the box, the current editor has three style options provided by default including rounded and we can set the color to be blue.
To use that button throughout the site, we need to create the button with a button block multiple times or create a reusable block. As we seen above, depending on what blocks and plugins are installed there can be several additional button blocks to use, all with their own settings and functionality. For the end user the multiple options get confusing quickly, and for a designer or site creator it’s, well, scary.
When considering WordPress block options to build, we need to ask how much control should an end user have when working with their block-powered WordPress sites.
Tweet
For advanced users, having more control is a good thing. The new blocks editor enables them to be able to make choices quickly and easily without diving directly into the code. Presumably that user will know that 10 different button styles on their front end doesn’t provide an optimal visitor experience. However, there are a significant number of users who just want something they can easily drag-n-drop, where the design is done for them, allowing them to focus on their content.
Extending Control
Theme and plugin developers would not want to alter core functionality by removing/replacing a core block. But blocks styles can be extending by Block Style Variations.
Combine this approach with adding a style guide/pattern library that is built in the customizer and extends control of those variations to the admin user and we have a complete solution that provides flexibility while maintaining consistency. We can see a bit of this functionality already in the 2019 theme under the Colors panel.
This approach makes sense based on current user flows and patterns. Making a single or set number of button styles available for use in editor, styled from the customizer, will help preserve the integrity of the site UX/UI, and could also help eliminate the potential clutter of the Settings Sidebar as more plugins take part in the “land grab” (or is that “screen grab”) for user attention.