Block Visibility — Conditional Visibility Controls for all Blocks

Descripción

Block Visibility te permite controlar qué bloques son visibles en tu web y quién puede verlos.. Muestra sin esfuerzo bloques condicionales basados en programaciones, perfiles de usuario, tamañños de pantalla, cadenas de consulta, campos ACF y etiquetas de WP Fusion específicas, y más. Block Visibility desbloquea el potencial del contenido dinámico y personalizado.

Creado para el nuevo editor de bloques (Gutenberg), este plugin se diseñó para funcionar con cualquier bloque de WordPress. Esto incluye los bloques ofrecidos nativamente por WordPress así como bloques de terceros.

Controles de visibilidad

Visibility controls determine whether a block should be visible to users on the frontend of your website based on a range of conditions. Current controls include:

  • Hide blocks from all users
  • Schedule content block visibility 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.)
  • Show or hide dynamic blocks based on URL query strings. Great for marketing campaigns!
  • More to come…

Third-Party Integrations

  • Advanced Custom Fields (ACF): Ever wanted to control the visibility of block content based on ACF fields? Well now you can!
  • 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.
  • More to come…

Have an idea for additional block logic? Let us know in the plugin support forum.

Why do I need this?

Block Visibility is a lightweight plugin that is designed to do one thing, and one thing well. While there are countless applications for dynamic content, 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 promotional content and/or event information to display at a set time.
  • Show or hide specific content on desktops, tablets or mobile devices.
  • Restrict content so it’s only visible to your customers or members.
  • Display messaging to logged-out users encouraging them to subscribe to your blog.
  • Conditionally display elements in the upcoming Full Site Editor using advanced visibility logic.
  • Dynamic content and personalization can increase visitor engagement and conversions.

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

Potentes ajustes

Tailor Block Visibility to your needs, or those of your clients, with powerful plugin settings.

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

Plays nice with others

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

  • WooCommerce
  • Jetpack
  • CoBlocks
  • Redux Framework
  • Ultimate Addons for Gutenberg
  • Kadence Blocks
  • Otter Blocks
  • Atomic Blocks
  • Gutentor
  • Stackable
  • Getwid
  • EditorsKit
  • Genesis Blocks
  • Advanced Custom Fields (ACF)
  • WP Fusion

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.

Míralo en acción

While a bit out of date, the video below provides a good overview of what Block Visibility can do and covers everything in version 1.0. Updated video coming soon!

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!

Capturas

  • Quickly and easily hide show or hide blocks on your website.
  • Schedule content, i.e. any Gutenberg block, using start and end date/time settings. The plugin provides complete block scheduling and work with all Gutenberg blocks, including WooCommerce as seen here.
  • 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.
  • 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.

Instalación

  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 content control, i.e. Gutenberg block control, on your WordPress website, then you need Block Visibility.

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.4+) and be using the Block Editor. 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 upcoming full site editing functionality?

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?

No. Block Visibility was design specifically for the WordPress Block (Gutenberg) Editor, and therefore does no work on pages that are controlled by the Elementor editor. There are other visibility logic plugins in the WordPress.org repository designed specifically for Elementor.

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.

Reseñas

8 de junio de 2021
I'm using conditionals by Query String. Great work! Thank you!
26 de mayo de 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!
13 de marzo de 2021
It does what it says on the label! Really great plugin. I especially like how you can customize the available visibility controls. Excited to see this evolve to support more conditions and plugins.
Leer todas las 17 reseñas

Colaboradores y desarrolladores

«Block Visibility — Conditional Visibility Controls for all Blocks» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Block Visibility — Conditional Visibility Controls for all Blocks» ha sido traducido a 1 idioma local. Gracias a los traductores por sus contribuciones.

Traduce «Block Visibility — Conditional Visibility Controls for all Blocks» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

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