Posted on

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 the Gallery block's background and padding via the EditorPlus plugin.
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.

Editing a Pullquote block's design options via the EditorPlus plugin.
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.

Each of the plugin’s options is fairly straightforward. And, when they are not, you get the benefit of instant feedback via the block editor.

There are a few areas that could prove problematic for some users, depending on how their theme styles certain blocks. For example, width settings under the Sizing tab may not always work. Some themes will add a maximum width to blocks, which will constrain the overall width no matter the size. It is possible to overrule this via the plugin, but Kamal has chosen not to do this in version 1.0.

Be careful with margins. Depending on the theme design, it may use left and right margins to place content. Even when setting just a top or bottom margin, the plugin will automatically output 0 for the left and right margins. This could break the content layout for some themes.

One problem I encountered with the plugin was my active theme’s styles overruling the plugin’s styles in general. For example, the default Twenty Twenty theme targets p.has-background in its CSS to add custom padding. Therefore, it overrules the EditorPlus plugin’s CSS with higher specificity. This problem was expected, and the plugin developer added a solution for it in the form of an “important” checkbox for each design option. If a user ticks this box, it adds !important to the style rule on output, which will allow it to overrule the theme styles. It is not a 100% fool-proof solution. Your mileage may vary, depending on the theme, but it should work for the majority of use cases.

I don’t like the idea of an important checkbox in the UI. It is not something a user should have to worry about. However, it is the reality of a world where themes and plugins have no real way to communicate which design rules are more important than others. Despite not wanting this in the UI, it was a smart decision to include it. Otherwise, far too many themes’ style rules would have overwritten the plugin’s CSS.

Final Thoughts

For a version 1.0 release, EditorPlus is off to a solid start. In my tests, I found few flaws. Any problems for the average user will likely come in the form of theme conflicts, and those conflicts will most likely be around themes using high specificity or !important in their CSS.

Kamal makes it clear on the plugin’s webpage that there is more to come from this plugin. I am unsure what features he has in mind, but I look forward to seeing them. I would like to see a text-shadow option for text-related blocks such as Heading and Paragraph. It would also be nice to see some design options for the images within the Gallery block rather than just the wrapping element.

Whether you should use EditorPlus will depend on whether you need additional design controls. EditorPlus is geared toward people who need something more akin to a lightweight page builder but want to stick to native WordPress. This plugin is a nice showcase of what’s possible and is a good indicator of potential design options that may one day land in WordPress.

Posted on

Build Forms via the Block Editor With Gutenberg Forms

The quest for the perfect form plugin is nearly as old as WordPress. Projects have come and gone. There are some great form plugins out there, but far too often the choices are between massive builders that do things their own way and solutions so simple that they do not quite live up to expectations. Munir Kamal has put his hat into the ring with his take on this saturated market with Gutenberg Forms, a plugin designed for exclusively building forms within the block editor.

The plugin is by no means perfect. It has numerous quirks. It does a lot of things right. It fails at times with features that could be game-changing. It has the potential to be one of the best form-building plugins for WordPress.

As of version 1.4.0, the latest update, Gutenberg Forms is a mixed bag of success and frustration. I am excited about it.

I am excited because we are still in the early part of this plugin’s lifespan. I am excited because Kamal has built some successful Gutenberg-related projects in a short amount of time, including Gutenberg Hub and ACF Blocks. I am excited because I believe it will improve over time.

Form plugins are not easy. Despite its current issues, which we’ll get to, Gutenberg Forms is a useful plugin that ticks many of the boxes that I want to see in a form builder going forward. The ideas needed for block-based forms are in place. The execution just needs some refinement.

Gutenberg Forms was recreated in February this year. Kamal originally released the plugin in 2018, but it sat in limbo for a year and a half before he updated it with the latest APIs. Since then, he has been on a tear, releasing frequent updates and improving how the plugin works. I first tested it months ago and was not happy with the result. However, the latest iteration shows much more promise.

With only 200+ current users, the biggest thing the plugin needs is more feedback from more users.

Building Forms

Creating a standard form with the Gutenberg Forms plugin.
Creating a standard form.

Gutenberg Forms makes form building simple. There are two ways to build forms in the plugin. The first method is a custom “Forms” screen in the admin. It is a custom post type that works just like a post or page. The difference is that users are limited to adding form fields provided by the plugin. Using this method of building forms is ideal because the form is saved in a single place and can be used anywhere on the site.

The second method is building a form directly from the post or page editor. All of the plugin’s custom blocks are available for creating a custom form. For one-off forms, this may be the method to use, but I recommend building from the Forms screen instead.

After building a form via the Forms screen, users can later use the Gutenberg Forms block to insert a saved form. What actually happens when inserting this block is that, when choosing a saved form, the plugin inserts a shortcode into the editor. This is one of those quirks with the plugin. One of the ideas of building blocks is for developers to move away from utilizing the shortcode system. There is no need to mix in a shortcode here from a technical perspective. It should simply be a server-side block. I do not imagine this matters much to end-users. It works. It is simply an oddity that I hope evolves in the long run.

Inserting a saved form into a page with the Gutenberg Forms plugin.
Inserting a saved form into a page.

The plugin provides most of the common form fields that end-users would expect to see in a form plugin. The following are the form-field blocks currently available:

  • Calculation
  • Checkbox
  • Date Picker
  • Email
  • File
  • Form Button
  • Message
  • Name
  • Number
  • Phone
  • Radio
  • Select
  • Text
  • Website
  • Yes / No

Gutenberg Forms also includes other blocks that are not for outputting fields. The Form Columns block allows end-users to create columnized fields. This works great for fields that need to be lined up horizontally, such as city, state, and ZIP code fields. The Form Group block allows users to group multiple blocks. It also has several design options, including custom colors and padding. The Form Step block is useful for adding steps in multi-step forms.

The biggest but least polished feature is the pre-designed templates library that Gutenberg Forms makes available. Currently, the plugin has around three dozen custom templates. Given Kamal’s work with templates at Gutenberg Hub, I am guessing that we will see even more templates in the future.

Inserting a form template into a page with the Gutenberg Forms WordPress plugin.
Inserting a form template into a page.

The problem? The form template inserter does not always work.

Testing the plugin against both the latest WordPress and Gutenberg plugin, I was not able to insert any form template via the new form screen. There were JavaScript errors that prevented it from being inserted. One of the most exciting features of the plugin failing to work, at least in my test environment, was a bit of a letdown.

While inserting a template did not work on the form-building screen, it did work when building one-off forms on the page-editing screen. However, I did receive the dreaded “this block contains unexpected or invalid content” message for some of the blocks after insertion.

This issue is not insurmountable. The Gutenberg project is in a constant state of flux. I am forgiving of these types of issues right now because things are so unsettled, and I also know they can be addressed in an update. However, I do want to point them out for users who may need something a bit more polished in their production environments. You can build forms easily without the template feature.

Final Thoughts

Yes, Gutenberg Forms is a bit rough around the edges. It is not at the point where it can be competitive with some of the other major players in the forms marketplace. However, six months or a year from now, assuming continued improvement, it should be in a position to start slicing its own piece of the pie.

There are some other nitpicks with the plugin. For example, the “Inline” block style available with some blocks cannot be reset to the default. The “C” in the Checkbox block name is lowercase while all other block names begin with an uppercase letter. These minor things make the plugin seem less polished than it is.

Even with the issues I have outlined, I would recommend people in the market for a block-based form builder to give this plugin a test run. Its simplicity will make it an easy choice for many. For the most part, it works well. At the end of the day, it lets you build forms and stores the submissions for those forms directly in the database, and that is what truly matters.

I am a firm believer that we are at the beginning of something special. It will just take a bit of time before we get there. Even if Gutenberg Forms does not take over the form-builder market, other plugin developers should start taking cues from what this plugin is doing.