Block Visibility includes 12+ way to conditionally display block content. That said, there are plenty of additional features and integrations that could be added. This article details the filters and slots available in Block Visibility, which allow you to extend the plugin with your own visibility controls.

JavaScript Filters

Editor

blockVisibility.attributes

📁 src → 📁 editor → index.js

Filter the blockvisibility attribute specification (schema). Use this filter to add sub-attributes to the main blockvisibility attribute. Otherwise, a block error will likely occur.

Parameters	Description
attributes	(Object) The blockvisibility attribute specification

blockVisibility.globallyRestrictedBlockTypes

📁 src → 📁 editor → index.js

Use for blocks that are not compatible with visibility controls or when you want to manually restrict block types from having visibility controls.

Parameters	Description
blocks	(Array) All blocks that should have visibility controls disabled

blockVisibility.widgetAreaRestrictedBlockTypes

📁 src → 📁 editor → index.js

Used for blocks that are not compatible with visibility controls when the blocks are used as Widgets.

Parameters	Description
blocks	(Array) All blocks that should have visibility controls disabled

Inspector Controls

blockVisibility.addInspectorControls

📁 src → 📁 editor → 📁 inspector-controls → index.js

Filter used to add additional top-level visibility controls and functionality. For example, the Hide Block control is registered at this level.

This filter should not be used to add controls that need to be part of a control set. Use blockVisibility.addControlSetControls instead.

Parameters	Description
blockAtts	(Object) The current attributes of the block
enabledControls	(Array) Array of all enabled visibility controls
...props	(Object) All the other props passed to the VisibilityInspectorControls component

blockVisibility.addControlSetControls

📁 src → 📁 editor → 📁 inspector-controls → controls-panel.js

Filter used to add additional visibility controls and functionality at the control set level. Controls added using this filter will appear at the block level and in Visibility Presets.

Properties	Description
uniqueIndex	(String) A unique index for the control set
enabledControls	(Array) All enabled visibility controls
setControlAtts	(Function) Update the control set attributes
...props	(Object) All additional props passed to the ControlSet component

Visibility Controls

blockVisibility.screenSizeIncompatibleBlockTypes

📁 src → 📁 controls → 📁 screen-size → index.js

Use for blocks that are not compatible with the Screen Size control. Typically this occurs when blocks do not support CSS classes.

Parameters	Description
blocks	(Array) All blocks that should have visibility controls disabled

Conditional Indicators

blockVisibility.contextualIndicatorActiveControls

📁 src → 📁 editor → 📁 contextual-indicators → index.js

Filter the object of active visibility controls used to display contextual indicators.

Parameters	Description
activeControls	(Object) All active visibility controls on the block
blockVisibility	(Object) The blockVisibility attribute
controls	(Object) All visibility controls available to the selected block
hasControlSets	(Boolean) Whether or not the block has a control set
enabledControls	(Array) Array of all enabled visibility controls
variables	(Object) All plugin variables

blockVisibility.contextualIndicatorClasses

📁 src → 📁 editor → 📁 contextual-indicators → index.js

Filter the CSS indicator classes that are added to each block based on the individual indicator tests.

Parameters	Description
classes	(String) The current indicator classes applied to the block

Settings

blockVisibility.PluginSettings

📁 src → 📁 settings → 📁 visibility-controls → index.js

Allows you to add additional content to the Plugin Settings tab.

Properties	Description
pluginSettings	(Object) Current plugin settings
setPluginSettings	(Function) Update the plugin settings
...props	(Object) All additional props passed to this component

blockVisibility.VisibilityControls

📁 src → 📁 settings → 📁 visibility-controls → index.js

Allows you to add additional content to the Visibility Controls tab.

Properties	Description
visibilityControls	(Object) Current visibility control settings
setVisibilityControls	(Function) Update the visibility control settings
...props	(Object) All additional props passed to this component

Global Utilities

blockVisibility.controls

📁 src → 📁 utils → get-enabled-controls.js

Filters the array of all available visibility controls, including those added by third-party extensions. Use this filter to register your own custom controls.

Parameters	Description
controls	(Array) All available visibility controls

blockVisibility.enabledControls

📁 src → 📁 utils → get-enabled-controls.js

Filters the array of all enabled visibility controls, including those added by third-party extensions. Enabled controls are ones that have not been disabled in the plugin settings. For third-party integration controls, we also make sure that the respective plugins are installed and activated. Use this filter to override enabled controls.

Parameters	Description
enabledControls	(Array) All enabled controls
settings	(Object) All available plugin settings
variables	(Object) All available plugin variables

PHP Filters

Frontend Tests

block_visibility_is_block_visible

📁 includes → 📁 frontend → render-block.php

Filter whether or not a block should be visible. All the frontend visibility tests are run through this filter, which returns true or false. When writing your own frontend tests, if is_visible is already false, this means another active test indicated the block should be hidden. In this case you should return false as well.

Parameters	Description
is_visible	(Boolean) Should the block be visible
settings	(Object) All available plugin settings
attributes	(Object) All available plugin attributes

Settings

block_visibility_settings

📁 includes → register-settings.php

Use this filter to add custom plugin settings.

Parameters	Description
settings	(Array) All available plugin settings

block_visibility_setting_defaults

📁 includes → register-settings.php

Use this filter to add default values for custom plugin settings.

Parameters	Description
defaults	(Array) Default values for all plugin settings

Slots

Inspector Controls

ControlSetControls-[uniqueIndex]

📁 src → 📁 editor → 📁 inspector-controls → controls-panel.js

📁 src → 📁 editor → 📁 preset-manager → controls-set.js

Use this slot to render custom visibility control UI.

Properties	Description
uniqueIndex	(String) A unique index for the control set
enabledControls	(Array) All enabled visibility controls
setControlAtts	(Function) Update the control set attributes
...props	(Object) All additional props passed to the ControlSet component

ControlSetControlsIntegrations-[uniqueIndex]

📁 src → 📁 editor → 📁 inspector-controls → controls-panel.js

📁 src → 📁 editor → 📁 preset-manager → controls-set.js

Use this slot to render custom visibility control UI for third-party integrations.

Properties	Description
uniqueIndex	(String) A unique index for the control set
enabledControls	(Array) All enabled visibility controls
setControlAtts	(Function) Update the control set attributes
...props	(Object) All additional props passed to the ControlSet component

Settings

PluginSettings

📁 src → 📁 settings → 📁 plugin-settings → index.js

Use this slot to add custom UI to the “General Settings” tab on the Block Visibility plugin settings page.

Properties	Description
pluginSettings	(Object) Current plugin settings
setPluginSettings	(Function) Update the plugin settings
...props	(Object) All additional props passed to this component

VisibilityControls

📁 src → 📁 settings → 📁 visibility-controls → index.js

Use this slot to add custom UI to the “Visibility Controls” tab on the Block Visibility plugin settings page. Content will appear above the Integration Controls section.

Properties	Description
visibilityControls	(Object) Current visibility control settings
setVisibilityControls	(Function) Update the visibility control settings
...props	(Object) All additional props passed to this component

VisibilityControlsGeneral

📁 src → 📁 settings → 📁 visibility-controls → 📁 general → index.js

Use this slot to add custom UI to the “General” panel on the “Visibility Controls” tab on the Block Visibility plugin settings page. Content will appear at the bottom of the panel.

Properties	Description
visibilityControls	(Object) Current visibility control settings
setVisibilityControls	(Function) Update the visibility control settings
...props	(Object) All additional props passed to this component

VisibilityControlsIntegrations

📁 src → 📁 settings → 📁 visibility-controls → 📁 integrations → index.js

Use this slot to add custom UI to the “Visibility Controls” tab on the Block Visibility plugin settings page. Content will appear at the bottom of the Integration Controls section.

Properties	Description
visibilityControls	(Object) Current visibility control settings
setVisibilityControls	(Function) Update the visibility control settings
...props	(Object) All additional props passed to this component