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

Reusable blocks: Rename to 'Patterns' and add option to also add a non-synced Pattern #51144

Merged

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Jun 1, 2023

What?

Renames the Reusable blocks to Patterns. Also adds the option to convert a block or collection of blocks to a non-synced Pattern. This then behaves as imported Patterns do in that once inserted they can be edited completely independently of any other instances of the Pattern. The synced version of the Pattern works as the existing Reusable blocks do in that editing one instance updates all instances.

Why?

#50028 requires the ability of users to add new patterns and edit/duplicate existing patterns from the UI as part of the new Pattern Library functionality in the site editor. It made sense to reuse the wp_block CPT to implement this and to merge with Reusable blocks.

How?

Adds a wp_block.sync_status post meta property to the wp_block CPT.

N.B. - This PR only renames Reusable block in the UI, and the minimal critical places in code, in order to keep the PR as small and reviewable as possible. Follow-up PRs will rename all references in the code to reusable block to avoid future confusion.

Testing Instructions

  • Before switching to PR branch add some reusable blocks
  • Switch to branch and make sure the existing reusable blocks still work as expected
  • Go to /wp-admin/edit.php?post_type=wp_block and check that the existing blocks have Sync Status set to Synced in the right post properties panel
  • Add a new post and add a block or collection of blocks
  • Select the block(s) and in the block toolbar overflow menu select the Create a pattern menu option
  • The sync toggle will be off by default - leave it that way and add the new pattern
  • In the block inspector search for the new pattern name and insert
  • Check that inserted blocks are independent/stand-alone blocks and not a synced reusable block
  • Repeat the above but toggle sync on and make sure the saved block behaves the same as the existing reusable blocks
  • Go to /wp-admin/edit.php?post_type=wp_block and make sure the synced and unsynced Patterns show. Edit Patterns from this page and check that toggling the sync status in right panel works as expected

Screenshots or screencast

turtles.mp4

@glendaviesnz glendaviesnz added the [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced label Jun 1, 2023
@glendaviesnz glendaviesnz self-assigned this Jun 1, 2023
@github-actions
Copy link

github-actions bot commented Jun 1, 2023

Size Change: +2.11 kB (0%)

Total Size: 1.4 MB

Filename Size Change
build/block-editor/index.min.js 196 kB +157 B (0%)
build/block-library/index.min.js 201 kB +1 B (0%)
build/edit-post/index.min.js 33.9 kB -77 B (0%)
build/edit-site/index.min.js 72.1 kB +1.21 kB (+2%)
build/edit-site/style-rtl.css 11.8 kB +153 B (+1%)
build/edit-site/style.css 11.8 kB +150 B (+1%)
build/edit-widgets/index.min.js 16.8 kB +13 B (0%)
build/editor/index.min.js 44.6 kB +234 B (+1%)
build/editor/style-rtl.css 3.58 kB +48 B (+1%)
build/editor/style.css 3.58 kB +48 B (+1%)
build/reusable-blocks/index.min.js 2.38 kB +174 B (+8%) 🔍
ℹ️ 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.29 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.22 kB
build/block-editor/content.css 4.22 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 14.9 kB
build/block-editor/style.css 14.9 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/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 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/interactivity.min.js 1.34 kB
build/block-library/blocks/image/style-rtl.css 1.34 kB
build/block-library/blocks/image/style.css 1.34 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
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.35 kB
build/block-library/blocks/navigation/editor.css 2.36 kB
build/block-library/blocks/navigation/interactivity.min.js 978 B
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/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.2 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/interactivity/runtime.min.js 2.69 kB
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.5 kB
build/block-library/style.css 13.5 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.8 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 231 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.12 kB
build/core-data/index.min.js 15.7 kB
build/customize-widgets/index.min.js 11.9 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.25 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/style-rtl.css 7.58 kB
build/edit-post/style.css 7.57 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 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/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 939 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.7 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.42 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

@glendaviesnz glendaviesnz marked this pull request as ready for review June 1, 2023 23:55
@glendaviesnz glendaviesnz added the [Type] Enhancement A suggestion for improvement. label Jun 1, 2023
@github-actions
Copy link

github-actions bot commented Jun 2, 2023

Flaky tests detected in d477199.
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/5317864454
📝 Reported issues:

@glendaviesnz

This comment was marked as outdated.

@aaronrobertshaw

This comment was marked as outdated.

@glendaviesnz glendaviesnz changed the title Patterns: add option to add a new non-synced pattern Reusable blocks: Rename to 'Patterns' and add option to also add a non-synced Pattern Jun 7, 2023
@glendaviesnz

This comment was marked as outdated.

aaronrobertshaw

This comment was marked as outdated.

@glendaviesnz
Copy link
Contributor Author

@talldan, @SaxonF, @jasmussen, @youknowriad, @mtias, @aristath it would be good to get feedback on this approach to adding the ability for users to add non-synced Patterns by using the existing wp_block CPT (as an alternative to #49607) and also renames the Reusable block to Pattern (synced).

The key things to consider are:

  • Is the reuse of the wp_block CPT the best way to allow users to add their own Patterns via the editor UI - the plan is to also use this to layer in the partially synced patterns as well, so the wp_block will eventually contain synced, unsynced and partiallySynced patterns

  • Is the use of the wp_block post meta the best place to track the sync status (because there is no block wrapper in content for fully synced and unsynced blocks it is not possible to track this in attributes)

  • Is the addition of a new wp_patterns taxonomy the best way to allow categorisation of the patterns. We did explore using the existing block_pattern_category stored in post_meta, but it seemed like a toxonomy was a more WP centric way to do this and also provides all the UI already for users to add their own categories

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

Tested well for me! Left some nitpicks but I don't think any of them is blocking!

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Jun 13, 2023

@SaxonF, @youknowriad

There is an alternative to storing the sync status in the wp_block CPT meta that is probably worth exploring. The easiest way to implement this would be to insert the block by default as fully synced (the existing reusable block behaviour), and have a toolbar option to change the sync status to unsynced and at a future point also partially synced.

There are pros and cons of both approaches:

Sync status location Pros Cons
CPT post meta
  • Sync type can be set once at pattern creation
  • Patterns can be ordered/filtered by sync type, eg. in new library layout
  • No existing/easy to have a different sync status for different instances of the pattern
  • Requires the addition of new CPT post meta handling which isn't used anywhere else to store block related metadata (although it is being proposed here for storing custom attribute sources)
Instance attributes
  • Easier to have a different sync status for different instances of the pattern
  • Uses existing block attribute APIs to store sync metadata
  • For sync statuses other than fully synced the sync status has to be set on every insertion rather than on pattern creation
  • There is no way to separate synced and unsynced patterns when listed in Library, etc.
Use a combination of post meta and block attributes
  • Can have a default sync status for a given pattern as well as instance status
  • Requires the addition of new CPT post meta handling which isn't used anywhere else to store block related metadata

One question that would need to be considered if taking the approach of storing the sync status in the instance block attributes would be whether toggling to unsynced would follow the existing pattern behaviour of just inserting the blocks in the content with no wrapper, ie. it is no longer identifiable as a pattern, or whether a block wrapper would be maintained in order to store the unsynced status attribute and allow toggling back to synced.

@SaxonF
Copy link
Contributor

SaxonF commented Jun 13, 2023

@glendaviesnz thanks for the summary. If we did go the CPT post meta route, is there an easy pathway to Instance attributes in future?

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Jun 13, 2023

@glendaviesnz thanks for the summary. If we did go the CPT post meta route, is there an easy pathway to Instance attributes in future?

That would be option C in the table above and I think that could be implemented all at once, or the instance values could be added in later easily enough, but only for existing synced or new patterns, ie. there would be no way to layer this back over unsynced instances with the approach currently taken in this PR as they obviously just become a collection of blocks when inserted rather than a pattern.

@gaambo
Copy link
Contributor

gaambo commented Jun 26, 2023

What about using the post_status field on the stored wp_block instead of a postmeta? That would also make filtering patterns in query more performant. Or should there be a case where patterns are in a drafts/published status?
I think using custom post status and taxonomies for categories would be the most WordPress way.

'sync_status',
array(
'auth_callback' => function() {
return current_user_can( 'edit_posts' );

Choose a reason for hiding this comment

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

Shouldn't this use the meta capability somehow?

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 auth callback has been removed in the backport to core as the relevant checks for user permissions for the given post type are already done, I assume this includes the relevant postmeta permissions - have copied this question over to that port to check.

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Jul 4, 2023

Note re categories for custom patterns:

We thought about using the existing pattern categories by storing the slug in an additional wp_block postmeta field, but it seems that adding a custom wp_pattern taxonomy would be a much more WP-centric approach and gives all of the category management UI for free.

We explored ways of integrating this with the existing core pattern categories, eg. prepopulating the new taxonomy with the core categories, but there were issues with this if users deleted or edited them, and blocking edit removed most of the advantages of using a custom taxonomy.

The best option we got to was a mix of a custom taxonomy with the user's custom categories, that is merged with the core categories, with the core categories being pulled into the user's taxonomy only if they assign that category to one of their patterns. There is a PR with this approach here.

It was decided that more design/development/testing time was needed to come up with the best solution for adding custom categories to patterns, and there was not sufficient time/resource to do this ahead of 6.3 so this work was pushed to post 6.3.

@bvlgn
Copy link

bvlgn commented Jul 5, 2023

When this is picked up again for WP 6.4, I would like to suggest a more fitting name for the taxonomy. E.g. instead of 'wp_pattern' maybe 'wp_pattern_category'?

@glendaviesnz
Copy link
Contributor Author

Just to clarify, only the custom categories were punted to 6.4. The addition of unsycned patterns, and renaming of reusable blocks to synced patterns is still down for 6.3 at this point.

sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
…n-synced Pattern (WordPress#51144)

---------

Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: Daniel Richards <[email protected]>
@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Jul 17, 2023

Dev note

Reusable blocks have been renamed to Patterns in 6.3. For backwards compatibility, the default behavior of the core/block remains exactly the same as with Reusable blocks. The block content is still saved to the wp_block CPT and any changes to the block content are reflected across all instances of the block. This default behavior of the Pattern block is referred to in the UI as 'synced'.

The Pattern block also has a second option in 6.3 which is 'unsynced'. When 'unsynced' the block will behave the same as the existing theme and plugin patterns, ie. the patterns blocks will be inserted as standalone blocks, and any edits affect only that instance.

In order to track the synced and unsynced status a new postmeta field has been registered for the wp_block CPT called wp_pattern_sync_status. If this postmeta field is undefined the pattern is considered synced, and if the pattern is unsynced this will be set to unsynced. Because this is a core field, it is exposed as a top-level field in the REST API, instead of a meta property, so will appear on the wp_block as entity.wp_sync_status.

Because the synced Patterns do not require the new postmeta field we don't anticipate any impact on plugins that may modify the existing reusable block bahavior. The only impact we anticipate is to any plugins that manipulate the DOM based on selectors that depend on the text Reusable block(s) existing in the UI. These selectors would need to be adjusted to expect the text Pattern instead.

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 Dev Note Requires a developer note for a major WordPress release cycle Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Development

Successfully merging this pull request may close these issues.