Wp-calypso: FSE: Proposed flow for editing a page template part

[shaunandrews]

Related to both #34346 and #34702, I'd like to propose we update the flow for editing a page template part (like a Header or Footer).

The current experience mimic's the flow for publishing a new page. There's a blue "Publish..." button at the top, and when you click it you get the pre-publish panel. You need to click "Publish" again to confirm and actually update your Header or Footer.

In #34702 we've tried adding an icon to this message to help call attention to the fact that the Header/Footer is used everywhere on your site. I've dropped some design alternatives on that thread, but I think we might reconsider our use of the pre-publish panel for this flow.

--

I suggest we revert back to a more standard "Update" experience for template parts. That means the button would say "Update" (instead of "Publish...") and there would be no pre-publish panel shown. Check out the flow outlined in the image below (click to see it full size.)

The above flow suggests the following changes:

• The publish button now says "Update".
• The pre-publish panel is no longer displayed.
• A persistent notice is shown just below the top bar informing users that they're editing a shared group of blocks used across their site. (There might be issues with some of the editors existing notices here stacking up. I'd like to avoid having multiple notices. I'm open for more ideas here.)
• The back arrow at the top left is replaced with a secondary button labeled "Back to {{page title}}". This brings the user back to the page they were originally editing, if applicable. (I realize the length of page titles may cause problems, and truncating the label could make it useless. I'm open for more ideas here.)

[vindl]

I like the changes proposed here @shaunandrews! One other change that's present in the screenshots, but is missing in the above summary as far as I can see: the title field, now containing just "Header" and "Footer", is removed when editing template parts. I wanted to inquire before if we should remove it, but didn't get to it (+1 from me).

[shaunandrews]

the title field

Ah, good catch. I have thoughts on this, but opted to leave it out of this proposal for now. I don't want to distract too much from the topic at hand, but here's one idea I've been toying with:

We could use the document frame (proposed in #34684) to show the title above the canvas (white area) and even open this up as a way to edit the document's title.

--

For now, we can simply remove the title fields for the Header and Footer. When/If we move on adding the title to the document frame we can reconsider its usefulness when editing a template part.

[noahtallen]

We could use the document frame (proposed in #34684) to show the title above the canvas

I really like this suggestion. I think it can be confusing to see "Footer" right in the template part editor. Is it part of the update to the footer I'll be publishing? Putting it in the frame really separates it from the actual content of the site, which is a huge improvement!

I think it still makes sense to show the Title of the page inline on the page editor if it's going to be displayed there on the front end. But also having it up in the frame would be nice for consistency.

A persistent notice is shown just below the top bar

What if that also went in the frame area below the "Editing: Header" text? Maybe in italics? Personally, I don't know if it is important enough to have it take up such a big swath of the screen. I feel like it's obvious that it's a global change... But then again, maybe it isn't. Maybe there are other ways we could help the user infer that the change is global without needing such a prominent message?

[gwwar]

Is this in scope @apeatling @shaunandrews for this sprint?

[apeatling]

Yes, I think this should happen, it's a clear UX pain point. Specifically the items in the list at the bottom of the original issue.

[gwwar]

@shaunandrews just want to confirm if the summary up to date and the issue targets the following points:

• The publish button now says "Update".
• The pre-publish panel is no longer displayed.
• A persistent notice is shown just below the top bar informing users that they're editing a shared group of blocks used across their site. (There might be issues with some of the editors existing notices here stacking up. I'd like to avoid having multiple notices. I'm open for more ideas here.)
• The back arrow at the top left is replaced with a secondary button labeled "Back to {{page title}}". This brings the user back to the page they were originally editing, if applicable. (I realize the length of page titles may cause problems, and truncating the label could make it useless. I'm open for more ideas here.)

I'm assuming we can decouple the gray framing changes to your proposed PR: https://github.com/Automattic/wp-calypso/pull/34684 (which we can help move along)

[glendaviesnz]

• The back arrow at the top left is replaced with a secondary button labeled "Back to {{page title}}"

This is being covered in #35028

[glendaviesnz]

Fixed in #35006