Create a way to hide blocks at will

[cjyabraham]

On the old site, @meganelizabethphillips used to toggle on/off blocks of content at various times during the event cycle. Could we have a way of doing this in Gutenberg that makes sense? What about being able to add a "hide" CSS class to any given block to hide it?

[dankohn]

That sounds problematic because it could be sensitive content but would be viewable in the HTML. Is isPrivate a thing? https://github.com/WordPress/gutenberg/issues/4573#issuecomment-358680603

[cjyabraham]

What about having a dummy Event that is only ever kept in draft that contains all content and when you need certain blocks you cut/paste into your live Event? This would keep the live Events lighter to keep them loading as swiftly as possible in edit and public modes.

Alternatively, you could keep all such text in a reference Google doc to cut/paste in?

@meganelizabethphillips would this meet your needs?

[cjyabraham]

Here's a plan B however I think adding a whole layer to make blocks conditional could introduce a host of complexities we may not want to take on.

[meganelizabethphillips]

@cjyabraham Eh, we can go back to using a google doc for this if nothing else will work. Let me think on this some more.

[cjyabraham]

@meganelizabethphillips Ok. I'll close for now but feel free to re-open if you decide you need something done.

[cjyabraham]

@meganelizabethphillips you brought up this idea again this week and, after a quick search, I think we're at the same point as we were previously. Gutenberg isn't great at holding content that isn't displayed to the user. At best, we could hide it using css but it would still be available to people in the source code. I'll reopen this issue, though, and ask around for other opinions and get back to you if I hear of a viable solution to this.

[cjyabraham]

I tried the conditional blocks plugin and am quite pleased with it. For this issue, @meganelizabethphillips could just use the condition of showing any particular block to only users who are logged in, to effectively turn off blocks of content to the public. That content appropriately does not appear in the source of the page when it is turned off. Megan could use an incognito window to view what the public is seeing at any given time:

The front-end load of the plugin is minimal with just a small css file. We could even turn that css file off if we're not going to be using the device conditions.

I also checked what would happen if one day we needed to deactivate the plugin. All content remains intact and just the conditions go away. I also checked if it works ok with WP 5.4-RC1 and it works fine there too.

@meganelizabethphillips any thoughts? Would you be comfortable switching back and forth between incognito windows to verify what the public view looks like? Would you like a demo to play with?

[meganelizabethphillips]

@cjyabraham a demo would be fantastic - thank you soooo much!

[cjyabraham]

@meganelizabethphillips try playing around with it on this sandbox instance. You can use your live credentials to login. Each block has a "Conditions" setting section in the sidebar. LMK if you wanna discuss on a call.

[thetwopct]

@meganelizabethphillips Just trying to come up with alternatives solutions for this - is it always the same type of blocks/sections you need to hide? Is there an example scenario you can share with me? I'll speak to Chris about this too as he might already have this info.

@cjyabraham I think this could be done by "extending" existing blocks. For instance, the "Group" block could be extended to have a hide/show toggle within it. A quick intro to it: https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/ We'd need to monitor it every time Gutenberg updates for breaking changes, but as we want to control Gutenberg updates + testing this shouldn't be a problem.

[cjyabraham]

@thetwopct I like that idea. It would keep the solution very lean and simple. I assume @meganelizabethphillips would just need this for the Group block and the Stackable Container block so she could turn the visibility on/off for chunks of content.

@meganelizabethphillips once you try out that plugin I setup we can discuss this new idea and whether it's worth pursuing.

[meganelizabethphillips]

@cjyabraham this plug-in worked nicely. I did a few tests and it seems you only need to change "Show for User State" and can ignore the settings below (for mobile, etc). I checked it on mobile and it appeared the same way it did on a laptop which is nice. Also, I hid a container and it hid everything inside of it, which is exactly what we want. Wahoo! @thetwopct we like the idea of using this tool widely, as hiding blocks is helpful across the whole site. We would want to make sure this could work on things like reusable blocks and groups, though we don't use the groups option as often as the reusable blocks.

[cjyabraham]

@meganelizabethphillips if the Conditional Blocks plugin meets your needs, then I will activate it on the live site. It seems quite a lightweight plugin and, by using it, we'll benefit from its ongoing development, especially in keeping up with changes to Gutenberg. I'd prefer this route rather than writing our own plugin and then having to maintain it ourselves. Sound good?

I would like to dequeue the css file on the front end that controls the device-specific settings. Can you confirm that you won't need to use the "Hide on Mobile", "Hide on Desktop"... conditions? Or do you think you might want to use those?

[meganelizabethphillips]

@cjyabraham sounds great! Please move forward. Right now, it seems that if you only show it to signed in users, it appears to work across the board (mobile, desktop, etc) - so as long as the CSS changes won't affect the overarching condition, we should be good to go! Thanks!

[cjyabraham]

This is deployed and ready to use.