Page navigation in the block editor

[johnHackworth]

Let's add a dropdown to the block editor, when you are editing a page, that lets you navigate to one of the existing pages in your site or create a new one.

Previous attempt:
#39826

[p-jackson]

Given that #41294 is almost done, does it still make sense that this isone of the "very nice to haves" for the soft launch? pbAok1-BW-p2

Given that there won't be any other starter pages they won't need to edit them before launching (just thinking of keeping the project scope to onboarding and activation only)

[ramonjd]

Given that #41294 is almost done, does it still make sense that this isone of the "very nice to haves" for the soft launch? pbAok1-BW-p2

Good point.

Unless this is a general wish list for the WordPress.com editor, in which case I think it could still be punted upfield, metaphorically speaking.

[ramonjd]

This could also get wily if we list hierarchical pages, and there are dozens of them.

[johnHackworth]

This is intended to be a help for new users... It would be more than ok to list just 4-5 pages and then, maybe, have a search box. If you have hierarchical pages in your site you don't need help navigating around anymore :D El vie., 24 abr. 2020 a las 11:12, Ramon (<[email protected]>) escribió:

…

This could also get wily if we list hierarchical pages, and there are dozens of them. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#41298 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAL3TJ7ZCSWN46PDOC6BRSTROFJXPANCNFSM4MMUQ3IA> .

[ramonjd]

I've been looking at this task today, and various ways we might achieve what we want.

I've come up with three possibilities. There may be more :)

The first is to carry on with #39826

From a data perspective, this would be the most convenient. The Calypso store has most of the data we need already, and we can reuse any Calypso lib/component.

The downside is that it's not really part of the editor, and so we'll need to juggle the element's position hoping that it won't interrupt use of the tool bar underneath.

Create a must-use Gutenberg sidebar plugin

Sitting beside the Jetpack plugin sidebar icon, our unnamed plugin allows users to view and add pages from the Gutenberg sidebar. Docs: https://developer.wordpress.org/block-editor/developers/slotfills/plugin-sidebar/

Creating a Gutenberg plugin would be extra work, but the integration would be more compatible with the block editor.

Showing users that it's there would be another matter. Through the welcome modal perhaps.

Extend the block editor in apps/wpcom-block-editor

I haven't fully tested this, but we might be able to append a <select /> element filled with page options and other elements. Similar to what we do in Gutenberg overrides.

We can fetch and search pages using the WP rest API (/wp/v2/pages), and there's the possibility of passing info such as the current page id through the iframe messenger.

This third option feels like the most error-prone and fiddly.

@p-jackson What do you reckon? Do you wanna take a stab at this task and let us know what you think the right direction might be?

[ramonjd]

Some discussion kicked off over at pbAok1-Ii-p2 on whether we can add this functionality to a side bar

[ramonjd]

Given the comments on pbAok1-Ii-p2, I think we should work with design on this one and maybe consider the sidebar option.

It might be that a sidebar solves more than just the need for a page navigation widget, in which case we would see a better return on development investment.

Whether we can come up with consistent functionality across wp-admin and Calypso is something that we'll need to crack regardless.

[vindl]

Just a heads up that I've recently seen some design mockups for page navigation in core FSE that seem to overlap this. It would be cool if we could reuse that instead of duplicating it (provided that we do end up taking that route).

[ramonjd]

Just a heads up that I've recently seen some design mockups for page navigation in core FSE that seem to overlap this. It would be cool if we could reuse that instead of duplicating it (provided that we do end up taking that route).

Thanks for raising this @vindl

@p-jackson has made a healthy start to this already in the FSE plugin.

We should keep @olaolusoga in the loop on the design front if it's all good to continue with that work. 👍

[p-jackson]

Linking a more recent mockup from @shaunandrews in this tracking issue

#41703 (comment)

[p-jackson]

Work so far:

• Block editor: wpcom page/post navigation sidebar #41703
• Nav sidebar: Integrate nav sidebar with calypsoify #42518
• Nav sidebar: Add "view all" and "create new" buttons to sidebar #42605
• Nav Sidebar: show 10 most recently edited posts/pages in sidebar #42606

[ramonjd]

ramonjd unassigned p-jackson, johnHackworth and ramonjd 24 seconds ago

no one saw anything

[p-jackson]

Todo before shipping. I've put them in the order I think is most important before shipping.

• Make list scrollable and stick buttons to the bottom of the sidebar Nav sidebar scrolls if the items don't fit on the screen #43906
• Test it works on small screens edit: the (W) button disappears on small screens, even when the sidebar is disabled. My guess is we're relying on users using the back button on their device in this case
• Fix tab navigability Nav sidebar: tab navigation not working on Firefox #43972
• Close button broken in IE Nav sidebar: butto to dismiss sidebar disappears on IE #44067 WPCOM Block Editor: show dismiss button in IE 11 #44196
• Review translations
• Add site name and URL to the top area Nav sidebar: the site title and url should appear at the top of the sidebar #43973 Nav sidebar: Add site title and link to the sidebar #44199
• Align visual style with core and woo Nav sidebar: align visual styling closer to core and woo #43968 Nav sidebar: Update styling to match latest mockup #44127
• Remove post slug from the sidebar items Nav sidebar: remove the page/post slugs from the sidebar #43974 Nav sidebar: Remove the page slug which was displayed below the page title #44092
• Add tooltip Nav sidebar: add tooltip to the button that opens the sidebar #43975 Nav sidebar: Update styling to match latest mockup #44127
• Add a home icon to the front page item Nav sidebar: display a home icon beside the front page #43976 (not doing this)
• Change the (W) icon to the site icon Nav sidebar: the sidebar icon should transition to the site icon #43971 (not doing this)

[p-jackson]

Latest mockup pbAok1-185-p2#comment-2345

[ramonjd]

Hi @olaolusoga

Should we be matching @shaunandrews's work in WordPress/gutenberg#23939 for the sidebar before we launch it?

[olaolusoga]

Not all of it since there's chatter still going on. I can mock up the small adjustments we should include, and share shortly.

Is the preview in Shaun's GIF possible with what we're doing?

[p-jackson]

Is the preview in Shaun's GIF possible with what we're doing?

Might be possible, but certainly not trivial. We might be able to use the same technique that the fullscreen layout picker uses, but it wouldn't be a short term thing. I worry a about performance there too, if you're already on a very large sluggish page, then loading a preview of another large sluggish page could even crash the browser tab. A skeleton preview might be a way around it i.e. just showing block outlines as boxes and removing the actual images/text from the preview.

[olaolusoga]

Might be possible, but certainly not trivial.

Makes sense. Let's punt on the previewer for now; core can figure it out, and we'll roll it into FSE on dotcom.

[p-jackson]

Issues so far from Call for Testing:

• Add active style to sidebar nav items and home button to ensure text is white while clicked Nav sidebar: Add active style to sidebar nav items and home button to ensure text is white while clicked #44418
• Change editor close button label from "Home" to "My Home" Change editor close button label from "Home" to "My Home" #44445
• Increase contrast of "View site" link's :active state Nav sidebar: increase contrast of "View site" link's :active state #44446 Nav sidebar: Increase contrast for "Visit site" links active/hover/focus states #44507
• The site title overflows the sidebar when it has no spaces in the name Nav sidebar: correctly format site titles correctly when they are long or have punctuation #44508
• The Post Visibility popup appears on top of the sidebar click guard Nav sidebar: the Post Visibility popup appears on top of the sidebar click guard #44548
• Should we do something about the "back button" forgetting where we came from and defaulting to going back to My Home? Save the last-non-editor-route in redux instead of calculating it #44724

[p-jackson]

Page navigation has now been shipped to 100% users. There are some tasks/issues on the board for small improvements we could make, but the main task is now done.

[ramonjd]

Page navigation has now been shipped to 100% users. There are some tasks/issues on the board for small improvements we could make, but the main task is now done.