Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Patterns: disable editing of synced patterns in post editor unless children have connected content set #56574

Closed
wants to merge 16 commits into from

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Nov 27, 2023

What?

Locks pattern editing in the post editor to only child blocks that have had content connections set.

N.B. This PR changes the paradigm for editing synced patterns in the editor and moves the editing of a pattern's content that causes global changes to the site editor or the wp-admin pattern editing interfaces (details of why below).

Why?

As part of the work on allowing partial editing of synced patterns we want to disable full editing of the synced pattern entities within the block editor.

This will make it easier to indicate to users when they are editing just a section of the pattern for that instance of the pattern only, versus editing the global source pattern instance.

This would also fix #54442 as the edit button only shows if the user has permission to update the pattern. It also fixes #32353

How?

Sets each of the patterns innerBlocks edit mode to disabled using setBlockEditingMode unless the block connected attributes are set in which case the block is set to contentOnly.

Important note - limiting editing to contentOnly in the post editor is 🤞 just the starting point. We are keeping it restricted to contentOnly to keep things simple while we set up the initial APIs for implementing partial syncing. The hope is that we can later extend it out to things like innerBlocks, limited block style attributes, etc. when/if the complexities around doing so are resolved.

Testing Instructions

  • Make sure the synced pattern experiment is enabled
  • Add a synced pattern
  • Insert the pattern into the block editor and check that the child blocks can't be edited, and don't appear in the list view
  • Check that the Edit button in the block toolbar redirects to site editor pattern edit canvas for blocked based theme and admin user, or post editor for entity for non-block themes or non-admin users
  • Check that the Edit button does not display if the user does not have edit permission for the given pattern
  • Add a new synced pattern using the following block markup, add the block to a post and make sure the Heading can't be edited but the paragraphs can be edited as contentOnly. Also check that the Content panel appears in right inspector panel when block or nested content selected.
  • In the pattern block toolbar click on the edit button and make sure you are redirected to the site editor pattern editor and that there is a back link in top toolbar
  • Turn of the synced pattern experiment and check that the synced patterns still behave the same as they do in trunk
<!-- wp:heading -->
<h2 class="wp-block-heading">This heading must stay the same</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"id":"tbm3po"},"connections":{"attributes":{"content":{"source":"pattern_attributes"}}}} -->
<p>You can change this</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"id":"Gt1Y1m"},"connections":{"attributes":{"content":{"source":"pattern_attributes"}}}} -->
<p>And you really should change this</p>
<!-- /wp:paragraph -->

Screenshots or screencast

pattern-lock-edit.mp4

Copy link

github-actions bot commented Nov 27, 2023

Size Change: +371 B (0%)

Total Size: 1.71 MB

Filename Size Change
build/block-editor/index.min.js 246 kB +85 B (0%)
build/block-library/index.min.js 214 kB +261 B (0%)
build/edit-site/index.min.js 194 kB +25 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 590 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.29 kB
build/block-editor/content.css 4.28 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.2 kB
build/block-editor/style.css 15.2 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 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 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 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.75 kB
build/block-library/blocks/gallery/style.css 1.75 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 189 B
build/block-library/blocks/heading/style.css 189 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 1.61 kB
build/block-library/blocks/image/style.css 1.6 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 2.02 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.27 kB
build/block-library/blocks/navigation/style.css 2.26 kB
build/block-library/blocks/navigation/view.min.js 1.04 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 647 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 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 140 B
build/block-library/blocks/read-more/style.css 140 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 613 B
build/block-library/blocks/search/style.css 613 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 475 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 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 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 399 B
build/block-library/blocks/table/editor.css 399 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 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/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 191 B
build/block-library/blocks/video/style.css 191 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.11 kB
build/block-library/common.css 1.11 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.4 kB
build/block-library/editor.css 12.4 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.3 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 257 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.73 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.87 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 31.9 kB
build/edit-post/style-rtl.css 7.16 kB
build/edit-post/style.css 7.15 kB
build/edit-site/style-rtl.css 14.7 kB
build/edit-site/style.css 14.7 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.71 kB
build/edit-widgets/style.css 4.71 kB
build/editor/index.min.js 54.3 kB
build/editor/style-rtl.css 4.38 kB
build/editor/style.css 4.38 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.76 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/file.min.js 442 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.5 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 791 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.49 kB
build/list-reusable-blocks/index.min.js 2.11 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.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 5.27 kB
build/patterns/style-rtl.css 564 B
build/patterns/style.css 564 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 994 B
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.5 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 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 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Nov 28, 2023

The problem with setting the pattern to disabled with useBlockEditingMode is that it disables the parent pattern as well as the children, which means it can't be selected in the editor and doesn't show in the list view. We can enable it again by making changes in a few places to account for this, but this seems slightly hacky as we are saying the block is disabled, but then making it appear not disabled. I have it working and showing in list view, but still can't get it selectable in the editor for some reason.

Actually ignore the above for now - I have a better plan

@talldan
Copy link
Contributor

talldan commented Nov 28, 2023

Keen to hear what the plan is. I guess an option if disabling the pattern block container itself is too much is to instead disable each of the top-level inner blocks that make up the pattern. That should stop the pattern from being editable while still allowing interactivity with the pattern block.

@glendaviesnz glendaviesnz changed the title Patterns: Set pattern block edit mode to disabled Patterns: disable child blocks of synced patterns, or if connected set to contentOnly Nov 28, 2023
@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Nov 28, 2023

@talldan I just pushed a change that gets around the issues caused by setting disabled on the parent block by just modifying the getBlockEditingMode selector to assign either the disabled or contentOnly state to children of a synced pattern block. Seems to work pretty well, but need to do some more testing ... but is pretty much what you suggested as the alternative.

@@ -2928,6 +2928,19 @@ export const getBlockEditingMode = createRegistrySelector(
if ( ! clientId ) {
return 'default';
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

If we go with this approach we probably just need to abstract this check out into its own method maybe.

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 an alternative to modifying this selector could be to add some code to the pattern block that:

  • Gets a list of inner blocks of the pattern.
  • Iterates through each one calling setBlockEditingMode( clientId, 'disabled' | 'contentOnly' ) depending on the presence of a connection.

Having said that, probably best to try to see whether there's a way to solve the issue with the sibling inserter first. If that's not possible, probably have to go back to the idea of adding a new editing mode or introducing a way to make the modes more granular.

@glendaviesnz
Copy link
Contributor Author

One thing I need to tidy up is the in-between-inserter which is still displaying as the parent block is not disabled.

Copy link

github-actions bot commented Nov 28, 2023

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

@glendaviesnz glendaviesnz self-assigned this Nov 28, 2023
@glendaviesnz glendaviesnz added [Type] Enhancement A suggestion for improvement. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Nov 28, 2023
@@ -38,6 +45,15 @@ import { unlock } from '../lock-unlock';
const { useLayoutClasses } = unlock( blockEditorPrivateApis );
const fullAlignments = [ 'full', 'wide', 'left', 'right' ];

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 following method should also check for block support of __experimentalConnections but for ease of testing without having to merge with connections PRs just checking for attributes for now.

@glendaviesnz
Copy link
Contributor Author

@talldan fixing the in-between inserter was easy, and this approach is much tidier if handled in the pattern block rather than the selector as you suggested, so have modified to do this.

I think there is still a bit of tidy up that can be done, but if you have time to give it a test it would be good to get another opinion on how sound the approach looks now before I finish this off.

@glendaviesnz glendaviesnz requested a review from SaxonF November 28, 2023 03:53
@glendaviesnz
Copy link
Contributor Author

@SaxonF we probably need some good communication around this if we go forward with this approach as it is a reasonably big change to the default edit interface of a block that has been around for a long time.

The one thing that I think is still missing is an easy way back from the standard pattern editor if a user/theme does not have site editor access. If you log in as an author user and add a new pattern then click Edit in the pattern toolbar to see the flow. The browser back button works as expected, but I wonder if it needs something like in the site editor header?

@glendaviesnz
Copy link
Contributor Author

There will be a few e2e tests to fix once we have finalised the approach here.

@glendaviesnz
Copy link
Contributor Author

One question is whether we want to merge this into trunk independent of the partial syncing work so people get used to the fact that the full source pattern editing location is changing ahead of the partial syncing being available. Or put it behind the connections experimental flag so the change in editing location can be released in tandem with the partial syncing?

@talldan
Copy link
Contributor

talldan commented Nov 28, 2023

This is working well in testing for me.

I had a (partially) synced pattern with connections left over from testing #56495, and I confirmed that I could still edit the paragraph text, so that seems to be working really nicely. I think there would still be a task to add something like this to the Inspector (like there is when editing a page in content mode in the site editor), but it could be a follow-up PR:
Screenshot 2023-11-28 at 2 57 39 pm

For Fully synced patterns (with no connections) the entire pattern wasn't editable. It's nice that List View doesn't show the inner blocks (I guess it doesn't need to, so it's great to keep things concise).

I did notice the pattern could still be renamed in the inspector, so that might be something to remove, and at the same time make sure patterns can be renamed in the pattern editors.

Comment on lines 125 to 130
innerBlocks.forEach( ( block ) => {
const editMode = isPartiallySynced( block )
? 'contentOnly'
: 'disabled';
setBlockEditingMode( block.clientId, editMode );
} );
Copy link
Contributor

Choose a reason for hiding this comment

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

May need to do this recursively for 'contentOnly' as a content block could be nested in a group 😓

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah, true, done.

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Nov 28, 2023

@talldan the editable content should now display in the right inspector panel for patterns, the same as for contentOnly template locks

I did notice the pattern could still be renamed in the inspector, so that might be something to remove, and at the same time make sure patterns can be renamed in the pattern editors.

have removed that as it can be renamed both in site editor and wp-admin

@glendaviesnz glendaviesnz marked this pull request as ready for review November 28, 2023 23:22
@glendaviesnz glendaviesnz changed the title Patterns: disable child blocks of synced patterns, or if connected set to contentOnly Patterns: disable editing of synced patterns in post editor unless children have connected content set Nov 28, 2023
@talldan
Copy link
Contributor

talldan commented Nov 29, 2023

have removed that as it can be renamed both in site editor and wp-admin

I wonder if we should consider having a way to edit it directly in the editor view, as otherwise users have to jump around a bit.

@SaxonF Would be great to get your thoughts on that.

@annezazu
Copy link
Contributor

annezazu commented Dec 1, 2023

Thinking about this more thanks to the prompting of this larger convo, I wanted to share some of where I think I’m getting stuck:

We always aim to be iterative so sharing this to aid that.

@glendaviesnz
Copy link
Contributor Author

Great discussion, thanks for the input everyone, really helpful. We will take all that input and see what we can come up with as the best way forward for this. It will be at least a week before we get back to this due to some other priorities. Feel free to add any other ideas you might have in the meantime.

@paaljoachim
Copy link
Contributor

paaljoachim commented Dec 1, 2023

(The below comment might be outside of what is meant for this specific PR.)

Actually this will be very helpful when adding a prebuilt full page/CPT pattern into the page/post/CPT.
Being able to edit some areas and not other areas will be nice.
It can be also very useful for WooCommerce. Having some areas that are fixed and other areas that are more flexible.

One will need to define which blocks can be: moved and/or edited.

As a pattern there might be block areas with images, heading text etc that can only be moved around and not edited.
While some blocks one would be able to edit and move around.
While some blocks one would not be able to move or edit.

Adding in a link to a discussion I made on the Github repo for WooCommerce.
https://github.com/woocommerce/woocommerce-blocks/discussions/11929

@unscripted
Copy link
Member

Thank you for your work on this @glendaviesnz!

The part where I think it might be less convenient is for single user sites, or the user is editing something they created. Here the user wants instant control over their content and knows that something is globally synced because they set it up that way.

@talldan - This is one of the UX challenges I keep going back and forth on. As an agency building sites for customers with brand guidelines or design systems, this is amazing. It also feels like a good foundation for partially synced patterns.

On the flip side, as a person with my own single-user sites, I just want the freedom to edit the styles and content.

I still have a dream of someday having an agency or developer role in WP core that restricts editor features when enabled. A setting like that (in theory) could customize the availability of this implementation based on enabled roles.

One question is whether we want to merge this into trunk independent of the partial syncing work so people get used to the fact that the full source pattern editing location is changing ahead of the partial syncing being available. Or put it behind the connections experimental flag so the change in editing location can be released in tandem with the partial syncing?

@glendaviesnz - Unless we're releasing partial syncing in the next release, I like the idea of it being released independently. This would allow for extended user testing and feedback. We may also uncover additional gotchas like @annezazu is surfacing with focus mode.

@glendaviesnz glendaviesnz force-pushed the try/disable-synced-pattern-edit-2 branch from 2eefa36 to decc373 Compare December 8, 2023 04:28
@glendaviesnz
Copy link
Contributor Author

I have moved this change behind the partial syncing experimental flag so it is at least available for testing that work while we continue to iterate on the UX

@glendaviesnz
Copy link
Contributor Author

I have explored editing the source pattern inline in the editor, but I think it will be throw most users as the reverting to the source pattern content makes it look like their local customisations have been wiped:

inline.mp4

The redirect to focus mode is a better option I think, but we need to do it with client-side routing the same as the site editor template part focused mode to avoid the prompt to save that we get with the current full redirect to the site editor. We can explore this as a follow-up to this PR since this functionality is behind an experimental flag.

@glendaviesnz
Copy link
Contributor Author

Closing in favour of #57036 which keeps the global pattern editing in the post editor instead of redirecting to the site editor.

@glendaviesnz
Copy link
Contributor Author

Going to reopen this as it may take us a while to get the approach in #57036 finalised and it would be good to have the experiment fully functional in the mean time. Even though the edit flow in this PR is not perfect it is behind the experimental flag.

@glendaviesnz glendaviesnz reopened this Dec 15, 2023
@glendaviesnz
Copy link
Contributor Author

Closing again, we are going to keep working in #57036 as a better approach.

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 [Type] Enhancement A suggestion for improvement.
Projects
None yet