Every time a new update of the Gutenberg plugin comes out, which incorporates what the WordPress editor will have in its next version, new features are incorporated that yes, some are nice, some are cool, some are useful, but many of them will only serve a few users.
But it turns out that there are things that are missing from the block editor that we do not see in any update.
I am basically referring to 2 tools that I consider essential for a page builder:
- Block visibility settings.
- Block animations.
Today we are going to talk about the first one…
Table of Contents
Block visibility settings
In the world in which we live it is necessary, essential, mandatory, to be able to create our pages, layout them, being able to decide which section, module, row, or block should be seen …
- According to the visitor’s device.
- According to the user profile of the visitor.
That at least, but then it would also be great to be able to program the visibility of the blocks by dates, for promotions, campaigns, whatever, even to be able to apply custom queries, don’t you think?
I have already mentioned that there is a plugin that incorporates many features that the WordPress editor lacks, EditorsKit, but today we will focus on the visibility of blocks exclusively, and in this, there is no better plugin than Block Visibility, much better even than EditorsKit for this functionality.
Once installed, this free plugin has a large page of settings that should be reviewed…
To begin with, in the general settings we must activate those visibility controls that we want to have available in the editor.
And here my advice is simple: activate all of them, to deactivate the ones you don’t use there will always be time, but to see the full potential of the plugin you’d better see everything it has to offer.
There is also an additional setting at the bottom of this page where you can activate what it calls “Full Control Mode“.
By default, the Block Visibility plugin supports all blocks in the WordPress editor and many popular block collections, but you may find that a particular block does not have visibility controls.
The only restriction of the plugin is that it doesn’t work on child blocks, for example, you can’t apply visibility controls to a column of a column block, only to the whole column block.
Well, if you enable full control it forces that compatibility and the plugin will try to be functional on all blocks except child blocks, that’s a general restriction.
My advice is that, initially, do not activate it, and if later you discover that some block does not have visibility controls, and you really need it, try activating the full control.
If we continue to the next settings screen there are the visibility controls, where we can further customize the types of visibility controls that we activate in the general settings.
Again, my advice is to activate everything, and later you can deactivate what you do not use.
Especially detailed are the visibility controls by screen size, where by default there are default sizes for desktop, tablet and mobile, but you can customize them and even add more.
You can simply edit the sizes of each breakpoint or enable the advanced screen size controls and edit the existing ones and add more device sizes.
Another interesting setting is to have the plugin automatically load the CSS of the frontend on the website, which is what it does by default.
But you can disable it and by clicking on the “Preview Frontend CSS” button copy the CSS and apply it on your own only where it is needed, not globally.
I think it’s great that they have even thought about this aspect, very important for customization and optimization of CSS loading on your website.
Finally, in the last screen we can specify, one by one or by type of block, where we want visibility controls and where not, so as not to overload the editor.
Well, now that we have all the settings, we just have to get down to work and apply visibility controls to our blocks.
Hide a block completely
Once in the WordPress block editor the first thing you’ll find is a single button in the block settings dropdown with which to completely hide the block.
You also have it in the block settings bar, and what it does is that that block will not be seen by anyone or under any conditions, it will be a hidden block altogether.
Schedule block visibility by date
Once you have selected any block, from the block settings you can select when the block in question will be visible.
It is, in fact, a scheduling of the block’s visibility, being able to choose the date and time when the block will start to be seen and the end date, when it will no longer be visible.
But that’s not all, because you can add several schedules to the same block, each with its start and end dates and times.
Block visibility by user profile
Another visibility control you will find is to hide or show by type of user profile.
By default a block is shown to everyone, but you can limit it by selecting to show it only to:
- Disconnected users.
- Connected users.
- Certain profiles.
The behavior of these settings is that if you select a type of user they will be the allowed ones, and the rest of the users will not be able to see the block.
Note: Administrators can always see the blocks.
In addition, if you want to control the visibility by user roles, just select the profiles that will see the block or, if you prefer, those that will not see it, by changing the toggle visibility selector below.
Block visibility by device screen size
The setting that you will probably use the most when designing pages with the block editor will be the visibility by screen size, by device.
There are no mysteries, simply the block will be hidden on the device sizes that you activate, which I remind you can customize in the plugin settings.
Normally this is used a lot to layout according to the device so that, for example, a video background is hidden on mobile and a background with image and same target is added, in this case hidden on desktop devices.
Visibility of blocks according to query chains
Finally, with this plugin you have additional visibility controls with which, by specifying parameters and values in URL query strings, you can decide that a block will only show when certain, several or none of the specified query strings occur, depending on which field you choose to put them in.
In case you don’t know what this refers to, it is when there is a query string in a URL using a ?, for example:
https://wphelp.com/block-visibility/?<span class="has-inline-color has-vivid-red-color">utm_source=dlvr.it&utm_medium=twitter</span>Code language: HTML, XML (xml)
This is especially useful for hiding content when the visit comes from a particular source or in certain response chains in online stores and the like.
What I still do not understand is why a tool like this plugin is not incorporated into WordPress, but others are, because this at least would be useful for all users.