Control Block Design via the EditorPlus WordPress Plugin
Last week, as I was making the final edits on a review of his Gutenberg Forms project, Munir Kamal was prepping for the launch of another kind of WordPress plugin for the block editor. This one was called EditorPlus, and it would create a design system for blocks. Kamal and his team quietly put the finishing touches on version 1.0 and released the plugin in the WordPress plugin repository a few days later. Unlike many other plugins that create custom blocks to achieve specific design results, EditorPlus provides users with the flexibility to customize their pages with what they have on hand. It adds a slew of design options to each of WordPress’s existing blocks. On the front end, it leaves a light footprint by outputting only the CSS necessary for that page on the fly. Perhaps the best thing about this plugin right now is that it lays the groundwork for many design-related features that will likely find a permanent home in Gutenberg and eventually core WordPress. The Gutenberg team can borrow ideas, iterate, and improve upon them. We have already seen the experimental padding control land in Gutenberg 8.3. It would make sense that the development team follows through with additional design controls down the road. The good thing about these controls rolling out in third-party plugins first is that the team can see how users react to them and get a sense of whether they would work directly in Gutenberg before committing to anything. EditorPlus has no shortage of goodies for those who like to have a lot of design freedom without touching code. Essentially, the plugin is a CSS editor without the need to know CSS. It provides end-users with options for the most-needed CSS features via block options. It is a playground for those who like to tinker with design and powerful enough to create unique layouts without bloating the site on the front end. How EditorPlus Works Editing a Gallery block’s background and padding. After activating the EditorPlus plugin, end-users can start using its options right away by heading over to the post or page editor. After inserting a block, the plugin makes the following eight tabs available under the block options panel (each is preceded by a symbol): Border Box Shadow Sizing Background Margin Padding Border Radius Extras These tabs will appear only for the core WordPress blocks and not third-party plugin blocks at this time. Aside from the Extras tab, each tab corresponds to its CSS counterparts. The Extras tab provides a more advanced “Display” option, which allows users to change the block wrapping element’s display value in CSS. This option is best left to more advanced users. It also provides a transition option that would work well with hover styles. Each of the block options tabs also has mysterious “R” and “H” buttons. The “R” button allows users to enable responsive options, which means they can change block styles based on desktop, tablet, and mobile screens. The “H” button lets users change the design based on mouse hover state. Adding a shadow to a Pullquote block on hover. The plugin packs a lot of options in a little bit of space. All of the new design tabs can feel a little overwhelming at first. However, with a little use, it is easy to gain some muscle memory and quickly blast out custom layouts. » Read More
Like to keep reading?
This article first appeared on wptavern.com. If you'd like to keep reading, follow the white rabbit.