Download

Block Visibility — Conditional Visibility Control for the Block Editor

By Nick Diego

Description

Effortlessly create dynamic content in WordPress that will increase conversions, enhance the user experience and improve your own workflow.

With this no-code solution, control which blocks are visible on your website and who can see them. Schedule content to show or hide at a specific time. Display exclusive promotions to your customers or members. Restrict blocks to specific user roles, screen sizes, query strings, ACF fields, WP Fusion tags and more.

Built exclusively for the Block Editor (Gutenberg), Block Visibility is designed to work with any WordPress block. This includes blocks natively provided by WordPress as well as third-party blocks.

Create Conditional Blocks in Seconds!

Work directly in the Block Editor with blocks you are already familiar with. There is no external editor or new interface to learn. In a matter of seconds, you will be able to transform static blocks into conditional and personalized content.

It takes just 3 simple steps:

  1. Create your content using any WordPress block.
  2. Select the desired visibility conditions.
  3. Save the page/post and marvel at the results!

Free Features

Visibility Controls determine whether a block should be visible to users on the frontend of your website. Free controls include:

  • Hide blocks from all users.
  • Schedule when content should be visible using a start and end date/time.
  • Conditionally display blocks based on screen size (Desktop, Tablet, Mobile, and more)
  • Only show blocks to logged-in users.
  • Only show blocks to logged-out users.
  • Only show blocks to users with specific roles (Administrator, Subscriber, Customer, Member etc.)
  • Only show blocks to specific users. Great for personalization.
  • Show or hide dynamic blocks based on URL query strings. Great for marketing campaigns!
  • Advanced Custom Fields (ACF): Control the visibility of block content based on ACF fields.
  • WP Fusion: Combine Block Visibility with the power of WP Fusion to conditionally show or hide content based on data from your favorite CRM or marketing automation platform.

PLUS: Powerful Settings allow you to customize Block Visibility to your needs, or those of your clients.

  • Globally disable any visibility control.
  • Restrict visibility controls to specific block types.
  • Set permissions so only certain users have access to visibility conditions.
  • Configure up to 4 different breakpoints to optimize the screen size controls.
  • Disable contextual indicators and other plugin utilities.
  • Customize the contextual indicator color to enhance theme compatibility.
  • Enable Full Control Mode 🚀 (See the FAQs).
  • Remove all plugin settings on uninstall.

Why Do I Need This?

While there are countless applications for conditional blocks, here are a few examples to get you started:

  • Use as a content management tool. Hide new blocks while you are working on them but still keep the page published.
  • Temporarily hide seasonal content on your website rather than having to delete it.
  • Schedule time-sensitive promotional content and/or event information to display automatically.
  • Show or hide specific content on desktops, tablets or mobile devices.
  • Restrict content so it’s only visible to your customers, members or subscribers.
  • Display messaging to logged-out users encouraging them to subscribe to your blog.
  • Create unique marketing campaigns using query string parameters to display personalized messaging (See it in action)
  • Conditionally display elements in the Full Site Editor using advanced visibility logic.
  • Increase visitor engagement and conversions with dynamic content and personalization.

Why Choose Block Visibility?

1. Easy to Use
Block Visibility is the easiest way to create conditional blocks in WordPress. All with no code and just a few clicks!

2. A Balance of Power and Simplicity
Whether you are building a sophisticated time-based promotional campaign for your customers, or just need to hide a few blocks on mobile, Block Visibility is for you. Don’t need certain functionality? Simply toggle it off in the plugin settings.

3. Helpful Support and Continuous Development
Block Visibility and the Pro add-on are designed, developed, and supported by Nick and the small team at Outermost. We strongly believe the Block Editor is the future of WordPress and pride ourselves on providing timely support and new features monthly. Have an idea for additional block logic? Let us know in the plugin support forum.

For an unbiased review, the plugin was featured on WordPress Tavern.

Pro Features

Take Block Visibility to the next level with Block Visibility Pro. The Pro add-on enhances your marketing capabilities, improves compatibility with new Full Site Editing features, and introduces eCommerce integrations.

Here’s a look at what’s currently included with Pro:

  • Show or hide blocks based on their location and “attributes” of their location (i.e. post type, taxonomy, archive etc.)
  • Advanced day-of-week and time-of-day controls, which include recursion functionality.
  • Display blocks based on the referral source (domain/URL) of a website visitor.
  • Support for all post and user metadata (custom fields). NEW 🎉
  • WooCommerce conditional block logic for shopping cart contents, product details, customer metrics and more.
  • Easy Digital Downloads conditional block logic for shopping cart contents, customer metrics and more.
  • eCommerce rules for when a customer placed their first/last order, or when specific products were purchased. NEW 🎉
  • Access to premium email support.
  • More conditions coming soon…

Learn More About Pro →

Plays nice with others

Block Visibility is designed to work with any block and has been tested with these top block libraries and plugins.

Compatibility + Direct Integration

  • Advanced Custom Fields (Free)
  • WP Fusion (Free)
  • WooCommerce (Pro)
  • Easy Digital Downloads (Pro)

Compatibility

  • Jetpack
  • CoBlocks
  • Redux Framework
  • Ultimate Addons for Gutenberg
  • Kadence Blocks
  • GenerateBlocks
  • Otter Blocks
  • Atomic Blocks
  • Gutentor
  • Stackable
  • Getwid
  • EditorsKit
  • Genesis Blocks

Find an issue? Let us know in the plugin support forum and we will investigate ASAP. Excellent compatibility with the greater WordPress block ecosystem is our top priority.

Stay Connected

Stay up-to-date on Block Visibility using the links below. The plugin is also being developed transparently on GitHub, so give it a star and follow along! 😉

Screenshots

  • Quickly and easily hide show or hide blocks on your website.
  • Schedule blocks using start and end date/time settings. The plugin provides complete block scheduling and work with all Gutenberg blocks, including WooCommerce as seen here. The Pro add-on includes day-of-week and time-of-day recursion functionality.
  • Show or hide block on mobile devices, tables, desktops and more.
  • Control who can see each Gutenberg block with user role restrictions. Great for personalization.
  • Create unique marketing campaigns using query string parameters to display personalized messaging.
  • Current integrations include Advanced Custom Fields and WP Fusion. Robust eCommerce integrations for WooCommerce and Easy Digital Downloads are available in the Pro add-on.
  • General plugin settings to enable/disable certain functionality including user permissions and Full Control Mode.
  • Choose which conditional visibility controls you would like to use on your site.
  • Disable or enable conditional visibility on certain block types with the Block Manager.

Installation

  1. You have a couple options:
    • Go to Plugins → Add New and search for “Block Visibility”. Once found, click “Install”.
    • Download Block Visibility from WordPress.org and make sure the folder us zipped. Then upload via Plugins → Add New → Upload.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. From the ‘Plugins’ page, head directly to the plugin ‘Settings’ page.
  4. Once there, you can click on the ‘Getting Started’ tab where you will be presented with some getting started information along with the plugin demo video.
  5. Start applying conditional visibility controls to all Gutenberg blocks!

FAQ

Who should use Block Visibility?

Block Visibility is a powerful, yet simple, plugin that gives marketing agencies, bloggers, eCommerce websites, and small businesses owners the power to conditionally show or hide blocks on their websites. The need to hide Gutenberg blocks varies. Whether you need to restrict content to certain users like members, or launch a promotional campaign at a specific time with block scheduling, the applications are endless.

If you need dynamic content control, i.e. Gutenberg block control, on your WordPress website, then you need Block Visibility.

Is there a pro/premium version of Block Visibility?

Absolutely! Block Visibility Pro available as an optional paid add-on and includes advanced functionality and third-party integrations.

Do conditional visibility controls really work with any block? (i.e. What is Full Control Mode?)

Yes! However, not all block types are enabled by default. Controls are only provided to blocks that can be added directly to a page/post by the block inserter. Therefore, some specialized blocks, such as child blocks, are not included by default. An example being the individual Column block that is part of the larger Columns block.

That said, you can enable Full Control Mode in the plugin settings. This removes all restrictions and adds conditional visibility controls to every block. You probably will not need Full Control Mode in most cases, but it is there if you do!

Furthermore, while this plugin was designed to be compatible with all blocks, the WordPress ecosystem is ever expanding. If you find a conflict with a certain block, please let us know in the plugin support forum and we will investigate. We are committed to bringing visibility block controls to every Gutenberg block.

Can Block Visibility be used with any WordPress theme?

Yup, this plugin is not theme specific. You just need to be running the latest version of WordPress (5.5+) and be using the Block Editor (Gutenberg). This plugin provides zero functionality to the Classic Editor.

Will more conditional visibility controls be added in the future?

Yes, and if you have a specific idea of what you would like to see, please submit a feature request in the plugin support forum on WordPress.org.

Does this plugin work with the Full Site Editing and block-based themes?

As of version 1.4.0, Block Visibility is supported in the Site Editor, which is provided by Full Site Editing. Note that you will currently need the Gutenberg plugin and a Full Site Editing theme to make use of this functionality. Full Site Editing is still very much in development and you may find bugs or compatibility issues when using this plugin in the Site Editor. If you do, please let us know in the plugin support forum. We are committed to ensuring 100% compatibility by the time Full Site Editing is included in WordPress core.

Does Block Visibility work with Elementor and other page builders?

No. Block Visibility was design specifically for the WordPress Block Editor (Gutenberg), and therefore does no work on pages that are controlled by the Elementor editor or another page builder. As long as you are editing native WordPress “block” content, Block Visibility will work.

Is block visibility controlled using CSS?

Visibility is controlled primarily on the server, so if a block should be hidden based on the set block controls, it will not even be rendered. This ensures the plugin does not load any additional resources on the frontend of your site, thereby optimizing performance.

The one exception to this is the Screen Size block controls. Visibility by screen size requires the use of CSS, which is loaded to the frontend of your site if, and only if, these controls are enabled. You can opt to disable this CSS and add the necessary yourself. Visit the plugin Knowledge Base to learn more.

Reviews

Works Great

August 20, 2021
Works great. Just an FYI for others, you may need to clear the cache in order to see the results.

Important

August 16, 2021
I was looking for this feature and got indecise between two plugins with the same function… I first looked at Nick’s personal page and was impressed! I hope you build amazing plugins for the community! Thank you for this one! Recommend.

Perfect

August 9, 2021
Finally, I can "comment out" any block and have it highlighted in the editor.

What’s not to like

July 27, 2021
Nick has done an amazing job with this plugin. I use it mainly with WPfusion and it's by far the best way to control visibility in block editor. He's also very responsive to feedback. Amazing work Thanks Nick

Very useful

June 8, 2021
I'm using conditionals by Query String. Great work! Thank you!

Thanks for this useful plugin!

May 26, 2021
I'm just starting to dip my toes in the Gutenberg world. I use visibility all the time in Beaver Builder and am happy to find I can do the same with blocks. In classic editor, I used to create a "hidden" class, but that's not ideal because it also hides it on the back end. Thanks again for creating this!
Read all 21 reviews

Contributors & Developers

“Block Visibility — Conditional Visibility Control for the Block Editor” is open source software. The following people have contributed to this plugin.

Contributors

“Block Visibility — Conditional Visibility Control for the Block Editor” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Block Visibility — Conditional Visibility Control for the Block Editor” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.1.1 – 2021-09-14

Added

  • Added contextual indicator support for the Metadata control in Block Visibility Pro.

Changed

  • Continued extensibility improvements of the control set toolbar menu.
  • Updated plugin logo on settings page.

Fixed

  • Fixed incorrect languages .pot file.
  • Fixed bug in rule set configuration.

2.1.0 – 2021-09-09

Added

  • Added the ability to reset plugin settings and restore defaults from within the admin.
  • The Advanced Custom Fields control can now display blocks based on user fields.

Changed

  • Moved the create_date_time function to its own utility file. This allows for its use across the plugin and Block Visibility Pro.
  • Refactored rule and rule set functionality to provide for greater extensibility.
  • Improve extensibility of the control set toolbar menu for future Pro add-on functionality.

Removed

  • Removed erroneous integration-checks.php file.

Fixed

  • Fixed bug where not all users would be fetched in the User Role control. Thanks @lenehanj for discovering this issue and opening a support ticket!
  • Fixed styling on multi-select components.
  • Fixed z-index on contextual indicators that was causing some unwanted overlapping.

2.0.0 – 2021-07-27

Added

  • Added the ability to restrict visibility by specific users as part of the User Role control.
  • Added the ability to customize the color of the contextual indicators.
  • Added a “block not compatible” messaging to the Legacy Widget block in WordPress 5.8, since the block does not support custom attributes.
  • Added Block Visibility Pro ad to settings pages to inform users about the Pro add-on.
  • Added a direct link to the plugin Knowledge Base in the plugin settings masthead.

Changed

  • Changed how the WP Fusion control logic works to be more intuitive. Now all tag conditions need to be true for the block to be visible. In v1.9.1 and lower, the conditions operated independently. Thanks @marlonsabala for bringing this to our attention!
  • Changed the contextual indicator styling (again) to improve the UI/UX. Color now defaults to the set --wp-admin-theme-color and indicators have been moved to the ::after pseudo element for improved block compatibility.
  • Changed the control toolbar styling to match the upcoming dimensions panel UI in Gutenberg.

Removed

  • Removed custom icon font for contextual indicators. Reverting back to SVG icons now that we have a more optimize approach.
  • Removed the “Getting Started” tab in the plugin settings and directed all help links to the Block Visibility website and WordPress.org support forum.
  • Removed the review and support popup on the plugin settings pages.

Fixed

  • Fixed error introduced in WordPress 5.8 on the block-based Widgets screen by removing the wp-edit-post dependency from the plugin.
  • Fixed spelling errors in plugin settings. Thanks @paaljoachim!
  • Fixed display logic in the Date & Time control when a single schedule was disabled, but others were enabled.
  • Fixed display logic in the ACF control when a single rule set was disabled, but others were enabled.

1.9.1 – 2021-06-18

Added

  • Added preliminary support for Block Visibility (and Pro) on the new block-based Widgets screen, the new Widget pane in the customizer, and the experimental Navigation screens added by Gutenberg.

Fixed

  • Fixed bug where a Block Editor critical error would sporadically occur for certain admin users when switching from Fullscreen in the Block Editor. Thanks @gsarig for discovering this issue and opening a support ticket!
  • Fixed PHP error that would occasionally occur when a previously set ACF field was deleted from the user’s website.
  • Fixed bug where contextual indicator style sheet was loading on incorrect admin pages.

1.9.0 – 2021-06-07

Added

  • Added support for Block Visibility Pro.
  • Added rule set functionality to the ACF control. This allows you to create OR conditions within the ACF control.
  • Added “rule set” and “rule” architecture.
  • Added notice regarding compatibility issues with the Screen Size control and the Shortcode Block, plus links to a workaround in the Knowledge Base.
  • Added additional Slots for integrating new visibility controls.

Changed

  • Replaced many Popover components in the block editor with Modal components for improved UI.
  • Replaced most other Button/Popover components with DropdownMenu components for improved UI.
  • The “Remove” schedule button is now an trashcan icon in the Schedule toolbar to be consistent with Block Visibility Pro.
  • Plugin settings tabs are now directly navigable based on URL query parameter.
  • Controls are now alphabetically ordered in the control selectors.
  • Screen size control CSS is now conditionally loaded only when there are actually blocks using these settings.
  • Contextual indicators are now powered by a custom icon font to improve performance and decrease file size.
  • Minor UI enhancements throughout.

Removed

  • Removed the dummy frontend.css file which was used for the screen size control and required an extra file to be loaded. An alternative implementation is now used.

Fixed

  • Fixed error were editing the visibility of a duplicated block would also edit the original block. Thanks @mmcginnis for discovering this issue and opening a support ticket!
  • Fixed unnecessary re-renders and loss of focus for slotted components by relocating withFilter HOCs outside of all render functions.
  • Fixed error in the Date & Time frontend test.
  • Fixed labels on the Query String control that were previously not translatable.
  • Fixed incorrect links to the plugin Knowledge Base.

1.8.0 – 2021-04-13

Added

  • Added the Advanced Custom Field control, the second third-party integration for Block Visibility! 🎉
  • Added functionality for multiple Date & Time schedules. 🎉
  • Added the ability “invert” the Date & Time control per-block. By default, this control allows you to show the selected block if at least one schedule applies. You can now optionally hide the block if at least one schedule applies!
  • Added the ability to set default visibility controls.
  • Added the ability to easily reset the visibility controls on each block.

Changed

  • Updated control set controls toggle icon to be more consistent with WP core.
  • Updated popover styling to be more consistent with WP core.

Removed

  • Removed the enable_scheduling setting. Users can now easily toggle visibility controls at the block level so this setting is not longer needed. The entire Date & Time control can still be enabled/disabled in the Visibility Control settings.
  • Removed conditional indicator support for the startDateTime and endDateTime properties that were deprecated in version 1.4.1. Frontend visibility tests for these properties are still operational, but will likely be removed in version 2.0.

Fixed

  • Fixed WP Fusion filters to improve the integration.

1.7.1 – 2021-03-29

Fixed

  • Fixed error in the plugin variables REST API route that caused the settings page not to load if WP Debug was enabled. Thanks @gsarig for discovering this issue and opening a support ticket!

1.7.0 – 2021-03-29

Added

  • Added the WP Fusion control, the first third-party integration for Block Visibility! 🎉
  • Added the Query String control, significantly increasing the marketing capabilities of Block Visibility! 🎉
  • Added react-select as a project dependency for all multi-select fields.

Changed

  • Updated control set UI when multiple controls are enabled to emphasize that all control conditions need to be satisfied for the block to be visible.
  • The “Restricted User Roles” setting now uses react-select for a cleaner user interface.
  • Updated contextual indicator icons. A generic indicator is now displayed when more than 2 controls are enabled.

Fixed

  • Fixed issue where blocks that should have been hidden by enabled visibility controls were appearing in REST API requests. This allowed sophisticated users to “see” content that was not intended for them via a public endpoint, i.e. wp-json/wp/v2/.... This is now fixed. Thanks @tkraftner for reporting this.
  • Fixed issue where the REST API url was not being fetched correctly in the plugin settings for WP installations that had prefixed, or “relocated”, the REST API. Thanks Mike for reporting this issue.
  • Fix minor error due to missing attribute schema.

1.6.0 – 2021-03-21

Added

  • New UI allows users to toggle on and off the available visibility controls at the block level, making for a cleaner interface.
  • New “control sets” attribute structure which improves the scalability of the plugin and allows nearly unlimited new features/functionality in the future.

Changed

  • Updated all visibility frontend tests to respect new “control sets” attribute structure while maintaining backwards compatibility.
  • Updated all editor conditional indicators to respect new “control sets” attribute structure while maintaining backwards compatibility.

Removed

  • Removed the obtrusive “Customize controls” admin notice in the editor in favor of a dismissible one-time “Quick tips” popup for new users.
  • Removed verbose attribute specification in the main plugin class for compatibility with blocks rendered server-side. This is no longer needed.
  • hide-control-section.js and corresponding function are no longer needed.

1.5.3 – 2021-03-10

Fixed

  • Fixed PHP error triggered by missing hideBlock attribute setting. Thanks @muppix for discovering this issue and opening a support ticket!

1.5.2 – 2021-03-06

Added

  • Added a support and review nudge on the plugin settings page in hopefully the least annoying way possible. 😉
  • New screenshots and readme updates.

Fixed

  • Fixed bug were visibility settings were still displaying for blocks disabled by the Block Manager.
  • Fixed conditional indicators not displaying for extra large and extra small screen size controls.

1.5.1 – 2021-02-28

Fixed

  • Fixed error where plugin settings were not being fetched from the REST api as expected. This issue impacted websites that had WordPress installed in a subdirectory. Thanks @elenasaygo for discovering this issue and opening a support ticket!
  • Fixed logic in the get_current_user_role() so no errors are thrown when WordPress installed in a subdirectory.

1.5.0 – 2021-02-22

Added

  • Screen Size controls allow you to show or hide block based on the width of the screen (Desktop, Tablet, Mobile and more).
  • Added universal function for retrieving plugin settings.

Changed

  • Minor adjustments to settings layout and styles.
  • All documentation links have been updated to reflect website changes.

Removed

  • Removed legacy visibility controls in REST API settings class.

Fixed

  • Fixed error where scheduling controls were still active on the frontend when disabled in the plugin settings.

1.4.3 – 2021-02-06

Fixed

  • Error that occurred when plugin assets were enqueued on incorrect admin pages. Improved logic now dequeues assets on any admin page without the Block Editor. Thanks @gsarig for catching this!

1.4.2 – 2021-01-19

Fixed

  • Error that occurred when the plugin was deleted.
  • Contextual indicator border not displaying on placeholder blocks (e.g. the Shortcode Block)

1.4.1 – 2021-01-18

Added

  • The ability to disabled scheduling at the block level without having to remove the start and end date/times.
  • The blockVisibility “supports” variable to all blocks types that have visibility enabled. This provide a more consistent method for detecting whether a block should have visibility controls or not.

Changed

  • The contextual indicator icons have been updated and are now more legible.
  • Refactored the scheduling controls.
  • Updated the Visibility by Role labels to be more consistent with standard WordPress labeling and nomenclature.

Deprecated

  • The startDateTime and endDateTime properties of the blockVisibility attribute have been deprecated. All new blocks will use the new scheduling property.

Removed

  • Visibility block attribute defaults in an effort to declutter block markup when only a few settings are enabled.

Fixed

  • Some third-party blocks were not receiving visibility controls when they should have, notably Jetpack blocks, due to the way their block JS is enqueued.

1.4.0 – 2021-01-01

Upgrade Warning

For the long-term maintainability of the Block Visibility plugin, changes to the underlying file structure were needed in version 1.4.0. Therefore, when you upgrade from version 1.3.0 or lower, the plugin will deactivate and you will receive an error message. But don’t worry, simply re-activate Block Visibility and you are good to go.

This is an unfortunate issue that will occur only once. We apologize for any inconvenience that this causes, but trust that this change better positions the plugin for many exciting enhancements in the future!

Added

  • Preliminary compatibility with Full Site Editing (Requires the Gutenberg plugin and a theme that is Full Site Editing compatible)
  • Hooks and slots to support the upcoming Pro add-on

Changed

  • Block Visibility now requires WordPress 5.5+ to take advantage of new core functionality
  • The base plugin file is now simply block-visibility.php and the setup class has been moved
  • Redesigned the Block Visibility settings page
  • Refactored the methods for fetching plugin setting and variable data on the Block Visibility settings page

Removed

  • Component styling that is not longer needed since the version requirement for the plugin is now WordPress 5.5+

1.3.0 – 2020-12-05

Added

  • User permissions now give website administrators control over who can use visibility settings
  • Custom REST API routes for retrieving plugin data

Changed

  • By default, visibility controls are now available to all users that have access to the Block Editor
  • Refactored the methods for fetching plugin setting and variable data in the Block Editor
  • Restructured much of the plugin with a more consistent file/folder layout

Fixed

  • Contextual indicator icon was incorrect when using all visibility controls and the block was disabled

1.2.0 – 2020-11-15

Added

  • Added the ability to “hide on selected roles” in the Restrict by User Roles visibility control Thanks to @edwardsh for the feature request!

1.1.0 – 2020-11-05

Added

  • Date and time controls for block scheduling
  • Contextual indicators for visibility setting to the Block Editor
  • A toolbar option for quickly hiding blocks
  • Additional plugin settings to dynamically control all the new features

1.0.1 – 2020-08-11

Fixed

  • Addressed the PHP warning message that may appear on new installations

1.0.0 – 2020-08-03

  • Initial Release

Meta

Ratings

See all
Log in to submit a review.

Support

Issues resolved in last two months:

4 out of 4

View support forum