@wordpress/block-editor 13.1.0 → 13.2.0

package/build-style/style-rtl.css

@@ -416,14 +416,22 @@ iframe[name=editor-canvas] {
   }
 }
 
+.block-editor-block-lock-modal__options {
+  margin-top: 16px;
+}
+.block-editor-block-lock-modal__options legend {
+  margin-bottom: 16px;
+  padding: 0;
+}
+
 .block-editor-block-lock-modal__checklist {
   margin: 0;
 }
 
-.block-editor-block-lock-modal__options-title {
+.block-editor-block-lock-modal__options-all {
   padding: 12px 0;
 }
-.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+.block-editor-block-lock-modal__options-all .components-checkbox-control__label {
   font-weight: 600;
 }
 
@@ -1662,36 +1670,50 @@ iframe[name=editor-canvas] {
   box-sizing: inherit;
 }
 
-.block-editor-grid-visualizer {
-  z-index: 30 !important;
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
+  z-index: 30;
 }
-
-.block-editor-grid-visualizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none;
+}
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
+  pointer-events: all;
 }
 
 .block-editor-grid-visualizer__grid {
   display: grid;
 }
 
-.block-editor-grid-visualizer__item {
-  outline: 1px solid transparent;
-  border-radius: 2px;
+.block-editor-grid-visualizer__cell {
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }
 
-.block-editor-grid-item-resizer {
-  z-index: 30 !important;
+.block-editor-grid-visualizer__drop-zone {
+  background: rgba(204, 204, 204, 0.1);
+  border: 1px dotted #ddd;
+  width: 100%;
+  height: 100%;
+  min-width: 8px;
+  min-height: 8px;
+}
+.block-editor-grid-visualizer__drop-zone.is-highlighted {
+  background: var(--wp-admin-theme-color);
 }
 
-.block-editor-grid-item-resizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+  z-index: 30;
+}
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none;
 }
 
 .block-editor-grid-item-resizer__box {
   border: 1px solid var(--wp-admin-theme-color);
 }
-.block-editor-grid-item-resizer__box .components-resizable-box__handle {
-  pointer-events: all !important;
+.block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
+  pointer-events: all;
 }
 
 .block-editor-height-control {
@@ -2887,8 +2909,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;

package/build-style/style.css

@@ -416,14 +416,22 @@ iframe[name=editor-canvas] {
   }
 }
 
+.block-editor-block-lock-modal__options {
+  margin-top: 16px;
+}
+.block-editor-block-lock-modal__options legend {
+  margin-bottom: 16px;
+  padding: 0;
+}
+
 .block-editor-block-lock-modal__checklist {
   margin: 0;
 }
 
-.block-editor-block-lock-modal__options-title {
+.block-editor-block-lock-modal__options-all {
   padding: 12px 0;
 }
-.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+.block-editor-block-lock-modal__options-all .components-checkbox-control__label {
   font-weight: 600;
 }
 
@@ -1663,36 +1671,50 @@ iframe[name=editor-canvas] {
   box-sizing: inherit;
 }
 
-.block-editor-grid-visualizer {
-  z-index: 30 !important;
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
+  z-index: 30;
 }
-
-.block-editor-grid-visualizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none;
+}
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
+  pointer-events: all;
 }
 
 .block-editor-grid-visualizer__grid {
   display: grid;
 }
 
-.block-editor-grid-visualizer__item {
-  outline: 1px solid transparent;
-  border-radius: 2px;
+.block-editor-grid-visualizer__cell {
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }
 
-.block-editor-grid-item-resizer {
-  z-index: 30 !important;
+.block-editor-grid-visualizer__drop-zone {
+  background: rgba(204, 204, 204, 0.1);
+  border: 1px dotted #ddd;
+  width: 100%;
+  height: 100%;
+  min-width: 8px;
+  min-height: 8px;
+}
+.block-editor-grid-visualizer__drop-zone.is-highlighted {
+  background: var(--wp-admin-theme-color);
 }
 
-.block-editor-grid-item-resizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+  z-index: 30;
+}
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none;
 }
 
 .block-editor-grid-item-resizer__box {
   border: 1px solid var(--wp-admin-theme-color);
 }
-.block-editor-grid-item-resizer__box .components-resizable-box__handle {
-  pointer-events: all !important;
+.block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
+  pointer-events: all;
 }
 
 .block-editor-height-control {
@@ -2888,8 +2910,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.1.0",
+	"version": "13.2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.1.0",
-		"@wordpress/api-fetch": "^7.1.0",
-		"@wordpress/blob": "^4.1.0",
-		"@wordpress/blocks": "^13.1.0",
-		"@wordpress/commands": "^1.1.0",
-		"@wordpress/components": "^28.1.0",
-		"@wordpress/compose": "^7.1.0",
-		"@wordpress/data": "^10.1.0",
-		"@wordpress/date": "^5.1.0",
-		"@wordpress/deprecated": "^4.1.0",
-		"@wordpress/dom": "^4.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/escape-html": "^3.1.0",
-		"@wordpress/hooks": "^4.1.0",
-		"@wordpress/html-entities": "^4.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/is-shallow-equal": "^5.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.1.0",
-		"@wordpress/keycodes": "^4.1.0",
-		"@wordpress/notices": "^5.1.0",
-		"@wordpress/preferences": "^4.1.0",
-		"@wordpress/private-apis": "^1.1.0",
-		"@wordpress/rich-text": "^7.1.0",
-		"@wordpress/style-engine": "^2.1.0",
-		"@wordpress/token-list": "^3.1.0",
-		"@wordpress/url": "^4.1.0",
-		"@wordpress/warning": "^3.1.0",
-		"@wordpress/wordcount": "^4.1.0",
+		"@wordpress/a11y": "^4.2.0",
+		"@wordpress/api-fetch": "^7.2.0",
+		"@wordpress/blob": "^4.2.0",
+		"@wordpress/blocks": "^13.2.0",
+		"@wordpress/commands": "^1.2.0",
+		"@wordpress/components": "^28.2.0",
+		"@wordpress/compose": "^7.2.0",
+		"@wordpress/data": "^10.2.0",
+		"@wordpress/date": "^5.2.0",
+		"@wordpress/deprecated": "^4.2.0",
+		"@wordpress/dom": "^4.2.0",
+		"@wordpress/element": "^6.2.0",
+		"@wordpress/escape-html": "^3.2.0",
+		"@wordpress/hooks": "^4.2.0",
+		"@wordpress/html-entities": "^4.2.0",
+		"@wordpress/i18n": "^5.2.0",
+		"@wordpress/icons": "^10.2.0",
+		"@wordpress/is-shallow-equal": "^5.2.0",
+		"@wordpress/keyboard-shortcuts": "^5.2.0",
+		"@wordpress/keycodes": "^4.2.0",
+		"@wordpress/notices": "^5.2.0",
+		"@wordpress/preferences": "^4.2.0",
+		"@wordpress/private-apis": "^1.2.0",
+		"@wordpress/rich-text": "^7.2.0",
+		"@wordpress/style-engine": "^2.2.0",
+		"@wordpress/token-list": "^3.2.0",
+		"@wordpress/url": "^4.2.0",
+		"@wordpress/warning": "^3.2.0",
+		"@wordpress/wordcount": "^4.2.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
 }

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

@@ -13,7 +13,6 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockType } from '@wordpress/blocks';
 
@@ -64,10 +63,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const instanceId = useInstanceId(
-		BlockLockModal,
-		'block-editor-block-lock-modal__options-title'
-	);
 
 	useEffect( () => {
 		setLock( {
@@ -90,11 +85,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			overlayClassName="block-editor-block-lock-modal"
 			onRequestClose={ onClose }
 		>
-			<p>
-				{ __(
-					'Choose specific attributes to restrict or lock all available options.'
-				) }
-			</p>
 			<form
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -107,84 +97,107 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					onClose();
 				} }
 			>
-				<div
-					role="group"
-					aria-labelledby={ instanceId }
-					className="block-editor-block-lock-modal__options"
-				>
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						className="block-editor-block-lock-modal__options-title"
-						label={
-							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
-						}
-						checked={ isAllChecked }
-						indeterminate={ isMixed }
-						onChange={ ( newValue ) =>
-							setLock( {
-								move: newValue,
-								remove: newValue,
-								...( allowsEditLocking
-									? { edit: newValue }
-									: {} ),
-							} )
-						}
-					/>
-					<ul className="block-editor-block-lock-modal__checklist">
-						{ allowsEditLocking && (
-							<li className="block-editor-block-lock-modal__checklist-item">
-								<CheckboxControl
-									__nextHasNoMarginBottom
-									label={ __( 'Restrict editing' ) }
-									checked={ !! lock.edit }
-									onChange={ ( edit ) =>
-										setLock( ( prevLock ) => ( {
-											...prevLock,
-											edit,
-										} ) )
-									}
-								/>
-								<Icon
-									className="block-editor-block-lock-modal__lock-icon"
-									icon={ lock.edit ? lockIcon : unlockIcon }
-								/>
-							</li>
+				<fieldset className="block-editor-block-lock-modal__options">
+					<legend>
+						{ __(
+							'Choose specific attributes to restrict or lock all available options.'
 						) }
-						<li className="block-editor-block-lock-modal__checklist-item">
+					</legend>
+					{ /*
+					 * Disable reason: The `list` ARIA role is redundant but
+					 * Safari+VoiceOver won't announce the list otherwise.
+					 */
+					/* eslint-disable jsx-a11y/no-redundant-roles */ }
+					<ul
+						role="list"
+						className="block-editor-block-lock-modal__checklist"
+					>
+						<li>
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={ __( 'Disable movement' ) }
-								checked={ lock.move }
-								onChange={ ( move ) =>
-									setLock( ( prevLock ) => ( {
-										...prevLock,
-										move,
-									} ) )
+								className="block-editor-block-lock-modal__options-all"
+								label={ __( 'Lock all' ) }
+								checked={ isAllChecked }
+								indeterminate={ isMixed }
+								onChange={ ( newValue ) =>
+									setLock( {
+										move: newValue,
+										remove: newValue,
+										...( allowsEditLocking
+											? { edit: newValue }
+											: {} ),
+									} )
 								}
 							/>
-							<Icon
-								className="block-editor-block-lock-modal__lock-icon"
-								icon={ lock.move ? lockIcon : unlockIcon }
-							/>
-						</li>
-						<li className="block-editor-block-lock-modal__checklist-item">
-							<CheckboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Prevent removal' ) }
-								checked={ lock.remove }
-								onChange={ ( remove ) =>
-									setLock( ( prevLock ) => ( {
-										...prevLock,
-										remove,
-									} ) )
-								}
-							/>
-							<Icon
-								className="block-editor-block-lock-modal__lock-icon"
-								icon={ lock.remove ? lockIcon : unlockIcon }
-							/>
+							<ul
+								role="list"
+								className="block-editor-block-lock-modal__checklist"
+							>
+								{ allowsEditLocking && (
+									<li className="block-editor-block-lock-modal__checklist-item">
+										<CheckboxControl
+											__nextHasNoMarginBottom
+											label={ __( 'Restrict editing' ) }
+											checked={ !! lock.edit }
+											onChange={ ( edit ) =>
+												setLock( ( prevLock ) => ( {
+													...prevLock,
+													edit,
+												} ) )
+											}
+										/>
+										<Icon
+											className="block-editor-block-lock-modal__lock-icon"
+											icon={
+												lock.edit
+													? lockIcon
+													: unlockIcon
+											}
+										/>
+									</li>
+								) }
+								<li className="block-editor-block-lock-modal__checklist-item">
+									<CheckboxControl
+										__nextHasNoMarginBottom
+										label={ __( 'Disable movement' ) }
+										checked={ lock.move }
+										onChange={ ( move ) =>
+											setLock( ( prevLock ) => ( {
+												...prevLock,
+												move,
+											} ) )
+										}
+									/>
+									<Icon
+										className="block-editor-block-lock-modal__lock-icon"
+										icon={
+											lock.move ? lockIcon : unlockIcon
+										}
+									/>
+								</li>
+								<li className="block-editor-block-lock-modal__checklist-item">
+									<CheckboxControl
+										__nextHasNoMarginBottom
+										label={ __( 'Prevent removal' ) }
+										checked={ lock.remove }
+										onChange={ ( remove ) =>
+											setLock( ( prevLock ) => ( {
+												...prevLock,
+												remove,
+											} ) )
+										}
+									/>
+									<Icon
+										className="block-editor-block-lock-modal__lock-icon"
+										icon={
+											lock.remove ? lockIcon : unlockIcon
+										}
+									/>
+								</li>
+							</ul>
 						</li>
 					</ul>
+					{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 					{ hasTemplateLock && (
 						<ToggleControl
 							__nextHasNoMarginBottom
@@ -197,7 +210,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							}
 						/>
 					) }
-				</div>
+				</fieldset>
 				<Flex
 					className="block-editor-block-lock-modal__actions"
 					justify="flex-end"

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

@@ -8,17 +8,27 @@
 	}
 }
 
+.block-editor-block-lock-modal__options {
+	margin-top: $grid-unit-20;
+
+	legend {
+		margin-bottom: $grid-unit-20;
+		padding: 0;
+	}
+}
+
 .block-editor-block-lock-modal__checklist {
 	margin: 0;
 }
 
-.block-editor-block-lock-modal__options-title {
+.block-editor-block-lock-modal__options-all {
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
 }
+
 .block-editor-block-lock-modal__checklist-item {
 	display: flex;
 	justify-content: space-between;

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

@@ -25,7 +25,14 @@ function BlockMover( {
 	isBlockMoverUpButtonDisabled,
 	isBlockMoverDownButtonDisabled,
 } ) {
-	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
+	const {
+		canMove,
+		rootClientId,
+		isFirst,
+		isLast,
+		orientation,
+		isManualGrid,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockIndex,
@@ -33,6 +40,7 @@ function BlockMover( {
 				canMoveBlocks,
 				getBlockOrder,
 				getBlockRootClientId,
+				getBlockAttributes,
 			} = select( blockEditorStore );
 			const normalizedClientIds = Array.isArray( clientIds )
 				? clientIds
@@ -44,6 +52,7 @@ function BlockMover( {
 				normalizedClientIds[ normalizedClientIds.length - 1 ]
 			);
 			const blockOrder = getBlockOrder( _rootClientId );
+			const { layout = {} } = getBlockAttributes( _rootClientId ) ?? {};
 
 			return {
 				canMove: canMoveBlocks( clientIds ),
@@ -51,6 +60,10 @@ function BlockMover( {
 				isFirst: firstIndex === 0,
 				isLast: lastIndex === blockOrder.length - 1,
 				orientation: getBlockListSettings( _rootClientId )?.orientation,
+				isManualGrid:
+					layout.type === 'grid' &&
+					!! layout.columnCount &&
+					window.__experimentalEnableGridInteractivity,
 			};
 		},
 		[ clientIds ]
@@ -60,8 +73,6 @@ function BlockMover( {
 		return null;
 	}
 
-	const dragHandleLabel = __( 'Drag' );
-
 	return (
 		<ToolbarGroup
 			className={ clsx( 'block-editor-block-mover', {
@@ -75,7 +86,7 @@ function BlockMover( {
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
 							aria-hidden="true"
-							label={ dragHandleLabel }
+							label={ __( 'Drag' ) }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
 							tabIndex="-1"
@@ -84,26 +95,28 @@ function BlockMover( {
 					) }
 				</BlockDraggable>
 			) }
-			<div className="block-editor-block-mover__move-button-container">
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverUpButton
-							disabled={ isBlockMoverUpButtonDisabled }
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverDownButton
-							disabled={ isBlockMoverDownButtonDisabled }
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-			</div>
+			{ ! isManualGrid && (
+				<div className="block-editor-block-mover__move-button-container">
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverUpButton
+								disabled={ isBlockMoverUpButtonDisabled }
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverDownButton
+								disabled={ isBlockMoverDownButtonDisabled }
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				</div>
+			) }
 		</ToolbarGroup>
 	);
 }

package/src/components/block-toolbar/shuffle.js

@@ -60,7 +60,9 @@ export default function Shuffle( { clientId, as = Container } ) {
 				pattern.blocks.length === 1 &&
 				pattern.categories?.some( ( category ) => {
 					return categories.includes( category );
-				} )
+				} ) &&
+				// Check if the pattern is not a synced pattern.
+				( pattern.syncStatus === 'unsynced' || ! pattern.id )
 			);
 		} );
 	}, [ categories, patterns ] );