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: create router adapter for sidebar #60466

Merged
merged 14 commits into from
Apr 17, 2024

Conversation

jsnajdr
Copy link
Member

@jsnajdr jsnajdr commented Apr 4, 2024

First working version of a consolidated router for Site Editor sidebar.

The NavigatorProvider in Sidebar no longer has its own in-memory router synchronized with the browser history with useSyncPathWithURL.

Instead, we create a "router adapter" around the native browser history, and pass it as a router prop to Sidebar and in turn to NavigatorProvider. The router value is identical to the context value that is then passed down in NavigatorContext.

This router adapter currently duplicates a lot of code from the NavigatorProvider. The reducer to register screens, the code for matching paths and finding parent paths. After we add all the missing features to goTo and goToParent (focus management etc.), there will be more duplication. We'll have to solve that somehow.

Currently focus management (focusing after navigation and after going back) is not implemented, I'll work on that further.

The sole source of truth for the current location and its history is the global browser history. The router adapter doesn't store its own history state. It merely maps the global location params to the Sidebar URL scheme. And then maps it in the opposite direction in methods like goTo, which maps the path and then acts on the browser history directly.

@jsnajdr jsnajdr added [Type] Enhancement A suggestion for improvement. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Apr 4, 2024
@jsnajdr jsnajdr requested a review from youknowriad April 4, 2024 13:03
@jsnajdr jsnajdr self-assigned this Apr 4, 2024
@jsnajdr jsnajdr requested a review from ajitbohra as a code owner April 4, 2024 13:03
@jsnajdr jsnajdr requested a review from tyxla April 4, 2024 13:03
Copy link

github-actions bot commented Apr 4, 2024

Size Change: -14 B (0%)

Total Size: 1.75 MB

Filename Size Change
build/edit-site/index.min.js 227 kB -29 B (0%)
build/edit-site/style-rtl.css 14.1 kB +7 B (0%)
build/edit-site/style.css 14.1 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.27 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.51 kB
build/block-editor/content.css 4.5 kB
build/block-editor/default-editor-styles-rtl.css 395 B
build/block-editor/default-editor-styles.css 395 B
build/block-editor/index.min.js 256 kB
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 133 B
build/block-library/blocks/audio/theme.css 133 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 671 B
build/block-library/blocks/cover/editor.css 674 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 647 B
build/block-library/blocks/group/editor.css 647 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 878 B
build/block-library/blocks/image/editor.css 878 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 133 B
build/block-library/blocks/image/theme.css 133 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 727 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 353 B
build/block-library/blocks/pullquote/theme-rtl.css 174 B
build/block-library/blocks/pullquote/theme.css 174 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 235 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 690 B
build/block-library/blocks/search/style.css 689 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 239 B
build/block-library/blocks/separator/style.css 239 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 801 B
build/block-library/blocks/site-logo/editor.css 801 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.48 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 431 B
build/block-library/blocks/template-part/editor.css 431 B
build/block-library/blocks/template-part/theme-rtl.css 107 B
build/block-library/blocks/template-part/theme.css 107 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 133 B
build/block-library/blocks/video/theme.css 133 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.4 kB
build/block-library/editor.css 12.4 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 218 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.8 kB
build/block-library/theme-rtl.css 707 B
build/block-library/theme.css 713 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.6 kB
build/commands/index.min.js 15.2 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/components/index.min.js 222 kB
build/components/style-rtl.css 11.9 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.5 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 9 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 579 B
build/edit-post/classic.css 579 B
build/edit-post/index.min.js 19.6 kB
build/edit-post/style-rtl.css 4.44 kB
build/edit-post/style.css 4.44 kB
build/edit-widgets/index.min.js 17.8 kB
build/edit-widgets/style-rtl.css 4.16 kB
build/edit-widgets/style.css 4.16 kB
build/editor/index.min.js 76.3 kB
build/editor/style-rtl.css 6.74 kB
build/editor/style.css 6.74 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 493 B
build/format-library/style.css 492 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.2 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.36 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.3 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 851 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.57 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.38 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.85 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10 kB
build/router/index.min.js 1.88 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.23 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@@ -35,6 +37,7 @@ export default function useLayoutAreas() {
return {
key: 'pages-list',
areas: {
sidebar: <Sidebar router={ router } />,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's unfortunate that we keep rendering a generic "Sidebar" component here. I wanted the routes to be more clear here. (Basically move the sidebar routing into this component instead)

Today it feels like we're defining routes twice.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. 🙂 I'll try to deconstruct Sidebar into individual items. That should make the Navigator stuff disappear sooner or later.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In 06000f3 I made some progress on this. The Sidebar component is completely dissolved and all the individual items are put into area.sidebar.

There is still NavigationProvider, but it's there to:

  • expose APIs used by useNavigator(), like the goTo or goToParent methods, and the current location.
  • keep the "navigator" styles on the rendered elements.

I no longer need the code that registers screens in the router: there's now one hardcoded SCREENS array used to map paths and determine parent paths.

I'll continue working on eliminating these remaining parts of the Navigator router, too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This already feels like a great improvement and a step in the right direction 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The use of Navigator components is now almost completely eliminated, the remaining usages are now mere shadows 🙂

The items in the Site Editor sidebar are still NavigatorButtons:

Screenshot 2024-04-15 at 9 19 41

They use the goTo method of useNavigator(). I'm going to remove that now, and replace goTo with history.push.

Each of the sidebar screens is also still wrapped in NavigatorScreen. It reads the location from useNavigator, but the only properties it looks at are things related to focus management. It doesn't look at the actual location at all. Focus management is the last big thing to solve in this PR, I was postponing it until now.

I'm adding @oandregal as a reviewer for awareness, because I'm noticing the work being done on eliminating /wp_template_part/all and sometimes there are merge conflicts.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Today I eliminated even the last usages of Navigator. It's not there at all in Site Editor sidebar and routing.

Two things I need to reconstruct before this is ready for merge:

  1. Animations when navigating forward and back in the Sidebar. When pressing the Back button, we want the next screen to slide from the left. When pressing one of the "forward" buttons, i.e., the one of the items with chevrons, we want to slide from the right.
  2. Focus management. When navigating forward, focus the "back" button. When navigating backward, focus the item leading to where we came from. Pressing Enter repeatedly should navigate back and forth between the same two items.

I think both of these behaviors are local to the Sidebar, and could be handled in its local state. The global router doesn't necessarily need to know about it.

Copy link

github-actions bot commented Apr 4, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: fullofcaffeine <fullofcaffeine@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

return Object.entries( subset ).every( ( [ key, value ] ) => {
return superset[ key ] === value;
} );
function getParamsFromPath( path, params ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is better than what we had but still feels hacky. I'd love to be able to use the same useLocation/useParams/useRouter to retrieve the params from the url, regardless of where I am (sidebar, content...)

@fullofcaffeine
Copy link
Member

fullofcaffeine commented Apr 8, 2024

No rush, but it'd be nice if we could elaborate on why this refactoring was needed. Right now, the description doesn't include the context on why this is being done, apart from some hints you can get by reading between the lines. What problems did the old approach have? Is it to solve technical debt? Is there an issue with more background info we could link to? it'd be super helpful for people unfamiliar with the motivations behind this change. Thank you! 🙏🏻

@youknowriad
Copy link
Contributor

@fullofcaffeine I've asked @jsnajdr to take a look at the routing situations in the site editor for a few different reasons:

  • Creating and maintaining routes today is not easy at all. You have to include code in very different places (sidebar routing, multiple sync hooks, and router.js file).
  • There's a lot of bugs when navigating in the site editor due to lingering arguments in the url... Having a consistent API for routing and links will help us address these bugs holistically
  • Ultimately, we'd like to split the "routing/shell" of the site editor from its content (the different routes) in order to be able to build multiple site editor like experiences.
  • We'd like a simple routing API that we can open later for third-parties (probably starting as a private API as we work through things)

you're right that I should have started with an issue outlining the issues, which I just did here #60584

@jsnajdr jsnajdr force-pushed the update/site-editor-one-router branch 2 times, most recently from 06000f3 to c592f4c Compare April 15, 2024 07:15
}

// Go back to root by default
return {};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure that's always true for non post type screens? It might be the case now but I don't feel like this is the right path for a generic solution. I feel like maybe the best way to solve this is to actually pass the right "back path" on each sidebar component.

Obviously not something that need to be solved now or anything, just thinking out loud.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's correct for all existing screens. I'm currently not aware of any navigation link that would point to a wrong direction.

But yes, I also think we'll end up passing an explicit backPath to every screen, instead of trying to guess it with some heuristic.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with this follow-up as well.

@youknowriad
Copy link
Contributor

Awesome work on this PR so far.

@jsnajdr jsnajdr force-pushed the update/site-editor-one-router branch from d74bae6 to 020c5c4 Compare April 15, 2024 10:44
@youknowriad
Copy link
Contributor

I see you've added the animation.

There's one case where the existing code fails the "manage all template parts" page which is supposed to be a child of "patterns". Noting that this page is going to be removed (merged with patterns) soon. That said, even if it is, it's something that shows where the current code doesn't adapt properly. Previous we used to rely on the "path" to know whether a path is parent or not (back animation or not), if we had pretty permalinks we could do so here too but for now, it feels like the best path is probably to be explicit in the links themselves.

@jsnajdr
Copy link
Member Author

jsnajdr commented Apr 16, 2024

There's one case where the existing code fails the "manage all template parts" page which is supposed to be a child of "patterns".

Yes, this is because my current animation code is very primitive, namely the useDirection function which determines whether the animation should slide from left or from right. I created just a basic stub so that I have something to play with.

The site editor code never really knew that /patterns is a parent of /wp_template_part/all. The "back animation" is shown only because we clicked on the "back" button, i.e., the SidebarButton in SidebarNavigationScreen. That button navigated with:

navigator.goTo( backPath, { isBack: true } );

and this code says explicitly that it is an isBack navigation, no matter what the old and new paths are.

This isBack option is currently missing, because history.push doesn't know this concept. I'm now researching the best way how to reintroduce all this.

@jsnajdr
Copy link
Member Author

jsnajdr commented Apr 17, 2024

In this PR there's a focus loss on both "back" buttons.

I pushed a fix for this. Now, when going back from "manage all template parts", the focus is at the right place.

(the issue might be different for the two levels though because in trunk I also expected the focus to be back to "manage all template parts" on the first back button but it was moved to the "back" button instead)

Yes, ideally the focus should be on "manage all template parts" because that's where you came from. It has to do with using the useLink hook for this particular item. Instead of passing a path prop to SidebarNavigationItem, it passes an entire custom onClick callback. It's fixable, but given that this part of UI is going away anyway, I think it's not worth fixing.

@youknowriad
Copy link
Contributor

I'm seeing two issues:

  • When first loading the site editor, the back button is focused (in trunk nothing is focused).
  • When going back two levels (from browse all template parts), the "templates" menu item is not focused properly. (Testing on safari btw)

@youknowriad
Copy link
Contributor

When first loading the site editor, the back button is focused (in trunk nothing is focused).

I still see this one, but the other bug is fixed.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still a tiny bug but this is looking to me. Awesome work here.

@jsnajdr jsnajdr force-pushed the update/site-editor-one-router branch from 3b75842 to 7490458 Compare April 17, 2024 12:03
@jsnajdr
Copy link
Member Author

jsnajdr commented Apr 17, 2024

I still see this one, but the other bug is fixed.

The unwanted focus on initial load is now also fixed.

@youknowriad
Copy link
Contributor

Confirmed the fix.

@jsnajdr
Copy link
Member Author

jsnajdr commented Apr 17, 2024

@tyxla's feedback is mostly related to the motion.div animation code, but I'll change that in a followup.

@jsnajdr jsnajdr merged commit 1a11f07 into trunk Apr 17, 2024
62 checks passed
@jsnajdr jsnajdr deleted the update/site-editor-one-router branch April 17, 2024 13:12
@github-actions github-actions bot added this to the Gutenberg 18.2 milestone Apr 17, 2024
@oandregal
Copy link
Member

oandregal commented Apr 18, 2024

I was testing this and looking at the code and found an issue with the template backpath. Any other entity (pages, patterns, template parts) works fine. This is how to reproduce:

  • go to templates index screen
  • go to the editor for one template
  • click the hub (opens the template details)
  • click back (opens another template details, but should have gone to template index screen)
  • click back again and goes back to the site editor root
Gravacao.do.ecra.2024-04-18.as.10.12.16.mov

@oandregal
Copy link
Member

Fix at #60850

canvas === 'edit' ? (
<Editor isLoading={ isSiteEditorLoading } />
) : undefined,
mobile: canvas === 'edit' && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This refactoring made things a lot more simple to follow, thanks @jsnajdr!

I find one little thing missing: fully controlling the mobile views. At the moment, we only use areas.mobile for displaying components other than the sidebar. The logic to default to the sidebar if areas.mobile is undefined still lives in the layout. Absorbing as part of the router would simplify things further.

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") [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants