Gutenboarding: hide block UI via CSS

[simison]

Hide block UI with CSS overrides.

Not great, but it seems like there isn't a core provided mechanism just yet (WordPress/gutenberg#7469).

Once WordPress/gutenberg#18173 lands and is available via NPM, we can hide UI via JS with props in BlockList.

I grabbed the override from FSE — this could very well be a sass mixin or function that is shared between FSE and Gutenboarding, but I didn't feel like doing that because we can have core provided mechanism soonish.

Changes proposed in this Pull Request

Testing instructions

• Check /gutenboarding

Before

After

[matticbot]

Test live: https://calypso.live/?branch=update/gutenboarding-hide-block-ui-css

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~7 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding        +34 B  (+0.0%)       +7 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ockham]

This appears to be working well; however, I'm a bit worried that it might spill into other Gutenberg instances inside of Calypso? As you point out, FSE also uses the block-editor-block-list__layout selector; the toolbar still seems to work there, but that might be due to the way it's built and deployed to WP.com (independently from Calypso). I think there might be potential for spillage if there will be other Gutenberg instances in Calypso, aside from Gutenboarding 🤔

Let's maybe move it into a .gutenboarding block-editor__container selector?

[sirreal]

BlockList accepts a className prop (DefinitelyTyped/DefinitelyTyped#40127).

I've added a className and used that here instead of the standard className. That should keep this nicely isolated.

[sirreal]

This seems good for now, thanks for documenting the issue/PR that will allow us to remove this workaround as well ✨