Stabilize the Title Bar

[mtias]

Related #50369, #50260, #50218, #50217, #48641

Let's solidify the design and describe all the states in detail so that implementation can go smoothly. There are functions being introduced (#44461) that necessitate the title bar.

Site Editor

• Show page and template. Switch between the two edit behaviours.
• Include "view page" and "view post" actions.
• Connect with command center
  • Allow quick switching of templates or pages
• Show how template parts and focused template part mode work regarding the title bar. Same for menus.

Post Editor

It's unclear if we need to bring the title bar to the post editor at the same time or it can be in stages, but it'd be good to design the aspects that are necessary for the post editor context. Particularly editing the title and the permalink.

Mockups

Main site editor title bar:

• Shows page title with icon, and ⌘K commandbar affordance in its resting state
• In "top toolbar" mode, it's hidden until you go back to the top level
• In the content template split (Site Editor: Add ability to focus only on editing page content #49980), when you edit the template, a "back" button appears on the left
• In the resting state, the entire area is clickable to invoke the command bar, which can show contextually related commands (Command Palette: Mapping Contextual Commands #50407)
• When editing a template part, the template part name is shown with its rhomboid symbol
• When first editing a template, then diving a step deeper into a template part, the "back" button behaves as a breadcrumb system

Scaling to mobile, and considering the top toolbar option across breakpoints:

• As the viewport grows thinner, the width of the commandbar is flexible
• At smaller breakpoints the template "back" button loses its visible label.
• The title bar is not shown on mobile.

It is likely useful to keep this component site-editor first in the near future, but here is a sketch that explores adding it to the post editor.

[SaxonF]

Just to clarify, this is mostly @jameskoster and @richtabor great work, I just copied over from Figma :)

[jasmussen]

Want to connect some dots, we can potentially close #48481 in favor of this one, perhaps.

[mtias]

If the whole bar triggers the command palette, I'm not sure that the "view link" should sit within. Might make more sense to keep it next to the "preview" button (and change that one to icon button).

[jasmussen]

Based on the feedback, I went ahead and tentatively updated this issue with the latest decisions and added the dev tag. If anything pops up as problematic, let's revisit.

[jameskoster]

Is there a reason for the exclusion of the cmd+k hint when editing a template?

[jasmussen]

No, we can keep it. I'll update.

[mtias]

Not to distract here, but it'd be good to start exploring how things behave if we move the primary button to the right of the ellipsis menu, or right before it but after everything else; how plugins would look, etc.

[SaxonF]

Kicked off work here if anyone wants to contribute.

[jasmussen]

Not to distract here, but it'd be good to start exploring how things behave if we move the primary button to the right of the ellipsis menu, or right before it but after everything else; how plugins would look, etc.

Quick sketch:

Figma.

[jasmussen]

For reference, I shared some updated mockups for the mobile behavior here, and depending on feedback I will update this issue.

[mtias]

Another use case to consider is the focused template part mode when engaged from a higher level template. The "back" breadcrumb never made much sense in the canvas and it'd be a nice opportunity to absorb it in the title bar:

[jarekmorawski]

Hi there! This is exciting to see come to life as we have a flow in WooCommerce that could benefit from a similar solution. In the new block-based product editing experience, the product description will launch the visual editor, which could look and feel like a template part.

Borrowing ideas from some of the explorations I saw, we could show the template part name (in our case: Product description) in the new Title Bar and let the user easily go back to the main editor/form without switching contexts.

switch-part.mov

[talldan]

Just noticing that the top toolbar and title bar don't seem to be playing well together in the latest trunk:

edit: this was a regression, made a revert in #50937 to resolve the issue.

[mtias]

What's pending here to wrap the issue?

[jameskoster]

One detail we might consider is the view-on-frontend button. In the post editor we have:

We could just paste that into the site editor as well, but it might be a bit strange for a button in the top bar to appear / disappear as you move between editing content / templates. Instead, we might incorporate it into the title bar:

[ndiego]

One detail we might consider is the view-on-frontend button.

This would be a great addition. A question came up in the latest call for testing about how to view a page once you have made edits in the Site Editor, and it's currently a bit tricky. Any chance this enhancement could make it into 6.3? 🤞

[jasmussen]

The bulk here has been addressed, so I'm closing this one in favor of #51711 (a bugfix followup) and #52032, an enhancement.