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

Pattern block: Update block to retain wrapper #50272

Closed
wants to merge 20 commits into from

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented May 3, 2023

What?

If the syncStatus attribute of a pattern is set to partial a pattern block wrapper is added and and templateLock is set to `contentOnlye

Why?

  • Lays the groundwork for allowing the original pattern structure to be update and applied to the content of the pattern instance
  • Allows for the option to shuffle pattern content with similar patterns

How?

If pattern has syncStatus===partial adds a parent div that wraps the content of the pattern. Also currently defaults the innerBlocks templateLock to contentOnly.

Testing Instructions

  • With TT3 theme in editor code view add <!-- wp:pattern {"slug":"twentytwentythree/cta"} -->
  • Switch to editor view and make sure the pattern is added as currently in trunk, ie. pattern block is removed and inner blocks of pattern added with no wrapper
  • Switch to code view and add <!-- wp:pattern {"slug":"twentytwentythree/cta", "syncStatus":"partial"} -->
  • Switch back to editor view and check the CTA pattern still displays correctly (should display wide width) and has Pattern block wrapper around it, and editing is set to contentOnly
  • Also check display is correct in frontend (should display wide width)

Screenshots or screencast

pattern-partial-sync.mp4

@glendaviesnz glendaviesnz added the [Block] Pattern Affects the Patterns Block label May 3, 2023
@glendaviesnz glendaviesnz self-assigned this May 3, 2023
@github-actions
Copy link

github-actions bot commented May 3, 2023

Size Change: +700 B (0%)

Total Size: 1.39 MB

Filename Size Change
build/block-editor/index.min.js 205 kB +60 B (0%)
build/block-library/index.min.js 204 kB +442 B (0%)
build/edit-site/index.min.js 64.6 kB +198 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.33 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.05 kB
build/block-directory/style.css 1.05 kB
build/block-editor/content-rtl.css 4.17 kB
build/block-editor/content.css 4.16 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/style-rtl.css 15.3 kB
build/block-editor/style.css 15.3 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 138 B
build/block-library/blocks/audio/theme.css 138 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 91 B
build/block-library/blocks/avatar/style.css 91 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 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.62 kB
build/block-library/blocks/cover/style.css 1.61 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 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 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 379 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 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 340 B
build/block-library/blocks/html/editor.css 341 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 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 322 B
build/block-library/blocks/post-featured-image/style.css 322 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 281 B
build/block-library/blocks/post-template/style.css 281 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 434 B
build/block-library/blocks/search/style.css 432 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 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.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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/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 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.8 kB
build/block-library/editor.css 11.8 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactive-blocks/interactivity.min.js 2.19 kB
build/block-library/interactive-blocks/navigation.min.js 841 B
build/block-library/interactive-blocks/vendors.min.js 8.15 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.8 kB
build/block-library/style.css 12.8 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 51.1 kB
build/commands/index.min.js 15 kB
build/commands/style-rtl.css 807 B
build/commands/style.css 804 B
build/components/index.min.js 210 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.4 kB
build/core-commands/index.min.js 1.84 kB
build/core-data/index.min.js 16.7 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 718 B
build/data/index.min.js 8.73 kB
build/date/index.min.js 40.5 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.76 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.4 kB
build/edit-post/style-rtl.css 7.84 kB
build/edit-post/style.css 7.83 kB
build/edit-site/style-rtl.css 10.7 kB
build/edit-site/style.css 10.7 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.58 kB
build/edit-widgets/style.css 4.58 kB
build/editor/index.min.js 46 kB
build/editor/style-rtl.css 3.59 kB
build/editor/style.css 3.59 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 952 B
build/react-i18n/index.min.js 702 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.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11.1 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 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 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@glendaviesnz glendaviesnz marked this pull request as ready for review May 3, 2023 04:17
@glendaviesnz glendaviesnz added the [Type] Enhancement A suggestion for improvement. label May 3, 2023
@glendaviesnz
Copy link
Contributor Author

The decision to remove the parent selector for contentOnly template locks was made here #43037 (comment) - but no technical reasons, just a view that it removed the 'flat' structure feel that was wanted.

This makes it tricky in terms of the Pattern block for making it easy for user to get to parent to remove template locking. Should we add something to the Inspector panel instead?

@talldan
Copy link
Contributor

talldan commented May 3, 2023

The decision to remove the parent selector for contentOnly template locks was made here #43037 (comment) - but no technical reasons, just a view that it removed the 'flat' structure feel that was wanted.

This makes it tricky in terms of the Pattern block for making it easy for user to get to parent to remove template locking. Should we add something to the Inspector panel instead?

There's a bit of inconsistency in content only mode, in that List View only shows the Pattern block, the breadcrumbs still shows all blocks and the missing parent selector makes it difficult to select any parent (there's no reason a pattern couldn't be deeply nested).

Breadcrumbs feels like it could be updated to remove non-content blocks. List View could potentially still show the child content blocks (I think @noisysocks explored this in #50082).

I'm not sure what the right way forward is for the parent selector, whether it could select the pattern or the parent of the pattern, but I'm not sure it should be completely missing. It might be worth spinning this out into a separate issue to get some design feedback.

@youknowriad
Copy link
Contributor

Hello there! and thanks for exploring the pattern block updates.

I wanted to ask about the choice to actually update the "pattern block" instead of planning to add the features mentioned above (shuffling, retaining reference to the original pattern, ...) to the "Group" block or create a new dedicated block instead.

The reason I'm asking this is because the current pattern block is actually meant for something completely different and it's really unclear to me whether it should be used as the "pattern" block described in the linked issue.

For instance, just the fact of adding a wrapper to the pattern block is going to be a breaking changes for all themes using it.


We've discussed the pattern block some time ago with @mtias and I believe he was of the opinion of having a dedicated block for this while I was more of the opinion of having "metadata" added to any group block (potentially a metadata block support).

I can be onboard with any of these two options (especially if we start as an experiment to assess) but to be honest using the current pattern block for this work seems too much of a stretch for me. It's just the name that is confusing.

@talldan
Copy link
Contributor

talldan commented May 3, 2023

I wanted to ask about the choice to actually update the "pattern block" instead of planning to add the features mentioned above (shuffling, retaining reference to the original pattern, ...) to the "Group" block or create a new dedicated block instead.

I think it was just the first and easiest way to experiment given the block only needed a few adjustments, and the overview issue guided it this way.

I was also interested in the idea of using a block supports setting for container blocks. I did start hacking away at it briefly a while back. I straight away found it is a little tricky to add this mode arbitrarily to a block—we need to be able to inject the pattern's inner blocks and contentOnly mode into the block's edit, or maybe completely replace the edit component with a simplified contentOnly version. I could try to revive that if you think it's worth it? I do think it has some promise, one thought I had is that it might evolve towards a more unified way for building synced blocks. Also it potentially solves the issue of making pattern block alignments work given there would be no wrapping block.

Probably the downsides are that if it's applied to any block, there are more likely to be edge cases where a block has an unusual implementation. Support for third party blocks as wrapping block in patterns might also be more complicated.

@youknowriad
Copy link
Contributor

youknowriad commented May 3, 2023

Probably the downsides are that if it's applied to any block, there are more likely to be edge cases where a block has an unusual implementation.

yeah, I think, that's a valid concern, I don't think we should be applying to any block. Just one but some "metadata" can apply to any block: like naming blocks, marking it as "synced" or not, adding semantics (tagging).

I do think it has some promise, one thought I had is that it might evolve towards a more unified way for building synced blocks.

Yes, I think this should be our North Star. It also makes me wonder whether the wp/block (reusable block) is actually the right block for these (but it also has history similar to the pattern block)


Anyway, I don't want to force any direction or anything, I'm happy for this to be explored in any way (new block, pattern block, reusable block, group block). I just think we should be clear that it's an experiment to start with and that we stay open and adapt it down the road as we add "features" to these blocks.

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented May 4, 2023

I have added a very draft PR here that adds a slug attrib to the Group block just to further explore the possibilities, but personally, it seems like adding this additional functionality to a Group, or some other wrapper block, could end up confusing users wondering why the Group behaves so differently depending on whether it is just a Group, or whether it is acting as pattern/reusable block wrapper.

@talldan
Copy link
Contributor

talldan commented May 4, 2023

Yes, I think this should be our North Star. It also makes me wonder whether the wp/block (reusable block) is actually the right block for these (but it also has history similar to the pattern block)

I think using the reusable block is interesting too. I had a go at implementing it in #50309.

This kind of consolidation could also potentially work for template parts in the future.

@youknowriad
Copy link
Contributor

youknowriad commented May 4, 2023

The following feedback is mostly based on the alternative PR by @talldan but wanted to keep the discussion in one place:


Using Twenty Twenty Three, add a block via the code editor.

Should we leave the wp:pattern untouched for now? I also don't see a path forward for them without breaking changes.

I also noticed that now there's a "ref" and "slug" props in the reusable block and it made me about the impact of the choices we're making now. As we try to unify everything, I feel like we should try to unify the props first. I'm thinking like right now it's the couple "type + ref" or "type + slug" that defines the behavior. It doesn't seem ideal, what would we do if we were to start from scratch:

  • we know that we want to be able to save patterns ultimately like we save reusable blocks, so even patterns could use the database as a source and not the registry.
  • we know that we want different ways of "syncing" blocks: full synced like reusable blocks, no syncing, partial syncing (everything but the role content stuff)

Also, what's the difference between "template part", "reusable block" and "pattern" if the three can be saved/synced and referenced. The answer is that it's a combination of:

  • Whether we want things to be synced, not synced, or partially synced
  • Which users can edit these: template parts maybe only edited by site admins/designers, the rest by authors.

This is to say that ultimately, it seems the ideal scenario is to have a unique block let's assume it's wp/block with the following attributes

  • ref: If a "ref" is used, fetch the referenced pattern/reusable block/template part (it's all the same) from the wp_block CPT (unique source)
  • slug: if "slug" is used, it means the pattern/reusable block/template part is not in the database yet. Fetch it from a registry.
  • syncStrategy: define the behavior of the block: do we sync entirely, is it just a reference (no sync), or partially synced.

the wp_block CPT could have a property to define what capabilities are needed to edit such block.


For the current PR, of course, we're not trying to solve everything, I guess what I'm trying to say is why do we automatically convert blocks and automatically assume that it's "contentOnly" locking. Should we instead start by making these things explicit in the block itself: add the syncStrategy attribute to the block and switch behavior based on the attribute instead.

@glendaviesnz glendaviesnz mentioned this pull request May 5, 2023
6 tasks
@glendaviesnz
Copy link
Contributor Author

I am going to close this for now as we are more likely to follow the approach taken here. I have linked to the comments here on this issue so they don't get lost.

@gziolo gziolo deleted the update/pattern-block-to-retain-wrapper branch May 5, 2023 03:48
@talldan
Copy link
Contributor

talldan commented May 8, 2023

Should we leave the wp:pattern untouched for now?

Yes, maybe. I wanted to get an idea of what unifying some concepts would look like to see if it could be the path forwards.

@gziolo also mentioned privately that we might do the reverse and instead migrate everything to the pattern block. I think the idea being that 'wp-pattern' is a better name for what's trying to be achieved than 'wp-block'.

what would we do if we were to start from scratch

I do wonder if we would make reusable blocks use a slug (like template parts) instead of an id. This is one of the things I had in mind when thinking about a type, but it's probably too early to introduce that.

we know that we want to be able to save patterns ultimately like we save reusable blocks, so even patterns could use the database as a source and not the registry.

Would you be able to share more detail on what your thoughts are in terms of how they get into the database? I guess there are two options:

  • Created on install / theme switch.
  • Similar to template parts, where they're created when the user tries to modify a pattern.

Perhaps to start with it's just a single endpoint that can retrieve everything, which again seems similar to how template parts work.

Should we instead start by making these things explicit in the block itself: add the syncStrategy attribute to the block and switch behavior based on the attribute instead.

I think how this works is becoming clearer in my mind, with a few technical points that need clarity, so I think I'll try documenting it in a discussion or RFC style issue.

@youknowriad
Copy link
Contributor

Would you be able to share more detail on what your thoughts are in terms of how they get into the database?

In my mind, they'd just use the wp_block CPT, the only difference is how to "sync" them. So in other words, they're just reusable blocks with a new block attribute.

I think for a start, maybe it's better to forget about the "theme" entirely, and focus on the block, how it should behave. The rest is a tangeant due to the WP context.

@glendaviesnz glendaviesnz restored the update/pattern-block-to-retain-wrapper branch May 11, 2023 00:16
@glendaviesnz glendaviesnz reopened this May 11, 2023
@glendaviesnz glendaviesnz requested a review from ndiego as a code owner May 11, 2023 00:16
@glendaviesnz glendaviesnz force-pushed the update/pattern-block-to-retain-wrapper branch from aaab236 to 177b85a Compare May 11, 2023 00:24
@glendaviesnz glendaviesnz marked this pull request as draft May 11, 2023 00:26
@github-actions
Copy link

Flaky tests detected in 177b85a.
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/4942577898
📝 Reported issues:

@glendaviesnz
Copy link
Contributor Author

To avoid confusion reverted latest change and closing in favour of #50533

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Pattern Affects the Patterns Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants