@wordpress/block-editor 10.5.0 → 11.0.0

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -38,7 +37,11 @@ export const Edit = ( props ) => {
 	// Assign context values using the block type's declared context needs.
 	const context = useMemo( () => {
 		return blockType && blockType.usesContext
-			? pick( blockContext, blockType.usesContext )
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						blockType.usesContext.includes( key )
+					)
+			  )
 			: DEFAULT_BLOCK_CONTEXT;
 	}, [ blockType, blockContext ] );
 

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,7 +29,11 @@ export const Edit = ( props ) => {
 	// Assign context values using the block type's declared context needs.
 	const context = useMemo( () => {
 		return blockType && blockType.usesContext
-			? pick( blockContext, blockType.usesContext )
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						blockType.usesContext.includes( key )
+					)
+			  )
 			: DEFAULT_BLOCK_CONTEXT;
 	}, [ blockType, blockContext ] );
 

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

@@ -9,9 +9,8 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import {
-	PanelBody,
-	__experimentalUseSlotFills as useSlotFills,
 	FlexItem,
+	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
@@ -24,20 +23,20 @@ import { useMemo, useCallback } from '@wordpress/element';
  */
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
-import {
-	default as InspectorControls,
-	InspectorAdvancedControls,
-} from '../inspector-controls';
-import BlockStyles from '../block-styles';
 import MultiSelectionInspector from '../multi-selection-inspector';
-import DefaultStylePicker from '../default-style-picker';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
+import BlockStyles from '../block-styles';
+import DefaultStylePicker from '../default-style-picker';
+import { default as InspectorControls } from '../inspector-controls';
+import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
+import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
+import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 function useContentBlocks( blockTypes, block ) {
-	const contenBlocksObjectAux = useMemo( () => {
+	const contentBlocksObjectAux = useMemo( () => {
 		return blockTypes.reduce( ( result, blockType ) => {
 			if (
 				blockType.name !== 'core/list-item' &&
@@ -53,7 +52,7 @@ function useContentBlocks( blockTypes, block ) {
 	}, [ blockTypes ] );
 	const isContentBlock = useCallback(
 		( blockName ) => {
-			return !! contenBlocksObjectAux[ blockName ];
+			return !! contentBlocksObjectAux[ blockName ];
 		},
 		[ blockTypes ]
 	);
@@ -108,7 +107,10 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentBlocks = useContentBlocks( blockTypes, block );
 	return (
 		<div className="block-editor-block-inspector">
-			<BlockCard { ...blockInformation } />
+			<BlockCard
+				{ ...blockInformation }
+				className={ blockInformation.isSynced && 'is-synced' }
+			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<VStack
 				spacing={ 1 }
@@ -166,28 +168,37 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		};
 	}, [] );
 
+	const availableTabs = useInspectorControlsTabs( blockType?.name );
+	const showTabs = availableTabs?.length > 1;
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot />
-				<InspectorControls.Slot
-					__experimentalGroup="color"
-					label={ __( 'Color' ) }
-					className="color-block-support-panel__inner-wrapper"
-				/>
-				<InspectorControls.Slot
-					__experimentalGroup="typography"
-					label={ __( 'Typography' ) }
-				/>
-				<InspectorControls.Slot
-					__experimentalGroup="dimensions"
-					label={ __( 'Dimensions' ) }
-				/>
-				<InspectorControls.Slot
-					__experimentalGroup="border"
-					label={ __( 'Border' ) }
-				/>
+				{ showTabs ? (
+					<InspectorControlsTabs tabs={ availableTabs } />
+				) : (
+					<>
+						<InspectorControls.Slot />
+						<InspectorControls.Slot
+							__experimentalGroup="color"
+							label={ __( 'Color' ) }
+							className="color-block-support-panel__inner-wrapper"
+						/>
+						<InspectorControls.Slot
+							__experimentalGroup="typography"
+							label={ __( 'Typography' ) }
+						/>
+						<InspectorControls.Slot
+							__experimentalGroup="dimensions"
+							label={ __( 'Dimensions' ) }
+						/>
+						<InspectorControls.Slot
+							__experimentalGroup="border"
+							label={ __( 'Border' ) }
+						/>
+					</>
+				) }
 			</div>
 		);
 	}
@@ -229,6 +240,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 };
 
 const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+	const availableTabs = useInspectorControlsTabs( blockName );
+	const showTabs = availableTabs?.length > 1;
+
 	const hasBlockStyles = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -238,67 +252,68 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
+
 	return (
 		<div className="block-editor-block-inspector">
-			<BlockCard { ...blockInformation } />
+			<BlockCard
+				{ ...blockInformation }
+				className={ blockInformation.isSynced && 'is-synced' }
+			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
-			{ hasBlockStyles && (
-				<div>
-					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles clientId={ clientId } />
-						{ hasBlockSupport(
-							blockName,
-							'defaultStylePicker',
-							true
-						) && <DefaultStylePicker blockName={ blockName } /> }
-					</PanelBody>
-				</div>
+			{ showTabs && (
+				<InspectorControlsTabs
+					hasBlockStyles={ hasBlockStyles }
+					clientId={ clientId }
+					blockName={ blockName }
+					tabs={ availableTabs }
+				/>
+			) }
+			{ ! showTabs && (
+				<>
+					{ hasBlockStyles && (
+						<div>
+							<PanelBody title={ __( 'Styles' ) }>
+								<BlockStyles clientId={ clientId } />
+								{ hasBlockSupport(
+									blockName,
+									'defaultStylePicker',
+									true
+								) && (
+									<DefaultStylePicker
+										blockName={ blockName }
+									/>
+								) }
+							</PanelBody>
+						</div>
+					) }
+					<InspectorControls.Slot />
+					<InspectorControls.Slot
+						__experimentalGroup="color"
+						label={ __( 'Color' ) }
+						className="color-block-support-panel__inner-wrapper"
+					/>
+					<InspectorControls.Slot
+						__experimentalGroup="typography"
+						label={ __( 'Typography' ) }
+					/>
+					<InspectorControls.Slot
+						__experimentalGroup="dimensions"
+						label={ __( 'Dimensions' ) }
+					/>
+					<InspectorControls.Slot
+						__experimentalGroup="border"
+						label={ __( 'Border' ) }
+					/>
+					<div>
+						<AdvancedControls />
+					</div>
+				</>
 			) }
-			<InspectorControls.Slot />
-			<InspectorControls.Slot
-				__experimentalGroup="color"
-				label={ __( 'Color' ) }
-				className="color-block-support-panel__inner-wrapper"
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="typography"
-				label={ __( 'Typography' ) }
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="dimensions"
-				label={ __( 'Dimensions' ) }
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="border"
-				label={ __( 'Border' ) }
-			/>
-			<div>
-				<AdvancedControls />
-			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = () => {
-	const fills = useSlotFills( InspectorAdvancedControls.slotName );
-	const hasFills = Boolean( fills && fills.length );
-
-	if ( ! hasFills ) {
-		return null;
-	}
-
-	return (
-		<PanelBody
-			className="block-editor-block-inspector__advanced"
-			title={ __( 'Advanced' ) }
-			initialOpen={ false }
-		>
-			<InspectorControls.Slot __experimentalGroup="advanced" />
-		</PanelBody>
-	);
-};
-
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
  */

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

@@ -27,7 +27,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 +36,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;
-		}
-	}
 }