Gutenberg: Document Actions: Use page name for document title

[noahtallen]

In the site editor, we should use the page name as a document title if the context exists for a page.

TBD: exactly when should we use the page name?

cc @shaunandrews

[noahtallen]

This is a pretty easy change to make. Basically, you just add something like:

const documentTitle = page?.type === 'page' ? page.label : template?.slug;

to the header component and pass it into the document actions component.

Anyways, I tried that. Here's what it looks like:

I found it a bit weird:

• I think users will wonder "what does index mean?" when they don't have the page selected. (In this case, it's just the template that the homepage defaults to. The homepage is set to show all posts.)
• it's not really obvious to me that "sample page" is the title. I'd think it might need to stand out a little more. I bet adding more settings here would be helpful
• intermixing template and page titles feels a bit off for some reason

[noahtallen]

To clarify this:

page?.type === 'page'

In the site editor, we have a data structure we're calling a "page" to represent _actual_ webpages of the site you might navigate to IRL. So the page could be something like a post, or a _page page_ or an archive page, or a category page, or something like that. It's basically just a representation so that we can load the correct context for the page in the editor.

[paaljoachim]

Gutenberg.
Here I have removed the page title "Contact" from the content area and added the page title to the top bar.

As there is no default page title in the content the placeholder begins further up where the earlier page title was located.
Instead there is a page/post title block the user can add to get the title back into the content area.

In Full Site Editing.
Default looks like this:

The top bar shows the current selected page "Contact" and then the / index. The mixing of page title and template name seems out of place (as you mentioned).

The above screens should be identical as FSE and Gutenberg will be mixed together.

Modifying the FSE mode.

In the above the focus is still the page "Contact" and page content.
Moving from page content to template needs a little more hidden approach then what we see with the Contact / Index (which is confusing).

As this is kinda like working with widget areas. One leaves the page content goes to the widget screen and adds content to the header, sidebar and footer widget areas. It is another process.

Some brain storming....

I am working on the page content and want to see which "widget areas" are associated with it. The sidebar settings when nothing is selected should show information about "widget areas". One should then also be able to go into a full site mode. One could also add an overview mode beside the page/post title. It needs to be a clear and easy to understand name.

As one could easily switch between Overview mode and direct page content mode, by clicking Overview or Contact.

---

Going back to the beginning. Perhaps we should see this:

Another name for it.

Bottom line:
Should there be an overview text link mode next to the page/post title? Or should there instead be an icon/button to click? Going from content mode to full page mode. There should be a simple way to switch between the two modes.

Associated issue:
(Moving page/post title to the top bar + adding a page/post title block.)
https://github.com/WordPress/gutenberg/issues/22621

(Working in Full Site Editing one sees the selected Template name in the top.)
https://github.com/WordPress/gutenberg/pull/25320

[noahtallen]

As this is kinda like working with widget areas. One leaves the page content goes to the widget screen and adds content to the header, sidebar and footer widget areas. It is another process.

Interesting! I'm not really familiar with widget screens at the moment. I've been thinking about it more as editing the template part (e.g. header or footer) inline within the site editor without leaving.

Going from content mode to full page mode. There should be a simple way to switch between the two modes.

I honestly don't know much about how this should work :D I don't know of many explorations around how that kind of mode switching would work -- currently, you are able to edit post content inline in the site editor ok, but there isn't a way to "zoom in" and only look at the page content.

Should there be an overview text link mode next to the page/post title? Or should there instead be an icon/button to click

I think this is very similar to some of the ideas in this sort of design, where you have a chevron icon which opens a menu/modal. That menu/modal contains settings:

In your mind, what would an overview thing do?

[paaljoachim]

If we take a step back in time. The the regular way to add content to a header, sidebar or footer would be to go to the widget screen or the customizer and widgets and add in some content. Preview in customizer or frontend.

Older version of the Widget screen. Containing various site content areas:

Will Full Site Editing we are in a sense making the widget screen obsolete. As how we earlier added information to these areas are being added to Full Site Editing. We are updating the widget experience and making adding content to the header, sidebar and footer etc a lot easier and more direct by doing so through Full Site Editing.

--

Overview = zoom out showing site content areas. Header, sidebars, footer etc.
Page title = zoom back in to the page content.

It should be easy and straight forward to zoom in to page content and zoom out to site content.
The question is what information should be obvious for the user?
The primary should be how to go between the zoom in and zoom out modes. Go modify page content in zoom in mode and to modify site content and areas in zoom out mode.

[noahtallen]

Yeah, I feel like I've heard that idea discussed before. I can't find any existing issues for it though, so i wonder if it makes sense to split that out separately?

IMO, considering the page name in the top bar could be added either way

[paaljoachim]

I can go ahead and create a new issue (if I can not find an existing issue) for the comment I made above in relation to switching between page content and site content.

[noahtallen]

Thinking about the page title again, we generate this page information for the page selector:

In this case, "page" refers to a page of your website, not the page CPT.

The label in the topbar should probably match those labels too. If you are navigating FSE using these kinds of options, the top item should match the item you choose as you navigate around.

[dubielzyk]

I really like that idea. If the users intent is to edit a page we should show the page name like you have outlined there @noahtallen. I also think we'll need to show the name "Homepage" for whatever is selected as homepage. Showing _All posts_ may not make sense to most users.

If a user shows intent to edit a template, we'd show the template name.

[paaljoachim]

I went ahead and added a comment here:
https://github.com/WordPress/gutenberg/issues/20877#issuecomment-698309796
and here: https://github.com/WordPress/gutenberg/issues/25085#issuecomment-698311098
Instead of opening a new issue as it feels like my comment is a part of multiple issues.

In relation to switching between page/post (zoomed in view) <-> site (zoomed out view) as well as what happens when selecting the header area.
I made a prototype in figma:
https://www.figma.com/proto/utLW746LHQ9dXy2oHvwttM/FSE-UX-flow?node-id=1%3A4&scaling=min-zoom

[noahtallen]

ok! Yeah, no worries. I suggested it, because this is the first time I'm hearing us discuss adding a "zoom in/out" sort of mode like this in FSE. So I wonder if it is something that needs to be more widely discussed -- because we'll be trying the basic info and settings in the header regardless of adding a zoom mode