Each visitor and customer who visits your site is unique. You will want to make the content dynamic and hide certain blocks for the type of screen the user is accessing your site from.
The simple solution is to use the Conditional Blocks plugin to change the visibility of certain blocks as well as determine the minimum and maximum size of the screens. While there is a premium version, it is not necessary to achieve the basic conditionals of showing blocks based on screen sizes or users logged in.
Getting Started
To get started, download and install Conditional Blocks
Begin by navigating to Plugins on the dashboard and click Add New. From here, there are two options for installation.
Option 1: Search for Conditional Blocks. 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 Block on Desktop
Hiding blocks on desktop view can be done from any Post or Page. Navigate to a Post/Page from the dashboard and select any block you want to hide.
The plugin will add a new feature “Visibility Conditions” under the Block settings on the right side.
Click “+ Add Condition”. You will see a screen to select from existing condition rules (some will be blocked from the free version).
Under the “General” section, select “Responsive (screen sizes).
Check the “Show on Mobile Screens” and “Show on Tablet Screens”; this effectively hides the block on the Desktop screens since it is unchecked.
In the “Visibility Conditions” block settings you should see “responsiveScreenSizes” under “Active Block Conditions”.
Click to update the Post/Page and it should be hidden if the visitor is viewing on a Desktop sized screen.
Lockdown (hide block from everyone)
Another useful condition rule is the lockdown – this allows developers to continue adding or changing content while the page is live. Lockdown is essentially hiding the draft blocks without bringing the site down for updates.
Conditions on Blocks
A block with a condition will have a border and a label highlighting that it has a condition.
This makes it easy to see which blocks have conditions.
Settings
There are no plugin settings to configure. Condition settings are done within the “Visibility Conditions” section in the Block editor on each Page/Post.
Click “Configure conditions” and it will present you with three sections:
Current Block: Apply certain conditions to an individual block (Free version allows general visibility settings and visibility based on users being logged in/out).
*Note: Premium version gives access to Posts & CTP, Server Request, Time, Advanced, Woocommerce, and Preset Manager.
Preset Manager: *Premium users – allows application of a group of conditions across multiple blocks.
Settings: Responsive Blocks – Define the max and min widths for desktop, tablet, and mobile screens.
Summary
The Conditional Block plugin allows editors to play with the visibility control of WordPress blocks. The free version is enough to control content visibility for users based on their screen size while allowing to also resize the screen sizes and control what users can see when signed in/ not signed in.
The premium version allows more conditions to be applied to blocks of content.
