Block Visibility was first created back in the summer of 2020 as an experiment. The goal was to learn more about the new Gutenberg/Block Editor in WordPress and to build a plugin predominantly in JavaScript (React) as opposed to PHP.

As time went on, it became apparent just how powerful controlling the visibility of block content could be. By the beginning of 2021, feature requests started steadily rolling in. That gentle stream of requests turned into a deluge after the review article on WP Tavern. Thank you Justin!

Unfortunately, there were a couple of issues that needed to be addressed before any new functionality could be added.

Improving Scalability

A plugin originally designed as an experiment does not scale well. The controls, or conditions, that determine a block’s visibility are stored as a block attribute called blockVisibility. Without getting too technical, the structure of this attribute limited future plugin development. In version 1.6.0, blockVisibility has been completely reimagined to (hopefully) take into account anything a user would want to do in the future.

The new attribute structure also lays the foundation for “control sets”. Adding multiple control sets to a block will enable sophisticated OR logic for the purposes of determining whether a block should be visible. This feature is still very much in development. More information on that coming in April, so stay tuned!

Streamlining the User Interface

There are currently three visibility controls in the plugin, Date & Time, User Role, and Screen Size. Given the number of new controls already planned, the upcoming Pro version of Block Visibility, and the number of current feature requests, this number will likely grow to 10+ by the end of 2021.

As more and more visibility controls are added to the plugin, the Visibility panel in the block toolbar will start getting very cluttered. Therefore, the second issue was how to go about managing all these new controls in a more streamlined way.

This problem is not unique to Block Visibility. Discussion in the Gutenberg GitHub repo alludes to similar issues in the block toolbar as a whole. The current proposal introduces “toggles”. This would allow a default set of controls to be presented to the user. Then with a couple of clicks, the user could add or remove functionality on a per-block basis. Such an implementation gives the user more granular control, and as noted in the GitHub discussion, “This also prevents the interface to (sic) grow uncontrollably as the included tools expand.”

While these “toggles” have not yet been implemented into Gutenberg proper, they provide an elegant solution to the impending UI issues in Block Visibility. In version 1.6.0, you will now see a “Controls” section with an ellipsis icon. Clicking on that icon allows you to toggle the available visibility controls.

Quick Tips

There are a couple of things to note when using this new functionality:

1. For those who were previously using Block Visibility 1.5.3 or lower, when you upgrade to 1.6.0 all your visibility controlled blocks will work just as they did before. When you go to edit a block with “old” visibility controls, the block attribute structure will be automatically upgraded behind the scenes. We have made every effort to ensure 100% backward compatibility and an invisible upgrade process. If you need help or run into any issues, plugin support is standing by!
2. By default, all blocks will have the current three visibility controls active (Date & Time, User Role, and Screen Size). Future releases will provide a way for administrators to set which controls are enabled by default.
3. For the selected block to be visible, all enabled control conditions must be satisfied. This is the same functionality as in all previous versions but wanted to reiterate that here. Don’t need a specific control? Simply toggle it off.
4. If a visibility control is toggled off and then re-enabled, the control’s conditions will reset to their default values. By toggling off a visibility control, you are “deleting” it from the block.
5. As before, website administrators can customize and restrict the available visibility controls for the entire website in the plugin’s settings. For example, if you never want to use the Screen Size control, you can simply disable it entirely in the plugin settings.

To download the latest version of Block Visibility, visit the plugin repository on WordPress.org.

Next Steps

Now that the underlying structure has been overhauled in 1.6.0, version 1.7.0 will focus on adding new controls to the plugin. The top request has been visibility control by URL “query” and we are also excited to be collaborating with WP Fusion. WP Fusion will be the first third-party integration that Block Visibility supports. Many more are planned in the future, including WooCoomerce, Easy Digital Download, and popular membership plugins.

We have also launched an email newsletter, which you can sign up for below. The plan is to send an email every couple of months featuring enhancements to the plugin, tutorials, upcoming news, and information about Block Visibility Pro.

Thank you for your interest in Block Visibility. If you do give the plugin a try and are finding it useful, please consider leaving a review on WordPress.org. And, of course, let us know if you have a feature request!

Until next time…