@wordpress/block-editor 10.5.0 → 11.1.0

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

@@ -17,6 +17,13 @@
 			margin-bottom: $grid-unit-10;
 		}
 	}
+
+	// Reset unexpected margin-bottom from being applied to the `BaseControl`
+	// component of the `FocalPointPicker` component.
+	.components-focal-point-picker-control .components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-panel__body {
 		border: none;
 		border-top: $border-width solid $gray-200;
@@ -27,7 +34,8 @@
 	}
 }
 
-.block-editor-block-inspector__no-blocks {
+.block-editor-block-inspector__no-blocks,
+.block-editor-block-inspector__no-block-tools {
 	display: block;
 	font-size: $default-font-size;
 	background: $white;
@@ -35,6 +43,13 @@
 	text-align: center;
 }
 
+.block-editor-block-inspector__no-block-tools {
+	border-top: $border-width solid $gray-300;
+}
+
+.block-editor-block-inspector__tab-item {
+	flex: 1 1 0px;
+}
 
 .block-editor-block-inspector__block-buttons-container {
 	border-top: $border-width solid $gray-200;

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

@@ -1,12 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { orderBy } from 'lodash';
+import { createContext, useContext } from '@wordpress/element';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { createContext, useContext } from '@wordpress/element';
+import { orderBy } from '../../utils/sorting';
 
 export const DEFAULT_BLOCK_LIST_CONTEXT = {
 	scrollRef: null,
@@ -103,10 +103,7 @@ export function deleteBlockLayoutByClientId( data, clientId ) {
  */
 function getBlockLayoutsOrderedByYCoord( data ) {
 	// Only enabled for root level blocks.
-	// Using lodash orderBy due to hermes not having
-	// stable support for native .sort(). It will be
-	// supported in the React Native version 0.68.0.
-	return orderBy( data, [ 'y', 'asc' ] );
+	return orderBy( Object.values( data ), 'y' );
 }
 
 /**

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}

@@ -430,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-list-appender/index.js

@@ -16,67 +16,78 @@ import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
 
-function BlockListAppender( {
-	rootClientId,
-	renderAppender: CustomAppender,
-	className,
-	tagName: TagName = 'div',
-} ) {
-	const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } =
-		useSelect(
-			( select ) => {
-				const {
-					canInsertBlockType,
-					getTemplateLock,
-					getSelectedBlockClientId,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				return {
-					hideInserter:
-						!! getTemplateLock( rootClientId ) ||
-						__unstableGetEditorMode() === 'zoom-out',
-					canInsertDefaultBlock: canInsertBlockType(
-						getDefaultBlockName(),
-						rootClientId
-					),
-					selectedBlockClientId: getSelectedBlockClientId(),
-				};
-			},
-			[ rootClientId ]
-		);
+function DefaultAppender( { rootClientId } ) {
+	const canInsertDefaultBlock = useSelect( ( select ) =>
+		select( blockEditorStore ).canInsertBlockType(
+			getDefaultBlockName(),
+			rootClientId
+		)
+	);
+
+	if ( canInsertDefaultBlock ) {
+		// Render the default block appender if the context supports use
+		// of the default appender.
+		return <DefaultBlockAppender rootClientId={ rootClientId } />;
+	}
+
+	// Fallback in case the default block can't be inserted.
+	return (
+		<ButtonBlockAppender
+			rootClientId={ rootClientId }
+			className="block-list-appender__toggle"
+		/>
+	);
+}
+
+function useAppender( rootClientId, CustomAppender ) {
+	const { hideInserter, isParentSelected } = useSelect(
+		( select ) => {
+			const {
+				getTemplateLock,
+				getSelectedBlockClientId,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				hideInserter:
+					!! getTemplateLock( rootClientId ) ||
+					__unstableGetEditorMode() === 'zoom-out',
+				isParentSelected:
+					rootClientId === selectedBlockClientId ||
+					( ! rootClientId && ! selectedBlockClientId ),
+			};
+		},
+		[ rootClientId ]
+	);
 
 	if ( hideInserter || CustomAppender === false ) {
 		return null;
 	}
 
-	let appender;
 	if ( CustomAppender ) {
 		// Prefer custom render prop if provided.
-		appender = <CustomAppender />;
-	} else {
-		const isParentSelected =
-			selectedBlockClientId === rootClientId ||
-			( ! rootClientId && ! selectedBlockClientId );
-
-		if ( ! isParentSelected ) {
-			return null;
-		}
-
-		if ( canInsertDefaultBlock ) {
-			// Render the default block appender when renderAppender has not been
-			// provided and the context supports use of the default appender.
-			appender = <DefaultBlockAppender rootClientId={ rootClientId } />;
-		} else {
-			// Fallback in the case no renderAppender has been provided and the
-			// default block can't be inserted.
-			appender = (
-				<ButtonBlockAppender
-					rootClientId={ rootClientId }
-					className="block-list-appender__toggle"
-				/>
-			);
-		}
+		return <CustomAppender />;
+	}
+
+	if ( ! isParentSelected ) {
+		return null;
+	}
+
+	return <DefaultAppender rootClientId={ rootClientId } />;
+}
+
+function BlockListAppender( {
+	rootClientId,
+	renderAppender,
+	className,
+	tagName: TagName = 'div',
+} ) {
+	const appender = useAppender( rootClientId, renderAppender );
+
+	if ( ! appender ) {
+		return null;
 	}
 
 	return (

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
@@ -11,14 +11,48 @@ import DefaultBlockAppender from '../default-block-appender';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
-function BlockListAppender( {
-	blockClientIds,
+function DefaultAppender( { rootClientId, showSeparator } ) {
+	const { blockClientIds, canInsertDefaultBlock } = useSelect(
+		( select ) => {
+			const { getBlockOrder, canInsertBlockType } =
+				select( blockEditorStore );
+			return {
+				blockClientIds: getBlockOrder( rootClientId ),
+				canInsertDefaultBlock: canInsertBlockType(
+					getDefaultBlockName(),
+					rootClientId
+				),
+			};
+		},
+		[ rootClientId ]
+	);
+
+	if ( ! canInsertDefaultBlock ) {
+		return null;
+	}
+
+	return (
+		<DefaultBlockAppender
+			rootClientId={ rootClientId }
+			lastBlockClientId={ blockClientIds[ blockClientIds.length - 1 ] }
+			containerStyle={ styles.blockListAppender }
+			placeholder={ blockClientIds.length > 0 ? '' : null }
+			showSeparator={ showSeparator }
+		/>
+	);
+}
+
+export default function BlockListAppender( {
 	rootClientId,
-	canInsertDefaultBlock,
-	isLocked,
 	renderAppender: CustomAppender,
 	showSeparator,
 } ) {
+	const isLocked = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).getTemplateLock( rootClientId ),
+		[ rootClientId ]
+	);
+
 	if ( isLocked ) {
 		return null;
 	}
@@ -27,33 +61,10 @@ function BlockListAppender( {
 		return <CustomAppender showSeparator={ showSeparator } />;
 	}
 
-	if ( canInsertDefaultBlock ) {
-		return (
-			<DefaultBlockAppender
-				rootClientId={ rootClientId }
-				lastBlockClientId={
-					blockClientIds[ blockClientIds.length - 1 ]
-				}
-				containerStyle={ styles.blockListAppender }
-				placeholder={ blockClientIds.length > 0 ? '' : null }
-				showSeparator={ showSeparator }
-			/>
-		);
-	}
-
-	return null;
+	return (
+		<DefaultAppender
+			rootClientId={ rootClientId }
+			showSeparator={ showSeparator }
+		/>
+	);
 }
-
-export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } =
-		select( blockEditorStore );
-
-	return {
-		isLocked: !! getTemplateLock( rootClientId ),
-		blockClientIds: getBlockOrder( rootClientId ),
-		canInsertDefaultBlock: canInsertBlockType(
-			getDefaultBlockName(),
-			rootClientId
-		),
-	};
-} )( BlockListAppender );