This module allows you to set the CSS Display and Order properties of a block. They are responsive and useful for responsive design.
You can enable this module via “WordPress Dashboard -> Plover Kit -> Modules -> CSS Display“
Display Panel Overview
Take the Column block for example, you can find the Display panel in the block settings.
Display
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children. There are currently 6 options.
Visibility (Premium)
The visibility CSS property shows or hides an element without changing the layout of a document.
Order
The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0.
Overflow (Premium)
The overflow CSS property sets the desired behavior when content does not fit in the element’s padding box (overflows) in the horizontal and/or vertical direction.
Box Sizing (Premium)
The box-sizing CSS property sets how the total width and height of an element is calculated.
Responsive Design
With the responsive buttons behind the setting label, you can not only preview the style of the page for different devices, but also set different values for different devices separately.
Select Invisible Blocks
When you set a block’s Display attribute to None, it will not be visible in the editor, and you can use the Block Editor’s Document Overview menu to select the invisible block.
Leave a Reply