@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/block-draggable/test/index.native.js

@@ -93,11 +93,13 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 
 					// Start dragging from block's content
+					const [ paragraphBlock ] = screen.getAllByLabelText(
+						/Paragraph Block\. Row 1/
+					);
 					fireLongPress(
-						getByA11yLabel( /Paragraph Block\. Row 1/ ),
+						paragraphBlock,
 						'draggable-trigger-content'
 					);
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -112,12 +114,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
+
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const paragraphBlock = getByA11yLabel(
+					const [ paragraphBlock ] = screen.getAllByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 					fireEvent.press( paragraphBlock );
@@ -146,9 +148,8 @@ describe( 'BlockDraggable', () => {
 			it( 'does not enable drag mode when selected and editing text', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 
-					const paragraphBlock = getByA11yLabel(
+					const [ paragraphBlock ] = screen.getAllByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 
@@ -178,13 +179,12 @@ describe( 'BlockDraggable', () => {
 			it( 'finishes editing text and enables drag mode when long-pressing over a different block', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 
-					const paragraphBlock = getByA11yLabel(
+					const [ paragraphBlock ] = screen.getAllByLabelText(
 						/Paragraph Block\. Row 1/
 					);
-					const spacerBlock =
-						getByA11yLabel( /Spacer Block\. Row 3/ );
+					const [ spacerBlock ] =
+						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
 
 					// Select Paragraph block and start editing text
 					fireEvent.press( paragraphBlock );
@@ -208,12 +208,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getAllByA11yLabel } = screen;
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
-					const imageBlock =
-						getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
+					const [ imageBlock ] =
+						screen.getAllByLabelText( /Image Block\. Row 2/ );
 					// Start dragging from block's content
 					fireLongPress( imageBlock, 'draggable-trigger-content' );
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -228,15 +227,14 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getAllByA11yLabel } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
-					const imageBlock =
-						getAllByA11yLabel( /Image Block\. Row 2/ )[ 0 ];
+					const [ imageBlock ] =
+						screen.getAllByLabelText( /Image Block\. Row 2/ );
 					fireEvent.press( imageBlock );
 
 					// Start dragging from block's content
@@ -262,15 +260,15 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 
 					// Start dragging from block's content, specifically the first
 					// trigger index, which corresponds to the Gallery block content.
-					fireLongPress(
-						getByA11yLabel( /Gallery Block\. Row 4/ ),
-						'draggable-trigger-content',
-						{ triggerIndex: 0 }
+					const [ galleryBlock ] = screen.getAllByLabelText(
+						/Gallery Block\. Row 4/
 					);
+					fireLongPress( galleryBlock, 'draggable-trigger-content', {
+						triggerIndex: 0,
+					} );
 					expect( getDraggableChip( screen ) ).toBeVisible();
 
 					// "firePanGesture" finishes the dragging gesture
@@ -283,12 +281,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const galleryBlock = getByA11yLabel(
+					const [ galleryBlock ] = screen.getAllByLabelText(
 						/Gallery Block\. Row 4/
 					);
 					await waitForStoreResolvers( () =>
@@ -319,16 +316,15 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when nested block is selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const galleryBlock = getByA11yLabel(
+					const [ galleryBlock ] = screen.getAllByLabelText(
 						/Gallery Block\. Row 4/
 					);
-					const galleryItem =
-						within( galleryBlock ).getByA11yLabel(
+					const [ galleryItem ] =
+						within( galleryBlock ).getAllByLabelText(
 							/Image Block\. Row 2/
 						);
 					fireEvent.press( galleryBlock );
@@ -361,13 +357,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 
 					// Start dragging from block's content
-					fireLongPress(
-						getByA11yLabel( /Spacer Block\. Row 3/ ),
-						'draggable-trigger-content'
-					);
+					const [ spacerBlock ] =
+						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
+					fireLongPress( spacerBlock, 'draggable-trigger-content' );
 					expect( getDraggableChip( screen ) ).toBeVisible();
 
 					// "firePanGesture" finishes the dragging gesture
@@ -380,13 +374,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByA11yLabel } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const spacerBlock =
-						getByA11yLabel( /Spacer Block\. Row 3/ );
+					const [ spacerBlock ] =
+						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
 					await waitForStoreResolvers( () =>
 						fireEvent.press( spacerBlock )
 					);
@@ -413,9 +406,7 @@ describe( 'BlockDraggable', () => {
 
 	it( 'moves blocks', async () =>
 		withReanimatedTimer( async () => {
-			const { getByA11yLabel } = await initializeWithBlocksLayouts(
-				BLOCKS
-			);
+			const screen = await initializeWithBlocksLayouts( BLOCKS );
 			const blockDraggableWrapper = getByGestureTestId(
 				'block-draggable-wrapper'
 			);
@@ -423,10 +414,10 @@ describe( 'BlockDraggable', () => {
 			expect( getEditorHtml() ).toMatchSnapshot( 'Initial order' );
 
 			// Move Paragraph block from first to second position
-			fireLongPress(
-				getByA11yLabel( /Paragraph Block\. Row 1/ ),
-				'draggable-trigger-content'
+			const [ paragraphBlock ] = screen.getAllByLabelText(
+				/Paragraph Block\. Row 1/
 			);
+			fireLongPress( paragraphBlock, 'draggable-trigger-content' );
 			firePanGesture( blockDraggableWrapper, [
 				{
 					id: TOUCH_EVENT_ID,
@@ -453,10 +444,9 @@ describe( 'BlockDraggable', () => {
 			);
 
 			// Move Spacer block from third to first position
-			fireLongPress(
-				getByA11yLabel( /Spacer Block\. Row 3/ ),
-				'draggable-trigger-content'
-			);
+			const [ spacerBlock ] =
+				screen.getAllByLabelText( /Spacer Block\. Row 3/ );
+			fireLongPress( spacerBlock, 'draggable-trigger-content' );
 			firePanGesture( blockDraggableWrapper, [
 				{
 					id: TOUCH_EVENT_ID,

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' );
 }
 
 /**