Archived topic
Visually determine which blocks/nodes are hidden
3 replies · Started by Dan on September 13, 2021
Hi.
I'm opening a page and trying to find hidden blocks within. The only way I can select a hidden block is through the Block Navigation pane. In order to know if the block is hidden on desktop, tablet, or device, I need to click every single block node in the tree and for each of those nodes, click on "Advanced" and see which toggles are checked for each device type, as mentioned here:
https://docs.generateblocks.com/article/device-visibility/
Thus, the act of searching for hidden blocks can be tedious and prone to human error.
In a previous theme I used, they grayed out hidden blocks based on which device width was being used. I did see Tom's response here about a similar feature request:
https://community.generateblocks.com/t/hide-on-devices-grayed-out-element-and-option-to-not-hide-from-admin/46/3
So I thought a bit more about this and am wondering if you could add a label next to the nodes (or do something visually to the nodes) in the Block Navigation pane? Nodes already display the anchor IDs of blocks, so I'm hoping whatever method you are using to label those nodes can be extended to device visibility toggles?
If that were implemented, I'd just need to open the Block Navigation pane and scroll through to quickly tell if a page/post contains anything hidden on any device widths. I'd actually prefer that over graying out the block elements since I'd only have to look at the node tree once instead of viewing the device width preview three times.
Do you have any other ideas on how to do this? Or if it's a quick fix in your mind, could you share a snippet of code (CSS or PHP) that I could add to my child theme (or even to the base theme temporarily) to label, color, or do something visually to hidden block nodes? In fact, I made a hidden block intentionally and looked for a class on that block element or node that would indicate which devices it displays on so that I could write a CSS selector, but I did not see any such class in either place.
Am I missing a really easy way to reach my result (e.g. the feature already exists)?
Thank you for your thoughts.
Regards.
Hi Dan,
This is actually a good question to ponder.
Personally, I usually go with Google devtools and check things through the frontend.
I usually go with this CSS:
body *{
display: block !important;
border: 1px dashed red;
}It seems weird to do but this generally works for me but it's not 100% reliable because some parts may be already using !important for its display css property.
I also force display:block !important; on the whole page using scripts sometimes but I only do this on small pages. The page will crash if there's too much in it.
But as for having some sort of indicator for the backend editor. This is something WordPress should improve on. The best thing we can do at the moment is to always use the block's List view to check.
Note: While I understand you can try having some sort for indicator using editor-styles, it's not going to be perfect especially for added CSS class selectors because it doesn't dynamically apply to the editor-styles and front end styles in real time simultaneously.
If only these hidden blocks had a unique CSS class.
Marking this ticket as resolved. Tom potentially has this request on his radar for the next GB release and I have your suggestion above that may function as a workaround or aid in the process that I'm going through across the site.
Thank you for your thoughts, Elvin.
No problem. Glad to be of any help. :D
