Context
Building sites for clients in WordPress is a tricky balance between offering control, and overwhelming users options. While working with a variety of developers two big pain points stood out:
WordPress itself has opted to lean into intrinsic design to keep the editor control panel clean, but 73.4% of WordPress users (n=79) think the editor still needs additional responsive controls.
As a way to add responsive styling, 75% of WordPress Developers (n=20) said they used the custom classes functionality frequently, despite this being a tucked away text field that is frustrating to use.
Solution
It was important the solution to these issues feel "WordPress native" to not distract and clutter the editing interface. I built two lightweight custom plugins to address these pain points.
A responsive layout builder that is capable, but not overwhelming
An extension that dramatically improves the experience of using custom classes within WordPress.
Problem 1: Building Responsive layouts
The WordPress block editor by default provides some basic column and grid functionality, but it does not support multiple breakpoints, or more complex layouts.
Heavy weight page building plugins add true responsive controls, but often the interfaces end up extremely cluttered and difficult to understand.
Another approach these solutions also often lean on contextual editing - where the user must change to "tablet" mode in order to view what the settings are at that breakpoint.
While contextual modes help hide some clutter, it is a frustrating experience particularly for more advanced users who want to be able to view all the settings at a glance. Requiring 3-4 clicks just to view all the settings - let alone edit them - slows advanced users down considerably.
A better solution
After observing developers and content managers work with both these styles of layout builders I put together a prototype for a simpler solution.
All controls are visible at a glance, but breakpoints can be "enabled" as needed. When disabled a breakpoint inherits the settings from below. This is intuitive for any developers who have worked with Bootstrap and other popular frameworks, but a mini-preview of the layout at each breakpoint (even inactive ones) is also provided for those who are less familiar.
Determining where a column will go is as simple as "painting" it on the virtual grid controls. This eliminates the cognitive load with other controls that use combined width + offset to determine positioning.
Early user testing is promising with users being able to replicate given provided layouts faster using this new layout block vs existing options - but there are still some kinks to work out to help make it more intuitive to beginners as well as experienced site managers.
Solution 2: Improving the "Custom Classes" functionality within WordPress
Custom classes provide a mechanism to add styling through the UI, but in a relatively low overhead way, since they do not add excessive options.
Often, developers will disable the custom class pane for content editors and use it as a way to patch in custom styles that novice users will be blissfully unaware of.
More than 75% of WordPress developers said they used the custom classes pane "relatively frequently" and 40% used it "all the time".
Unfortunately, even though this feature is heavily used - it has been neglected from a UX perspective.
Just look at this humble text input field:
There are several irritating issues with how the basic custom class input is implemented in WordPress core:
It is hard to see what classes are actually applied as more than one or two will overflow the tiny input field.
It is cumbersome to delete a specific class since you have to carefully select it within the tiny input and make sure not to delete an extra space, which would break other classes in the process.
It requires free recall of potentially arbitrary class names since there is no autocomplete functionality.
As a solve for some of these issues, I created a plugin that hooks into the editing interface and extends it with a custom classes pane.
This provides a tag style interface that allows you to apply classes one by one and see them as "chip" components that can be easily deleted by clicking an "X" button.
You can also "star" classes, which adds them to a list of favorites. When you start typing to apply classes on other blocks (even across pages or post types) your starred classes will pop up to autocomplete.
These enhancements make using custom classes feel much less hacky, and more like a built in feature for customization.
The plugin also adds an options screen where you can view your entire library of favorited classes. You can add and delete just as you would within an individual post, and you can copy the full class library to import it into another site.
This is particularly handy for agencies that use specific frameworks, so that they can quickly have an autocomplete library of their common classes even starting out fresh on new builds.
One of the nice things about this plugin is it hooks into the existing infrastructure of the editor and basically just acts as a UI wrapper. This means if the plugin is deleted, no data will be lost. All the classes will still be present, they will simply now be presented through the native UI.
Feel free to grab the early alpha of this plugin from my github account. You can also read more about my process for building the plugin on my wordpress related blog.