Top Ten EditorPlus Features

Introduction

EditorPlus is an addon for the Gutenberg Block Editor. It is not just another block set addon. EditorPlus brings lots of features to Gutenberg by extending core. In that way it is unique in the Gutenberg space. You may not need it on every site, but after reading this post you will understand the benefits it offers and have a good idea of when you will want to use it.

This is a countdown post listing the features of EditorPlus. Starting at ten, each feature is more important and compelling as we countdown to one. Lets get started.

Video Version

Feature Ten: Kept Up to Date and Supported

EditorPlus is free, GPL licensed, and available from the WordPress plugin directory. It gets regular updates, has a five star rating, and support is active. The author manages a number of other successful projects, including the Gutenberghub website, and is the number one seller on the Elegant Themes Marketplace.

Feature Nine: Ability to Disable Features You Don’t Intend to Use

I think that it is a sign of a good plugin when it offers you the option to disable features that you don’t plan to use. When you install and activate EditorPlus you can an Admin menu item under the Settings menu.

Styling, CSS Editor, Blocks, Icons Library, and Animations are the major feature areas, which we will cover. You can use the toggle to disable those you don’t want to use.

Feature Eight: Icons Everywhere

When you have EditorPlus activated, it adds an Icon option to the block toolbar for core blocks that allow text. It also works with many third party blocks, if they use the same core rich edit control.

You can select from the free Font Awesome set or from the Icon Moon set. One thing that would be a nice enhancement here is if you could search for icons in addition to paging through them.

There are some design options for color and background.

Here is an example of adding an icon to a button.

Feature Seven: Ability to “Copy Styling”

Have you gotten tired of styling buttons to look the same or otherwise applying styles to keep the look consistent? EditorPlus adds a “Copy Style” feature. When you use any of the EditorPlus settings, then the “Copy Styling” button can be used to copy and paste styles.

Once you click on the Copy Styling button then a Paste Styles button appears. In this case, I entered “Another Heading,” which was the default black color. Then I clicked on the Test Heading block and clicked Copy Styling. Then I selected the text in the Another Heading block and clicked Paste Styles.

Currently this only works for option settings added by EditorPlus. Perhaps in the future they will include setting from the core blocks as well.

Feature Six: Responsive Controls and Hover Options

Responsive Controls

Core blocks don’t give you the ability to set layout and style options by device size, leaving it up to the theme. Sometimes referred to as “responsive,” Editor Plus gives you the ability to enter different options settings, depending on the visitor’s device size. EditorPlus adds a number of option settings panels to each block and these have responsive options.

If you click on the icon that look like a tablet then it opens a place to pick the device size that the selected options apply to.

To test this I added a heading and image to the page.

For the test, I set the image on desktop to 40% width.

I did that by clicking on Sizing, then the responsive icon, and then Desktop. Note that the sizing unit is percentage by default, but you can use any unit measure you want by clicking on the percent sign and selecting from the list. Sometimes your theme may have styles set that it tries to enforce, so you can override those, if necessary by clicking on the exclamation point button.

Checking on mobile, the image looked too small.

So I set it to 100% for that device size.

Back to Desktop I noticed that the image was not centered.

So I went to the Margins panel, clicked on the responsive icon to be able to set the margin options by device size, and then clicked on the Advanced tab to get the input boxes for each direction. I clicked the checkboxes to the left of the input boxes for the Right and Left margins to auto set the margins and center the image.

Two things to note. The first is that when you use the EditorPlus responsive options the screen resizes automatically in the editor to give you a preview. Gutenberg has its own Preview option, but when using the EditorPlus settings, just let it control the preview and don’t try to use both, or results may be confused. The second thing is that when you set an option for Desktop, it automatically applies the same setting to Tablet and Mobile. However, when you set it on Mobile it does not automatically apply the setting up to the other two sizes. So, check the various sizes to make sure the settings are as desired.

Hover Options

EditorPlus also provides hover options for each block. In our example, the image is sized to 40% of the width on Desktop. I clicked on the pointer icon to access the hover options.

Then the Hover tab showed and I set the width on hover to 100%. Mobile was already 100%, but Desktop and Tablet were smaller, so when you hover on those sizes the image goes to full size. When you have the Hover tab selected, the content shows as it would when the mouse is over it, to make it easier to preview.

As you can imagine, it is possible to combine the different layout and style hover options, if desired.

Feature Five: Shape Dividers, Animations, and a CSS Editor

Things are heating up in the countdown, as this is actually three separate features.

Shape Dividers

SVG shape dividers are available for the Cover Block, the Columns Block and Inner Column Block, and the Group Block. Here I’ve added a two column block with a heading and image in each column.

Here are the Shape Divider options. There are twelve styles of divider.

There are height and width settings.

And here I’ve added a divider.

Currently you can only set a shape divider for the top or bottom, but not both.

Animations

There are seven entrance animation types to chose from: Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll.

When you select one of the options then you get some controls for it. There is a Player there which you can click on to test it.

CSS Editor

EditorPlus adds a panel for custom CSS to each block. If you know CSS and want to add a tweak then this is a nice convenience.

Feature Four: Integration with the Gutenberg Hub Library

The Gutenberg Hub website

The blocks and templates are made using the core blocks and EditorPlus, so they are just pre-designed. When you find one you like you click on it to go to the details page. I thought that the blue background and blob was part of the block, but it isn’t.

Note the “Copy Code” button and the block name. Click the Copy Code button to copy the block.

Then go to the EditorPlus Admin page at Settings/Editor Plus and then to the Blocks tab.

When you click the Add Block button you get a popup where you can paste the code.

After you click the Add Block button in the popup then it is added to you site.

In the Gutenberg editor you can now add the block to the page the way you regularly do.

And here is the block added to the page. When you add one of these block to a page they default to full width. You can add it to a column or use the settings to set the size.

The ability to copy and paste a block from the Gutenberg Hub website works fine. It would be nice if this feature was integrated into the Gutenberg editor like the pre-designed libraries of other addons.

Feature Three: Blocks Added By EditorPlus

While most of EditorPlus is focused on enhancing the default blocks, the plugin now adds several blocks which you cannot make by combining core blocks. Some of them, like the Tabs and Toggle (Accordion) blocks, are found in almost every block addon. Some of the others, like the Lottie block, are more unique. Here I’ll look at two of them, the Lottie Block and the Rating Block.

The Lottie Block

The Lottie block is one of my favorites. Lottie animations are small JSON files that can be scaled without pixilation. There are a number of free Lottie animations available online. One place to get them is from LottieFiles.com. I searched for one I liked and selected this one.

When you click on it you go to a details page. On the details page, you want to download the JSON file by clicking the button in the upper right corner. If you want to, you can adjust some of the parameters first, like the play speed and background color.

After you download the JSON file, you can go to the page where you want to show it and add it to the page.

The Lottie block has some settings options available.

If you click on the Block / Customize button you go to a sub panel with some design options.

And here is the result after adding the JSON file. The magnifying glass and pencil move back and forth.

Rating Block

The rating block is another one not available in core. You have the option to show the stars, or icon of your choice, inline or stacked. There are some some design options that are available from sub panels by clicking on one of the Customize buttons.

For example, here is the Customize panel for the Title, which gives you the EditorPlus Typography options.

Feature Two: Creating a Custom Block

Gutenberg core comes with the ability to create reusable blocks and EditorPlus adds the ability to create custom blocks. The difference is that when you edit a reusable block then it changes everywhere. A Custom block on the other hand is ready to be edited when you insert it into a page.

To create a custom block, first select several blocks and click on the three dot menu and then click on Group.

Then you can click on the group and click the Add to Custom Blocks menu.

Give the custom block a name.

Then when you want to use the custom block, find it in the block list.

Then insert it as you would any other block.

Feature One: EditorPlus Adds Consistent Options to Every Block

One of the main reasons people use third party block addons is because the core blocks are too limited and inconsistent. For example, here are the settings for the Heading block. You can set the font size, the heading color, and the background color. That’s it. If you need to adjust the margin or padding you are out of luck.

Here is the columns block’s settings. You can adjust the colors and number of columns, but nothing else.

Here is the Button block settings. You can choose a predefined style and set color, border, and link settings.

Now lets look at these blocks with EditorPlus active. Here is the Heading block again, this time with EditorPlus options.

The columns block with the EditorPlus options.

And the Button block with the EditorPlus options.

Note how there are panels for Typography, Background, Box Shadow, Border, Border Radius, Margin, Padding, Sizing, Extras, and Animations on every block. Core WordPress leaves this styling to your theme and if you need to make adjustments then you will need to add some CSS. EditorPlus makes these settings available universally.

Discussion and Conclusions

The EditorPlus plugin is under active development. This might make it seem “unfinished,” as it is regularly being improved. For example, here are three features that could be improved to make them more complete:

I understand that these improvements are on the future roadmap, so the author is aware and actively improving the offering.

Despite the room for improvements, EditorPlus has all of the hallmarks of a good plugin, you know, the markers people look for to judge if it is a quality option and safe to use.

Of course, if you have a pro addon for Gutenberg that replaces all of main the core blocks, if it is well coded, provides consistent features, and you know it will be around in the future, then you may not need EditorPlus. However, when you see a plugin like this one, and it is clear that many of its features should really already be part of core, then it is obvious that it “hits the spot” and is worthy of consideration.