Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: enable option to publish pages #49873

Closed
annezazu opened this issue Apr 17, 2023 · 19 comments · Fixed by #51408
Closed

Site Editor: enable option to publish pages #49873

annezazu opened this issue Apr 17, 2023 · 19 comments · Fixed by #51408
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@annezazu
Copy link
Contributor

When creating new pages from a navigation block, you can create draft pages. However, within the site editor, there's no way to publish pages, despite being able to edit them directly. This relates to the prior issue reported here around confusion with the draft state: #49871 This was found as I was working on the next call for testing for the FSE Outreach Program.

@annezazu annezazu added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Apr 17, 2023
@annezazu annezazu moved this to 🎨 Needs design in Gutenberg Phase 2: Customization Apr 17, 2023
@jasmussen
Copy link
Contributor

Good issue. We need to unify this. One instinct we recently discussed was to create a new singular "Page creation modal" that would be possible to invoke from all these separate places — site editor, navigation block, from a Buttons block through the URL dialog, anywhere — creating a single experience for drafting/creating pages. The modal would:

  • Open when any "add page" action was invoked.
  • Open a very small modal with just a title field, an auto-completing but customizable URL/slug field, and then buttons for either going straight to editing said page, or just saving it as draft and moving on.
  • Potentially this modal could also have an ([X] Add to <menu> ⌄) checkbox.

I guess we could embrace this issue for said initiative. What do you say, @jameskoster?

On a separate note, I would kindly encourage that we avoid using the term "browse mode" to describe the site view of the site editor. Actual browse mode (the ability to click buttons and links in the preview frame to naviagate to them) is shelved, but likely to return inside the edit view.

@jameskoster
Copy link
Contributor

I guess we could embrace this issue for said initiative. What do you say, @jameskoster?

For design I think that makes sense 👍

I suspect we need some more holistic technical insights around drafts / revisions for pages in the site editor, since everything is still template driven under the hood. We'll need this functionality when editing pages too (#49404).

@annezazu annezazu changed the title Browse mode: enable option to publish pages Site Editor: enable option to publish pages Apr 19, 2023
@annezazu
Copy link
Contributor Author

On a separate note, I would kindly encourage that we avoid using the term "browse mode" to describe the site view of the site editor. Actual browse mode (the ability to click buttons and links in the preview frame to naviagate to them) is shelved, but likely to return inside the edit view.

I'll roll with Site Editor for now and have updated the issue name but have been trying to use the technical project name as a signal to devs who have worked on this. Sounds like we need to get on the same page :D

@jasmussen
Copy link
Contributor

I mostly want to avoid the term "browse mode" suddenly becoming the defacto name, as it was mistakenly used in the PR 🙈

@jasmussen
Copy link
Contributor

jasmussen commented Apr 28, 2023

Here's a first draft at a design that tackles this. Essentially what we want is for a unified way to create pages (template creation should share DNA with this, but is to follow separately).

This unified interface for page creation should serve a few roles:

  • Be a singular interface invoked from a variety of different places: URL dialog, Navigation item dialog, Site hub, etc.
  • Provide a way to quickly build out your site structure by adding draft pages.
  • Provide a way to add this page to a navigation menu during creation.

In that light, shown here are the various places mentioned, where you could potentially invoke this interface:

Ways to add

Each of these pages would then open the following modal:

Add modal

As a starting point this modal would have options to:

  • Add a page title
  • Offer a link preview
  • Edit button, to draft and edit the page
  • Draft button to just draft the page and close

Clicking the draft button would close the dialog and keep you wherever you were when you clicked the button to add, whether inside the editor, or whether in the Site Editor > Navigation section (where the newly drafted page would show up).

Related to #48456: another option would be for the "Draft" button to take you to the Site Editor > Navigation > [new page you drafted] detail page, which would give you options to further edit metadata, or perhaps use a future pattern building interface. Or, potentially that could be the future behavior of the Edit button. Thoughts?

@getdave
Copy link
Contributor

getdave commented Apr 28, 2023

I like having a dedicated UI for drafting pages outside of the Link UI itself 👍

What I would say is that the views shown above for the link creation UI need to map back to design discovery on the Link Control Overview Issue.

@jasmussen
Copy link
Contributor

What I would say is that the views shown above for the link creation UI need to map back to design discovery on #49091 (comment).

Yep, I used the same designs Saxon created in #49091 (comment), with minimal changes ("Draft a new page: Galeria" instead of "Draft a new page").

@jasmussen
Copy link
Contributor

To clarify I a bit further, Saxon's mockups, notably this part:

Screenshot 2023-04-28 at 12 22 40

This is what you'd see when you click a link that already has a link, no? CC: @SaxonF

@getdave
Copy link
Contributor

getdave commented Apr 28, 2023

I'm noting "Insert a block instead" option in this mockup. This could help us solve the problem we currently have in the Navigation block whereby clicking on the inserter will either:

  • open the Link UI - this happens if you only have core/navigation-link items in your Navigation.
  • open the block inserter - this will happen if you have other more complex block types (e.g. core/social-links) in your Navigation

Hopefully with your new design we can have a single flow that doesn't diverge like this as it's confusing for users (and contributors!).

@paaljoachim
Copy link
Contributor

A thought from having met this issue in the latest call for testing.
I asked myself why can I not just directly select to publish a new link instead of saving it as a draft.

I got to say I think we need to sit down and discuss the general feature of adding a link to the Navigation block. Once again looking at the overall feature. Once again comparing it to the Classic Menu screen. Looking at what features are added and how these should be added. It just feels like things are missing and we need to go through how the UI/UX is presented for a general user. Perhaps a topic to bring up during a core editor meeting or having a design meeting.

@getdave
Copy link
Contributor

getdave commented May 4, 2023

@paaljoachim I had the same feeling as did @richtabor. He and I sat down recently (away from Github) to run through all the flows we could find and came up with a set of fixes we think are required to make it easier. These are listed in the "Fix the flows" section of #50165.

@jasmussen
Copy link
Contributor

@richtabor Noting you've already seen this, but it seems like another candidate to add to the Link UI tracking issue maybe?

Also CC: @jameskoster, could we simply add a section to the save modal (#49832), "Publish the following pages"?

@jameskoster
Copy link
Contributor

That could be an option. Another idea would be to work with status editing. Perhaps in the page details panel (which displays the status) (#50390) you can click it to edit.

Screenshot 2023-05-22 at 14 27 17

So if you want to publish a page you update the status then save.

@paaljoachim
Copy link
Contributor

It is a helpful and good idea to focus on the page details panel and using that to publish pages.
(Atleast as a good first step.)

@jasmussen
Copy link
Contributor

Both seem useful 👍 👍

@annezazu
Copy link
Contributor Author

annezazu commented Jun 7, 2023

In writing the next call for testing, I wanted to note how strange it is to be able to draft a page and then not have a clue how to publish it within the Site Editor, because the option doesn't exist yet 😅. I plan to still test it but these drop offs need to be addressed sooner rather than later.

@jameskoster jameskoster moved this from Needs feedback to Needs design, or refresh in 6.3 Design Jun 7, 2023
@jameskoster
Copy link
Contributor

I think @SaxonF is working on this, but I am happy to jump in if he doesn't have time.

@SaxonF
Copy link
Contributor

SaxonF commented Jun 7, 2023

Yep I'm working on it, thanks @jameskoster !

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jun 12, 2023
@SaxonF
Copy link
Contributor

SaxonF commented Jun 12, 2023

Started work here. Fields hooked up in a temp location.

@github-project-automation github-project-automation bot moved this from 🎨 Needs design to ✅ Done in Gutenberg Phase 2: Customization Jun 20, 2023
@github-project-automation github-project-automation bot moved this from Needs design, or refresh to Needs dev in 6.3 Design Jun 20, 2023
@apeatling apeatling moved this from Needs dev to Done in 6.3 Design Jun 27, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Status: Done
Development

Successfully merging a pull request may close this issue.

7 participants