Move post/page title to the top bar.

[scruffian]

Block themes and template editing give authors much more freedom to express how the titles of posts and pages are displayed on the frontend. They might appear inside Cover blocks, adjacent to Post Content, or in any other conceivable block configuration. There are also situations in which a template might not display a post title at all, e.g. Post Formats.

All that to say, it might be time to consider not displaying the post title within the canvas when editing a post or page, because the current implementation is increasingly unlikely to be an accurate representation of the frontend. Example:

Backend	Frontend

Clearly it must still be possible to edit the post title without engaging the template editor first. For a solution we can look to the Site Editor, where the document name appears in the Top Bar, and custom templates can be renamed:

We can probably migrate this pattern across to the post editor as well. The result would be something like this:

When the document has no title, the label can probably read something like "Untitled Document".

Original issue

I think it makes sense to move the page/post title into the top bar like we do for template names. Often we will want to add the Post title inside another block (e.g. Cover block), or in a column. This would give users more flexibility about where the Post/Page title appears:  Originally suggested by @paaljoachim here: https://github.com/WordPress/gutenberg/issues/20877#issuecomment-698309796

[jameskoster]

It would also provide a way to change the post title when the post template does not include a post title block. Some post formats do this.

[scruffian]

Yeah, that's a common pattern in themes in general.

[paaljoachim]

It would be great to create movement in this issue. The Site Editor uses the new method. Let's get a PR going for the Post Editor.

When the top toolbar is active it can be moved to a second row. The first row can contain the page/post title. See this comment: https://github.com/WordPress/gutenberg/issues/20877#issuecomment-703064983

Let me know how I can help move this issue onward. Thanks!

[jameskoster]

I agree it would be good to display the document title, and include the popover for editing the title & permalink.

But the interaction between the "Site" and "Page" buttons in the gif above isn't clear enough imo. I suggest we leave that out for now, since there will be (are already) other UI patterns for moving between template / content editing.

[paaljoachim]

Here is an update of the Figma file.

https://user-images.githubusercontent.com/5323259/113604129-230e9480-9645-11eb-8fc6-4cf8a410a667.mp4

Btw when the top toolbar is active it is then automatically moved to the second line. As can also be seen when the browser has a smaller width. A mockup.

[jameskoster]

It might also be good to include the template information here, and a link to view all posts.

https://user-images.githubusercontent.com/846565/114733196-0d7f2600-9d3b-11eb-9a19-b6e7fa187c95.mp4

[paaljoachim]

I think we should break this down into iterations.

First version/iteration: (With a focus of atleast getting the fist iteration into WP 5.8.) Let's begin by getting the page title into the top bar along with a drop down where one can rename the page title.

We need a developer for the above part. As it is a totally new concept for the Post Editor to have the page/post title in the top bar.

[vdwijngaert]

I'll try and have a go at this. Progress so far looks promising:

Here's at least two things that need some working out:

• How would we go about and replace the current new post/page workflow that focuses the empty post title block?
• How should this work on a mobile viewport?

[jameskoster]

How would we go about and replace the current new post/page workflow that focuses the empty post title block?

It may be fine to leave the post title on the canvas for now. Otherwise I imagine the text would read "Untitled Page" (or similar) until you click it. Clicking should shift focus directly to the title input.

[paaljoachim]

A couple of options.

As In automatically add a placeholder showing the Post/Page title block. User adds it there and also sees the name added to the top bar. EDIT: This way a user are also able to remove the Post title block from the layout/canvas area.

---

Creating a new post/page the cursor blinks in the title field in the top bar where the placeholder says "Add page title".

@jasmussen Joen could you also take a look? Thank you.

[bobbingwide]

There could be a problem with this. In the Site Editor, without the post title, it becomes difficult to edit the first block / blocks.

Workaround is to switch to having the toolbar at the top.

[jasmussen]

There's also this issue for the block toolbar when it's close to the top of the screen: https://github.com/WordPress/gutenberg/issues/29464

[jasmussen]

Having an interface in the top toolbar is something we've discussed for a while. The primary benefit is that it is the top of the hierarchy, so it clearly implies a document-level effect. The downside is that it can potentially take up a lot of valuable space.

Going back to the intent of this ticket: moving the editing of the page/post title to the top toolbar to result in a more WYSIWYG experience, we should be careful with, as the title in the canvas is a well-learned interface, any change will cause headaches for people who just blog.

But there is a flow to figure out. In the site editor, we need the top center dropdown interface to show document level metadata and attributes. It's present even in the new post-editor to template-editor switch:

Both of those are more accurate WYSIWYG than the post editor is at the moment. So it might be healthy to split the conversation into two flows:

• Is there a benefit to duplicating the post/page title in a dropdown in the top toolbar, just like we have in the site editor? For example it feels like an obvious place for metadata such as permalink, maybe others.
• To address the original intent of this ticket, is there a good flow for showing a more accurate frontend rendition of the post you're editing, in-situ? I.e. show header and footer, hide post title unless also present in the template. Is there value in this, and where should it live? In a "View" dropdown?

Those two, when both addressed one by one, could help give us insights into whether it makes sense at all to remove the post title from the post editor when it's also missing from the post template.

How would we go about and replace the current new post/page workflow that focuses the empty post title block? How should this work on a mobile viewport?

If we focus not on removing the page/post title from the canvas, but instead creating the new dropdown interface to also edit it there, it will help surface better answers to those questions. At the moment we can only make assumptions.

To that extent, I think Jay best outlines the longer term thinking around such a top toolbar interface in his post about document attributes: it's about better surfacing key document metadata in an obvious place. More accurate WYSIWYG preview of your post could benefit from that, but needs its own flow explored.

[jameskoster]

Good thoughts, I agree that splitting this in two makes sense.

Also worth noting that while seeing the title on the canvas does degrade the overall WYSIWYG experience, that degradation feels less impactful thanks to the edit template flow. We're now set up to provide a WYSIWYG of the post content in isolation, and a WYSIWYG of the post content in the context of its template where you're able to see the post title doing its thing.

A possible interim could be to leave the title on the canvas, but reduce its prominence?

Before	After

[vdwijngaert]

A possible interim could be to leave the title on the canvas, but reduce its prominence?

That might work!

[jasmussen]

Even without any changes to the post title in the canvas — keep in mind, a lot of themes style it to match the template — I could see value in showing important meta attributes in the to dropdown.

[paaljoachim]

Additional thoughts. Let's say we leave it mostly as it is today. With one big difference one changes the treatment of the title to use the Post Title block.

Step by step.

1. One sees the post/page as one is used to. Inserts the title.
2. Notices that there is a block toolbar associated with the title, and is now able to move the title, style or treat the title like any other block. Even remove it.
3. User removes the block, and the post/page title is automatically added to the top bar area.
4. User adds back in the Post title block.

https://user-images.githubusercontent.com/5323259/116930047-8816d380-ac5f-11eb-8e7f-a8b556413da6.mp4

https://www.figma.com/file/NE9Y71AMMxVkuLEFzCtoNa/Moving-Post-title-to-top-bar?node-id=0%3A1

What do you think @jameskoster , @jasmussen and @vdwijngaert ?

[vdwijngaert]

Hey @paaljoachim, appreciate the work you're putting into this, turns out it's quite complex :)

Notices that there is a block toolbar associated with the title, and is now able to move the title, style or treat the title like any other block. Even remove it.

That could work. However, when a template is being used, the location and styling of the title should probably be left to the template editor. Alternatively, we could have a slimmed down post title block that can open the current template (if any) in the template editor? This could be a sidebar panel, toolbar action, etc.

But then, as @jameskoster stated, some templates don't include a post title block.

So yeah, maybe we should leave the title unharmed for now? We could make it more obvious that it might not reflect how it would look on the front end. For now, we can just focus on making the title also editable in the toolbar.

[jameskoster]

Yeah in this case the post title is always going to be tied to a template, whether that is an "old" php template, or a block template. So allowing folks to manipulate (or even remove) it while editing a post will be misleading.

For now, we can just focus on making the title also editable in the toolbar.

+1. We can address the on-canvas post title in a follow-up.

[amir2mi]

I think space between the left and right parts of the header gives identity to Gutenberg.

I have made this, what do you think? Video: https://user-images.githubusercontent.com/64708228/116993399-abd42b00-acec-11eb-9cba-495f37256020.mp4

[paaljoachim]

That looks really cool, @amir2mi Amir! An interesting user interface. I am not sure how it fits into a more general title in the top bar UI though.

[amir2mi]

I am not sure how it fits into a more general title in the top bar UI though.

Me too, just wanted to share the idea [those buttons can be hidden as well]. Can something like this be there when there is no title block? (like what you said conditional). Is it a pain to distinguish which post I'm editing now on switching between tabs?

[jameskoster]

Earlier today I shared a concept that explores moving template attributes to the top bar: https://github.com/WordPress/gutenberg/issues/31076#issuecomment-833590145

I decided to also explore how this pattern might be applied to posts and pages:

https://user-images.githubusercontent.com/846565/117320994-a90c3e00-ae84-11eb-842c-88906d16475d.mp4

I'm quite excited about this concept not only because it streamlines the inline editing experience, but also because it would enable us to greatly enhance the existing quick edit interface that exists in list view:

Current	Future?

[jameskoster]

Here's how we could potentially take the concept from my previous comment and strip it back to an MVP in the context of this issue:

https://user-images.githubusercontent.com/846565/117433516-736a6200-af23-11eb-82a5-705aa0c0a610.mp4

Figma prototype.

[jasmussen]

I'm curious why it should be a modal as opposed to a dropdown?

[vdwijngaert]

I'm curious why it should be a modal as opposed to a dropdown?

I was under the impression we were going to do a dropdown as well.

[jameskoster]

Modals scale better:

We're using modals for names elsewhere:

Modals are arguably more user-friendly on mobile. Popovers feel fragile since tapping outside accidentally will close the popover.

Finally, modals are portable. We can use this same interface to replace the ugly quick-edit feature in list view, as outlined in https://github.com/WordPress/gutenberg/issues/27093#issuecomment-833609029.

---

All that said, it doesn't have to be a modal just yet. It's only a wrapper after all. The UX is virtually identical both ways. My main argument for using a modal now is that it paves the way for when we expand the interactions here to include other document attributes like template selection.

Edit: Here's the same flow, using a popover rather than a modal:

https://user-images.githubusercontent.com/846565/117454987-9ce4b700-af3e-11eb-9a63-c12de6ff2581.mp4

[jasmussen]

While I see the sense in putting document properties there, I'm not yet convinced we can put all of it there. And the problem with the dialog is that it loses a bit of connection to the post title, whereas the dropdown has a clear connection to the title, giving a strong connection. Since both dialog and dropdown are technically modal (they trap tab inside and close with escape), the dropdown could become fullscreen on mobile still, even if it's a dropdown on desktop breakpoints.

It's possible that we will end up needing all the space of a dialog in the future, but I think for the near future we should start smaller, also literally 😅

[vdwijngaert]

Pushed changes including a working panel to edit the current entity title. Functionality works, but needs clean-up and polishing. :)

[paaljoachim]

Here is the link to the PR which Koen @vdwijngaert is working on. It could use some feedback/advice. https://github.com/WordPress/gutenberg/pull/31288

[paaljoachim]

A status update. (Edited to clarify)

Part 1.

The PR: [WIP] Move title to header toolbar https://github.com/WordPress/gutenberg/pull/31288 Has stalled. I am hoping @vdwijngaert Koen is able to continue working on the PR. If someone is able to step in and take over that would be really helpful. Here one needs to duplicate how Full Site Editing adds the title to the top bar, and implement this for the post/page title.

--

Part 2.

The next PR needed to follow after the above PR. Is to remove the static post/page title we currently see in each post or page and replace it with the Post Title block.

Both of the above features need a developer that can work on it.

As part of Full Site Editing it would be helpful to have both of the above features merged in time to be included into WordPress 5.9.

[Mamaduka]

The title in the top bar doesn't work well with long texts, as we discovered in #34512. This UI works in Site Editor since templates usually don't have long names.

I think @shaunandrews was exploring moving a title in the Document sidebar.

[jameskoster]

I like that exploration a lot, but the sidebar is not always open, so I think we should at least print the document title in the top bar as well. We can use text-overflow to truncate really long titles.

[Mamaduka]

I agree, just moving the title in the sidebar won't do it.

We can use text-overflow to truncate really long titles.

We're using the Text component with truncate in Navigation Screen.

https://github.com/WordPress/gutenberg/blob/1e17b5a5b4a3117e843dde015c128361c5ae059e/packages/edit-navigation/src/components/header/menu-actions.js#L42-L51

[jameskoster]

Oh nice, I didn't know about that. We should be able to do the same thing here, right?

[Mamaduka]

Yes, we can use the same method here.

[shaunandrews]

Here's a example of how it could work with the title being editable in the sidebar, while also having the title in the top bar as a shortcut for opening the sidebar and focusing the title input:

https://user-images.githubusercontent.com/191598/138347448-f5efb4f1-95a6-4ecd-83d4-eaa3b11a6f9e.mp4

If we move to use Tools Panel for the document sidebar, we could also include an explicit option in the menu to rename the title:

[jameskoster]

Just noting that we probably shouldn't expose the Post Title toolbar like this, since all of the properties therein are tied to the template rather than the post itself. IE it's not possible to move, transform, change alignment, etc in this context.

In other words we'll need to come up with another way to toggle the visibility of the title. I think we can probably do that in a follow-up though, as I'm not sure we even need to display the title on the canvas at all once it is visible (and editable) via the Top Bar.

[vdwijngaert]

Okay guys, I'm back from my little Gutenberg-burnout, it seems :)

I resumed work on #31288, and it looks like it is functionally ready for part 1 as described by @paaljoachim. I updated the code to reflect the changes made to DocumentActions from the Site Editor package.

I also had to go ahead and update the layout of the header as well, to resemble the Site Editor header a bit more, otherwise the title would have always been a bit off-center. I still need to go trough the styling to remove some things that have been rendered obsolete because of this.

[apeatling]

If we move to use Tools Panel for the document sidebar, we could also include an explicit option in the menu to rename the title

I like the idea of making the post title editable in the sidebar. With the ToolsPanel option I'd prefer to see it as a setting you can toggle like any other, to avoid there being two ways to do things.

[paaljoachim]

I assume we can go with a 1st version mentioned in my above comment: https://github.com/WordPress/gutenberg/issues/27093#issuecomment-946607869

Currently when I attended Brian's @bgardner and Nick's @ndiego Full Site Editing chat yesterday. Brian showed the cumbersome work around in creating a page template and in the page template he removed the Post title, and saved the template. So that all pages that use the template will not show the page title on the frontend.

Hopefully someone will be able to either take over @vdwijngaert 's PR or create a new. I look forward to having a better consistency between the Site Editor and Post Editor. Thanks!

[jameskoster]

The case for making this change is imo stronger than ever.

1. We don't want to display the document title on the canvas because it is not a true visual representation of the frontend.
2. Splitting document / block settings goes hand-in-hand with splitting block appearance controls / settings.
3. We've already implemented this pattern in the Site Editor for handling template settings:

Here's a quick example of how things could work if we combined the drilldown pattern from Global Styles with the excellent work folks have done to refine the status and visibility panel.

https://user-images.githubusercontent.com/846565/167620118-5149f646-c272-4a25-bf9b-154bdd6f41ff.mp4

[jameskoster]

I've updated the OP to include designs that we can put into practise now.

[jasmussen]

Nice, thank you Jay. I went ahead and hid some outdated conversation just so devs can better focus on the contents of the original issue.

[artemiomorales]

I can take this on. I'm currently working to implement a popover to update just the title so we have something working to look at. Just let me know if I should be considering anything else!

I've updated the OP to include designs that we can put into practise now.

Question for @jameskoster: To clarify, do you mean that you've updated the original post?

[jameskoster]

do you mean that you've updated the original post?

That's correct :)

[artemiomorales]

Hello all, I created a pull request for this issue: https://github.com/WordPress/gutenberg/pull/46135

It's the most basic implementation for now. Would love to get additional eyes on it and see what you all think ✨

[alexstine]

Hello all, I just reviewed the PR and gave some technical/accessibility feedback. Keeping in mind that I can't see the screenshots, I am interested to see how close the PR got to the actual visual design. From an UX perspective, it greatly worries me that we continue to box up the editor. It is going to get harder and harder to provide context around that as we'll soon require a bunch of random/very generic button labels to convey where we've decided to hide certain functionality/options. I am not saying wide open always works better, but I am not sure the post title hidden in an accordion-like drop down was the right way to go here.

In my opinion, I think it would be nice to leave the title field where it currently is. It is a nice buffer between main document title and the start of the editing fun.

Thoughts?

Thanks.

[jameskoster]

The issue with the current placement of the title field is that it breaks the WYSIWYG. The proposed solution re-uses existing Site Editor features (updating the title of a custom template), but I assume those also suffer from the same accessibility issues?

An alternative option could be to simply move the title field into the top bar? Hopefully we could position it in the DOM so that it still acts as a buffer?

https://user-images.githubusercontent.com/846565/204784931-166aff69-952c-49b6-9c5a-314d7aac9a1e.mp4

[alexstine]

@jameskoster Might be best to just move the field in to the top bar. I am not sure hiding it in a drop down is really necessary at this point. All my other A11Y feedback on the PR still applies. Need to figure out how to not mess up the DOM structure.

Thanks.