Focus mode for global regions

We'll need a UI component (or set of components) to display the name of the currently focused region in the top bar, and allow exiting from focus via clicking it. This will need to be coordinated with the work in #3489106.

Once 🐛 Empty global regions add unnecessary spacing to preview Active 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 🐛 Can't manage Status Messages block in Layout Builder Needs work still exists.

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

Wim, this is all extremely valuable to be aware of, thank you! I wonder, though, if we could keep this issue smaller and only focus on the UX and UI aspects of focusing the regions. We have all the pieces in place to make that happen in a smaller scope — in favor of progress. What do you think?

Also, what are we missing in terms of design? I linked to the relevant part of the Figma project, and also added a screenshot.

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 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.

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.

Okay, that definitely does need design in the follow-up issue. 🙂 Thanks for agreeing to that.

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 📌 [later phase] ApiPreviewController must use the previewed route's controller, and override canonical content entity routes' received entity object Postponed is about.

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

Follow-up for #3 created as requested in #4: 🐛 [Needs design] Previews of pages containing (dynamically) empty blocks are malformed Active .

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

It's not blocked, but at one point some coordination may be required. 😊

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 📌 Implement HTML comment annotations for Regions, replace HTML wrappers Active .

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

🐛 Block form state not cleared when component is changed Active 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:

• ✨ Non-empty global regions need to be highlighted when hovering with the green color Active
• 🐛 Global region focus spotlight is inaccurate sometimes Active
• 🐛 Drag and drop in Layers is difficult to drop into bottom position Active
• 🐛 Drag and drop in Layers flickers when trying to drop into an empty slot Active
• 🐛 Dropping a component outside of the focused region breaks the preview Active
• 🐛 Dropping a component in a global region does not update the preview Active

#30: which of those belong in 🌱 Milestone 0.2.0: Experience Builder-rendered nodes Active 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 🌱 Milestone 0.2.0: Experience Builder-rendered nodes Active to be tracked and added a gif of the new functionality to the summary.

🤩

Automatically closed - issue fixed for 2 weeks with no activity.