Recently I’ve been working on some WordPress projects that use utility class libraries like bootstrap and Tailwind css, this often means applying some custom classes within the Gutenberg editor using the advanced pane when editing blocks.
While this allows for easy styling, I’ve found it to be far from ideal and very error prone:
- First, it’s hard to see what is actually applied if there are more than one or two classes since its a tiny input field.
- Second, there is no validation. It’s easy to accidentally omit a space and not notice, or if you are copying in from stylesheets maybe you forget and include a “.” as if you were referencing the selector.
- Finally, its annoying to delete a specific class (again if there are multiple utilities applied) as you have to carefully select it within the tiny input and make sure you don’t delete too many spaces and mess up the others inadvertently.
Introducing “Better Custom Classes for Gutenberg”
To deal with this, I created a plugin that adds a new pane to the editor when a block is selected called “Custom Classes” this pane uses a tag-like input system where you can enter classes and hit space (or enter) and it creates a pill indicator below.
Now, you can see all classes applied at a glance, and you can easily delete them by hitting the “X” without inadvertently affecting others.
If you enter a class with strange characters the pill will highlight red to let you know you may have made a mistake.
Finally, if you need to copy classes to a new block you can simply hit the “Copy All Classes” button and you are good to go. No more trying to select everything in the input and accidentally missing the first or last one.
Integration with old class system
This plugin hooks into the existing class input under the advanced pane. This means when activated, any previously applied classes will still be there and will be automatically represented in the new interface as well.
Similarly, if you deactivate the plugin any classes you entered will still be present, they will just only be accessible in the default advanced pane input.
This means you can activate/deactivate as much as you want with no fear of losing classes entered by one method or the other. It also minimizes risk of any block validation errors since the plugin only affects the editor interface and is not hooking into the Gutenberg save method.
Get the plugin today
Think this would be helpful for your workflow?
You can grab the plugin for free today – full disclosure, future upgrades may significantly change functionality and as an experimental plugin this may or may not be supported on your version of WordPress.
I would love to hear any feedback from using this plugin or features that you think would make it better for day to day use.
Leave a Reply