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: Experiment with adding navigation link variations #29011

Closed
wants to merge 2 commits into from

Conversation

gwwar
Copy link
Contributor

@gwwar gwwar commented Feb 15, 2021

WIP Part of #24814 this PR experiments with registering navigation link variants.

This approach requires WordPress/wordpress-develop#1002 to test.

Screen Shot 2021-02-15 at 12 08 21 PM

test.mp4

Request For Feedback

cc @noisysocks @gziolo

I put together a pretty quick draft of what this looks like if we populate navigation link variations from the API

  1. Do we need an API update? As for as I can tell, this requires some API updates to allow filtering, or show the extra visibility properties. I quickly drafted this in Navigation: Try filtering by show_in_nav_menus for post types and taxonomies wordpress-develop#1002. Let me know if I mislooked anything and this an API update is unnecessary.
  2. Where should this live, and when should it fire? Placement of the registerBlockVariation calls is a bit awkward. I had trouble finding a good spot. Our core data stores work best with a react component, so I instead opted for a direct apiFetch call which might not be ideal.
  3. Rethinking Block Attributes Reading customizer code and what we have here, I think type sort of corresponds to a taxonomy.slug or postType.slug value (with a hardcoded exception to tag, which is post_type). At a minimum I think I need to pass through if it's a taxonomy or post-type. I'm also not sure if slug is dependable, beyond the default built-ins. Can slug be renamed. Are collisions allowed? Eg should we be using a post type id/taxonomy id instead?

TODO

  • Finish Search suggestion support handling
  • Verify that we should populate from the API
  • What should we do about custom post type labels/descriptions?
  • Should we allow customization of the inserter icon?
  • Should we respect the customize_nav_menu_available_item_types filter?
  • Can we trust a taxonomy/post-type slug, or do we need to rely on ID/term_id
  • Verify what data should be stored in the block / what deprecations should be made

Testing Instructions

@gwwar gwwar self-assigned this Feb 15, 2021
@gwwar gwwar added the [Block] Navigation Affects the Navigation Block label Feb 15, 2021
@github-actions
Copy link

Size Change: +312 B (0%)

Total Size: 1.38 MB

Filename Size Change
build/api-fetch/index.js 3.4 kB +1 B (0%)
build/block-editor/index.js 124 kB -2 B (0%)
build/block-library/index.js 145 kB +318 B (0%)
build/components/index.js 272 kB -1 B (0%)
build/edit-post/index.js 307 kB +1 B (0%)
build/edit-site/index.js 25.4 kB -2 B (0%)
build/editor/index.js 41.9 kB -2 B (0%)
build/list-reusable-blocks/index.js 3.15 kB -3 B (0%)
build/reusable-blocks/index.js 2.92 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 9.1 kB 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/style-rtl.css 12.1 kB 0 B
build/block-editor/style.css 12.1 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 103 B 0 B
build/block-library/blocks/audio/style.css 103 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 465 B 0 B
build/block-library/blocks/button/style.css 464 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 233 B 0 B
build/block-library/blocks/buttons/editor.css 233 B 0 B
build/block-library/blocks/buttons/style-rtl.css 303 B 0 B
build/block-library/blocks/buttons/style.css 303 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 421 B 0 B
build/block-library/blocks/columns/style.css 421 B 0 B
build/block-library/blocks/cover/editor-rtl.css 390 B 0 B
build/block-library/blocks/cover/editor.css 389 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.25 kB 0 B
build/block-library/blocks/cover/style.css 1.25 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 396 B 0 B
build/block-library/blocks/embed/style.css 395 B 0 B
build/block-library/blocks/file/editor-rtl.css 199 B 0 B
build/block-library/blocks/file/editor.css 198 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 689 B 0 B
build/block-library/blocks/gallery/editor.css 690 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/gallery/style.css 1.06 kB 0 B
build/block-library/blocks/group/editor-rtl.css 318 B 0 B
build/block-library/blocks/group/editor.css 317 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 477 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 159 B 0 B
build/block-library/blocks/latest-comments/editor.css 158 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 269 B 0 B
build/block-library/blocks/latest-comments/style.css 269 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/list/editor-rtl.css 65 B 0 B
build/block-library/blocks/list/editor.css 65 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 395 B 0 B
build/block-library/blocks/navigation-link/editor.css 397 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 704 B 0 B
build/block-library/blocks/navigation-link/style.css 702 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.34 kB 0 B
build/block-library/blocks/navigation/editor.css 1.34 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 195 B 0 B
build/block-library/blocks/navigation/style.css 195 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 214 B 0 B
build/block-library/blocks/page-list/editor.css 214 B 0 B
build/block-library/blocks/page-list/style-rtl.css 527 B 0 B
build/block-library/blocks/page-list/style.css 526 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 109 B 0 B
build/block-library/blocks/paragraph/editor.css 109 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 273 B 0 B
build/block-library/blocks/paragraph/style.css 273 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 63 B 0 B
build/block-library/blocks/preformatted/style.css 63 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 316 B 0 B
build/block-library/blocks/pullquote/style.css 316 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 90 B 0 B
build/block-library/blocks/query-loop/editor.css 89 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query/editor-rtl.css 159 B 0 B
build/block-library/blocks/query/editor.css 160 B 0 B
build/block-library/blocks/quote/editor-rtl.css 61 B 0 B
build/block-library/blocks/quote/editor.css 61 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 165 B 0 B
build/block-library/blocks/search/editor.css 165 B 0 B
build/block-library/blocks/search/style-rtl.css 342 B 0 B
build/block-library/blocks/search/style.css 344 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 236 B 0 B
build/block-library/blocks/separator/style.css 236 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 504 B 0 B
build/block-library/blocks/shortcode/editor.css 504 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 201 B 0 B
build/block-library/blocks/site-logo/editor.css 201 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 117 B 0 B
build/block-library/blocks/site-logo/style.css 117 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 696 B 0 B
build/block-library/blocks/social-links/editor.css 696 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB 0 B
build/block-library/blocks/social-links/style.css 1.37 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 302 B 0 B
build/block-library/blocks/spacer/editor.css 302 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 99 B 0 B
build/block-library/blocks/subhead/editor.css 99 B 0 B
build/block-library/blocks/subhead/style-rtl.css 80 B 0 B
build/block-library/blocks/subhead/style.css 80 B 0 B
build/block-library/blocks/table/editor-rtl.css 489 B 0 B
build/block-library/blocks/table/editor.css 489 B 0 B
build/block-library/blocks/table/style-rtl.css 386 B 0 B
build/block-library/blocks/table/style.css 386 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 557 B 0 B
build/block-library/blocks/template-part/editor.css 556 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 62 B 0 B
build/block-library/blocks/verse/editor.css 62 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 193 B 0 B
build/block-library/blocks/video/style.css 193 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/editor-rtl.css 9.05 kB 0 B
build/block-library/editor.css 9.04 kB 0 B
build/block-library/style-rtl.css 8.8 kB 0 B
build/block-library/style.css 8.8 kB 0 B
build/block-library/theme-rtl.css 748 B 0 B
build/block-library/theme.css 748 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.3 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 11 kB 0 B
build/core-data/index.js 16.7 kB 0 B
build/customize-widgets/index.js 4.08 kB 0 B
build/customize-widgets/style-rtl.css 168 B 0 B
build/customize-widgets/style.css 168 B 0 B
build/data-controls/index.js 830 B 0 B
build/data/index.js 8.86 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.94 kB 0 B
build/edit-navigation/index.js 11 kB 0 B
build/edit-navigation/style-rtl.css 1.26 kB 0 B
build/edit-navigation/style.css 1.25 kB 0 B
build/edit-post/style-rtl.css 6.81 kB 0 B
build/edit-post/style.css 6.8 kB 0 B
build/edit-site/style-rtl.css 4.37 kB 0 B
build/edit-site/style.css 4.37 kB 0 B
build/edit-widgets/index.js 20 kB 0 B
build/edit-widgets/style-rtl.css 3.2 kB 0 B
build/edit-widgets/style.css 3.2 kB 0 B
build/editor/editor-styles-rtl.css 543 B 0 B
build/editor/editor-styles.css 545 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/element/index.js 4.61 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.77 kB 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 2.28 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 4.01 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.93 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 5.36 kB 0 B
build/notices/index.js 1.85 kB 0 B
build/nux/index.js 3.41 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/plugins/index.js 2.55 kB 0 B
build/primitives/index.js 1.42 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/react-i18n/index.js 1.45 kB 0 B
build/redux-routine/index.js 2.83 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 3.02 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@gziolo
Copy link
Member

gziolo commented Feb 16, 2021

Nice start with this prototype. It shows how complex this setup is.

Where should this live, and when should it fire? Placement of the registerBlockVariation calls is a bit awkward. I had trouble finding a good spot. Our core data stores work best with a react component, so I instead opted for a direct apiFetch call which might not be ideal.

I agree that the placement isn't good. I don't think we have any side effects defined for others blocks outside if the Edit component. The call for block registration happens in the loop for all blocks and this is the only place where side effects exist.

Ideally, we shouldn't need to use REST API here at all. The only question is what would be the preferred way to set those block variations on the server. block.json doesn't fit here as the setup is dynamic.

Could it maybe work as Block Patterns instead? See explorations for the Query block started by @ntsekouras in #28891.

@gwwar
Copy link
Contributor Author

gwwar commented Feb 16, 2021

Thanks @gziolo for taking a look!

Ideally, we shouldn't need to use REST API here at all.

💯 on this. I sketched out this approach since there isn't a corresponding register_block_variation.

Could it maybe work as Block Patterns instead?

That might be interesting. @jasmussen what do you think? I suppose the main interaction difference, is selecting a link type from the inserter, vs inserting from a flow in the block placeholder. Some cases to consider: within the navigation block, each link is relatively small so the placeholder area will be smaller too. We'll also want to consider a site that has a reasonable number of CPT/Taxonomies added

@gwwar
Copy link
Contributor Author

gwwar commented Feb 16, 2021

@gziolo After playing a bit, block patterns feels like not a good match for this use case, unless we'd like to rethink how we'd like to build a menu navigation at a higher level. cc @shaunandrews @jasmussen

From what I understand, block patterns are content focused. So it makes sense for when we know the full example content (eg two grouped buttons), or are using a single dynamic/query block. "Give me a navigation menu that reflects all pages" is a great example.

All Pages Pattern Example
<!-- wp:navigation {"orientation":"horizontal"} --><!-- wp:page-list /--><!-- /wp:navigation --> Screen Shot 2021-02-16 at 12 41 15 PM

However if we try this with say a tag variant, we might be able to provide a placeholder, but how would we add another tag or other link variant after that? (see placeholder work in #28861):

Tag Placeholder Example
<!-- wp:navigation {"orientation":"horizontal"} --><!-- wp:navigation-link {"type":"tag"} /--><!-- /wp:navigation --> Screen Shot 2021-02-16 at 12 39 54 PM

@gziolo
Copy link
Member

gziolo commented Feb 17, 2021

After playing a bit, block patterns feels like not a good match for this use case, unless we'd like to rethink how we'd like to build a menu navigation at a higher level.
From what I understand, block patterns are content focused. So it makes sense for when we know the full example content (eg two grouped buttons), or are using a single dynamic/query block. "Give me a navigation menu that reflects all pages" is a great example.

All valid points if you think about it overall. The differences between block variations and block patterns are nuanced for more complex blocks. It all depends on what you want to achieve. If there is no way to make it fit the existing APIs, we should evaluate adding a new API that allows registering block variations on the server. There is prior art available for block styles (API introduced before block variations, that can be seen as a subset of functionality):

https://github.com/WordPress/wordpress-develop/blob/f84ebe3fe75ff6c2b1e8ffab3b3d4c76032cc4c5/src/wp-includes/blocks.php#L903-L905

https://github.com/WordPress/wordpress-develop/blob/a55a9183bce9b28fed1b648ec69897be33b56bd9/src/wp-includes/script-loader.php#L2304-L2317

@youknowriad
Copy link
Contributor

Interesting challenge:

Did you consider providing the "variations" key of the block server side instead? I mean technically this is equivalent to the suggested register_block_variation but you don't really need this function you can just alter the "variations" key of the block type object.

Conceptually speaking, I'm trying to think wether it makes sense to support "dynamic variations" from the client side perspective, or if there are other Block APIs that could benefit from being dynamic. That said, I'd prefer for things like that to take some time to materialize as a generic use-case/API so it's probably better to just start adhoc and keep in mind potential new abstractions in the future if the need materialize more obviously.

@gziolo
Copy link
Member

gziolo commented Feb 17, 2021

Did you consider providing the "variations" key of the block server side instead? I mean technically this is equivalent to the suggested register_block_variation but you don't really need this function you can just alter the "variations" key of the block type object.

The issue is that we don't expose variations from the block type definition to the client. We would need to add handling in a few places, similar to styles:

Block type class:
https://github.com/WordPress/wordpress-develop/blob/f400eb5ab9e80f62939bd8630e27e08ee0619ba1/src/wp-includes/class-wp-block-type.php#L151-L158

Temporary helper to pass definitions to the client:
https://github.com/WordPress/wordpress-develop/blob/e3a98e8f559029a32264b83eae59f90e6e7a375d/src/wp-admin/includes/post.php#L2242-L2257

register_block_type_from_metadata:
https://github.com/WordPress/wordpress-develop/blob/f84ebe3fe75ff6c2b1e8ffab3b3d4c76032cc4c5/src/wp-includes/blocks.php#L227-L241

REST API endpoint (long term way to pass definitions to the client):
https://github.com/WordPress/wordpress-develop/blob/f400eb5ab9e80f62939bd8630e27e08ee0619ba1/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php#L364-L581

@gwwar
Copy link
Contributor Author

gwwar commented Feb 17, 2021

@youknowriad @gziolo thanks for taking a look! I sketched out the alternative in #29095, is this what you were thinking of?

@gziolo
Copy link
Member

gziolo commented Feb 18, 2021

thanks for taking a look! I sketched out the alternative in #29095, is this what you were thinking of?

Yes, that would be another way of doing it. I'm curious what @youknowriad had in mind.

@youknowriad
Copy link
Contributor

Yep, that PR is exactly what I had in mind :)

@jasmussen
Copy link
Contributor

Thanks for the ping, sorry for the late response.

There's a technical angle to this that is possibly over my head, so I'll respond mostly to the user experience side of things.

Could it maybe work as Block Patterns instead?

I think we should absolutely use block patterns for the navigation block, perhaps even in the setup state as it's used with the Query block soon. We might potentially be able to leverage some of this design by @jameskoster.

However to your own point, block patterns are definitely about content, and providing a shortcut to nice layouts. You are meant to customize the content inside a block pattern after the fact.

For example I would imagine most navigaiton block patterns to simply include the Page List block, the Social Links block, and the Search blocks, and any combination of those three. If you need custom links, you'd then need to detach the page list block, or to add your own items.

Was that helpful?

@gwwar
Copy link
Contributor Author

gwwar commented Feb 19, 2021

Thanks for chiming in @jasmussen!

However to your own point, block patterns are definitely about content, and providing a shortcut to nice layouts. You are meant to customize the content inside a block pattern after the fact.

Very helpful to confirm that 💖. I think we'll end up needing both patterns to as you said provide shortcuts and some way of providing CPT/Taxonomy links one by one (which is this PR). I do think I can rule out patterns for this problem as a technical choice, since the navigation configurations we're setting up isn't known beforehand. Eg it'd be a little different if we know we wanted 5 links of X type, or wanted to build a dynamic block that mirrors all categories.

@gwwar
Copy link
Contributor Author

gwwar commented Feb 24, 2021

Going to close this draft out for now in favor of #29095

@gwwar gwwar closed this Feb 24, 2021
@youknowriad youknowriad deleted the try/navigation-link-variations branch February 25, 2021 10:20
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants