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

Patterns: Add categories to user patterns, and allow filtering by these in site and post editor #53835

Merged
merged 20 commits into from
Sep 15, 2023

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Aug 21, 2023

What?

Add the ability to assign categories to user created patterns.

To make reviewing easier separate PRs will be created off this branch for:

Why?

Currently users have no way of organising their synced and unsynced patterns.

How?

Uses the recently added wp_patterns_category custom taxonomy, and adds a taxonomy input box to the create pattern modal.

Testing Instructions

  • In the post editor add a block and then in the block toolbar overflow select the Create pattern option
  • Add categories for the pattern in the create pattern model and add the pattern
  • Go to /wp-admin/edit.php?post_type=wp_block and check that the categories are attached to the new pattern
  • Try adding another pattern and try a mix of adding existing and new category names and make sure they are all saved
  • Also try adding a new pattern from the site editor Patterns page

Site editor testing instructions

  • Add several user patterns, synced and unsynced, with categories assigned (make sure to hit enter or add ',' after each category - this is the default tag input component behaviour - we will fix this in a follow up PR)
  • Go to the site editor patterns page and make sure the categories appear in the left nav panel
  • Make sure that when the categories are selected the correct patterns display
  • Make sure the theme patterns also still display as expected
  • Make sure that all the patterns display under 'All patterns' and that searching works as expected
  • Duplicate a theme pattern and make sure the new pattern is in the same category
  • Add a user pattern with category of Footer and make sure it displays along with the theme Footer patterns (be aware that although the TT3 theme footer patterns are listed under Footers the category slug is actually footer so the user category name needs to match this).

Post Editor testing

  • In the post editor add some synced and unsynced patterns with categories assigned
  • Check that the patterns appear in the correct categories in the inserter patterns tab
  • Check that the All patterns tab shows all patterns and that paging at the bottom of the tab works
  • Check that the Source Filter select list works as expected and that correct patterns display for each selected filter
  • Also check that when the My patterns source filter is selected that a Sync type filter appears at the top of the patterns list and works as expected
  • Check that changing Source or Sync type filters when categories are selected resets the category to All
  • Repeat all of the above in the patterns explorer modal
  • With screenreader/voiceover running try selecting a pattern source from dropdown at top of patterns tab and check that the number of category buttons displayed is announced correctly

Screenshots or screencast

patterns-cats.mp4

@glendaviesnz glendaviesnz added [Type] Enhancement A suggestion for improvement. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Aug 21, 2023
@glendaviesnz glendaviesnz self-assigned this Aug 21, 2023
@github-actions
Copy link

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/compat/wordpress-6.4/block-patterns.php

@github-actions
Copy link

github-actions bot commented Aug 21, 2023

Size Change: +2.84 kB (0%)

Total Size: 1.62 MB

Filename Size Change
build/block-editor/index.min.js 218 kB +1.13 kB (+1%)
build/block-editor/style-rtl.css 15.4 kB +344 B (+2%)
build/block-editor/style.css 15.4 kB +342 B (+2%)
build/core-data/index.min.js 17 kB +125 B (+1%)
build/edit-post/index.min.js 35.5 kB +20 B (0%)
build/edit-site/index.min.js 181 kB +188 B (0%)
build/editor/index.min.js 45.6 kB +25 B (0%)
build/patterns/index.min.js 3.24 kB +543 B (+20%) 🚨
build/patterns/style-rtl.css 302 B +62 B (+26%) 🚨
build/patterns/style.css 302 B +62 B (+26%) 🚨
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.25 kB
build/block-editor/content.css 4.24 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
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 126 B
build/block-library/blocks/audio/theme.css 126 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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 629 B
build/block-library/blocks/button/style.css 628 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 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.69 kB
build/block-library/blocks/cover/style.css 1.68 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 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 311 B
build/block-library/blocks/file/style.css 312 B
build/block-library/blocks/file/view.min.js 318 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 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.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 654 B
build/block-library/blocks/group/editor.css 654 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 76 B
build/block-library/blocks/heading/style.css 76 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 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.41 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.83 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 266 B
build/block-library/blocks/media-text/editor.css 263 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 115 B
build/block-library/blocks/navigation-link/style.css 115 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.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view.min.js 984 B
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 401 B
build/block-library/blocks/page-list/editor.css 401 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-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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 314 B
build/block-library/blocks/post-template/style.css 314 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 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 302 B
build/block-library/blocks/query-pagination/style.css 299 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 478 B
build/block-library/blocks/query/editor.css 477 B
build/block-library/blocks/query/style-rtl.css 370 B
build/block-library/blocks/query/style.css 368 B
build/block-library/blocks/query/view.min.js 555 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 607 B
build/block-library/blocks/search/style.css 607 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 468 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 234 B
build/block-library/blocks/separator/style.css 234 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 754 B
build/block-library/blocks/site-logo/editor.css 754 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 432 B
build/block-library/blocks/table/editor.css 432 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 146 B
build/block-library/blocks/table/theme.css 146 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 403 B
build/block-library/blocks/template-part/editor.css 403 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/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 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 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.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 205 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 13.9 kB
build/block-library/style.css 13.9 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 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.4 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/components/index.min.js 255 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.6 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.48 kB
build/customize-widgets/style.css 1.48 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.84 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/style-rtl.css 7.84 kB
build/edit-post/style.css 7.83 kB
build/edit-site/style-rtl.css 13.8 kB
build/edit-site/style.css 13.8 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.8 kB
build/edit-widgets/style.css 4.79 kB
build/editor/style-rtl.css 3.53 kB
build/editor/style.css 3.52 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.71 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 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/index.min.js 11.3 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 958 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.7 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.97 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.73 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 958 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Aug 21, 2023

Flaky tests detected in 85f4c5e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6194045390
📝 Reported issues:

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Nice work here @glendaviesnz 👍

This is looking good and tests as advertised for me.

✅ Pattern creation via the post editor works
✅ Creation via the site editor also works
✅ Pattern categories are correctly created or found, and assigned
✅ Post type admin page reflects the categories as they were assigned

Once we merge in the PRs built on this, we can give it a further holistic test before merging to trunk.

I'm looking forward to seeing all the pattern categorization in the wild!

Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

All worked great 👍 Part of me wanted to see the categories on the patterns view in the site editor.

✅ In the post editor add a block and then in the block toolbar overflow select the Create pattern option
✅ Add categories for the pattern in the create pattern model and add the pattern
✅ Go to /wp-admin/edit.php?post_type=wp_block and check that the categories are attached to the new pattern
✅ Try adding another pattern and try a mix of adding existing and new category names and make sure they are all saved
✅ Also try adding a new pattern from the site editor Patterns page

Screen.Recording.2023-09-13.at.10.09.50.AM.mp4

@glendaviesnz glendaviesnz force-pushed the add/pattern-category-ui branch from e291597 to 81876cd Compare September 14, 2023 04:59
@glendaviesnz glendaviesnz changed the title Patterns: Add category selection option to create pattern modal Patterns: Add categories to user patterns, and allow filtering by these in site and post editor Sep 14, 2023
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

First things first, huge effort wrangling pattern categories @glendaviesnz 💪

I've started testing the overall feature and it is coming together nicely!

Unfortunately, I'm out of time today, so haven't yet gotten to thoroughly test all angles, or review the code completely, but thought I could share a couple of issues I've run into so far.

  1. If you create a new pattern via the Patterns page's "Create pattern" menu item, then navigate back to the main Patterns page. You'll end up with the old my-patterns category selected even though that is no longer an option in the sidebar screen.
  2. There's an inconsistent error thrown when searching patterns that crashes the page.
    Screenshot 2023-09-14 at 8 32 40 pm
    https://github.com/WordPress/gutenberg/assets/60436221/dd6a4a9d-c5b7-474f-8c62-ae9d0741b4b4
  3. In the post editor's pattern explorer modal, if you change the sync type filter there the modal closes unexpectedly.
Screen.Recording.2023-09-14.at.8.47.23.pm.mp4

Some other random thoughts were:

  • It felt a bit odd to be changing the sync type filter in secondary panel in the inserter and then have the categories on the first panel change. It seemed like the sync type filter is visually scoped to the panel it is in.
  • We should probably add pattern categories information to the pattern details screen when viewing a pattern
  • Should we be enforcing that a pattern is named?
  • Nit: There seems to be a 2px difference in height between the name input and the token input in the create pattern modal form.

I'll keep testing tomorrow and help out in any way I can.

It is looking pretty good though, I'm excited to see the feature land!

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Sep 14, 2023

In the post editor's pattern explorer modal, if you change the sync type filter there the modal closes unexpectedly.
It felt a bit odd to be changing the sync type filter in secondary panel in the inserter and then have the categories on the first panel change. It seemed like the sync type filter is visually scoped to the panel it is in.

These two were related. The idea with updating the categories was that currently the default was not to show categories that were not populated. However I agree the resulting UX is a little odd, and in fact it probably works better to just show 0 results for the cases where a sync filter change means the category is not populated. I have a PR here that takes this approach, and it also fixes the issues with the modal randomly closing which was caused by a rerender triggered by the category updates.

@glendaviesnz
Copy link
Contributor Author

If you create a new pattern via the Patterns page's "Create pattern" menu item, then navigate back to the main Patterns page. You'll end up with the old my-patterns category selected even though that is no longer an option in the sidebar screen.

Fixed here.

@glendaviesnz
Copy link
Contributor Author

I have rebased. There is now an error in console on site editor categories page:
Screenshot 2023-09-15 at 4 54 21 PM
but have checked and this also appears on trunk.

If all the tests pass I think we should be good to merge, and as you note we can sort any additional issues that might arise in follow ups.

@glendaviesnz
Copy link
Contributor Author

Looks like the console error might have been introduced by #54450

@aaronrobertshaw
Copy link
Contributor

but have checked and this also appears on trunk

Confirmed. This doesn't appear to have been caused during the conflict resolution but introduced via #54450.

A separate fix for that issue is probably better for historical purposes. So I don't think it is a blocker for this PR.

@glendaviesnz glendaviesnz enabled auto-merge (squash) September 15, 2023 05:37
@glendaviesnz glendaviesnz merged commit 9fcfaac into trunk Sep 15, 2023
50 checks passed
@glendaviesnz glendaviesnz deleted the add/pattern-category-ui branch September 15, 2023 05:41
@github-actions github-actions bot added this to the Gutenberg 16.7 milestone Sep 15, 2023
@ramonjd
Copy link
Member

ramonjd commented Sep 18, 2023

Not a big deal, just adding it here coz it fresh.

When trying to add a category that already exists, the API returns a 400 Bad Request error:

2023-09-18.11.16.13.mp4

If this is a problem, maybe we could fetch the taxonomy records and check if it exists before adding it, similar to how post taxonomies do it?

@glendaviesnz
Copy link
Contributor Author

@ramonjd that approach was copied from the post taxonomies flat-term-selector , so I assumed it was a legit approach, but happy to review this approach if you have concerns about it.

@ramonjd
Copy link
Member

ramonjd commented Sep 18, 2023

I assumed it was a legit approach, but happy to review this approach if you have concerns about it.

No worries, I was just flagging it. Thanks for the explainer. 👍🏻

@WunderBart
Copy link
Member

👋 This PR seems to have caused a large increase (58%) in the editor's typing performance metric:

Screenshot 2023-09-18 at 12 16 53

From https://www.codevitals.run/project/gutenberg.

cc @youknowriad

@@ -68,7 +80,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
[ createSuccessNotice, onInsert ]
);

return [ patterns, allCategories, onClickPattern ];
return { patterns, allCategories, onClickPattern };
Copy link
Contributor

Choose a reason for hiding this comment

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

Was this change necessary at all? Now it's not consistent anymore with useBlocksState.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The object return makes for a nicer API, eg. avoids the likes of const [ patterns, , onClickPattern ] = . An array return makes sense for hooks like useState where you are always going to use both values and want to easily give them context-specific names, but not so much in instances like this hook.

I don't have a strong opinion on this though. If keeping it consistent with useBlocksState is thought to be more important then there is a revert PR here.

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.

Not sure exactly what caused the regression but it's meaningful indeed. Worth looking into.

Also the PR is a bit too big. I wonder if it could have shipped in smaller bits.

Comment on lines +1239 to +1259
/**
* Retrieve the registered user pattern categories.
*
* @param state Data state.
*
* @return User patterns category array and map keyed by id.
*/

export function getUserPatternCategories(
state: State
): UserPatternCategories {
const patternCategoriesMap = new Map< number, UserPatternCategory >();
state.userPatternCategories?.forEach(
( userCategory: UserPatternCategory ) =>
patternCategoriesMap.set( userCategory.id, userCategory )
);
return {
patternCategories: state.userPatternCategories,
patternCategoriesMap,
};
}
Copy link
Member

Choose a reason for hiding this comment

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

This needs to be memorized. The useSelect noticed from this screenshot is caused by this selector - #53835 (comment).

Aside from this, is there a reason we're creating a map based on the state inside a selector? The task is better suited for consumers, in my opinion.

Copy link
Contributor Author

@glendaviesnz glendaviesnz Sep 19, 2023

Choose a reason for hiding this comment

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

It doesn't look like this selector was causing that screenshot error as that error was there on trunk prior to this merge, and still there after fixing this selector - we will look at that separately.

This selector was causing the useBlockEditorSettings useMemo return value to be rerun with each call though, which happens on each keypress, so have moved the map into the consumers as suggested. While investigating this I also discovered another change which was causing this useMemo to be reevaluated with every call of the hook. This has been fixed here.

Copy link
Member

Choose a reason for hiding this comment

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

I meant the warning, visible at the top of the error and pointing to the useBlockEditorSettings.

Screenshot

CleanShot 2023-09-19 at 09 46 31

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Sep 19, 2023

#54580 seems to have resolved the typing issue:

Screenshot 2023-09-19 at 4 18 52 PM

thanks @WunderBart for highlighting this, and @Mamaduka for the pointer to that selector.

@Mamaduka
Copy link
Member

Thanks for the follow-ups, @glendaviesnz!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

9 participants