@wordpress/block-editor 8.5.0 → 8.5.3

package/build-module/store/utils.js

@@ -0,0 +1,20 @@
+/**
+ * Helper function that maps attribute definition properties to the
+ * ones used by RichText utils like `create, toHTMLString, etc..`.
+ *
+ * @param {Object} attributeDefinition A block's attribute definition object.
+ * @return {Object} The mapped object.
+ */
+export function mapRichTextSettings(attributeDefinition) {
+  const {
+    multiline: multilineTag,
+    __unstableMultilineWrapperTags: multilineWrapperTags,
+    __unstablePreserveWhiteSpace: preserveWhiteSpace
+  } = attributeDefinition;
+  return {
+    multilineTag,
+    multilineWrapperTags,
+    preserveWhiteSpace
+  };
+}
+//# sourceMappingURL=utils.js.map

package/build-module/store/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/store/utils.js"],"names":["mapRichTextSettings","attributeDefinition","multiline","multilineTag","__unstableMultilineWrapperTags","multilineWrapperTags","__unstablePreserveWhiteSpace","preserveWhiteSpace"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAT,CAA8BC,mBAA9B,EAAoD;AAC1D,QAAM;AACLC,IAAAA,SAAS,EAAEC,YADN;AAELC,IAAAA,8BAA8B,EAAEC,oBAF3B;AAGLC,IAAAA,4BAA4B,EAAEC;AAHzB,MAIFN,mBAJJ;AAKA,SAAO;AACNE,IAAAA,YADM;AAENE,IAAAA,oBAFM;AAGNE,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * Helper function that maps attribute definition properties to the\n * ones used by RichText utils like `create, toHTMLString, etc..`.\n *\n * @param {Object} attributeDefinition A block's attribute definition object.\n * @return {Object} The mapped object.\n */\nexport function mapRichTextSettings( attributeDefinition ) {\n\tconst {\n\t\tmultiline: multilineTag,\n\t\t__unstableMultilineWrapperTags: multilineWrapperTags,\n\t\t__unstablePreserveWhiteSpace: preserveWhiteSpace,\n\t} = attributeDefinition;\n\treturn {\n\t\tmultilineTag,\n\t\tmultilineWrapperTags,\n\t\tpreserveWhiteSpace,\n\t};\n}\n"]}

package/build-style/style-rtl.css

@@ -855,8 +855,7 @@
   padding-right: 0 !important;
 }
 .block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
-  right: 0 !important;
-  left: 12px !important;
+  left: 8px !important;
 }
 
 .block-editor-block-breadcrumb {
@@ -1019,7 +1018,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
@@ -1423,11 +1421,13 @@
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
-  width: 48px;
+  display: flex;
+  padding: 6px 12px !important;
 }
-.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon {
+.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   margin-left: auto;
   margin-right: auto;
+  min-width: 24px !important;
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon:disabled {
@@ -1525,7 +1525,7 @@
 }
 
 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
-  width: 48px;
+  min-width: 36px;
 }
 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon,
 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle {
@@ -1652,39 +1652,41 @@
   align-items: flex-start;
   width: 100%;
   border-radius: 2px;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  outline: 1px solid transparent;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
   justify-content: center;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 16px;
-  padding: 16px;
-  max-height: 550px;
-  overflow: auto;
-  margin: 0 1px 1px 1px;
-  width: calc(100% - 2px);
-  background: #fff;
+  column-gap: 24px;
+  display: block;
+  width: 100%;
+  padding: 32px;
+  column-count: 2;
+}
+@media (min-width: 1440px) {
+  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
+    column-count: 3;
+  }
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
-.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item-title {
-  padding: 4px;
-  font-size: 12px;
-  text-align: center;
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 24px;
 }
-.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container {
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
+  min-height: 100px;
   border-radius: 2px;
   border: 1px solid #ddd;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+}
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar {
+  height: 60px;
   box-sizing: border-box;
-  position: relative;
   padding: 16px;
   width: 100%;
   text-align: right;
@@ -1692,12 +1694,12 @@
   color: #1e1e1e;
   border-radius: 2px 2px 0 0;
   background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  outline: 1px solid transparent;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  border-top: 1px solid #ddd;
+  align-self: flex-end;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
   display: flex;
@@ -1728,13 +1730,12 @@
   box-sizing: border-box;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
-  opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;
   margin: auto;
-  padding: 16px;
-  transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
+  padding: 0;
+  transition: transform 0.5s, z-index 0.5s;
   z-index: 100;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
@@ -1754,6 +1755,12 @@
   display: none;
 }
 
+.block-editor-block-pattern-setup__carousel,
+.block-editor-block-pattern-setup__grid {
+  width: 100%;
+  overflow-y: auto;
+}
+
 .block-editor-block-variation-transforms {
   padding: 0 52px 16px 16px;
   width: 100%;

package/build-style/style.css

@@ -855,8 +855,7 @@
   padding-left: 0 !important;
 }
 .block-editor-block-lock-toolbar .components-button.has-icon:focus::before {
-  left: 0 !important;
-  right: 12px !important;
+  right: 8px !important;
 }
 
 .block-editor-block-breadcrumb {
@@ -1019,7 +1018,6 @@
   border: none;
   border-radius: 2px;
   z-index: 10;
-  pointer-events: none;
 }
 .block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
@@ -1423,11 +1421,13 @@
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon {
-  width: 48px;
+  display: flex;
+  padding: 6px 12px !important;
 }
-.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon {
+.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   margin-right: auto;
   margin-left: auto;
+  min-width: 24px !important;
 }
 
 .components-button.block-editor-block-switcher__no-switcher-icon:disabled {
@@ -1525,7 +1525,7 @@
 }
 
 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
-  width: 48px;
+  min-width: 36px;
 }
 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon,
 .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle {
@@ -1652,39 +1652,41 @@
   align-items: flex-start;
   width: 100%;
   border-radius: 2px;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  outline: 1px solid transparent;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
   justify-content: center;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 16px;
-  padding: 16px;
-  max-height: 550px;
-  overflow: auto;
-  margin: 0 1px 1px 1px;
-  width: calc(100% - 2px);
-  background: #fff;
+  column-gap: 24px;
+  display: block;
+  width: 100%;
+  padding: 32px;
+  column-count: 2;
+}
+@media (min-width: 1440px) {
+  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
+    column-count: 3;
+  }
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
-.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item-title {
-  padding: 4px;
-  font-size: 12px;
-  text-align: center;
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 24px;
 }
-.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container {
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
+  min-height: 100px;
   border-radius: 2px;
   border: 1px solid #ddd;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+}
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar {
+  height: 60px;
   box-sizing: border-box;
-  position: relative;
   padding: 16px;
   width: 100%;
   text-align: left;
@@ -1692,12 +1694,12 @@
   color: #1e1e1e;
   border-radius: 2px 2px 0 0;
   background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  outline: 1px solid transparent;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  border-top: 1px solid #ddd;
+  align-self: flex-end;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
   display: flex;
@@ -1728,13 +1730,12 @@
   box-sizing: border-box;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
-  opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;
   margin: auto;
-  padding: 16px;
-  transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
+  padding: 0;
+  transition: transform 0.5s, z-index 0.5s;
   z-index: 100;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
@@ -1754,6 +1755,12 @@
   display: none;
 }
 
+.block-editor-block-pattern-setup__carousel,
+.block-editor-block-pattern-setup__grid {
+  width: 100%;
+  overflow-y: auto;
+}
+
 .block-editor-block-variation-transforms {
   padding: 0 16px 16px 52px;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.5.0",
+	"version": "8.5.3",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.6.0",
-		"@wordpress/api-fetch": "^6.3.0",
-		"@wordpress/blob": "^3.6.0",
-		"@wordpress/blocks": "^11.5.0",
-		"@wordpress/components": "^19.8.0",
-		"@wordpress/compose": "^5.4.0",
-		"@wordpress/data": "^6.6.0",
-		"@wordpress/date": "^4.6.0",
-		"@wordpress/deprecated": "^3.6.0",
-		"@wordpress/dom": "^3.6.0",
-		"@wordpress/element": "^4.4.0",
-		"@wordpress/hooks": "^3.6.0",
-		"@wordpress/html-entities": "^3.6.0",
-		"@wordpress/i18n": "^4.6.0",
-		"@wordpress/icons": "^8.2.0",
-		"@wordpress/is-shallow-equal": "^4.6.0",
-		"@wordpress/keyboard-shortcuts": "^3.4.0",
-		"@wordpress/keycodes": "^3.6.0",
-		"@wordpress/notices": "^3.6.0",
-		"@wordpress/rich-text": "^5.4.0",
-		"@wordpress/shortcode": "^3.6.0",
-		"@wordpress/style-engine": "^0.5.0",
-		"@wordpress/token-list": "^2.6.0",
-		"@wordpress/url": "^3.7.0",
-		"@wordpress/warning": "^2.6.0",
-		"@wordpress/wordcount": "^3.6.0",
+		"@wordpress/a11y": "^3.6.1",
+		"@wordpress/api-fetch": "^6.3.1",
+		"@wordpress/blob": "^3.6.1",
+		"@wordpress/blocks": "^11.5.3",
+		"@wordpress/components": "^19.8.2",
+		"@wordpress/compose": "^5.4.1",
+		"@wordpress/data": "^6.6.1",
+		"@wordpress/date": "^4.6.1",
+		"@wordpress/deprecated": "^3.6.1",
+		"@wordpress/dom": "^3.6.1",
+		"@wordpress/element": "^4.4.1",
+		"@wordpress/hooks": "^3.6.1",
+		"@wordpress/html-entities": "^3.6.1",
+		"@wordpress/i18n": "^4.6.1",
+		"@wordpress/icons": "^8.2.2",
+		"@wordpress/is-shallow-equal": "^4.6.1",
+		"@wordpress/keyboard-shortcuts": "^3.4.1",
+		"@wordpress/keycodes": "^3.6.1",
+		"@wordpress/notices": "^3.6.1",
+		"@wordpress/rich-text": "^5.4.1",
+		"@wordpress/shortcode": "^3.6.1",
+		"@wordpress/style-engine": "^0.5.1",
+		"@wordpress/token-list": "^2.6.1",
+		"@wordpress/url": "^3.7.1",
+		"@wordpress/warning": "^2.6.1",
+		"@wordpress/wordcount": "^3.6.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
+	"gitHead": "37e930b93fbba88fa024a91eb527a90f855c97f3"
 }

package/src/components/block-alignment-control/ui.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
@@ -31,7 +31,7 @@ import useAvailableAlignments from './use-available-alignments';
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	none: {
 		icon: alignNone,
-		title: __( 'None' ),
+		title: _x( 'None', 'Alignment option' ),
 	},
 	left: {
 		icon: positionLeft,

package/src/components/block-content-overlay/index.js

@@ -25,6 +25,7 @@ export default function BlockContentOverlay( {
 	const [ isHovered, setIsHovered ] = useState( false );
 
 	const {
+		canEdit,
 		isParentSelected,
 		hasChildSelected,
 		isDraggingBlocks,
@@ -36,8 +37,10 @@ export default function BlockContentOverlay( {
 				hasSelectedInnerBlock,
 				isDraggingBlocks: _isDraggingBlocks,
 				isBlockHighlighted,
+				canEditBlock,
 			} = select( blockEditorStore );
 			return {
+				canEdit: canEditBlock( clientId ),
 				isParentSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
@@ -59,6 +62,12 @@ export default function BlockContentOverlay( {
 	);
 
 	useEffect( () => {
+		// The overlay is always active when editing is locked.
+		if ( ! canEdit ) {
+			setIsOverlayActive( true );
+			return;
+		}
+
 		// Reenable when blocks are not in use.
 		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
@@ -75,7 +84,13 @@ export default function BlockContentOverlay( {
 		if ( hasChildSelected && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
-	}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );
+	}, [
+		isParentSelected,
+		hasChildSelected,
+		isOverlayActive,
+		isHovered,
+		canEdit,
+	] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the a11y is concerned. We're just catching the first click so that
@@ -88,7 +103,9 @@ export default function BlockContentOverlay( {
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
 			onMouseUp={
-				isOverlayActive ? () => setIsOverlayActive( false ) : undefined
+				isOverlayActive && canEdit
+					? () => setIsOverlayActive( false )
+					: undefined
 			}
 		>
 			{ wrapperProps?.children }

package/src/components/block-content-overlay/style.scss

@@ -10,7 +10,6 @@
 		border: none;
 		border-radius: $radius-block-ui;
 		z-index: z-index(".block-editor-block-content-overlay__overlay");
-		pointer-events: none;
 	}
 
 	&:hover:not(.is-dragging-blocks).overlay-active::before,

package/src/components/block-lock/index.js

@@ -1,3 +1,4 @@
 export { default as BlockLockMenuItem } from './menu-item';
 export { default as BlockLockModal } from './modal';
 export { default as BlockLockToolbar } from './toolbar';
+export { default as useBlockLock } from './use-block-lock';

package/src/components/block-lock/menu-item.js

@@ -4,43 +4,23 @@
 import { __ } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { lock, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import useBlockLock from './use-block-lock';
 import BlockLockModal from './modal';
-import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockMenuItem( { clientId } ) {
-	const { canLockBlock, isLocked } = useSelect(
-		( select ) => {
-			const {
-				canMoveBlock,
-				canRemoveBlock,
-				canLockBlockType,
-				getBlockName,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
-
-			return {
-				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
-				isLocked:
-					! canMoveBlock( clientId, rootClientId ) ||
-					! canRemoveBlock( clientId, rootClientId ),
-			};
-		},
-		[ clientId ]
-	);
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	if ( ! canLockBlock ) {
+	if ( ! canLock ) {
 		return null;
 	}
 

package/src/components/block-lock/modal.js

@@ -14,27 +14,25 @@ import {
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { isReusableBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import useBlockLock from './use-block-lock';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
-	const { canMove, canRemove } = useSelect(
+	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
+	const { isReusable } = useSelect(
 		( select ) => {
-			const {
-				canMoveBlock,
-				canRemoveBlock,
-				getBlockRootClientId,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
+			const { getBlockName } = select( blockEditorStore );
+			const blockName = getBlockName( clientId );
 
 			return {
-				canMove: canMoveBlock( clientId, rootClientId ),
-				canRemove: canRemoveBlock( clientId, rootClientId ),
+				isReusable: isReusableBlock( getBlockType( blockName ) ),
 			};
 		},
 		[ clientId ]
@@ -50,12 +48,12 @@ export default function BlockLockModal( { clientId, onClose } ) {
 		setLock( {
 			move: ! canMove,
 			remove: ! canRemove,
+			...( isReusable ? { edit: ! canEdit } : {} ),
 		} );
-	}, [ canMove, canRemove ] );
+	}, [ canEdit, canMove, canRemove, isReusable ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
-	const isIndeterminate =
-		Object.values( lock ).some( Boolean ) && ! isAllChecked;
+	const isMixed = Object.values( lock ).some( Boolean ) && ! isAllChecked;
 
 	return (
 		<Modal
@@ -91,15 +89,41 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
 						}
 						checked={ isAllChecked }
-						indeterminate={ isIndeterminate }
+						indeterminate={ isMixed }
 						onChange={ ( newValue ) =>
 							setLock( {
 								move: newValue,
 								remove: newValue,
+								...( isReusable ? { edit: newValue } : {} ),
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
+						{ isReusable && (
+							<li className="block-editor-block-lock-modal__checklist-item">
+								<CheckboxControl
+									label={
+										<>
+											{ __( 'Restrict editing' ) }
+											<Icon
+												icon={
+													lock.edit
+														? lockIcon
+														: unlockIcon
+												}
+											/>
+										</>
+									}
+									checked={ !! lock.edit }
+									onChange={ ( edit ) =>
+										setLock( ( prevLock ) => ( {
+											...prevLock,
+											edit,
+										} ) )
+									}
+								/>
+							</li>
+						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={

package/src/components/block-lock/style.scss

@@ -63,8 +63,7 @@
 		padding-left: 0 !important;
 
 		&:focus::before {
-			left: 0 !important;
-			right: $grid-unit-15 !important;
+			right: $grid-unit-10 !important;
 		}
 	}
 }