Wp-calypso: 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:
https://github.com/Automattic/wp-calypso/pull/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 ([e-mail])
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
https://github.com/Automattic/wp-calypso/issues/41298#issuecomment-618898732,
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

https://github.com/Automattic/wp-calypso/pull/41703#issuecomment-624862422

[p-jackson]

Work so far:

• [x] #41703
• [x] #42518
• [x] #42605
• [x] #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.

• [x] Make list scrollable and stick buttons to the bottom of the sidebar #43906
• [x] 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 #43972
• [x] Close button broken in IE #44067 #44196
• [ ] Review translations
• [x] Add site name and URL to the top area #43973 #44199
• [x] Align visual style with core and woo #43968 #44127
• [x] Remove post slug from the sidebar items #43974 #44092
• [x] Add tooltip #43975 #44127
• [ ] ~Add a home icon to the front page item #43976~ (not doing this)
• [ ] ~Change the (W) icon 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 https://github.com/WordPress/gutenberg/issues/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:

• [x] Add active style to sidebar nav items and home button to ensure text is white while clicked #44418
• [x] Change editor close button label from "Home" to "My Home" #44445
• [x] Increase contrast of "View site" link's :active state #44446 #44507
• [x] The site title overflows the sidebar when it has no spaces in the name #44508
• [x] The Post Visibility popup appears on top of the sidebar click guard #44548
• [x] Should we do something about the "back button" forgetting where we came from and defaulting to going back to My Home? #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.