[Resolved] problem with multiple hidden container blocks

[Author]

Posts

[martinE-4]

When I have two hidden container blocks, I can only hide one (using the 'Advanced' hide element option). If I hide the second one for all devices, the first container block becomes visible. Seems like a bug.

I workaround by changing text to white and 0.1 font size for second container but still seems it should be fixed. Thanks.

[Beda]

I have added 2 Containers and hidden both on all screens. They remain hidden.

I've also tried several different combinations, which all resulted in the expected shown/hidden output, both in the backend and front end considering the settings of the breakpoints set in Toolset > Settings > General > Responsive web design breakpoints for Toolset Blocks

What are the exact steps you take to replicate this issue on a fresh post or content template?
This might help to narrow down the problem.

[martinE-4]

Sorry for not giving more detail:
- GeneratePress theme
- Page content template
- using latest Views plugin with Blocks editor
- Running Safari 13.0.5 on High Sierra on iMac
- template has:
1. container with Toolset Heading Block (this was hid successfully using Hide Element on Mobile/Tablet/Desktop on the container until I added a second container block with a simple view further down)
2. Toolset Image Block
3. Toolset shortcode block with [wpv-autop][types field='page_body'][/types][/wpv-autop] (using [wpv-autop] because custom wysiwyg fields don't show para breaks otherwise - another ticket: https://toolset.com/forums/topic/wpv-autop-shortcode-fix-still-has-problem-with-text-and-images/ )
4. container block with 'fake' view that I hide on Mobile/Desktop/Tablet (this fake view is required to preserve formatting in a view in the footer that is the subject of another ticket: https://toolset.com/forums/topic/using-a-view-in-a-content-template-like-a-page-builder-no-posts/). This block which is limited to showing 1 page title is the one I hide and hiding it seems to interfere with my hidden Heading.
5. Finally a final view block which displays fine

Specifically the structure of the blocks is:
Container (1st hidden block)
>>Heading
Container
>>Image
>>Shortcode
>>Container (2nd hidden block)
>>>>View ('fake' view I want to hide)
>>View

Background: Clearly if I am hiding a container on all 3 devices it will never show. I use the feature during development to hide a block which I 'may' use later in the design. I realize I could make it a reusable block and call it up later but I can easily forget it if it isn't sitting exactly where it is supposed to in the design. I love the 'hide' feature. The 2nd block I introduced to workaround the issue #4) - so it was by accident that I discovered this problem. I think it only happens when you try to hide both blocks completely at all 3 device platforms. That's how I see it here - when I completely hide the 2nd container, the first pops up at the desktop level. This is ONLY seen on the front end on Desktop and Tablet but it hides on Mobile (I shrink drag the Safari browser to check this). (not in the Blocks editor - looks great there).

I made a few tests:
Back End-->Container 1 - hidden at all 3 levels / Container 2 - hidden at all 3 levels
Front End -->Container 1 - hidden on Mob, Visible on Desktop/Tablet (UNEXPECTED) / Container 2 - (hidden as expected)

Back End-->Container 1 - hidden at all 3 levels / Container 2 - visible on Desktop, hidden on Tab/Mob
Front End -->Container 1 - hidden on Mobile + Desktop, Visible on Tablet (UNEXPECTED) / Container 2 - (displays as expected)

Back End-->Container 1 - hidden at all 3 levels / Container 2 - visible on all levels
Front End -->Container 1 - (hidden as expected) / Container 2 - (displays as expected)

Back End-->Container 1 - hidden at all 3 levels / Container 2 - visible on Desktop/Tab, hidden on Mob
Front End -->Container 1 - (hidden as expected) / Container 2 - (displays as expected)

Back End-->Container 1 - hidden at all 3 levels / Container 2 - hidden on Desktop/Tab, visible on Mob
Front End -->Container 1 - hidden on Mob, Visible on Desktop/Tablet (UNEXPECTED) / Container 2 - (displays as expected)

There may be more combos which result in UNEXPECTED behavior but I was hoping this was enough info for you to reproduce it and my head was beginning to go in circles...

Many, many thanks. I know all the hours that must be put in creating the Toolset plugins. I rely on them!

PS I just realize you asked me to try a FRESH content template. Sorry I used the one with the problem. I will try a fresh one soon after a break to get a bit more work done. Sorry.

[Beda]

This is a very unique and complex setup.

I am almost sure the issue is only happening with a precise mix of steps. I tried above but still can't see this issue, unfortunately.
Can you zip this site up and send me a copy?
I can then check this directly on that duplicate, remove parts and determine what is the core ingredient to this issue.

I'm sorry for asking for this additional detail, however, I think it will save the need of re-explaining how you do it over and over.

[Beda]

I see there is the first block, it is a container, with a heading.
It is hidden for all devices.

Surely this is not how you want to design the site no matter what.
I mean, if this solves some other issue, great, but it should not be used, of course, because a always hidden element is really not something we should include in such page builders.

Please let me know if any use case of hiding a block on all devices is necessary.
Note that we can't cover SEO or hidden content with these blocks, they are intended for actual content construction.

So, according your requirements here https://toolset.com/forums/topic/problem-with-multiple-hidden-container-blocks/#post-1521971 you mention:
"If I hide the second one for all devices, the first container block becomes visible. Seems like a bug."

I did not realize what you mean, but now I must ask:
Why do you want to hide a container for all devices, other than maybe fixing some issues with other displays or blocks?
This is not expected.

However, I tried (the first block is hidden) to hide the second block on all devices as well, and the first block did not come back visible.
But this makes no sense to me, why to hide all blocks on all devices, or even just a few.

If this was suggested as a fix, please don't apply it, it is not a fix, it is maximally unexpected, but likely not intended to be used like this
Even so, it is perfectly possible in the duplicate, to hide all blocks, either on all devices or randomly as I checked.

Hence I am not sure if I miss the issue, or if it is maybe just a misunderstanding?

[martinE-4]

Hi Beda
You are quite right that it is unusual to completely hide a block. However, in my case it facilitates my development effort, since I have hundreds of pages and during the design process I wish sometimes to hide a block in the hope that if I come back later that it will be right where I need it if the client decides they want it.

I didn't think it was an unreasonable expectation even though it is unusual. I'm sorry if it is causing you distress.

Since you were unable to reproduce the issue, I will put this on a staging site and set it up exactly as I discovered the issue and refer you to the exact page and template. I am sorry I haven't been clearer. I apologize. I'll get back to you soon.

[Beda]

No distress at all :D, I just was wondering when this is useful.

We can help with shared online services if you want, I can set up a testing site online and we can deploy the duplicate there if you prefer?

Please let me know, I also enabled a private reply in case you already have a testing site ready to share.

[martinE-4]

No real need for my site.

Try a simple fresh site. No plugins. Just toolset. I discovered this using the GeneratePress theme but it happens in 2020 theme too.

Create a new page (I called mine "Hidden Block problem" and choose no content template (NONE)

using the Views plugin and Gutenberg:
1. Create a Toolset Container block
2. Inside put a Toolset Heading block (static) and type "Hide Me" - colour it pink for fun
3. Duplicate the container
4. In the 2nd container make the header text "Hide Me too!" - colour it pink too for more fun
5. Hide the 1st container on all devices
6. Hide the 2nd container on all devices
7. Display on the front end. Do you see what I see? (Screen grab included)

Apologies for the colour humour - it's been a long day.

[Beda]

Nope, I do not see any output, because I've hidden it all with the advanced settings from all the screens, so that is expected I see no output.

It seems your first container is not hidden from all screens when you hide more than one container on all screens.
Weird, as I cannot see this issue after precisely replicating the steps you mention.

I provided a Duplicate here because I fear I miss something hidden link
It has 2 posts, as you'll see each has 2 (duplicated) containers with some heading content and all is hidden on all screens.

You can deploy the duplicate on any test site to check, I hope we can define the difference in setup, so to adjust the misbehaviour.

[martinE-4]

I am able to create (both with Blocks or Views plugin) the problem on the site you sent. Here is the gdrive link to the duplicator package - (decompress to get the archive.zip and the installer.php):
hidden link

I use the same login credentials that you had on it.

Curiously the one that you created behaved properly. But the two pages that I created with different plugins (Martin with Blocks and Martin with Views) show the problem (Container 1 is visible at Desktop and Tablet). I am at a loss to understand what is happening? Maybe the devs can help? I am running php 7.3.5 on my Local WordPress install. WordPress 5.3.2 and MySQL 8.0.16

I would like to know if you see what I am seeing on the two pages I created on your site. At full browser width and also squeezed to tablet, I see container 2. When I drag it small to phone size, both containers are hidden. Did you use a different sequence than below to create your page?

Notes on my block creation process:
- click on Add page (check that Content Template is NONE)
- new block (Toolset Container)
- click in the Container block to add Toolset Heading block
- enter some text to the heading
- duplicate the container block
- edit the 2nd header block to change the name
- then make each container block 'hidden' using the switch under 'advanced' in the sidebar for each device level
- then preview and see container 1 displayed at desktop and tablet

thanks
Martin

[martinE-4]

Oops I meant I see Container 1 (the first one) - sorry.

[Beda]

I see your created post has the issue, not my posts.
I followed the precise same steps.

I repeated those precise steps today on that same duplicate you sent back. Of course, it doesn't work this time 🙂
I tried the same steps from here, https://toolset.com/forums/topic/problem-with-multiple-hidden-container-blocks/#post-1536639, and guess what - I also failed.

I would like to emphasize that just yesterday I sent you a working copy, where the precise steps where followed not on one, but two pages, all working fine 🙂
Better even, after a few trials on the duplicate, I was again able to make it work.

I then deleted (from a saved page) the containers.
I re-added them, they work now 😀

I thought, maybe the sequence with which we save the settings influences the code, and hence threw the two blocks Codes in a Diff checker, and I found a difference.
Indeed, while in the broken version the rules for phone come after the rules of tablet in the code, on the working version that's inverted.

As soon as both containers have the same order of phone/tablet rules in the code, then it works
If they are inverted, the first container fails.

That order is determined by how we actually save the settings for visibility, I confirmed this:
if you are to first hide a container on mobile, then on the tablet, that's the sequence it'll save in the code.
As long all>/em> your hide elements follow that same sequence of first hiding phone and then only tablet it'll work fine, as soon you once save first the table settings it'll break

Of course, I then tried to verify these observed symptoms on a fresh page and , of course, 😀 it won't be an issue at all, it'll just work fine no matter what order the code has.

It remains a mystery to me how this happens but it is related to the sequence with which we save the settings of the visibility.

I'll send the duplicate to the developers, thanks for pointing this (very weird) issue out to us.

[Beda]

You can solve this issue by switching from Visual to Code editor, find the first Blocks occurrence of the code below

"tablet":{"display":"none"},"phone":{"display":"none"}

Then make sure, it follows the same exact pattern as all your other blocks.
Generally, the first block will differ from the others like so:

"phone":{"display":"none"},"tablet":{"display":"none"}

Notice once the phone is first and once tablet is first?
It needs to be the same for all blocks, then it'll work

So if you need this to work immediately you can already go ahead and adjust the blocks in the "Code Edit" mode.

Our developers will look into this and I'll keep you in the loop about eventual fixes in the code.

[martinE-4]

Thanks Beda for all your help here. I appreciate you sticking with me.

Another (perhaps related) problem I have noticed is that the Typography Font style settings seem to not work correctly between device sizes.

Problem: The Font style (B, I, U, strikethrough) is hard to turn off for lower device levels (ie. if a style exists on desktop it is hard to remove it on tablet and reinstate on mobile).

- create a Toolset container block and put a paragraph block inside it
- in the container typography settings try changing the Font Style (B, I, U etc) to make it different at different device levels. I think you will quickly see that it is hard to turn on say Underline on desktop and then turn it off for a lower level like tablet or phone. I had trouble with various combinations. The 'switches' do not seem to have an 'on' or 'off' position.

What works correctly:
anything that has a numeric or text input like, size, font, line height, color.

So as far as I can tell the only problem is with Font style not being easy to get right.

New threads created by Beda and linked to this one are listed below:

https://toolset.com/forums/topic/some-issues-with-typography-settings-on-lower-screen-sizes/

[Beda]

This is a different problem - we need to handle each problem in one ticket.

For now, I have split that second issue here, where a supporter will follow up:
https://toolset.com/forums/topic/some-issues-with-typography-settings-on-lower-screen-sizes/

Related to the issue reported here, I was able to replicate this (even without a container) so our Developers will be able to fix this in future releases.

I'll keep in you in the loop for this usability issue.
Note, the workaround should work in a stable manner if you want to apply it.