Navigation: add transformations from a link to other allowed nav blocks #34978

gwwar · 2021-09-20T21:47:13Z

Small part of #34041

Transforming an empty "page item" should expose the most relevant alternative blocks for a navigation block (search, social icon, pages list, home link, etc).

This adds to transforms for other navigation blocks (search, home link, social icons, site-logo and spacer.

CleanShot.2021-09-20.at.14.41.46.mp4

TODO

Navigation Editor has a WSOD in trunk when attempting to transform to a submenu. #34980 fixes this

Testing Instructions

Build this branch with npm run build
In the post, site, or widget editor:
Add a navigation block
Start from empty
Try transforming links to various block types
Try adding a spacer outside of a navigation block, verify that custom link is not a transform option
In the navigation editor:
Verify that only the submenu transform is available

Question: How useful are the Navigation Link Variations?

Specific navigation link variations like a Post Link, Page Link, Category Link (CPT Link) etc feel like they clutter up the inserter and the transformation mechanism is separate from a normal block transform. Since we're interested in simplifying workflows I wonder if we could remove these from being so prominent. 🤔

The text was updated successfully, but these errors were encountered:

github-actions · 2021-09-20T21:55:32Z

Size Change: +95 B (0%)

Total Size: 1.06 MB

Filename	Size	Change
`build/block-library/index.min.js`	148 kB	+95 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.19 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`	134 kB
`build/block-editor/style-rtl.css`	13.9 kB
`build/block-editor/style.css`	13.8 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`	474 B
`build/block-library/blocks/button/editor.css`	474 B
`build/block-library/blocks/button/style-rtl.css`	600 B
`build/block-library/blocks/button/style.css`	600 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B
`build/block-library/blocks/buttons/editor.css`	315 B
`build/block-library/blocks/buttons/style-rtl.css`	370 B
`build/block-library/blocks/buttons/style.css`	370 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`	497 B
`build/block-library/blocks/columns/style.css`	496 B
`build/block-library/blocks/cover/editor-rtl.css`	666 B
`build/block-library/blocks/cover/editor.css`	670 B
`build/block-library/blocks/cover/style-rtl.css`	1.23 kB
`build/block-library/blocks/cover/style.css`	1.23 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`	983 B
`build/block-library/blocks/gallery/editor.css`	988 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`	728 B
`build/block-library/blocks/image/editor.css`	728 B
`build/block-library/blocks/image/style-rtl.css`	482 B
`build/block-library/blocks/image/style.css`	487 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`	488 B
`build/block-library/blocks/media-text/style.css`	485 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`	568 B
`build/block-library/blocks/navigation-link/editor.css`	570 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`	300 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/editor-rtl.css`	1.72 kB
`build/block-library/blocks/navigation/editor.css`	1.72 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.5 kB
`build/block-library/blocks/navigation/style.css`	1.49 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`	202 B
`build/block-library/blocks/page-list/style.css`	202 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/editor-rtl.css`	210 B
`build/block-library/blocks/post-author/editor.css`	210 B
`build/block-library/blocks/post-author/style-rtl.css`	182 B
`build/block-library/blocks/post-author/style.css`	181 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B
`build/block-library/blocks/post-comments-form/style.css`	140 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B
`build/block-library/blocks/post-comments/style.css`	359 B
`build/block-library/blocks/post-content/editor-rtl.css`	138 B
`build/block-library/blocks/post-content/editor.css`	138 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`	398 B
`build/block-library/blocks/post-featured-image/editor.css`	398 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	143 B
`build/block-library/blocks/post-featured-image/style.css`	143 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`	378 B
`build/block-library/blocks/post-template/style.css`	379 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-title/editor-rtl.css`	85 B
`build/block-library/blocks/query-title/editor.css`	85 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`	220 B
`build/block-library/blocks/quote/theme.css`	222 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`	374 B
`build/block-library/blocks/search/style.css`	375 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`	250 B
`build/block-library/blocks/separator/style.css`	250 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`	462 B
`build/block-library/blocks/site-logo/editor.css`	464 B
`build/block-library/blocks/site-logo/style-rtl.css`	153 B
`build/block-library/blocks/site-logo/style.css`	153 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`	165 B
`build/block-library/blocks/social-link/editor.css`	165 B
`build/block-library/blocks/social-links/editor-rtl.css`	812 B
`build/block-library/blocks/social-links/editor.css`	811 B
`build/block-library/blocks/social-links/style-rtl.css`	1.3 kB
`build/block-library/blocks/social-links/style.css`	1.3 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`	636 B
`build/block-library/blocks/template-part/editor.css`	635 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/term-description/editor-rtl.css`	90 B
`build/block-library/blocks/term-description/editor.css`	90 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`	853 B
`build/block-library/common.css`	849 B
`build/block-library/editor-rtl.css`	9.76 kB
`build/block-library/editor.css`	9.75 kB
`build/block-library/reset-rtl.css`	527 B
`build/block-library/reset.css`	527 B
`build/block-library/style-rtl.css`	10.3 kB
`build/block-library/style.css`	10.3 kB
`build/block-library/theme-rtl.css`	665 B
`build/block-library/theme.css`	669 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`	47 kB
`build/components/index.min.js`	210 kB
`build/components/style-rtl.css`	15.9 kB
`build/components/style.css`	15.9 kB
`build/compose/index.min.js`	10.3 kB
`build/core-data/index.min.js`	12.3 kB
`build/customize-widgets/index.min.js`	11.1 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.1 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.45 kB
`build/edit-navigation/index.min.js`	15 kB
`build/edit-navigation/style-rtl.css`	3.69 kB
`build/edit-navigation/style.css`	3.69 kB
`build/edit-post/classic-rtl.css`	492 B
`build/edit-post/classic.css`	494 B
`build/edit-post/index.min.js`	28.9 kB
`build/edit-post/style-rtl.css`	7.18 kB
`build/edit-post/style.css`	7.17 kB
`build/edit-site/index.min.js`	27.4 kB
`build/edit-site/style-rtl.css`	5.21 kB
`build/edit-site/style.css`	5.21 kB
`build/edit-widgets/index.min.js`	16.1 kB
`build/edit-widgets/style-rtl.css`	4.09 kB
`build/edit-widgets/style.css`	4.09 kB
`build/editor/index.min.js`	37.7 kB
`build/editor/style-rtl.css`	3.76 kB
`build/editor/style.css`	3.75 kB
`build/element/index.min.js`	3.17 kB
`build/escape-html/index.min.js`	517 B
`build/format-library/index.min.js`	5.34 kB
`build/format-library/style-rtl.css`	668 B
`build/format-library/style.css`	670 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.88 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.28 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.6 kB
`build/server-side-render/index.min.js`	1.42 kB
`build/shortcode/index.min.js`	1.48 kB
`build/token-list/index.min.js`	562 B
`build/url/index.min.js`	1.74 kB
`build/viewport/index.min.js`	1.02 kB
`build/warning/index.min.js`	248 B
`build/widgets/index.min.js`	7.27 kB
`build/widgets/style-rtl.css`	1.17 kB
`build/widgets/style.css`	1.18 kB
`build/wordcount/index.min.js`	1.04 kB

_{compressed-size-action}

gwwar · 2021-09-21T18:19:49Z

My assumptions about transforms were incorrect yesterday. So this one is ready for 👀

We already do some basic filtering when block types are not registered, or if a child block type can't be inserted

gwwar added [Type] Enhancement [Block] Navigation [Block] Navigation Link labels Sep 20, 2021

gwwar self-assigned this Sep 20, 2021

gwwar mentioned this pull request Sep 20, 2021

A Lighter Navigation Block Experience #34041

Open

gwwar force-pushed the try/navigation-link-transform branch from da57ab2 to 0646703 Sep 20, 2021

gwwar mentioned this pull request Sep 21, 2021

Experiment: dedicated menu and menu item blocks for navigation editor #34496

Draft

7 tasks

Navigation: add transformations from a link to other allowed nav blocks

ef44be2

gwwar force-pushed the try/navigation-link-transform branch from 76310e1 to ef44be2 Sep 21, 2021

gwwar marked this pull request as ready for review Sep 21, 2021

gwwar requested a review from ajitbohra as a code owner Sep 21, 2021

gwwar requested review from talldan, tellthemachines and getdave Sep 21, 2021

WordPress / gutenberg Public

Navigation: add transformations from a link to other allowed nav blocks #34978

Navigation: add transformations from a link to other allowed nav blocks #34978

gwwar commented Sep 20, 2021 •

edited

github-actions bot commented Sep 20, 2021 •

edited

gwwar commented Sep 21, 2021

WordPress / gutenberg Public

Navigation: add transformations from a link to other allowed nav blocks #34978

Are you sure you want to change the base?

Navigation: add transformations from a link to other allowed nav blocks #34978

Conversation

gwwar commented Sep 20, 2021 • edited

TODO

Testing Instructions

Question: How useful are the Navigation Link Variations?

github-actions bot commented Sep 20, 2021 • edited

gwwar commented Sep 21, 2021

gwwar commented Sep 20, 2021 •

edited

github-actions bot commented Sep 20, 2021 •

edited