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 a hint about the rename of reusable blocks to menu and inserter #51771

Merged
merged 7 commits into from
Jul 5, 2023

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Jun 21, 2023

What?

Adds a hint to the menu and tab inserter to alert users to rename of reusable blocks

Why?

To help users with the transition

How?

Uses the existing preferences infrastructure to allow hint to be dismissed

Testing Instructions

  • Add a new block
  • In the block overflow menu make sure the menu is called Create pattern/reusable block
  • In the modal make sure a hint about reusable block renaming appears, don't dismiss it
  • In the Inserter Synced patterns tab check that the hint also shows
  • Dismiss the hint and make sure it doesn't display in either location even after browser reload

Keyboard Testing Instructions

  1. Add a block to the post editor
  2. Shift tab to the block toolbar
  3. Use the right arrow key until you get to the options menu and open it.
  4. Arrow down through the options, and note that there's now a 'hint' within the menu that can be dismissed.

Screenshots or screencast

hint.mp4

@glendaviesnz glendaviesnz added [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Jun 21, 2023
@glendaviesnz glendaviesnz self-assigned this Jun 21, 2023
@github-actions
Copy link

github-actions bot commented Jun 21, 2023

Size Change: +435 B (0%)

Total Size: 1.42 MB

Filename Size Change
build/block-editor/index.min.js 209 kB +280 B (0%)
build/block-editor/style-rtl.css 14.7 kB +79 B (+1%)
build/block-editor/style.css 14.7 kB +80 B (+1%)
build/reusable-blocks/index.min.js 2.39 kB -4 B (0%)
ℹ️ 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 6.99 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 624 B
build/block-library/blocks/button/style.css 623 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 409 B
build/block-library/blocks/columns/style.css 409 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.61 kB
build/block-library/blocks/cover/style.css 1.6 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 159 B
build/block-library/blocks/details/style.css 159 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 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 312 B
build/block-library/blocks/footnotes/style-rtl.css 191 B
build/block-library/blocks/footnotes/style.css 188 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 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.42 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.46 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 507 B
build/block-library/blocks/media-text/style.css 505 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view.min.js 906 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 103 B
build/block-library/blocks/preformatted/style.css 103 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 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 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 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 587 B
build/block-library/blocks/search/style.css 584 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 531 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 203 B
build/block-library/blocks/site-logo/style.css 203 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.43 kB
build/block-library/blocks/social-links/style.css 1.42 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 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 174 B
build/block-library/blocks/video/style.css 174 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 201 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.7 kB
build/block-library/style.css 13.7 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 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 kB
build/commands/index.min.js 14.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/components/index.min.js 240 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12 kB
build/core-commands/index.min.js 2.26 kB
build/core-data/index.min.js 16.1 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.27 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.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 35.3 kB
build/edit-post/style-rtl.css 7.58 kB
build/edit-post/style.css 7.57 kB
build/edit-site/index.min.js 85.4 kB
build/edit-site/style-rtl.css 12.6 kB
build/edit-site/style.css 12.6 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/index.min.js 45.4 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.62 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 10 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 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/plugins/index.min.js 1.77 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 943 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/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.9 kB
build/router/index.min.js 1.77 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.83 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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 268 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 Jun 22, 2023

Flaky tests detected in 2c9384b8a1d1ed0af12258483de3a3b1b47eae7b.
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/5460465659
📝 Reported issues:

@richtabor
Copy link
Member

I like the sentiment but I’m not sure it’s the right solution, at least the MenuItem label.

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Jun 22, 2023

I like the sentiment but I’m not sure it’s the right solution, at least the MenuItem label.

Do you have any alternative solutions? The theory is that the menu label would only be there for one release cycle.

@talldan
Copy link
Contributor

talldan commented Jun 22, 2023

I'm also not sure about this, feels a little confusing. I'd personally prefer something more like a "What's new" guide for existing users.

Some previous discussion here about that - #22241

@jasmussen
Copy link
Contributor

Can we do this instead?

Frame 1

@ndiego
Copy link
Member

ndiego commented Jun 22, 2023

Can we do this instead?

I think this approach will work really well if it's possible to implement.

@bph
Copy link
Contributor

bph commented Jun 22, 2023

That transition for existing users is an excellent idea! The renaming is certainly a factor, but explained right it actually reduces cognitive load for users in the long run and the outlook that there will be partially synched pattern in the future will excite many users, too.

@glendaviesnz glendaviesnz changed the title Patterns: try putting reusable blocks name back in combination with patterns Patterns: add a hint about the rename of reusable blocks to menu and inserter Jun 23, 2023
Copy link
Contributor

@SaxonF SaxonF left a comment

Choose a reason for hiding this comment

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

Tested locally and works well. Looks like this is just making use of the existing settings tab hint code so approving on that basis.

@talldan
Copy link
Contributor

talldan commented Jun 23, 2023

I think the hint will need an accessibility review. Typically there are pretty strong semantics about menus/menu items, and this adds a random button into the middle of a menu.

The good thing is that keyboard navigation still seems to work ok. Though currently when you navigate through the menu, all the items are read out like this:

  • "Lock, Menu Item"
  • "Create pattern, Menu Item"
  • "Dismiss this hint, Button"

I wonder if the button label might make it seem like it dismisses the menu. It might be ok, but would appreciate if someone more knowledgable could check it.

An alternative option might be to make it so that the 'Dismiss' button can't be reached through keyboard navigation, and instead use an aria-description on the 'Create pattern' menu item to inform about the renaming of reusable blocks.

@talldan talldan added the Needs Accessibility Feedback Need input from accessibility label Jun 23, 2023
@glendaviesnz glendaviesnz force-pushed the try/keeping-reusable-block-name branch from 5869473 to 8f9158d Compare June 23, 2023 03:53
@alexstine alexstine self-requested a review June 26, 2023 13:52
@glendaviesnz glendaviesnz force-pushed the try/keeping-reusable-block-name branch from 8f9158d to 6582fb5 Compare July 4, 2023 21:45
@glendaviesnz
Copy link
Contributor Author

@alexstine It would be good to get this into 16.2 if we can, so if you had time to look at it that would be great. FYI, this is just temporary, with the idea that it would only be in the 6.3 release and then removed in 6.4.

@glendaviesnz glendaviesnz added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 4, 2023
@alexstine
Copy link
Contributor

@glendaviesnz Why would this only need to stick around for 1 release? The UX here are pretty bad for screen readers. This is misuse of a notice to place it in the DOM of a menu. If this goes out, I would label this type regression and type bug. Is there a way this can be communicated to users without making a UI mess?

I'm going to say something many of you might not like. If users need hints, maybe it is not as clear as it should be. I find this area of Gutenberg very confusing. The goal of course is to improve things to prevent confusion but if hints are still needed to guide users, maybe this goal is not being met.

I recommend this menu modification goes no further.

Thanks.

@glendaviesnz
Copy link
Contributor Author

Is there a way this can be communicated to users without making a UI mess?

Thanks for the quick reply @alexstine. I did suggest that we just have the menu label as Create a Pattern/Reusable block for a release or two while people get used to the idea that reusable blocks have been rename to patterns, but others we keen to explore different options.

Why would this only need to stick around for 1 release?

The intention is for it to ease the transition between the rename of reusable blocks to patterns.

@glendaviesnz glendaviesnz force-pushed the try/keeping-reusable-block-name branch from 2c9384b to 2c6a34a Compare July 5, 2023 05:37
@glendaviesnz glendaviesnz enabled auto-merge (squash) July 5, 2023 05:51
@glendaviesnz glendaviesnz merged commit 7d7617a into trunk Jul 5, 2023
51 checks passed
@glendaviesnz glendaviesnz deleted the try/keeping-reusable-block-name branch July 5, 2023 06:10
@github-actions github-actions bot added this to the Gutenberg 16.2 milestone Jul 5, 2023
tellthemachines pushed a commit that referenced this pull request Jul 7, 2023
…inserter (#51771)

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
@tellthemachines
Copy link
Contributor

I just cherry-picked this PR to the update/first-pre-beta-4 branch to get it included in the next release: 14bb146

@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 7, 2023
tellthemachines added a commit that referenced this pull request Jul 7, 2023
* add hint to show template part move (#52395)

* Page Content Focus: Ignore page content within a Query Loop block (#52351)

* Block Editor: Pass context and className props to editor.BlockEdit filter

* Page Content Focus: Ignore content blocks that are within a Query Loop

* Patterns: stop endless snackbars appearing (#52012)

* Patterns: Distinguish between theme patterns and template parts in category list (#52382)

* Allow opt out of auto-creation of Navigation fallback (#52319)

* Update welcome guide copy (#52282)

* Patterns: Update pattern copy (#52340)

* Post Title: The changes should be reflected when previewing a post (#52369)

* Update fixed block toolbar (#52123)

* update the icons for expanding and collapsing the fixed block toolbar

* hide the tools selector item in document tools for fixed toolbar preference

* reveal undo, redo and list view buttons

* tweaks for show icon labels and hide zoom out for top toolbar option

* improve the responsiveness of the fixed block toolbar

* remove the overflow rule - bad experiment

* update top toolbar test with the new label for buttons

* update the toolbar tests to account for moving the collapse button

* Drop PHP 5.6 CI jobs (#52345)

* Remove PHP 5.6 PHPUnit CI job
* Raise version in phpcs / WPCS

* Patterns: Add handling of sync status to the wp-admin patterns list page (#52346)

* Exit template focus when opening the W menu (#52235)

* wrap buttons (#52249)

* Update the behavior of the cached undo/redo stack (#51644)

Co-authored-by: Ella van Durpe <ella@vandurpe.com>

* Adjust top position (#52248)

* Patterns: add a hint about the rename of reusable blocks to menu and inserter  (#51771)

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>

* Site Editor: update headings hierarchy in the 'Manage all' screens (#52271)

* This commit:
- updates heading levels on the template and template part pages
- passes a `level` prop to Header from Page

* update h2 size

* Rolling back custom sizes

* Rolling back unnecessary classNames
There was a rogue space in trunk. Let's let it live

* Check randomizer experiment is enabled before rendering button (#52306)

* Hide parent selector when parent is 'disabled' or 'contentOnly' (#52264)

* Fix incorrect aria-describedby attributes for theme patterns (#52263)

* Patterns: rename sync_status and move to top level field on rest return instead of a meta field (#52146)

* Fix default block dimensions visibility (#52256)

* core/heading

* core/details

* core/list

* core/table

* core/video

* core/verse

* core/social-links

* core/site-title

* core/site-tagline

* core/site-logo

* core/post-time-to-read

* core/gallery

* core/code

* core/categories

* core/audio

* core/archives

* Patterns: Display all custom template part areas in sidebar nav (#52355)

* Revert phpcs back to PHP 5.6 (#52384)

Reverts phpcs PHP compatibility version back to 5.6.

* Check if experiment enabled fr this time (#52315)

* Navigation: Remove one preloaded endpoint (#52115)

* default to showing status (#52226)

* Command palette: rename (#52153)

* Revise use of “command menu” to “command palette”.

Dropping "global" where it was used as well.

* Find “command center” and replace with “command palette”

* Image block and behaviors: Fix some warnings (#52109)

* Fix first warning

* Fix second warning - dividing a NaN

* Turn off DFM for style book and style editing (#52117)

* Add confirmation step when deleting a Template (#52236)

* [Command Palette]: Remove suggestion for deleting templates/parts (#52168)

* Update stepper styling in Home template details panel (#51972)

* Update stepper styling

* Remove !important

* [Edit Post]: Add toggle fullscreen mode and list view commands (#52184)

* Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu (#52222)

* Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu

* Move lines

* !important (#52025)

* Navigation in Site View: Readd the edit button (#52111)

* Fix UnitControl crashing on regex control characters.

Units are now escaped using `escapeRegExp` before concatenating them into a regular expression.

Fixes #52211.
---------

Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>

* Patterns: rename wp_block sync_status postmeta to wp_pattern_sync_status (#52232)

---------

Co-authored-by: Kai Hao <kai@kaihao.dev>

* Site Editor Frame: Ignore Spotlight in view mode (#52262)

* Guide: Place focus on the guide's container instead of its first tabbable (#52300)

* Guide: Place focus on the guide's container instead of its first tabbable

* Update CHANGELOG

* Post editor: Require confirmation before removing Footnotes (#52277)

* Post editor: Require confirmation before removing Footnotes

Context: #52176

* BlockRemovalWarningModal: Limit width to 40rem

* Explain that footnotes are preserved. Add warning to Site Editor

* Fix react-dropdown-menu version to avoid breaking change from one of … (#52356)

* Fix react-dropdown-menu version to avoid breaking change from one if its dependencies.

* Changelog update

* move changelog entry to the right place

* Update package-lock

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: Tonya Mork <tonya.mork@automattic.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Ella van Durpe <ella@vandurpe.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
Co-authored-by: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Timothy Jacobs <timothy@ironbounddesigns.com>
Co-authored-by: Kai Hao <kai@kaihao.dev>
Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
@pablohoneyhoney
Copy link

#51771 (comment)

@jasmussen maybe a different one, but would it make sense to reduce the icons (which are passive hints I believe) to be less prominent resulting in a more focused list.

The notice could also have less prominence, be more like a subcopy of the label that eventually will disappear but stays there for a while to reinforce the learning.

@glendaviesnz
Copy link
Contributor Author

The notice could also have less prominence,

@pablohoneyhoney unfortunately @jasmussen's suggestion of adding the notice to the menu had accessibility issues, so we didn't take that idea any further.

@github-actions
Copy link

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Accessibility (a11y), [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
  • Labels found: [Feature] Synced Patterns, Needs Accessibility Feedback, [Feature] Patterns, Needs User Documentation.

Read more about Type labels in Gutenberg.

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 [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Accessibility Feedback Need input from accessibility Needs User Documentation Needs new user documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.