@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/block-list/block.js

@@ -19,6 +19,8 @@ import {
 	serializeRawBlock,
 	switchToBlockType,
 	store as blocksStore,
+	getDefaultBlockName,
+	isUnmodifiedBlock,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -40,7 +42,7 @@ import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
-
+import { useLayout } from './layout';
 export const BlockListBlockContext = createContext();
 
 /**
@@ -130,6 +132,8 @@ function BlockListBlock( {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
+	const parentLayout = useLayout() || {};
+
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
 	// (InspectorControls, etc.) which are inside `BlockEdit` but not
@@ -148,6 +152,9 @@ function BlockListBlock( {
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
 			__unstableLayoutClassNames={ layoutClassNames }
+			__unstableParentLayout={
+				Object.keys( parentLayout ).length ? parentLayout : undefined
+			}
 		/>
 	);
 
@@ -308,7 +315,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 		__unstableMarkLastChangeAsPersistent,
 		moveBlocksToPosition,
 		removeBlock,
-		selectBlock,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
@@ -345,8 +351,71 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				getBlockAttributes,
 				getBlockName,
 				getBlockOrder,
+				getBlockIndex,
+				getBlockRootClientId,
+				canInsertBlockType,
 			} = registry.select( blockEditorStore );
 
+			/**
+			 * Moves the block with clientId up one level. If the block type
+			 * cannot be inserted at the new location, it will be attempted to
+			 * convert to the default block type.
+			 *
+			 * @param {string}  _clientId       The block to move.
+			 * @param {boolean} changeSelection Whether to change the selection
+			 *                                  to the moved block.
+			 */
+			function moveFirstItemUp( _clientId, changeSelection = true ) {
+				const targetRootClientId = getBlockRootClientId( _clientId );
+				const blockOrder = getBlockOrder( _clientId );
+				const [ firstClientId ] = blockOrder;
+
+				if (
+					blockOrder.length === 1 &&
+					isUnmodifiedBlock( getBlock( firstClientId ) )
+				) {
+					removeBlock( _clientId );
+				} else {
+					if (
+						canInsertBlockType(
+							getBlockName( firstClientId ),
+							targetRootClientId
+						)
+					) {
+						moveBlocksToPosition(
+							[ firstClientId ],
+							_clientId,
+							targetRootClientId,
+							getBlockIndex( _clientId )
+						);
+					} else {
+						const replacement = switchToBlockType(
+							getBlock( firstClientId ),
+							getDefaultBlockName()
+						);
+
+						if ( replacement && replacement.length ) {
+							registry.batch( () => {
+								insertBlocks(
+									replacement,
+									getBlockIndex( _clientId ),
+									targetRootClientId,
+									changeSelection
+								);
+								removeBlock( firstClientId, false );
+							} );
+						}
+					}
+
+					if (
+						! getBlockOrder( _clientId ).length &&
+						isUnmodifiedBlock( getBlock( _clientId ) )
+					) {
+						removeBlock( _clientId, false );
+					}
+				}
+			}
+
 			// For `Delete` or forward merge, we should do the exact same thing
 			// as `Backspace`, but from the other block.
 			if ( forward ) {
@@ -397,15 +466,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					return;
 				}
 
-				// Check if it's possibile to "unwrap" the following block
-				// before trying to merge.
-				const replacement = switchToBlockType(
-					getBlock( nextBlockClientId ),
-					'*'
-				);
-
-				if ( replacement && replacement.length ) {
-					replaceBlocks( nextBlockClientId, replacement );
+				if ( getBlockOrder( nextBlockClientId ).length ) {
+					moveFirstItemUp( nextBlockClientId, false );
 				} else {
 					mergeBlocks( clientId, nextBlockClientId );
 				}
@@ -450,18 +512,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 						}
 					}
 
-					// Attempt to "unwrap" the block contents when there's no
-					// preceding block to merge with.
-					const replacement = switchToBlockType(
-						getBlock( rootClientId ),
-						'*'
-					);
-					if ( replacement && replacement.length ) {
-						registry.batch( () => {
-							replaceBlocks( rootClientId, replacement );
-							selectBlock( replacement[ 0 ].clientId, 0 );
-						} );
-					}
+					moveFirstItemUp( rootClientId );
 				}
 			}
 		},

package/src/components/block-list/block.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
-import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,6 +20,8 @@ import {
 	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 	switchToBlockType,
+	getDefaultBlockName,
+	isUnmodifiedBlock,
 } from '@wordpress/blocks';
 import { useSetting } from '@wordpress/block-editor';
 
@@ -33,6 +34,7 @@ import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
+import { useLayout } from './layout';
 
 const emptyArray = [];
 function BlockForType( {
@@ -74,10 +76,16 @@ function BlockForType( {
 		// Thanks to the JSON.stringify we check if the value is the same instead of reference.
 		JSON.stringify( wrapperProps.style ),
 		JSON.stringify(
-			pick( attributes, GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES )
+			Object.fromEntries(
+				Object.entries( attributes ?? {} ).filter( ( [ key ] ) =>
+					GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES.includes( key )
+				)
+			)
 		),
 	] );
 
+	const parentLayout = useLayout();
+
 	return (
 		<GlobalStylesContext.Provider value={ mergedStyle }>
 			<BlockEdit
@@ -99,6 +107,7 @@ function BlockForType( {
 				onDeleteBlock={ onDeleteBlock }
 				blockWidth={ blockWidth }
 				parentBlockAlignment={ parentBlockAlignment }
+				__unstableParentLayout={ parentLayout }
 			/>
 			<View onLayout={ getBlockWidth } />
 		</GlobalStylesContext.Provider>
@@ -429,8 +438,72 @@ export default compose( [
 					getBlockAttributes,
 					getBlockName,
 					getBlockOrder,
+					getBlockIndex,
+					getBlockRootClientId,
+					canInsertBlockType,
 				} = registry.select( blockEditorStore );
 
+				/**
+				 * Moves the block with clientId up one level. If the block type
+				 * cannot be inserted at the new location, it will be attempted to
+				 * convert to the default block type.
+				 *
+				 * @param {string}  _clientId       The block to move.
+				 * @param {boolean} changeSelection Whether to change the selection
+				 *                                  to the moved block.
+				 */
+				function moveFirstItemUp( _clientId, changeSelection = true ) {
+					const targetRootClientId =
+						getBlockRootClientId( _clientId );
+					const blockOrder = getBlockOrder( _clientId );
+					const [ firstClientId ] = blockOrder;
+
+					if (
+						blockOrder.length === 1 &&
+						isUnmodifiedBlock( getBlock( firstClientId ) )
+					) {
+						removeBlock( _clientId );
+					} else {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if ( replacement && replacement.length ) {
+								registry.batch( () => {
+									insertBlocks(
+										replacement,
+										getBlockIndex( _clientId ),
+										targetRootClientId,
+										changeSelection
+									);
+									removeBlock( firstClientId, false );
+								} );
+							}
+						}
+
+						if (
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					}
+				}
+
 				// For `Delete` or forward merge, we should do the exact same thing
 				// as `Backspace`, but from the other block.
 				if ( forward ) {
@@ -481,15 +554,8 @@ export default compose( [
 						return;
 					}
 
-					// Check if it's possibile to "unwrap" the following block
-					// before trying to merge.
-					const replacement = switchToBlockType(
-						getBlock( nextBlockClientId ),
-						'*'
-					);
-
-					if ( replacement && replacement.length ) {
-						replaceBlocks( nextBlockClientId, replacement );
+					if ( getBlockOrder( nextBlockClientId ).length ) {
+						moveFirstItemUp( nextBlockClientId, false );
 					} else {
 						mergeBlocks( clientId, nextBlockClientId );
 					}
@@ -534,18 +600,7 @@ export default compose( [
 							}
 						}
 
-						// Attempt to "unwrap" the block contents when there's no
-						// preceding block to merge with.
-						const replacement = switchToBlockType(
-							getBlock( rootClientId ),
-							'*'
-						);
-						if ( replacement && replacement.length ) {
-							registry.batch( () => {
-								replaceBlocks( rootClientId, replacement );
-								selectBlock( replacement[ 0 ].clientId, 0 );
-							} );
-						}
+						moveFirstItemUp( rootClientId );
 					}
 				}
 			},

package/src/components/block-list/{style.scss → content.scss}

@@ -290,11 +290,16 @@
 			cursor: unset;
 		}
 
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
-		border-radius: $radius-block-ui;
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		&::after {
+			content: "";
+			position: absolute;
+			pointer-events: none;
+			top: $border-width;
+			left: $border-width;
+			right: $border-width;
+			bottom: $border-width;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-radius: $radius-block-ui;
 		}
 	}
 }
@@ -425,22 +430,8 @@
 	}
 }
 
-/** Zoom Out mode styles **/
 .block-editor-iframe__body {
+	background-color: $white;
 	transition: all 0.3s;
 	transform-origin: top center;
-
-	&.is-zoomed-out {
-		margin: 100px 0;
-		transform: scale(0.45);
-
-		// Add a bit more space between the top level blocks.
-		.wp-site-blocks > * + * {
-			margin-block-start: 2.5rem;
-		}
-
-		> .block-list-appender {
-			display: none;
-		}
-	}
 }

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

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useReducer } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
-import { lock, unlock } from '@wordpress/icons';
+import { lockOutline, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -28,7 +28,10 @@ export default function BlockLockMenuItem( { clientId } ) {
 
 	return (
 		<>
-			<MenuItem icon={ isLocked ? unlock : lock } onClick={ toggleModal }>
+			<MenuItem
+				icon={ isLocked ? unlock : lockOutline }
+				onClick={ toggleModal }
+			>
 				{ label }
 			</MenuItem>
 			{ isModalOpen && (

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

@@ -114,6 +114,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					className="block-editor-block-lock-modal__options"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						className="block-editor-block-lock-modal__options-title"
 						label={
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
@@ -134,18 +135,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 						{ allowsEditLocking && (
 							<li className="block-editor-block-lock-modal__checklist-item">
 								<CheckboxControl
-									label={
-										<>
-											{ __( 'Restrict editing' ) }
-											<Icon
-												icon={
-													lock.edit
-														? lockIcon
-														: unlockIcon
-												}
-											/>
-										</>
-									}
+									__nextHasNoMarginBottom
+									label={ __( 'Restrict editing' ) }
 									checked={ !! lock.edit }
 									onChange={ ( edit ) =>
 										setLock( ( prevLock ) => ( {
@@ -154,22 +145,16 @@ export default function BlockLockModal( { clientId, onClose } ) {
 										} ) )
 									}
 								/>
+								<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
-								label={
-									<>
-										{ __( 'Disable movement' ) }
-										<Icon
-											icon={
-												lock.move
-													? lockIcon
-													: unlockIcon
-											}
-										/>
-									</>
-								}
+								__nextHasNoMarginBottom
+								label={ __( 'Disable movement' ) }
 								checked={ lock.move }
 								onChange={ ( move ) =>
 									setLock( ( prevLock ) => ( {
@@ -178,21 +163,15 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									} ) )
 								}
 							/>
+							<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
-								label={
-									<>
-										{ __( 'Prevent removal' ) }
-										<Icon
-											icon={
-												lock.remove
-													? lockIcon
-													: unlockIcon
-											}
-										/>
-									</>
-								}
+								__nextHasNoMarginBottom
+								label={ __( 'Prevent removal' ) }
 								checked={ lock.remove }
 								onChange={ ( remove ) =>
 									setLock( ( prevLock ) => ( {
@@ -201,6 +180,10 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									} ) )
 								}
 							/>
+							<Icon
+								className="block-editor-block-lock-modal__lock-icon"
+								icon={ lock.remove ? lockIcon : unlockIcon }
+							/>
 						</li>
 					</ul>
 					{ hasTemplateLock && (

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

@@ -22,29 +22,20 @@
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
-		margin: 0;
 	}
 }
 .block-editor-block-lock-modal__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: $grid-unit-15;
 	margin-bottom: 0;
 	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
 
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin: 0;
-	}
-
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-
-		svg {
-			margin-right: $grid-unit-15;
-			fill: $gray-900;
-		}
+	.block-editor-block-lock-modal__lock-icon {
+		flex-shrink: 0;
+		margin-right: $grid-unit-15;
+		fill: $gray-900;
 	}
 
 	&:hover {

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -23,12 +23,14 @@ import {
 	isReusableBlock,
 } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { withDispatch, withSelect, useSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { moreHorizontalMobile } from '@wordpress/icons';
 import { useRef, useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -78,6 +80,12 @@ const BlockActionsMenu = ( {
 		clipboardBlock &&
 		canInsertBlockType( clipboardBlock.name, rootClientId );
 
+	const innerBlockCount = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockCount( selectedBlockClientId ),
+		[ selectedBlockClientId ]
+	);
+
 	const {
 		actionTitle: {
 			backward: backwardButtonTitle,
@@ -187,13 +195,21 @@ const BlockActionsMenu = ( {
 		},
 		convertToRegularBlocks: {
 			id: 'convertToRegularBlocksOption',
-			label: __( 'Convert to regular blocks' ),
+			label:
+				innerBlockCount > 1
+					? __( 'Convert to regular blocks' )
+					: __( 'Convert to regular block' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
+				const successNotice =
+					innerBlockCount > 1
+						? /* translators: %s: name of the reusable block */
+						  __( '%s converted to regular blocks' )
+						: /* translators: %s: name of the reusable block */
+						  __( '%s converted to regular block' );
 				createSuccessNotice(
 					sprintf(
-						/* translators: %s: name of the reusable block */
-						__( '%s converted to regular blocks' ),
+						successNotice,
 						reusableBlock?.title?.raw || blockTitle
 					)
 				);
@@ -293,6 +309,8 @@ const BlockActionsMenu = ( {
 	);
 };
 
+const EMPTY_BLOCK_LIST = [];
+
 export default compose(
 	withSelect( ( select, { clientIds } ) => {
 		const {
@@ -345,8 +363,8 @@ export default compose(
 			? getBlocksByClientId( selectedBlockClientId )[ 0 ]
 			: undefined;
 		const selectedBlockPossibleTransformations = selectedBlock
-			? getBlockTransformItems( [ selectedBlock ], rootClientId )
-			: [];
+			? getBlockTransformItems( selectedBlock, rootClientId )
+			: EMPTY_BLOCK_LIST;
 
 		const isReusableBlockType = block ? isReusableBlock( block ) : false;
 		const reusableBlock = isReusableBlockType

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

@@ -15,7 +15,6 @@
 				// Focus style.
 				&::before {
 					height: calc(100% - 4px);
-					width: calc(100% - 4px);
 				}
 			}
 

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -15,7 +15,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -75,7 +74,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}

package/src/components/block-pattern-setup/index.js

@@ -138,8 +138,9 @@ const BlockPatternSetup = ( {
 	blockName,
 	filterPatternsFn,
 	onBlockPatternSelect,
+	initialViewMode = VIEWMODES.carousel,
 } ) => {
-	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
+	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );