Focus mode for global regions

Once #3497747: Global regions containing only "dynamically missing blocks" (due to emptiness or access) cause malformed pages is fixed, this issue will probably have to trigger the use of \Drupal\Core\Plugin\PreviewAwarePluginInterface — because some blocks only render at all in specific contexts — for example: the messages block is only visible at all when there's actual messages.

See \Drupal\layout_builder\EventSubscriber\BlockComponentRenderArray::onBuildRender() (see also how that uses \Drupal\Core\Render\PreviewFallbackInterface), introduced in #3027653: Allow block and layout plugins to determine if they are being previewed and CR at https://www.drupal.org/node/3272267. Note that this will also require core changes, because not all crucial block plugins implement that interface, which is why #3137995: Can't manage Status Messages block in Layout Builder still exists.

This also relates to #3491701: [later phase] ApiLayoutController must use the previewed route's controller, and override canonical content entity routes' received entity object, because without that, the preview will not be accurate. Hopefully we can do that at a later time, though.

Okay, I'll extract #3 into a separate issue.

The designs do not provide answers for the highly dynamic Block-sourced Components: it assumes all component instances in the Layers panel are always visible. That's not true for many Block plugins:

• messages block
• local tasks block
• local actions block
• …

But I'm fine with this issue focusing on that tighter scope.

I would argue though that one thing is missing from the design: the ability to view and edit the PageTemplate in the context of a particular route. That's what #3491701: [later phase] ApiLayoutController must use the previewed route's controller, and override canonical content entity routes' received entity object is about.

… but let's be pragmatic and do only what the design currently covers.

Follow-up for #3 created as requested in #4: #3497990: [later phase] Support Block's PreviewAwarePluginInterface (and similar for other component sources).

Per #2, this is blocked on #3489106: Show page information in top bar, right @balintbrews?

Would this issue benefit from automated tests, or would that be disproportionately complex and would this benefit from (documented) manual testing instead?

FYI: this blocks #3499364: Implement HTML comment annotations for Regions, replace HTML wrappers.

Up until now, the XB team has been following a pseudo-scrum/pseudo-kanban process, but we're now shifting into more conventional scrum. We started a new 2-week sprint last Thursday (Jan 16). I'm tagging our current sprint's issues for visibility.

This is well on its way, but not yet ready for review. The demo I saw @jessebaker do in private is 🤩, and a demo of the end result should definitely be made available here too! 😄

In my manual testing the highlight is slightly off for the header

Also it doesn't look like form state values are getting emptied when the component is changed

You can see here form state for two different components, not just the selected one

#3501870: Block form state not cleared when component is changed adds test coverage for the form state slice and confirms the clearing of component values is working in HEAD

Tested this manually and noticed few things:

1. Double clicking the region in the preview does not open the focus mode which is the first bullet in the proposed resolution
2. The breadcrumb in the header is now duplicated 🤔
3. We should take margin into account when determining the position of the highlight:

RE: #22

1. Resolved. I've also made it so that double clicking the focused region in the layers will take you back out again so you don't have to move your mouse all the way up to the top nav to move between regions.

2. Looks like the Page nav got merged in after this was ready for review. I've correctly reconciled that - and fixed the size of the Page drop down to match Figma while I was here!

3. The margin/size of the region is taken into account. The issue you are showing in your screenshot is that the breadcrumb block has CSS with negative margins to make it appear outside of the region it is rendered in. I'm not sure I can think of a solution for that?

I just pushed a one line css commit for the cursor.

Before:

After:

#9 is still unaddressed.

With #22.1, I was referring to this flow where you should be able to hover over a region in the preview and access the focus mode from there:
. It seems that there's already a lot being changed here, so we could potentially move this to a follow-up issue.

I'm going to merge this and then create follow ups to address the outstanding issues. The MR is too unwieldy to keep alive due to the size of it! Watch this space for new issues.

Merged. 🎉

Follow ups created:

• #3502764: Non-empty global regions need to be highlighted when hovering with the green color
• #3502765: Global region focus spotlight may not match the actual region size in all cases
• #3502766: [PP-1] Drag and drop in Layers is difficult to drop into bottom position
• #3502767: [PP-1] Drag and drop in Layers flickers when trying to drop into an empty slot
• #3502768: Dropping a component outside of the focused region breaks the preview
• #3502769: Auto-saved PageRegions may be invalid, but MUST NOT cause XB's previews to fail.

#30: which of those belong in #3455753: Milestone 0.2.0: Early preview and which are must/should/nice-to-have?

Finally: could you please upload a screencast showcasing this awesomeness so I can blog about it? 🤓🙏

I have ranked the follow ups and added them to #3455753: Milestone 0.2.0: Early preview to be tracked and added a gif of the new functionality to the summary.

🤩