In some designs, you may need to hide blocks based on screen size. For example: removing a sidebar on mobile devices.
Typically, this is done using CSS by setting the display property to none for the relevant screen size. GenerateBlocks makes this easy by allowing you to apply these settings directly within the block settings.
Methods of hiding blocks
There are several methods depending on your requirements and whether you’re using Free or Pro
GenerateBlocks Pro Device Visibility settings
In GenerateBlocks Pro 2.1 the much requested device visibility options will be present in the Block Settings.
GenerateBlocks Pro Global Style
With GenerateBlocks Pro Global Styles you can build your own custom classes.
- Create a new Global Style
- Switch the editor preview to device size you want to apply this to.
- In Styles > Layout -> Display –> Options choose Enter Custom Value
- In the Custom Value field add:
none !important - Save the Global Style.
GenerateBlocks Free
- Select the block you want to hide
- Switch the editor preview to device size you want to hide the block on.
- In Styles > Layout -> Display –> Options choose Enter Custom Value
- In the Custom Value field add:
none !important
Working with hidden blocks in the editor
When using Device Visibility controls, hidden blocks will be concealed both inside the WordPress block editor and on the front end of your site. To manage these hidden blocks, you can use the List View feature to select and edit them even when they are not visibly displayed. It’s important to preview your changes on the front end to ensure the layout appears as expected across different devices.