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

[Library] Add lock icon for theme patterns #51990

Merged
merged 4 commits into from
Jun 30, 2023

Conversation

kevin940726
Copy link
Member

What and why?

See #51948 (comment).

How?

Just some flexbox thing and add the icon.

I noticed that some part of the library isn't accessible. It's not related to this PR though.

Testing Instructions

  1. Go to Site Editor -> Library
  2. See that theme patterns now have lock icon
  3. Click on either of the theme pattern categories, see that the pattern list also has lock icon
  4. Hover over the lock icon will show the descriptive text

Testing Instructions for Keyboard

TBD

Screenshots or screencast

image

image

@kevin940726 kevin940726 added [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jun 27, 2023
@github-actions
Copy link

github-actions bot commented Jun 27, 2023

Size Change: +353 B (0%)

Total Size: 1.44 MB

Filename Size Change
build/edit-site/index.min.js 84.5 kB +317 B (0%)
build/edit-site/style-rtl.css 12.6 kB +18 B (0%)
build/edit-site/style.css 12.6 kB +18 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-editor/index.min.js 209 kB
build/block-editor/style-rtl.css 14.6 kB
build/block-editor/style.css 14.6 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 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 183 B
build/block-library/blocks/footnotes/style.css 182 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.44 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 50.9 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.8 kB
build/components/style.css 11.8 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 40.4 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.2 kB
build/edit-post/style-rtl.css 7.58 kB
build/edit-post/style.css 7.57 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/index.min.js 2.39 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

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.

Thanks for the quick update on this @kevin940726

It tests well for me. The only catch worth noting is that we might need to time merging this with #51949 so that the editable user-created patterns don't also get the lock icon beside the category.

Screenshot 2023-06-28 at 3 32 59 pm

It would also be nice if we can clean up the inline style use as well.

@kevin940726
Copy link
Member Author

The only catch worth noting is that we might need to time merging this with #51949 so that the editable user-created patterns don't also get the lock icon beside the category.

Thanks for flagging that! I'll convert this to draft then so we don't accidentally merge it.

@kevin940726 kevin940726 marked this pull request as draft June 28, 2023 06:45
@jasmussen
Copy link
Contributor

Nice, this is working well. Here a GIF showing the tooltips:

tooltip

A quick note, every pattern inside "Custom patterns" are actually editable, so those should not have the lock:

Screenshot 2023-06-28 at 09 23 31

I'd love a sanity check by @jameskoster but otherwise, this feels like a good step forward.

@kevin940726
Copy link
Member Author

A quick note, every pattern inside "Custom patterns" are actually editable, so those should not have the lock

Yeah, I'm waiting for #51949 to be merged so that I can rebase the logic on top of it. 👍

@kevin940726 kevin940726 self-assigned this Jun 28, 2023
@jameskoster
Copy link
Contributor

I'd love a sanity check by @jameskoster but otherwise, this feels like a good step forward.

Seems fine to me, once the Custom Pattern category is fixed.

We'll need to remove the lock icon on the menu items once custom patterns can be categorised, or theme patterns edited. For that reason we might consider only displaying it on the patterns in the grid. It depends on how soon either of those features land.

<Tooltip
position="top center"
text={ __(
'Theme patterns cannot be edited here'
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess the tooltip can't be read by a screenreader. We may want to think about options for that.

We probably don't want to make each item too verbose, but a little hint could be good. I think there is already an aria-description, so that's an option.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah the whole header is not accessible. I added aria-description in 8c2d390 but I agree it could be a bit verbose. I wonder if we should move that part to the parent section instead? Not sure about the accessibility implication here 🤔 .

@hanneslsm
Copy link

hanneslsm commented Jun 28, 2023

I'm not quite happy with the wording "This pattern can not be edited here".
Instead of saying way can not be done, we should give an indication how or where the pattern can be edited (or by whom).

@jasmussen
Copy link
Contributor

Instead of saying way can not be done, we should give an indication how or where the pattern can be edited (or by whom).

That's the tricky thing. The source of the pattern cannot be edited, as it's a PHP file on the server. Soon enough in the plugin, but not in 6.3 you will be able to edit it, just like you can edit templates (with a "delete customizations").

So in the mean time, the wording is tricky. Because given it's a pattern, you can insert it anywhere and edit it after the fact in a post or a page. So it's just not the source you can edit.

@kevin940726 kevin940726 force-pushed the add/library-theme-pattern-icon branch from 4c9e280 to 308ac6f Compare June 29, 2023 08:56
@kevin940726
Copy link
Member Author

I just rebased it now that #51949 is merged. This is what it currently looks like when there's user patterns:

image

@kevin940726 kevin940726 marked this pull request as ready for review June 29, 2023 09:39
@github-actions
Copy link

github-actions bot commented Jun 29, 2023

Flaky tests detected in 30804a8.
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/5420167365
📝 Reported issues:

@hanneslsm
Copy link

Instead of saying way can not be done, we should give an indication how or where the pattern can be edited (or by whom).

That's the tricky thing. The source of the pattern cannot be edited, as it's a PHP file on the server. Soon enough in the plugin, but not in 6.3 you will be able to edit it, just like you can edit templates (with a "delete customizations").

So in the mean time, the wording is tricky. Because given it's a pattern, you can insert it anywhere and edit it after the fact in a post or a page. So it's just not the source you can edit.

Got it.
How about "Synced patterns can be modified in the editor" then?
Note the "modify", because it's not really editing.

I'm just a little bothered by the "here" because that implies that you can edit it somewhere else. However, editing theme PHP files is for the normal user de facto like not editable - we also could just say that by leaving out the here: "Theme patterns cannot be edited".

@jasmussen
Copy link
Contributor

"Theme patterns cannot be edited"

That can work.

@kevin940726
Copy link
Member Author

kevin940726 commented Jun 29, 2023

2125221 changed the wording to Theme patterns cannot be edited.

@kevin940726 kevin940726 force-pushed the add/library-theme-pattern-icon branch from 2125221 to 30804a8 Compare June 30, 2023 06:54
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.

Thank you for continuing to iterate on this one @kevin940726 👍

It tests well for me and I think this is in a good place.

🚢

@kevin940726 kevin940726 merged commit 1fa932c into trunk Jun 30, 2023
51 checks passed
@kevin940726 kevin940726 deleted the add/library-theme-pattern-icon branch June 30, 2023 08:32
@github-actions github-actions bot added this to the Gutenberg 16.2 milestone Jun 30, 2023
@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 3, 2023
tellthemachines pushed a commit that referenced this pull request Jul 3, 2023
* Add lock icon for theme patterns

* Change to class names

* Add aria-description

* Change wording
@tellthemachines
Copy link
Contributor

I just cherry-picked this PR to the update/wp6-3-beta3 branch to get it included in the next release: e29a7c2

@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 3, 2023
tellthemachines added a commit that referenced this pull request Jul 3, 2023
* Footnotes: inscrease selector specificity for anchor (#52179)

* Patterns: Include template parts for custom areas in Uncategorized category (#52159)

* Fix custom patterns console error (#51947)

* Fix error with react list key with new custom patterns list in inserter

* Update placeholder key

* Add comment to explain the different keys

* Patterns: Fix missing custom patterns in patterns explorer (#51889)

* Add custom patterns to pattern explorer

* show custom patterns in the patterns explorer dialog

* remove changes from 51877

* Fix up use of async lists

* remove a bit of code duplication by adding a new hook

* add 51877 fix back to make testing easier

* Just assign the key value in one place

* Refactor the custom patterns to use the usePatternsState hook

* Fix use of async list

* Translate strings and remove unneeded fields from pattern object

* Try integrating unsynced patterns directly into pattern selectors (#51955)

* Include reusable blocks with an undefined sync status in inserter items

* Update docs

* Remove change to hover dependencies

---------

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* i18n: Add context to the word "Filters" (#52198)

* Update home template icon (#52075)

* Centralise all permissions lookup in Link UI and enable (#52166)

* BlockRemovalWarningModal: Fix incorrect '_n' usage (#52164)

* Fix fetching Nav fallback ID flushing Navigation entity cache (#52069)

* Only flush the `getEntityRecords` cache if the fallback isn’t already in state

* Save the edited entity record to a const and then invert it to determine whether we should invalidate the recordds

---------

Co-authored-by: scruffian <ben@scruffian.com>

* Block Editor: Unify texts for Create pattern modal (#52151)

* Fix history back after entering edit mode from Patterns (#52112)

* Add template part icons to the library grid items (#51963)

* Patterns: Fix sidebar tab label (#51953)

* Patterns: Fix setting of sync status for fully synced patterns (#51952)

* Library: Reinstate manage all template parts page (#51961)

* Command Palette: fix incorrect path and snackbar message when template part is deleted (#52034)

* Command Center: Fix incorrect navigation when deleting template part

* removeTemplate: consider title type

* Drop-indicator: remove white border. (#52122)

* Make Navigation fallback selector private (#51413)

* Move selector to become private

* adds basic lock functionality

* remove useless lock-unlock file

* map private selectors to resolvers

* Unlock the other usage

* only create one fallback per session

* Fix core-data duplicate private opt-in

* Data: bind resolvers to selectors individually, support private selectors

---------

Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>
Co-authored-by: scruffian <ben@scruffian.com>
Co-authored-by: Jarda Snajdr <jsnajdr@gmail.com>

* Focus Mode: Use the symbol icon if a pattern is being edited (#52031)

* Footnotes: register meta field for pages (#52024)

* Fix unintentional toggling on of distraction free (#52090)

* replace toggle with set preference - because I don't read code properly it seems

* remove notification

* Revert "Updating social link attributes (#51997)" (#52019)

This reverts commit c711e2a.

* Update home template name (#52048)

* Removes unused call (#51988)

* Remove ability for user to toggle sync status after pattern creation (#51998)

* Fix disable DFM when opening styles command (#52165)

* Update custom patterns label to 'My patterns' (#51949)

* rename custom patterns to my patterns

* Add my patterns label to inserter and show at the top

---------

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Library: Add sync status to pattern details screen (#51954)

* Patterns: Rename Library to Patterns (#52102)

* [Library] Add lock icon for theme patterns (#51990)

* Add lock icon for theme patterns

* Change to class names

* Add aria-description

* Change wording

* Patterns: Use "detached" copy consistently (#51993)

* Editor initrial appender: Zero out margins in constrained layouts. (#52026)

* Update pattern creation modal in library (#51946)

* Fix missing snackbars in Library (#52021)

* Make the entire preview clickable in order to enter "edit" mode in focus mode (#51973)

* Page Content Focus: Add welcome guides (#52014)

* Page Content Focus: Add welcome guides

* Don't show when editor guide is active

* Just use regular accent/theme color in all guides

* slight copy change page guide

* Update components changelog

* Disable new guides in E2E tests

* Use s.w.org videos

---------

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

---------

Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@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: scruffian <ben@scruffian.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Carolina Nymark <myazalea@hotmail.com>
Co-authored-by: Joen A <1204802+jasmussen@users.noreply.github.com>
Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>
Co-authored-by: Jarda Snajdr <jsnajdr@gmail.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
@afercia
Copy link
Contributor

afercia commented Jul 3, 2023

I added aria-description in 8c2d390

I think there's a bit of confusion about aria-description vs. aria-describedby.

aria-description is new in the upcoming ARIA 1.3. It accepts a descriptive text i.e. the actual description. Can't be used for now as the spec is not finalized and there's no data on actual support.

aria-describedby is the way to go, for now. It accepts an ID reference that points to an element that holds the actual description.

Instead, this PR makes aria-describedby hold the actual description text:

Screenshot 2023-07-03 at 16 08 38

It should hold the ID reference of the hidden div that holds the description.

This should be fixed. Will create a new issue to report also more things that need some love.

Cc/ @kevin940726

@kevin940726
Copy link
Member Author

@afercia Oops! I passed in the wrong values 🤦. I'm guilty of not testing the last change 😞 . I'll fix it tomorrow morning. Thanks for letting me know!

@kevin940726
Copy link
Member Author

@afercia Opened #52263!

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] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants