@wordpress/block-editor 8.5.0 → 8.5.1

package/build-style/style-rtl.css

@@ -1423,11 +1423,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 +1527,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 +1654,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 +1696,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 +1732,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 +1757,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

@@ -1423,11 +1423,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 +1527,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 +1654,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 +1696,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 +1732,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 +1757,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.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,7 +36,7 @@
 		"@wordpress/a11y": "^3.6.0",
 		"@wordpress/api-fetch": "^6.3.0",
 		"@wordpress/blob": "^3.6.0",
-		"@wordpress/blocks": "^11.5.0",
+		"@wordpress/blocks": "^11.5.1",
 		"@wordpress/components": "^19.8.0",
 		"@wordpress/compose": "^5.4.0",
 		"@wordpress/data": "^6.6.0",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
+	"gitHead": "9c15c669843d53c5ca6024a4c486d01d819d123f"
 }

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-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, true );
 
 	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, true );
+	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/toolbar.js

@@ -5,45 +5,28 @@ import { __, sprintf } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useReducer } from '@wordpress/element';
 import { lock } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockLockModal from './modal';
+import useBlockLock from './use-block-lock';
 import useBlockDisplayInformation from '../use-block-display-information';
-import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove, canLockBlock } = useSelect(
-		( select ) => {
-			const {
-				canMoveBlock,
-				canRemoveBlock,
-				canLockBlockType,
-				getBlockName,
-			} = select( blockEditorStore );
-
-			return {
-				canMove: canMoveBlock( clientId ),
-				canRemove: canRemoveBlock( clientId ),
-				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
-			};
-		},
-		[ clientId ]
-	);
+	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	if ( ! canLockBlock ) {
+	if ( ! canLock ) {
 		return null;
 	}
 
-	if ( canMove && canRemove ) {
+	if ( canEdit && canMove && canRemove ) {
 		return null;
 	}
 

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

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Return details about the block lock status.
+ *
+ * @param {string}  clientId    The block client Id.
+ * @param {boolean} checkParent Optional. The status is derived from the parent `templateLock`
+ *                              when the current block's lock state isn't defined.
+ *
+ * @return {Object} Block lock status
+ */
+export default function useBlockLock( clientId, checkParent = false ) {
+	return useSelect(
+		( select ) => {
+			const {
+				canEditBlock,
+				canMoveBlock,
+				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const rootClientId = checkParent
+				? getBlockRootClientId( clientId )
+				: null;
+
+			const canEdit = canEditBlock( clientId );
+			const canMove = canMoveBlock( clientId, rootClientId );
+			const canRemove = canRemoveBlock( clientId, rootClientId );
+
+			return {
+				canEdit,
+				canMove,
+				canRemove,
+				canLock: canLockBlockType( getBlockName( clientId ) ),
+				isLocked: ! canEdit || ! canMove || ! canRemove,
+			};
+		},
+		[ clientId, checkParent ]
+	);
+}