Category: EditorPlus

A couple of weeks ago, Munir Kamal released version 2.6 of his Editor Plus WordPress plugin. The latest version does not add a slew of features as its users have seen in the past. However, it introduces one major upgrade. The new version lets users insert templates from Gutenberg Hub’s growing library directly from the block editor.

I first asked Kamal whether he would include a template inserter in his plugin in July 2020. “I will possibly include a direct inserter for templates and blocks in the Editor Plus plugin,” he said at the time, not giving away too much.

He had just launched Gutenberg Hub’s block library (really, something more akin to block patterns). The system was useful but far from perfect. Users could copy a JSON code snippet and import it via Editor Plus. This was a slight improvement over copying separate block HTML and CSS snippets from an earlier iteration of a block template system he had launched last March. It was still not an ideal system, but anyone paying attention could see the possibilities.

Over the months since that launch, Kamal continued to build more tools into Editor Plus. He launched a separate landing page template directory. And, he continued adding more items to Gutenberg Hub’s library.

“I am already working on adding a Template Inserter in my EditorPlus plugin,” he said when we talked in September. “It will allow users to browse and insert these templates directly from Gutenberg without leaving the website.”

I had already been hounding him for months, and he knew that I would ask. He was looking for feedback, not wanting to push something out before he felt that it worked.

“Earlier, I created a template inserter similar to other blocks plugins, but later I changed my mind and thought that I should integrate with the Gutenberg Patterns API and load the templates into the ‘patterns’ panel in the block inserter,” he said. “But, I am having a few issues and thinking about going back to the original idea to have a Templates button on the top toolbar that opens a popup window to browse and filter templates that users can insert on a click.”

It was an almost methodical process toward building a massive body of work in a year. As is often the case with Kamal’s work, he quietly pushed out version 2.6 of his plugin. Even without much fanfare, he has managed to surpass 4,000 active installs, doubling its number in the past few months.

Now all of the plugin’s users have direct access to Gutenberg Hub’s section patterns and landing page templates.

The Template Library

Editor Plus 2.6 adds a new “Library” button to the block editor’s post header toolbar. It pops up a simple overlay of the plugin’s layout choices.

Users can insert a “Pattern” or a “Template,” as they are called through the plugin’s UI. Patterns are pre-designed sections that end-users can use to piece together larger page layouts. Templates are full-blown page designs, ready for deployment after content customization. Many of the patterns are present in the templates. It all comes down to how users want to build their pages — piecemeal vs. having everything in place.

Of course, everything is editable. Users can insert a template then proceed to removing the bits they do not need and adding custom blocks of their choosing.

The overlay that appears after clicking the Library button allows users to select a pattern or template. This method is becoming increasingly common among block-related plugins. Where the Gutenberg project has fallen behind in its patterns UI, plugin authors are filling the gaps and creating better user experiences. Genesis Blocks, for example, adds a similar overlay for choosing layouts. Patterns, templates, layouts, or whatever-you-want-to-call-them all need room to breathe instead of being relegated to a width-restrained flyout. What makes sense on mobile does not always create an ideal experience on larger screens.

Once a user finds a pattern or template to insert, they can click on it to view a larger version. If they are satisfied, they merely need to click the “Add” button to insert it into the content canvas.

An important caveat is that what you see in the library is not exactly what you will get. The library uses screenshots to showcase the patterns and templates. These images are created while using a different theme than what a particular user has installed on their site. Things like fonts will match whatever theme is installed. Generally speaking, the overall designs should match up fine.

In the future, perhaps Editor Plus will handle the pattern and template previews with live instances instead of screenshots.

The plugin breaks its library down into 15 categories, such as Arts & Entertainment, Photography, and Real Estate. It is almost a bit excessive. Some contain only one or two templates. Combining categories like Home Services, Professional Services, and Retail into an all-encompassing Business group could help curb the dizzying effects of too much choice.

The new library in Editor Plus 2.6 is a welcome addition. Overall, it worked well in testing.

In what seems to be a never-ending onslaught of new features, Munir Kamal has released some major new features to his EditorPlus plugin in the last two updates. Version 2.0, which landed earlier today, includes a set of seven new blocks. The previous release showcased a create-a-block feature that puts more customization options in the hands of end-users.

The block editor has fueled his creativity, and he has not run out of ideas for his block-sharing website GutenbergHub or EditorPlus plugin. Upcoming releases should see an overhaul of the UI for the plugin and a possible API for third-party developers.

He said he will be making sure that EditorPlus is working alongside WordPress’s site editor when it lands in the future. Plus, eventual support of WooCommerce’s blocks is on the table. For now, the focus is on the plugin features he has launched in recent weeks.

Creating Custom Blocks

With WordPress’s core set of blocks already in the hands of users, nearly anything is already possible. These blocks essentially cover all the foundational elements of web design, such as headings, paragraphs, lists, quotes, and more. Sometimes the trick to building something unique is mixing and matching these elements to create something new. That is essentially what this new create-a-block feature is for EditorPlus.

Saving a custom block is simple. Users must first wrap their blocks into a core Group block. Then, from the “more options” menu in the block toolbar, select the “Add to Custom Blocks” option. The plugin will ask for a block title before saving.

Not to be confused with reusable blocks, which are resources that remain the same from post to post, created blocks are like any other blocks. They are accessible via the block inserter under the “My Custom Blocks” category.

A couple of minor details are missing that would be great additions for the long term. The first is the ability to select a custom icon for the block. Currently, all custom blocks share an icon. The second is the ability to add a preview in the block inserter.

Kamal built this feature so that end-users could create simple blocks for themselves. It is also a tool for developers to quickly create blocks for client websites.

“For example, almost all business websites need a Testimonial block, but there is not one in core for that exact purpose,” he said. “Of course, you can create it using the combination of core blocks, and that’s the way to do it. I’ve seen many block plugins bringing such blocks like Testimonial, Team, Pricing, etc., but those can be easily created with core blocks.”

He has already shown the community how far you can stretch the core blocks to create unique layouts with his block and template libraries. So, it is not outside the realm of possibility that users could build some of these things directly from the editor.

The block creator seems like it would be better handled as a block pattern creator. In essence, users are creating custom patterns, which are groupings of blocks. Kamal said that a pattern creator is on the to-do list too.

“As Gutenberg has both these pieces to use for creating content/layouts, I will add both features,” he said. “Save as block has been added, ‘save as pattern’ will be added too. It will be up to the user to use whatever way they want to according to their workflow.”

I lean toward sticking with the existing pattern paradigm, a single feature that handles groups of blocks. However, it will be interesting to see what users prefer. In the long run, what matters most is that they have easy access to the tools they need to build their pages.

The “Missing” Blocks

Earlier today, Kamal released what he calls the “missing” blocks for WordPress. These are a set of seven custom-built blocks that handle types of content not possible with the existing core blocks. In the past, he has been hesitant to create any blocks, preferring to extend the tools that WordPress provided out of the box.

“My original idea and still is to extend Gutenberg for what is missing and to make it more powerful for creating beautiful designs visually without code,” he said. “And, after creating hundreds of templates/designs, I’ve realized a need for some important missing blocks that are most commonly used around the website builders but missing in Gutenberg. So I am only adding those blocks in EditorPlus that are missing, must be needed to create modern designs, and can not be created using a combination of core blocks easily. For example, a tabs block, accordion block, or all other blocks added are those that fit these criteria.”

The plugin includes the following new blocks:

• Tabs
• Toggle/Accordion
• Icon
• Rating
• Progress Bar
• Stats/Counter
• Countdown Timer

Some of these require additional JavaScript, which is why they do not make good candidates for core WordPress. However, they are good options for plugin developers, and these are not uncommon blocks from other library-type plugins.

The thing that sets them apart is the integration with the plugin’s styling system, which Kamal may be opening up to other plugin developers in a future release. The current plan is to create an independent Styles API for letting users customize any block. He has already gotten some feedback from the Advanced WP Facebook group on the idea. Much of the feedback is wishing that such a system would land in WordPress itself.

One interesting feature of the plugin’s new blocks is that when clicking on a sub-element of a block, its design options are automatically triggered in the block options panel. For example, the star rating block has “title” and “rating” elements. When clicking on the title, its design options open in the sidebar, and the same happens for ratings. This is a departure from the typical organization of EditorPlus’s design options on the core blocks, which are grouped by CSS properties. The focus is put on the individual element, and it makes it much easier to find a specific option.

This experimentation is a bit of a precursor to what Kamal is working on for a future update. One of his big goals is to do some cleanup of the UI — there are a lot of options in the plugin — and let users more quickly customize their blocks.