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

Try: Reusable block edit locking #39950

Merged
merged 7 commits into from
Apr 11, 2022
Merged

Try: Reusable block edit locking #39950

merged 7 commits into from
Apr 11, 2022

Conversation

Mamaduka
Copy link
Member

@Mamaduka Mamaduka commented Mar 31, 2022

What?

Closes #32461.

PR adds an option to lock editing for Reusable Blocks.

Kudos to @thisissandip for working on the initial implementation.

Why?

It is easy to modify and save reusable blocks, and then these changes are reflected across the site.

How?

The BlockContentOverlay component checks if the block editing is enabled. If a block cannot be edited, the overlay is permanently active.

The block editor can use this implementation to enable edit locking for other blocks, like "Template Parts," that use BlockContentOverlay.

Testing Instructions

  1. Open a Post or Page.
  2. Insert a Reusable block.
  3. Open lock modal from Block options.
  4. Select "Restrict editing" and apply settings.
  5. Confirm that inner blocks can't be selected or edited.

Note: Currently, inner blocks can be removed or re-arranged via List View.

Screenshots or screencast

CleanShot.2022-03-31.at.18.44.12.mp4

@github-actions
Copy link

github-actions bot commented Mar 31, 2022

Size Change: +1.32 kB (0%)

Total Size: 1.22 MB

Filename Size Change
build/block-editor/index.min.js 149 kB +272 B (0%)
build/block-editor/style-rtl.css 15.5 kB +31 B (0%)
build/block-editor/style.css 15.5 kB +29 B (0%)
build/block-library/blocks/query/editor-rtl.css 369 B +238 B (+182%) 🆘
build/block-library/blocks/query/editor.css 369 B +237 B (+180%) 🆘
build/block-library/editor-rtl.css 10.2 kB +122 B (+1%)
build/block-library/editor.css 10.2 kB +126 B (+1%)
build/block-library/index.min.js 175 kB +264 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.49 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
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 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 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 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 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-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 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-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.56 kB
build/block-library/blocks/cover/style.css 1.56 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 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 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 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 353 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 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 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 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 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 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 447 B
build/block-library/blocks/latest-posts/style.css 446 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 708 B
build/block-library/blocks/navigation-link/editor.css 706 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-submenu/view.min.js 375 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.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view.min.js 2.85 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 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/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 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 721 B
build/block-library/blocks/post-featured-image/editor.css 721 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 323 B
build/block-library/blocks/post-template/style.css 323 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/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 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 140 B
build/block-library/blocks/separator/editor.css 140 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 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 332 B
build/block-library/blocks/spacer/editor.css 332 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 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 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 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 934 B
build/block-library/common.css 932 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.3 kB
build/block-library/style.css 11.3 kB
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.9 kB
build/components/index.min.js 223 kB
build/components/style-rtl.css 14.9 kB
build/components/style.css 14.9 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.64 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.04 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 30 kB
build/edit-post/style-rtl.css 7.18 kB
build/edit-post/style.css 7.18 kB
build/edit-site/index.min.js 46.8 kB
build/edit-site/style-rtl.css 7.77 kB
build/edit-site/style.css 7.75 kB
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.39 kB
build/editor/index.min.js 38.4 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 4.29 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 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.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 B
build/react-i18n/index.min.js 704 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.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 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 280 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@Mamaduka Mamaduka added [Block] Block The "Reusable Block" Block [Feature] Block Locking The API allowing for the ability to lock/unlock blocks labels Mar 31, 2022
@Mamaduka
Copy link
Member Author

The PR needs polishing, but I decided to share the current progress for feedback.

Cc @paaljoachim.

@paaljoachim
Copy link
Contributor

paaljoachim commented Mar 31, 2022

Great! Thanks George for getting this rolling!
Testing using this procedure: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/

Sharing thoughts...

Pre existing Reusable blocks

I added an existing Reusable block. With the new lock mechanism I would expect to see existing Reusable blocks automatically locked. Plus seeing the lock icon in the toolbar.

Currently adding an existing Reusable block looks like this:

Screenshot 2022-03-31 at 18 25 08

I would expect to see the lock in place and automatically have all current Reusable blocks content restricted.

That means adding an existing Reusable block should automatically look like this:
Screenshot 2022-03-31 at 18 38 24

It would make it easier for sites that have a lot of Reusable blocks automatically have the lock in place. Compared to needing to manually add the lock to all the Reusable blocks.

EDIT:
Instead of automatically locking Reusable blocks the unlock icon could be seen in the toolbar as it gives a hint of the new feature that is present. Making it easier for content provider to click the unlock icon to open the Modal and there lock the Reusable block.


Creating a new Reusable block

Screenshot 2022-03-31 at 18 31 05

Should we add a checkbox into the Reusable block modul to restrict editing?
Create-Reusable-block-Restrict-Editing

Currently:
Creating a Reusable block leaves it open for editing. The user will need to go into the contextual (3 drop down menu) and select the Lock.


All Reusable blocks should show the lock icon (open or closed) in the toolbar to give the needed hint for users that this can be locked or unlocked. Because Reusable block is such an important feature that one needs to remember to lock it to keep it safe from accidental changes.
I assume that through code one can restrict the Reusable block lock for all users except a given user or user role.

@critterverse
Copy link
Contributor

Nice, this is looking good so far! Curious love to hear what others think about the overlay — it does seem to fit nicely here but I could also see it working without.

@Mamaduka, would be possible to also make some tweaks to the modal in this PR? I made a few refinements to clean things up a bit:

modal refinements

Changes made in this version:

  • Removes the separator lines
  • Increases the amount of indentation so that the nested items line up perfectly with the text above (this is similar to how nesting works in the List View)
  • Swaps the existing icons for locked/unlocked icon indicators
  • Simplifies the wording so that the top option is "Lock all" with options for Editing, Movement, and Removal (I think we could get away with removing the other words like restrict, disable, prevent especially if we show the lock indicator on each row)
  • Nice to have: a hover state to indicate that the full row is clickable might be helpful

I think the first two changes could be made universally wherever we use nested checkboxes like this (the Preferences modal for example) since a few folks have commented about how busy the separators are. Here's the latest in the Figma file for reference.

@paaljoachim That's an interesting idea above about surfacing the locking option earlier in the Reusable block set up flow — I could see that being useful!

@paaljoachim
Copy link
Contributor

paaljoachim commented Mar 31, 2022

Hey @critterverse Channing

I really like the new modal!
To me the pencil, movement grid and trash icon has seemed a bit out of place in a lock/unlock modal. Switching it out with an lock/unlock icon feels to better symbolize what is going on for each action selected. Lock or unlock. I will add in both visuals so that we can quickly see the current modal and compare it with your suggestion Channing. I assume we would add this into all Locking modals.

Current modal:
Screenshot 2022-03-31 at 23 49 50

--

Possible new modal:
Screenshot 2022-03-31 at 23 50 22

I might still keep the "Restrict editing", "Disable movement" and "Prevent removal" to enforce and strengthen the action of each option.

Regarding the overlay.

I see it as strengthening the lock mechanism. As it shows the content that is the Reusable block (locked or unlocked).
Screenshot 2022-03-31 at 23 56 08

An example with a locked Reusable block.
https://user-images.githubusercontent.com/5323259/161156393-a00eb1ec-691c-4c99-b45a-0aa5767d8818.mp4

@Mamaduka
Copy link
Member Author

Mamaduka commented Apr 3, 2022

@critterverse considering that those are general changes for Block Locking Modal, I created a separate PR - #39998.

@paaljoachim, I would love to hear others' thoughts on Reusable Blocks being locked initially.

cc @mtias, @youknowriad

Instead of automatically locking Reusable blocks the unlock icon could be seen in the toolbar as it gives a hint of the new feature that is present. Making it easier for content provider to click the unlock icon to open the Modal and there lock the Reusable block.

A lock icon in the toolbar means that the block is locked. Displaying it only for Reusable Blocks in any other state can create confusion.

@paaljoachim
Copy link
Contributor

paaljoachim commented Apr 3, 2022

To not break consistency instead of having an unlock icon in the Reusable block toolbar we could just automatically add the lock to all current Reusable blocks. (As it would make it easier for sites that have a huge number of Reusable blocks. I am though a bit forth and back on auto locking current Reusable blocks.)
+Adding the lock mechanism "restrict editing" when creating a Reusable block would be a huge help.

Btw
I am looking through the Reusable block label to see if there are any other smaller issues that we can tackle at the same time.
Make it easier to identify specific Reusable Blocks on hover
I came across this: #35116
@jameskoster

@Mamaduka
Copy link
Member Author

Mamaduka commented Apr 3, 2022

Thanks again for the feedback, @paaljoachim. Let's wait for what others have to say about initial locks.

I am looking through the Reusable block label to see if there are any other smaller issues that we can tackle at the same time.

I would rather keep this PR simple and only focus on Edit locking for reusable blocks.

@jameskoster
Copy link
Contributor

I think it's probably a good idea to explore the default lock status separately.

On the surface it may seem a good idea, but there is nuance to consider – is the locking local or global? What level of locking do we apply, just movement, just editing, everything? Should there be an Editor setting to configure the default? There are also initiatives like #39281 which may change how we feel.

@Mamaduka Mamaduka force-pushed the try/reusable-block-edit-lock branch from 06824cc to b168d03 Compare April 4, 2022 17:23
@Mamaduka
Copy link
Member Author

Mamaduka commented Apr 4, 2022

Rebased PR, so it includes the latest modal design update (#39998). I think this is ready for another round of reviews 🙇

} );
}, [ canMove, canRemove ] );
}, [ canEdit, canMove, canRemove, isReusable ] );

const isAllChecked = Object.values( lock ).every( Boolean );
Copy link
Contributor

Choose a reason for hiding this comment

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

could be replaced with isLocked

Copy link
Member Author

Choose a reason for hiding this comment

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

The effect uses these values, not derived one.

Copy link
Contributor

@adamziel adamziel left a comment

Choose a reason for hiding this comment

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

LGTM and works as expected. Noting that this only locks a specific instance of the reusable block. I can still go to another page and change it there, or even add it the second time in my currently opened editor.

@adamziel adamziel added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Apr 11, 2022
@adamziel adamziel added this to the Gutenberg 13.1 milestone Apr 11, 2022
@Mamaduka
Copy link
Member Author

Thanks for the reviews.

There's a plan to explore default lock states separately - #39950 (comment).

@paaljoachim
Copy link
Contributor

There's a plan to explore default lock states separately - #39950 (comment).

I look forward to protecting the Reusable blocks globally, as it feels like expected behavior to lock a Reusable block and it will also transfer over to other instances. I had not noticed this behavior before today.

As this seems kinda like a bug.

  1. Create a Reusable block. Fully lock it with Restrict editing, Disable movement and Prevent removal.
  2. Go to another page and in the Block Inserter add the same Reusable block. Notice that it is not locked.

Could we fix this during the beta @adamziel ?

@tomasztunik
Copy link
Contributor

tomasztunik commented Apr 11, 2022

One little UX glitch I've noticed to keep in mind was on the lock options (edit, move, remove) when you hover over an option and the area gets highlighted not all of the vertical highlighted area is interactive. The checkbox is interactive as well.

Only inspected area is clickable.

Screenshot 2022-04-11 at 15 36 12
.

@adamziel
Copy link
Contributor

As this seems kinda like a bug.

  • Create a Reusable block. Fully lock it with Restrict editing, Disable movement and Prevent removal.
  • Go to another page and in the Block Inserter add the same Reusable block. Notice that it is not locked.
    Could we fix this during the beta @adamziel ?

To me, that's a scope extension and would probably involve some updates to the REST API. I'd say it doesn't pass the feature freeze test. If that's a blocker, then let's punt this to 6.1. If it's not, let's get it in as is.

@Mamaduka
Copy link
Member Author

Nice catch, @tomasztunik. I will add this to my follow-up PR list.

@paaljoachim
Copy link
Contributor

To me, that's a scope extension and would probably involve some updates to the REST API. I'd say it doesn't pass the feature freeze test. If that's a blocker, then let's punt this to 6.1. If it's not, let's get it in as is.

Alrighty. We are going one step forward, and have one step left to better protect Reusable blocks.
The one step is added to WP 6.0 and the next step will need to be added to WP 6.1.
So be it!

@Mamaduka Mamaduka merged commit f09a7b0 into trunk Apr 11, 2022
@Mamaduka Mamaduka deleted the try/reusable-block-edit-lock branch April 11, 2022 14:01
adamziel pushed a commit that referenced this pull request Apr 11, 2022
* Introduce canEditBlock selector

* Update BlockContentOverlay

* Update UI

* Fix indeterminate state and e2e tests

* Update list view

* Update selector

* Provide 'isLocked' value via hook
@gziolo gziolo modified the milestones: Gutenberg 13.1, Gutenberg 13.0 Apr 11, 2022
@gziolo
Copy link
Member

gziolo commented Apr 11, 2022

This PR was cherry-picked for the Gutenberg plugin v13.0 release and WordPress 6.0 RC1 release.

@gziolo gziolo removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Apr 11, 2022
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Apr 13, 2022
@Mamaduka
Copy link
Member Author

@bph this feature is removed from 6.0, so I will remove the "Needs Dev Note" label.

@Mamaduka Mamaduka removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Apr 21, 2022
@bph
Copy link
Contributor

bph commented Apr 29, 2022

Thanks and I remove it from your list of Dev Notes :-)

@GaryJones
Copy link
Member

Will this be in WP 6.1?

@paaljoachim
Copy link
Contributor

Hey @GaryJones

Various PRs that are merged into the Gutenberg plugin will be added to the next major version of WordPress. So yes this will be added to WP 6.1.

@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jul 16, 2022
@Mamaduka Mamaduka removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Sep 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Block The "Reusable Block" Block [Feature] Block Locking The API allowing for the ability to lock/unlock blocks
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Reusable block: Add a lock to the parent toolbar to protect the inner content from accidental editing.