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

Navigation Area block #36178

Merged
merged 36 commits into from
Nov 5, 2021
Merged

Navigation Area block #36178

merged 36 commits into from
Nov 5, 2021

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Nov 3, 2021

Description

This PR proposes preserving navigation on theme switch by introducing a "Navigation Area" block.

Relies on #36212

The gist here is that:

  • themes define areas
  • if theme A's areas match theme B's areas we then reuse the navigation CPT
  • theme A and B in their templates use a navigation area block to wrap their menus
  • menu to area relationship is saved via site options like { "primary": 794, "secondary": 112 }

Theme authors would ship the following HTML in their templates:

<!-- wp:navigation-area {"area":"primary"} -->
<!-- wp:navigation /-->
<!-- /wp:navigation-area -->

Which makes the nested navigation block use the wp_navigation post associated with the primary area.

Changing saving the navigation area changes the post ID to which the primary area is mapped. The nice part is that this PR uses the entity system, which gives us things like in-editor synchronization and confirmation dialogs for free.

See this a short video from the site editor. I wrestled with GB a bit but it worked more-or-less as intended, maybe except of the unsaved menu:

CleanShot.2021-11-03.at.15.59.49.mp4

Switching to another theme just works.

About design choices

  • I used site_options because this is a minimal mapping that doesn't need anything fancier. Taxonomies could go wrong in that they can express multiple posts pointing to the same area. This mapping can't.
  • The navigation block understands the concept of an area so that it can call setAreaMenu if another menu is selected.

What's missing:

  • Linting
  • Unit tests for the endpoint
  • Group block-like selection mechanics for the Navigation Area block

@github-actions
Copy link

github-actions bot commented Nov 3, 2021

Size Change: +488 B (0%)

Total Size: 1.08 MB

Filename Size Change
build/block-library/blocks/navigation/editor-rtl.css 1.93 kB +5 B (0%)
build/block-library/blocks/navigation/editor.css 1.93 kB +6 B (0%)
build/block-library/editor-rtl.css 9.88 kB +6 B (0%)
build/block-library/editor.css 9.88 kB +7 B (0%)
build/block-library/index.min.js 159 kB +412 B (0%)
build/core-data/index.min.js 12.8 kB +52 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.17 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/index.min.js 136 kB
build/block-editor/style-rtl.css 14.1 kB
build/block-editor/style.css 14.1 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 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.17 kB
build/block-library/blocks/cover/style.css 1.17 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 977 B
build/block-library/blocks/gallery/editor.css 982 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 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 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 502 B
build/block-library/blocks/image/style.css 505 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 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 642 B
build/block-library/blocks/navigation-link/editor.css 642 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/style-rtl.css 1.72 kB
build/block-library/blocks/navigation/style.css 1.7 kB
build/block-library/blocks/navigation/view.min.js 2.74 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 198 B
build/block-library/blocks/page-list/style.css 198 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 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/style-rtl.css 347 B
build/block-library/blocks/post-comments-form/style.css 347 B
build/block-library/blocks/post-comments/style-rtl.css 492 B
build/block-library/blocks/post-comments/style.css 493 B
build/block-library/blocks/post-content/style-rtl.css 56 B
build/block-library/blocks/post-content/style.css 56 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 396 B
build/block-library/blocks/post-featured-image/editor.css 397 B
build/block-library/blocks/post-featured-image/style-rtl.css 156 B
build/block-library/blocks/post-featured-image/style.css 156 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 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 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 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 770 B
build/block-library/blocks/site-logo/editor.css 770 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 824 B
build/block-library/blocks/social-links/editor.css 823 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 10.5 kB
build/block-library/style.css 10.5 kB
build/block-library/theme-rtl.css 668 B
build/block-library/theme.css 673 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46 kB
build/components/index.min.js 213 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/compose/index.min.js 10.9 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.15 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.44 kB
build/edit-navigation/index.min.js 15.9 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.4 kB
build/edit-post/style-rtl.css 7.12 kB
build/edit-post/style.css 7.12 kB
build/edit-site/index.min.js 28 kB
build/edit-site/style-rtl.css 5.32 kB
build/edit-site/style.css 5.32 kB
build/edit-widgets/index.min.js 16.4 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.5 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.21 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.38 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.91 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.19 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.8 kB
build/server-side-render/index.min.js 1.52 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.82 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@adamziel
Copy link
Contributor Author

adamziel commented Nov 3, 2021

Something like this could be useful in the navigation/index.php, too:

	if ( ! empty( $block->context['navigationArea'] ) ) {
		$area = $block->context['navigationArea'];
		$mapping = get_option( 'fse_navigation_areas', array() );
		if ( ! empty( $mapping[ $area ] ) ) {
			$attributes[ 'navigationMenuId' ] = $mapping[ $area ];
		}
	}

Edit: I just added it

@talldan
Copy link
Contributor

talldan commented Nov 4, 2021

In testing, it's working very well. Switching themes is working flawlessly when they have these navigation areas defined. I don't see any reason not to progress with this. It'd be a matter of priority to update bundled theme templates with this new block and to get the word out to theme developers about it (I'll add 'Needs dev note').

There's a small bit of a glitch when switching menus sometimes—on the odd occasion it considers the menu 'unsaved'. I think this is a bug in trunk though, so I'll work on fixing that as a separate effort.

Some potential opportunities:

  • We can preload the navigation menus for each defined navigation area. This is great as they can take a little while to load.
  • We could look into migrating __unstableLocation to this block for universal themes. (not needed for 5.9)

@talldan talldan added Needs Dev Note Requires a developer note for a major WordPress release cycle New Block Suggestion for a new block labels Nov 4, 2021
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Tentatively giving this approval, so that there's no issue with it being merged in time for 5.9.

Really happy with how it works, and it looks like there are only minor changes and tests remaining. Look forward to getting this shipped, great work @adamziel!

@adamziel adamziel changed the title [Draft] Navigation area block Navigation Area block Nov 4, 2021
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Approving again for good luck.

@adamziel
Copy link
Contributor Author

adamziel commented Nov 5, 2021

Merging for good luck.

@adamziel adamziel merged commit 5fc66ef into trunk Nov 5, 2021
@adamziel adamziel deleted the try/nav-area-block branch November 5, 2021 09:34
@github-actions github-actions bot added this to the Gutenberg 11.9 milestone Nov 5, 2021
@MaggieCabrera
Copy link
Contributor

MaggieCabrera commented Nov 5, 2021

We could look into migrating __unstableLocation to this block for universal themes. (not needed for 5.9)

Yes please! Not just for Universal themes but for users who switch from a classic theme to a block theme too

navigationAreas?.map( ( { name, description } ) => ( {
label: description,
value: name,
} ) ),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let's do || [] to prevent a null value making it to MenuItemsChoice

);
return {
navigationAreas: getEntityRecords( 'root', 'navigationArea' ),
hasResolvedNavigationAreas: hasFinishedResolution(
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We could do && navigationAreas.length to prevent pretending everything is fine when there are no areas

@talldan
Copy link
Contributor

talldan commented Nov 5, 2021

Yes please! Not just for Universal themes but for users who switch from a classic theme to a block theme too

👍 Absolutely, that's a very good point, we need to get our thinking caps on about the classic theme to block theme migration.

It shouldn't be too difficult, we need hook into theme switch, figure out which classic menu is assigned to a corresponding navigation area, create a wp_navigation post with the menu items converted to blocks, and then assign its id to the navigation area.

@getdave
Copy link
Contributor

getdave commented Nov 5, 2021

It shouldn't be too difficult, we need hook into theme switch, figure out which classic menu is assigned to a corresponding navigation area, create a wp_navigation post with the menu items converted to blocks, and then assign its id to the navigation area.

I detailed the existing classic mechanic in #35750 (comment). Hopefully this serves as inspiration for an automated mapping solution.

I will say again that I think that on Theme switch, the classic menu should be copied/cloned and converted into a block based menu leaving the original in place. If the user switches back to a classic theme, then we should allow that classic theme to simply pull through the original classic menu.

@adamziel
Copy link
Contributor Author

adamziel commented Nov 5, 2021

Maybe the first, __unstable version could just reuse the navigation editor code to bring in the classic menu as blocks on the editor load, and then, on save, store them as a wp_navigation post?

@adamziel
Copy link
Contributor Author

adamziel commented Nov 5, 2021

Copy link
Member

@spacedmonkey spacedmonkey left a comment

Choose a reason for hiding this comment

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

Posted some early thoughts. Will review again later.

'callback' => array( $this, 'update_item' ),
'permission_callback' => array( $this, 'update_item_permissions_check' ),
'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::EDITABLE ),
),
Copy link
Member

Choose a reason for hiding this comment

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

Are we going to add support for batching?

foreach ( gutenberg_get_navigation_areas() as $name => $description ) {
$area = $this->get_navigation_area_object( $name );
$area = $this->prepare_item_for_response( $area, $request );
$data[ $name ] = $this->prepare_response_for_collection( $area );
Copy link
Member

Choose a reason for hiding this comment

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

@TimothyBJacobs what do you think if this? Other endpoints simple are a flat array. A key based array is different from other endpoints.

Copy link
Member

Choose a reason for hiding this comment

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

We do have a couple of object responses, but an array is preferable because the REST API does assume that collection responses are lists.

private function get_navigation_area_object( $name ) {
$available_areas = gutenberg_get_navigation_areas();
$mapping = get_option( 'fse_navigation_areas', array() );
$area = new stdClass();
Copy link
Member

Choose a reason for hiding this comment

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

Could we create a custom object for this?

);
foreach ( $active_areas as $post_id ) {
if ( 0 !== $post_id ) {
$paths[] = "/wp/v2/navigation/$post_id?context=edit";
Copy link
Member

Choose a reason for hiding this comment

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

$paths[] = add_query_args( 'context', 'edit', rest_get_route_for_post( $post_id ) );

@spacedmonkey
Copy link
Member

Sorry I missed this PR. I added my thoughts on the PR anyway, in hope that some of my questions are answered

Comment on lines +532 to +544
function gutenberg_register_navigation_areas( $new_areas ) {
global $gutenberg_navigation_areas;
$gutenberg_navigation_areas = $new_areas;
}

// Register the default navigation areas.
gutenberg_register_navigation_areas(
array(
'primary' => 'Primary',
'secondary' => 'Secondary',
'tertiary' => 'Tertiary',
)
);
Copy link
Contributor

Choose a reason for hiding this comment

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

Something I just noticed. If a theme dev is able to change the keys here by calling register_navigation_areas it'll degrade the capability of theme migration. This is a problem we have with the existing menus system in WordPress.

An example - one theme calls a menu location 'Header', the other 'Primary', and when switching no migration happens because the names don't match.

The way around this, I think, is to keep an internal representation of the area primary, secondary (or maybe even just an index 0, 1), but allow users to set a name that's used in the UI ('Header', 'Footer').

I quite like the idea of:

	array(
		'primary'   => 'Header',
		'secondary' => 'Sidebar',
		'tertiary'  => 'Footer',
	)

But then what if I have four or five or ten navigation areas? What comes after tertiary?

It's a difficult problem, but I think we should try to solve it for 5.9 by improving this function. Lets come up with some ideas for this.

Copy link
Contributor

@getdave getdave Nov 11, 2021

Choose a reason for hiding this comment

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

I think we should provide some strong defaults but allow users to change extend how they like.

Most devs will stick with the convention that comes by default so that will solve 80% use case of Theme switch.

If a Theme dev choose to alter the area name then they will need to handle the situation where navigations don't migrate across on Theme switch. This provides a big incentive to stick with the registered defaults.

I didn't realise that register_navigation_areas would overwrite the existing items. If that's the case then I think we should make that function private and instead provide a filter. This approach is more "WordPress" and also tends to encourage extension rather than wholesale overwriting.

What comes after tertiary?

quaternary, quinary, senary, septenary, octonary, nonary, denary.

Copy link
Contributor

Choose a reason for hiding this comment

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

I've added a comment over here - #36373 (comment)

@talldan talldan removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Dec 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Feature] Navigation Component A navigational waterfall component for hierarchy of items. New Block Suggestion for a new block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation block - preserve navigation block data on theme switching
8 participants