Wp-calypso: FSE: Content Slot and Template block options are visible

[gwwar]

Clicking next to the page title in FSE flows will display block options for the content slot block, which we don't want to expose to customers. Let's hide this, or disallow the block from being selected directly (might be possible using the one of the Gutenberg redux stores/actions).

Similarly clicking on the header or footer will display template options that we don't want to display in UI. (Might be possible to fire a sidebar event to open document options + CSS to hide UI? )

[noahtallen]

Do we want to expand this to apply to the template part block options like href/classname? Related to this discovery: https://github.com/Automattic/wp-calypso/issues/34751#issuecomment-516980519

[gwwar]

Sure I can update @noahtallen, though I'd be fine with a PR per each item if the work splits out that way.

[noahtallen]

awesome :) just wanted to double check that we do also want to remove them for the TP blocks as well!

[gwwar]

Updated ✅

[noahtallen]

@gwwar is this what we're thinking? I.e. no settings to change? (this is super easy to do, you just tell it to not support custom class name and anchor)

[apeatling]

I think it not changing the sidebar at all is the best, but removing these options is still a good incremental improvement.

[noahtallen]

Gotcha - so does the goal look like:

1. selecting the area (content slot or template) doesn't appear to do anything - nothing changes on the screen
2. If you select above a block inside the content slot it just immediately selects that block inside of it instead of selecting the content slot.
3. It is never possible to see the outline or controls of the template / content slot blocks
4. The user never has any idea that we use any blocks behind the scene to make this happen; it just looks like you have normal content on the screen

[apeatling]

Yes. Just be aware of this PR: https://github.com/Automattic/wp-calypso/pull/35081

If there's a better way let's replace it, but it should build on that I think (certainly keeping the CSS class added to the container).

[noahtallen]

Oh neat! Do you think we should apply that same approach to the templates? I think I'll also open a PR that disables support for those top level settings just for caution's sake (since modifying them can cause the blank revision issue)

[gwwar]

I was thinking that we could display document settings instead of block settings for these cases. The ideal is that a customer doesn't need to know about the existence of any technical bits, like templates or content_slots.

[noahtallen]

I did notice that when you select into the site title block, it shows document settings. If you click on the block settings it deselects the block and doesn't show anything

[apeatling]

Oh neat! Do you think we should apply that same approach to the templates?

I think this makes sense to me.

[noahtallen]

Another note is that Gutenberg master has added outlines around all the blocks, so you can see the post content block outline here even though you can't select it anymore. It also shows the parent block name:

[apeatling]

Ah interesting. I'd expect we can override that with the CSS in place too? That's one drawback of this method, it's going to be somewhat fragile to changes unless there is an officially supported way to do it.

[noahtallen]

Yeah, I was able to get it hidden. I think they must have made the selector more specific, so it was overriding the changes you had made! As far as I know, there's not a built in solution, but there is an issue open for it: https://github.com/WordPress/gutenberg/issues/7469

[noahtallen]

Just a quick note per the resolution. It is still _possible_ to see the content block info because of some gutenberg limitations which you can read about in #35115. To mitigate this:

1. There are no settings you can change
2. The name has been changed from "Content Slot" to "Content" to make it seem less technical to the end user

I think getting it the final 10% of the way hidden could be more effort than it's worth at this point because of the way gutenberg works internally with selecting parent blocks, but that could also just be me not knowing enough about how it works. :p The hack I used for the template blocks is actually one used in one of the core blocks, but it unfortunately doesn't work for post content :(