Each site is unique to its visitor. There are times when an editor will want to hide certain blocks from visibility depending on the user role, the type of user, or the screen size the website is viewed from.
A solution to adding conditions to content blocks is to install the Block Visibility plugin, which gives visibility control to many types of blocks and additional features to schedule content visibility.
Getting Started
To get started, download and install Block Visibility.
Begin by navigating to Plugins on the dashboard and click Add New. From here, there are two options for installation.
Option 1: Search for Block Visibility. Click Install Now and Activate.
Option 2: Go to the plugin page, download the zip file, and upload into the designated section under Upload Plugin.
*Check if the plugin was successfully installed and activated under Installed Plugins.
Hide Paragraph Block on Desktop
Hiding a paragraph or content block from desktop viewers can be done from any Page or Post. Navigate to a Page/Post from the dashboard and select any block you want to hide.
The plugin will add a new feature “Visibility” under the Block settings on the right side.
Scroll to the section “Screen Size” and click the slider that says “hide on desktop”.
If you click out of the content block, you will see a little square icon show to the right for any blocks with conditions.
*Remember to click Update on the Page/Post so it saves your changes.
Other controls
The plugin offers other controls such as:
Hiding the block from everyone allows backend drafts to be created without taking the site down for updates.
Date & Time: Add a scheduled item (start and stop showing dates). Once you click on the date to schedule, it will pull up the date and time to be entered manually or by calendar.
User Role: Decide who the content block is visible for based on their role.
User Roles: Provides site based user roles such as administrator, editor, author, etc – decide whether to show or block the content from the selected role.
User Rule Sets: Allows for an “and if” condition set to be applied to the content block.
Query String: Allows control to configure block visibility based on the URL Query strings. Only one string should be added per line in each text box.
Plugin Settings
To access the plugin’s settings, find the Settings on the dashboard and hover to find “Block Visibility”.
You can also click Plugins, find Block Visibility and click Settings.
General Settings
The first tab “General Settings” of the plugin, has block editors, user permissions, full control mode, and uninstall.
Indicator Color
Under the Block Editor section > Contextual indicators, you will find an “Indicator color”. This is the color of the outline on the blocks that have conditions set.
User permission
Restrict block visibility controls to selected users – restricting what user roles have the ability to control visibility settings in the Block Editor.
Default visibility controls
The next tab “Visibility Controls” will provide access to enable or disable certain controls in the “Visibility” section under block editor.
The default visibility controls can be found under “General” and include Date & Time, Screen Size, and User Role.
This includes 3 of 4 controls and shows what the plugin defaults to for most frequently used controls.
Block Manager
The final tab “Block Manager” is the window where you can specify which blocks can have visibility controls.
The visibility controls are sectioned off into: Text, Media, Design, Widgets, Theme, and Embeds.
In each of these sections, you can control which elements can have conditions applied to them.
Summary
The Block Visibility plugin applies conditions to each content block on a Page/Post. The plugin has a premium version, but the free version gives access to the most commonly used and needed visibility controls.
Some of these features include: hiding blocks, scheduling content visibility, and controlling which users and screen sizes can see certain blocks.
