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

Block Locking: Add the 'Apply to inner blocks' option #41876

Merged
merged 7 commits into from
Jul 13, 2022

Conversation

Mamaduka
Copy link
Member

@Mamaduka Mamaduka commented Jun 22, 2022

What?

Resolves #40069.

PR adds the new "Apply to inner blocks" option to the Block Locking modal.

How?

After chatting with @mtias at WCEU, we decided to try and implement this feature using the templateLock attribute for container blocks. The templateLock is already supported by API and provides a native way to inherit lock status.

You can find more details on how the templateLock and block lock work together can be found in the original Dev Note.

Limitations

  • Not all lock options can have a matching templateLock value. E.g., If you decided to restrict only movement and apply this to inner blocks, nothing would happen.
  • Currently, only Group, Cover, and Colum block support template lock. We probably have to expand this support.

Testing Instructions

  1. Open a Post or Page.
  2. Insert a Group Block and add inner blocks.
  3. Open the lock modal via Block options.
  4. Select options and "Apply to all children" to apply them to inner bocks.

Screenshots or screencast

CleanShot.2022-06-23.at.08.44.56.mp4

@github-actions
Copy link

github-actions bot commented Jun 22, 2022

Size Change: +216 B (0%)

Total Size: 1.25 MB

Filename Size Change
build/block-editor/index.min.js 153 kB +162 B (0%)
build/block-editor/style-rtl.css 14.6 kB +27 B (0%)
build/block-editor/style.css 14.6 kB +27 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 6.58 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 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 103 B
build/block-library/blocks/audio/style.css 103 B
build/block-library/blocks/audio/theme-rtl.css 110 B
build/block-library/blocks/audio/theme.css 110 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 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 441 B
build/block-library/blocks/button/editor.css 441 B
build/block-library/blocks/button/style-rtl.css 543 B
build/block-library/blocks/button/style.css 543 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 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 406 B
build/block-library/blocks/columns/style.css 406 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 187 B
build/block-library/blocks/comment-template/style.css 185 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 95 B
build/block-library/blocks/comments/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 615 B
build/block-library/blocks/cover/editor.css 616 B
build/block-library/blocks/cover/style-rtl.css 1.55 kB
build/block-library/blocks/cover/style.css 1.55 kB
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 110 B
build/block-library/blocks/embed/theme.css 110 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 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 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 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.5 kB
build/block-library/blocks/gallery/style.css 1.49 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 333 B
build/block-library/blocks/group/editor.css 333 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 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 738 B
build/block-library/blocks/image/editor.css 737 B
build/block-library/blocks/image/style-rtl.css 524 B
build/block-library/blocks/image/style.css 530 B
build/block-library/blocks/image/theme-rtl.css 110 B
build/block-library/blocks/image/theme.css 110 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 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 493 B
build/block-library/blocks/media-text/style.css 490 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 705 B
build/block-library/blocks/navigation-link/editor.css 703 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-submenu/view.min.js 423 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.96 kB
build/block-library/blocks/navigation/style.css 1.95 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 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 363 B
build/block-library/blocks/page-list/editor.css 363 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 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 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 495 B
build/block-library/blocks/post-comments-form/style.css 495 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-comments/style-rtl.css 632 B
build/block-library/blocks/post-comments/style.css 630 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 605 B
build/block-library/blocks/post-featured-image/editor.css 605 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 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 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 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 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 365 B
build/block-library/blocks/query/editor.css 364 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 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 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 385 B
build/block-library/blocks/search/style.css 386 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 233 B
build/block-library/blocks/separator/style.css 233 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 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 708 B
build/block-library/blocks/site-logo/editor.css 708 B
build/block-library/blocks/site-logo/style-rtl.css 192 B
build/block-library/blocks/site-logo/style.css 192 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 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.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 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 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 175 B
build/block-library/blocks/table/theme.css 175 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 159 B
build/block-library/blocks/video/style.css 159 B
build/block-library/blocks/video/theme-rtl.css 110 B
build/block-library/blocks/video/theme.css 110 B
build/block-library/common-rtl.css 987 B
build/block-library/common.css 984 B
build/block-library/editor-rtl.css 10.2 kB
build/block-library/editor.css 10.2 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 183 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.5 kB
build/block-library/style.css 11.5 kB
build/block-library/theme-rtl.css 695 B
build/block-library/theme.css 700 B
build/block-serialization-default-parser/index.min.js 1.11 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 47 kB
build/components/index.min.js 230 kB
build/components/style-rtl.css 14 kB
build/components/style.css 14 kB
build/compose/index.min.js 11.7 kB
build/core-data/index.min.js 14.7 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.4 kB
build/customize-widgets/style.css 1.4 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 7.99 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.66 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 4.02 kB
build/edit-navigation/style.css 4.03 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30.5 kB
build/edit-post/style-rtl.css 6.97 kB
build/edit-post/style.css 6.97 kB
build/edit-site/index.min.js 53 kB
build/edit-site/style-rtl.css 8.23 kB
build/edit-site/style.css 8.22 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.35 kB
build/edit-widgets/style.css 4.35 kB
build/editor/index.min.js 39.4 kB
build/editor/style-rtl.css 3.65 kB
build/editor/style.css 3.65 kB
build/element/index.min.js 4.27 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 6.75 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.38 kB
build/list-reusable-blocks/index.min.js 1.74 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 953 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 612 B
build/react-i18n/index.min.js 696 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.68 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.53 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action


return {
isReusable: isReusableBlock( getBlockType( blockName ) ),
isReusable: isReusableBlock( blockType ),
hasTemplateLock: !! blockType?.attributes?.templateLock,
Copy link
Member Author

Choose a reason for hiding this comment

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

I'm testing block supports by checking if the templateLock attribute is registered for the block type. We can also convert this into a new supports flag.

Copy link
Member

Choose a reason for hiding this comment

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

This way is correct, even if we have a supports flag, some blocks may prefer to register the attribute themselves so they can provide a default value to the attribute.

@Mamaduka Mamaduka marked this pull request as ready for review June 23, 2022 04:58
@Mamaduka Mamaduka requested a review from ellatrix as a code owner June 23, 2022 04:58
@Mamaduka Mamaduka requested review from jameskoster, mtias, critterverse, senadir and ntsekouras and removed request for ellatrix June 23, 2022 04:59
@Mamaduka Mamaduka self-assigned this Jun 23, 2022
@Mamaduka Mamaduka added [Type] Enhancement A suggestion for improvement. [Feature] Block Locking The API allowing for the ability to lock/unlock blocks labels Jun 23, 2022
@mtias
Copy link
Member

mtias commented Jun 23, 2022

Thanks for putting this together! Curious what @jorgefilipecosta thinks of using the API this way.

@ntsekouras
Copy link
Contributor

Thanks for exploring this George! I actually started testing without reading the limitations part of the PR's description as I thought the title was self explanatory and I was surprised with the limitation already mentioned 😄

I don't have much context with the locking functionality/code but would be too complex to implement without these limitations? Maybe for example checking innerBlocks.. Sorry if my question is naive due to my lack of context here..

export default function BlockLockModal( { clientId, onClose } ) {
const [ applyTemplateLock, setApplyTemplateLock ] = useState( false );
Copy link
Contributor

Choose a reason for hiding this comment

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

By using state here, this is always false when opening the modal.

Screen.Recording.2022-06-23.at.3.51.22.PM.mov

Copy link
Member Author

Choose a reason for hiding this comment

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

I thought about defaulting to the templateLock attribute value if it's truthy but reverted it last minute. Happy to re-implement it.

Copy link
Member Author

Choose a reason for hiding this comment

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

Having this option off by default plays nicely with recent changes - #41876 (comment).

What do you think, Nik?

Copy link
Member

Choose a reason for hiding this comment

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

I think we need to reflect the setting applied to the initial state otherwise the users wonder why the checkbox becomes unchecked.

Copy link
Member Author

Choose a reason for hiding this comment

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

Fixed in 8262739.

@Mamaduka
Copy link
Member Author

Thanks for testing, @ntsekouras.

I don't have much context with the locking functionality/code but would be too complex to implement without these limitations? Maybe for example checking innerBlocks.. Sorry if my question is naive due to my lack of context here..

I think we'll have to add templateLock attribute support to all blocks that support innerBlocks. Another option is to apply the lock attribute directly to the children.

@ntsekouras
Copy link
Contributor

Another option is to apply the lock attribute directly to the children.

That was what I had in mind. We already add the lock attribute to all blocks, no?

@jameskoster
Copy link
Contributor

If you decided to restrict only movement and apply this to inner blocks, nothing would happen.

This one is a bit unfortunate, it makes this flow feel broken:

lock.mp4

It's especially strange because if I elect to lock both movement and removal and apply that to children, the movement locking seems to work just fine.

If we can't make this work, it might be better to conditionally hide the "Apply the children" toggle based on the selected lock options.

@Mamaduka
Copy link
Member Author

@jameskoster, that's a templateLock limitation. Currently, it has only two options:

  • all — prevents all operations. It is not possible to insert new blocks, move existing blocks, or delete blocks.
  • insert — prevents inserting or removing blocks, but allows moving existing blocks.

@jameskoster
Copy link
Contributor

Is it within scope to add more templateLock options here? Otherwise I'm not sure we should proceed since the example above feels pretty much broken 🤔

@mtias
Copy link
Member

mtias commented Jun 23, 2022

I think in this PR we can try to disable the toggle button if only the "disable movement" is selected. Moving forwards I think we should try to make the assumption that templateLock exists as a property of any innerblock unless explicitly set to false by a block author. And to align support for the same set of locking tools.

@critterverse
Copy link
Contributor

I think in this PR we can try to disable the toggle button if only the "disable movement" is selected.

Agree with @jameskoster and @mtias that it would be nice to only have the toggle available when needed. I mentioned a similar idea of hiding and showing the "apply to children" toggle contextually in this comment: #40069 (comment)

For example, maybe the toggle is not visible by default but it appears when you've selected a relevant option ("lock all" or "prevent removal").

@mtias
Copy link
Member

mtias commented Jun 23, 2022

I'd try just setting it to disabled instead of removing so we avoid some jumps as you toggle, but that's more of a detail, especially if we end up adding the missing option in template lock anyways.

@Mamaduka
Copy link
Member Author

Moving forwards I think we should try to make the assumption that templateLock exists as a property of any innerblock unless explicitly set to false by a block author. And to align support for the same set of locking tools.

Do you mean we should check for the templateLock attribute internally in the useInnerBlocksProps unless it's explicitly set to false?

@mtias
Copy link
Member

mtias commented Jun 23, 2022

@Mamaduka yes, essentially make template locking a default feature of inner-blocks that can be programatically set at any point for any nested group, unless the block implementor excludes it on purpose.

@Mamaduka
Copy link
Member Author

I've updated logic to disable toggle when a block cannot apply template lock.

@mtias, let's handle that in follow-up PR(s) alongside registering templateLock for other core blocks. We can either do it by adding attributes manually or by introducing a new supports flag. @jorgefilipecosta, any preference regarding this?

Screenshot

CleanShot 2022-06-27 at 21 01 21

@bph
Copy link
Contributor

bph commented Jun 29, 2022

"Apply to all children" - not many users might realize that means all the enclosed blocks inside the container.

Can we come up with a better label for this toggle switch?
I would love to see if that could be dynamic depending on which block is the parent?
"Apply to all blocks inside this {block name}" which would say inside this Cover block, or this Group block or Media + Text block or the "Quote" block.

If that's not possible maybe something like:
"Apply to all enclosed blocks" works, too.

@Mamaduka Mamaduka added the Needs Copy Review Needs review of user-facing copy (language, phrasing) label Jun 30, 2022
@getsource
Copy link
Member

"Apply to all children" - not many users might realize that means all the enclosed blocks inside the container.

Can we come up with a better label for this toggle switch? I would love to see if that could be dynamic depending on which block is the parent? "Apply to all blocks inside this {block name}" which would say inside this Cover block, or this Group block or Media + Text block or the "Quote" block.

If that's not possible maybe something like: "Apply to all enclosed blocks" works, too.

I'm not sure if including the block name is necessary or not, but I like "Apply to all blocks inside" quite a bit!

@mtias
Copy link
Member

mtias commented Jun 30, 2022

Let's go with "Apply to all blocks inside", the name of the block is already on the title of the modal.

@Mamaduka
Copy link
Member Author

I have updated the label. I think this is ready for final review.

@Mamaduka Mamaduka removed the Needs Copy Review Needs review of user-facing copy (language, phrasing) label Jul 6, 2022
Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

When I apply locking to all children and then open the modal again the option to apply to the children is unchecked, leaving users confused if they are or not applying the locking to the children.
image

@Mamaduka
Copy link
Member Author

Thank you, @jorgefilipecosta. That's an easy enough fix, and I will push an update shortly.

Any concerns about using templateLock API for this feature?

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

I think if we have a templateLock in a block we should not render the locking UI in the descendent blocks. Otherwise templateLock may be used in a block that expected its children to be totally fixed because of business constraints and now the user can just go to a child and unlock it. It may break existing blocks that would expect a user to never be able to do that easily.

@jorgefilipecosta
Copy link
Member

I think templateLock is the right API for this feature.

I think we'll have to add templateLock attribute support to all blocks that support innerBlocks. Another option is to apply the lock attribute directly to the children.

This way of implementing the feature would be very fragile. I may apply looking at all the children but then I would be able to insert new blocks which seems unexpected when there is total locking in place and these new blocks would be totally unblocked which is also a little unexpected.

Regarding the current limitation of just applying to remove or move locking to descendants. I tunk it is not a blocker for this feature. But if we want to address it I see two options:

  • Expand what templateLock options are available we need to be very careful to make sure we add options that make sense and match the block level locking options. It is not easy e.g: an option to only block removal would freely allow inserts inside the nested area but then if the user made a mistake and just wants to remove the inserted block it would be impossible? It feels strange.
  • Use the previously referred mechanism of going to each child block in the tree and add the locking option when partial locking is selected. The option would say in that case "Apply to all the current blocks inside". I think that mechanism may make sense on partial locking cases.

@jorgefilipecosta
Copy link
Member

@Mamaduka yes, essentially make template locking a default feature of inner-blocks that can be programmatically set at any point for any nested group, unless the block implementor excludes it on purpose.

When adding the templateLock attribute for the first time the first approach was a general one that supported every block. Meanwhile, we opted for a more restricted approach where the attribute is only present in some blocks. I can try to revive the old PR/branch, where a templateLock attribute is an option on all blocks.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

I think this PR can be merged after the issue where the apply nested checkbox is reset every time the modal opens.

@Mamaduka
Copy link
Member Author

Thanks for the review, @jorgefilipecosta 🙇

I've updated the logic to use the templateLock attribute value as an initial state.

I think if we have a templateLock in a block we should not render the locking UI in the descendent blocks. Otherwise templateLock may be used in a block that expected its children to be totally fixed because of business constraints and now the user can just go to a child and unlock it. It may break existing blocks that would expect a user to never be able to do that easily.

I personally like the idea that inner blocks can be controlled individually. We also have different mechanisms to hide the locking UI on a block or global level.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block Locking The API allowing for the ability to lock/unlock blocks Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

When locking a container block, offer option to lock all blocks within
9 participants