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.