Show and Hide Content via the Block Visibility WordPress Plugin

Nick Diego’s Block Visibility is not the only plugin to take on the challenge of controlling when blocks are visible on the front end. Other plugins like EditorsKit do a fine job of it. However, Block Visibility is a solution users should not overlook, even if they have already begun testing other options.

Diego first released the plugin in August 2020. Since then, he has added routine updates that have added value without shifting its focus.

One of the biggest reasons to use this plugin is that it is a standalone project. It is purely about doing one thing and doing it well. Its settings are all about giving users complete control over how they want to manage block visibility. From my experience with it, the plugin does its job better than alternatives.

It may not have a large number of installs, but if its five-star rating on WordPress.org is any indication, it at least has a happy user base.

Diego does have plans for a pro add-on. The tentative release date is set for Spring 2021. He seems to be moving forward with that launch after adding some foundational code in the recent version 1.4 release.

“As Block Visibility grows, there will be advanced and/or niche functionality that will be useful for certain users,” wrote Diego in the 1.4 release announcement. “Think integrations with other third-party plugins. There will always be a free version of the plugin but some of these additional features will ultimately be provided by a premium (paid) add-on called Block Visibility Pro.”

In my previous job, one of my primary products focused on membership solutions. There is a seemingly endless number of possibilities that users dream up to control content visibility. I have little doubt that a pro add-on is necessary for catching all of the edge cases.

How the Plugin Works

Block Visibility is easy to use. End-users click a toggle switch, select from a date-picker, or tick a radio box. Their blocks are shown or hidden on the front end based on their selections. It does not get much simpler than that.

The plugin adds a new “Visibility” tab for each block, which displays the visibility controls. The exception to this is for inner blocks. For example, the Columns block has controls, but the inner Column blocks do not. However, this can be enabled for inner blocks via the “Full Control Mode” on the plugin’s settings screen.

There are three primary types of options:

  • Hide the block from everyone.
  • Time-based start and stop dates for displaying.
  • Visibility by user role.
Block Visibility plugin controls in the WordPress block editor.
Block Visibility’s controls in the inspector.

Hiding the block from everyone might be useful for users who are testing on a page or for blocks that are a work in progress. Start and stop dates create the potential for drip or trial content on membership-based sites, especially when combined with the role-based visibility options.

These basic options will cover the majority of scenarios that the average user will need them for.

One of the nicer features of the plugin is that it adds a transparent gray overlay, dashed border, and icon to each block that has visibility options set. This is shown when the block is not selected in the editor. It is one of those small touches that make the plugin useful.

Block Visibility plugin gray overlay when a block is not selected.
Overlay for blocks with visibility options.

There is one confusing piece of the UI. There are two instances where there is a “public” option. That label immediately makes me think that the block should be visible to everyone. However, reading the description is necessary. These options are for showing content to logged-out users only. I would rather see these two options renamed to “logged out” for clarity.

A Promising Future

While Block Visibility is a solid plugin right now, we are barely scratching the surface of what will be possible in the long run. In version 1.4, released two weeks ago, Diego added preliminary compatibility with Full Site Editing. This means visibility options will no longer be confined to the post or page content.

“Once every piece of content on a website is a ‘block,’ you will be able to easily control the visibility of practically anything on a WordPress website,” wrote Diego in the version 1.4 announcement post. “From dynamic navigation menus to user specific headers and footers, the possibilities are endless!”

Gutenberg’s site editor is a beta feature right now, but the plugin’s integration seems to already work well. I ran a quick test to show a custom nav menu to shop customers only. I had no problems on my end.

Using the Block Visibility plugin with the Gutenberg site editor.
Setting visibility options for a menu in Gutenberg’s site editor.

Users will not be limited to such basic needs in the future. Imagine showing ads in a sidebar to logged-out users. Imagine adding a time-sensitive holiday sale banner in the header. Imagine designing a homepage template that displays different content to subscribers vs. visitors.

There are ways to do all of this today by piecing various plugins together, using custom shortcodes, or writing code. However, when an entire site is made of blocks, you only need one method to control anything’s visibility. Literally.

14 responses to “Show and Hide Content via the Block Visibility WordPress Plugin”

  1. Thanks for the detailed article Justin! Still lot of work to do and looking forward to what FSE brings and how this functionality can be used beyond the current Block Editor.

    If anyone has additional feedback, feature requests, and/or criticism, please let me know!

    • Recurring schedules would be great – eg, hide this block before 8AM and after 6PM.

    • A couple of things I would love to see in a premium version, and for which I would gladly pay for:
      For WC and EDD, hide if user has purchased X product.
      Also with licensing extensions for the above, hide/show if customer has an active license for X product.

      I have recently put the plugin to work on a client’s ecommerce site, and the plugin works very well, allowing us to hide/show blocks based on their trade pricing tiers (using user roles).

      • That’s a fantastic idea, I will add it to my list. Working on building out the Pro website over the next couple weeks (built with EDD coincidently) and then back to finishing up the Pro version.

    • Thanks for the feedback Aliv. I am still working on solidifying the core of the plugin, but membership functionality is coming next. The goal will be to support all major membership plugins, including those for WooCommerce. That said, any plugin that saves their “membership roles” as simple WordPress user roles is already supported.

  2. Such a great idea and from what I’ve seen so far while playing around with Block Visibility, the implementation is flawless too!

    The block editor and site editing are starting to show us a whole wealth of possibilities, and I’m really looking forward to the future and the things that developers/authors come up with next.

    I have to admit to being a touch skeptical when Gutenberg first appeared, but as it matures I can honestly say any doubts have well and truly disappeared now. The simplicity of doing stuff that was previously at varying levels of complicated is simply awesome.

    I’d buy you a beer if I could, Nick.
    Cheers!

  3. Does the HTML for invisible blocks still get included on the page with display:none?

  4. Hi, the following plugin is not working on my website. It is getting conflict with elementor. Is there any solution except to disable elementor?

    • Hi Charlotte, I apologize for any issues you are running into! Block Visibility is not designed to work within the Elementor editor, only the WordPress Block (Gutenberg) Editor.

      That said, I am not aware of any direct conflicts between the two plugins. If you wouldn’t mind opening a support ticket in the plugin support forum (https://wordpress.org/support/plugin/block-visibility/) and providing a bit more info on the conflict you are seeing, I will begin investigating asap!

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: