@wordpress/block-editor 10.5.0 → 11.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.5.0",
+	"version": "11.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,37 +33,39 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.22.0",
-		"@wordpress/api-fetch": "^6.19.0",
-		"@wordpress/blob": "^3.22.0",
-		"@wordpress/blocks": "^11.21.0",
-		"@wordpress/components": "^22.1.0",
-		"@wordpress/compose": "^5.20.0",
-		"@wordpress/data": "^7.6.0",
-		"@wordpress/date": "^4.22.0",
-		"@wordpress/deprecated": "^3.22.0",
-		"@wordpress/dom": "^3.22.0",
-		"@wordpress/element": "^4.20.0",
-		"@wordpress/hooks": "^3.22.0",
-		"@wordpress/html-entities": "^3.22.0",
-		"@wordpress/i18n": "^4.22.0",
-		"@wordpress/icons": "^9.13.0",
-		"@wordpress/is-shallow-equal": "^4.22.0",
-		"@wordpress/keyboard-shortcuts": "^3.20.0",
-		"@wordpress/keycodes": "^3.22.0",
-		"@wordpress/notices": "^3.22.0",
-		"@wordpress/rich-text": "^5.20.0",
-		"@wordpress/shortcode": "^3.22.0",
-		"@wordpress/style-engine": "^1.5.0",
-		"@wordpress/token-list": "^2.22.0",
-		"@wordpress/url": "^3.23.0",
-		"@wordpress/warning": "^2.22.0",
-		"@wordpress/wordcount": "^3.22.0",
+		"@wordpress/a11y": "^3.24.0",
+		"@wordpress/api-fetch": "^6.21.0",
+		"@wordpress/blob": "^3.24.0",
+		"@wordpress/blocks": "^12.1.0",
+		"@wordpress/components": "^23.1.0",
+		"@wordpress/compose": "^6.1.0",
+		"@wordpress/data": "^8.1.0",
+		"@wordpress/date": "^4.24.0",
+		"@wordpress/deprecated": "^3.24.0",
+		"@wordpress/dom": "^3.24.0",
+		"@wordpress/element": "^5.1.0",
+		"@wordpress/escape-html": "^2.24.0",
+		"@wordpress/hooks": "^3.24.0",
+		"@wordpress/html-entities": "^3.24.0",
+		"@wordpress/i18n": "^4.24.0",
+		"@wordpress/icons": "^9.15.0",
+		"@wordpress/is-shallow-equal": "^4.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.1.0",
+		"@wordpress/keycodes": "^3.24.0",
+		"@wordpress/notices": "^3.24.0",
+		"@wordpress/rich-text": "^6.1.0",
+		"@wordpress/shortcode": "^3.24.0",
+		"@wordpress/style-engine": "^1.7.0",
+		"@wordpress/token-list": "^2.24.0",
+		"@wordpress/url": "^3.25.0",
+		"@wordpress/warning": "^2.24.0",
+		"@wordpress/wordcount": "^3.24.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
+		"fast-deep-equal": "^3.1.3",
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
@@ -73,11 +75,11 @@
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
 }

package/src/autocompleters/block.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { orderBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,7 @@ import { searchBlockItems } from '../components/inserter/search-items';
 import useBlockTypesState from '../components/inserter/hooks/use-block-types-state';
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
+import { orderBy } from '../utils/sorting';
 
 const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
@@ -68,7 +64,7 @@ function createBlockCompleter() {
 							collections,
 							filterValue
 					  )
-					: orderBy( items, [ 'frecency' ], [ 'desc' ] );
+					: orderBy( items, 'frecency', 'desc' );
 
 				return initialFilteredItems
 					.filter( ( item ) => item.name !== selectedBlockName )

package/src/autocompleters/link.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Icon, page, post } from '@wordpress/icons';

package/src/components/alignment-control/test/index.js

@@ -14,6 +14,8 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
@@ -52,7 +54,7 @@ describe( 'AlignmentUI', () => {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
 
-		render(
+		const { unmount } = render(
 			<AlignmentUI
 				isToolbar
 				value={ alignment }
@@ -77,6 +79,9 @@ describe( 'AlignmentUI', () => {
 				name: /^Align text \w+$/,
 			} )
 		).toHaveLength( 3 );
+
+		// Cancel running effects, like delayed dropdown menu popover positioning.
+		unmount();
 	} );
 
 	test( 'should call on change with undefined when a control is already active', async () => {

package/src/components/alignment-control/ui.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,8 +41,7 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 

package/src/components/block-alignment-control/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();
@@ -47,7 +49,7 @@ describe( 'BlockAlignmentUI', () => {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
 
-		render(
+		const { unmount } = render(
 			<BlockAlignmentUI
 				value={ alignment }
 				onChange={ onChange }
@@ -72,6 +74,9 @@ describe( 'BlockAlignmentUI', () => {
 				name: /^Align \w+$/,
 			} )
 		).toHaveLength( 3 );
+
+		// Cancel running effects, like delayed dropdown menu popover positioning.
+		unmount();
 	} );
 
 	test( 'should call onChange with undefined, when the control is already active', async () => {

package/src/components/block-alignment-control/use-available-alignments.js

@@ -10,6 +10,7 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
+const EMPTY_ARRAY = [];
 const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
@@ -40,14 +41,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
 		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
-			return [];
+			return EMPTY_ARRAY;
 		}
 		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
 	const enabledControls = controls
@@ -66,7 +67,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		enabledControls.length === 1 &&
 		enabledControls[ 0 ].name === 'none'
 	) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 
 	return enabledControls;

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

@@ -1,14 +1,24 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
+import { Button } from '@wordpress/components';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import { store as blockEditorStore } from '../../store';
 
-function BlockCard( { title, icon, description, blockType } ) {
+function BlockCard( { title, icon, description, blockType, className } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -16,8 +26,42 @@ function BlockCard( { title, icon, description, blockType } ) {
 		} );
 		( { title, icon, description } = blockType );
 	}
+
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+	const { parentNavBlockClientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+			select( blockEditorStore );
+
+		const _selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentNavBlockClientId: getBlockParentsByBlockName(
+				_selectedBlockClientId,
+				'core/navigation',
+				true
+			)[ 0 ],
+		};
+	}, [] );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
 	return (
-		<div className="block-editor-block-card">
+		<div className={ classnames( 'block-editor-block-card', className ) }>
+			{ isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && (
+				<Button
+					onClick={ () => selectBlock( parentNavBlockClientId ) }
+					label={ __( 'Go to parent Navigation block' ) }
+					style={
+						// TODO: This style override is also used in ToolsPanelHeader.
+						// It should be supported out-of-the-box by Button.
+						{ minWidth: 24, padding: 0 }
+					}
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					isSmall
+				/>
+			) }
 			<BlockIcon icon={ icon } showColors />
 			<div className="block-editor-block-card__content">
 				<h2 className="block-editor-block-card__title">{ title }</h2>

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

@@ -28,3 +28,7 @@
 	width: $button-size-small;
 	height: $button-size-small;
 }
+
+.block-editor-block-card.is-synced .block-editor-block-icon {
+	color: var(--wp-block-synced-color);
+}

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

@@ -19,10 +19,16 @@
 	}
 
 	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
+	&.is-reusable:hover:not(.is-dragging-blocks)::before,
+	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
+		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
+	}
+
 	&.is-selected:not(.is-dragging-blocks)::before {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}

package/src/components/block-draggable/content.scss

@@ -0,0 +1,20 @@
+// This creates a "slot" where the block you're dragging appeared.
+// We use !important as one of the rules are meant to be overriden.
+.block-editor-block-list__layout .is-dragging {
+	background-color: currentColor !important;
+	opacity: 0.05 !important;
+	border-radius: $radius-block-ui !important;
+
+	// Disabling pointer events during the drag event is necessary,
+	// lest the block might affect your drag operation.
+	pointer-events: none !important;
+
+	// Hide the multi selection indicator when dragging.
+	&::selection {
+		background: transparent !important;
+	}
+
+	&::after {
+		content: none !important;
+	}
+}

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

@@ -285,6 +285,58 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	);
 };
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
+function useIsEditingText() {
+	const [ isEditingText, setIsEditingText ] = useState( () =>
+		RCTAztecView.InputState.isFocused()
+	);
+
+	useEffect( () => {
+		const onFocusChangeAztec = ( { isFocused } ) => {
+			setIsEditingText( isFocused );
+		};
+
+		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
+
+		return () => {
+			RCTAztecView.InputState.removeFocusChangeListener(
+				onFocusChangeAztec
+			);
+		};
+	}, [] );
+
+	return isEditingText;
+}
+
 /**
  * Block draggable component
  *
@@ -308,9 +360,8 @@ const BlockDraggable = ( {
 	testID,
 } ) => {
 	const wasBeingDragged = useRef( false );
-	const [ isEditingText, setIsEditingText ] = useState( false );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isEditingText = useIsEditingText();
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -365,43 +416,6 @@ const BlockDraggable = ( {
 		wasBeingDragged.current = isBeingDragged;
 	}, [ isBeingDragged ] );
 
-	const onFocusChangeAztec = useCallback( ( { isFocused } ) => {
-		setIsEditingText( isFocused );
-	}, [] );
-
-	useEffect( () => {
-		let mounted = true;
-
-		const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
-		if ( isAnyAztecInputFocused ) {
-			setIsEditingText( isAnyAztecInputFocused );
-		}
-
-		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
-
-		const screenReaderChangedListener = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			setIsScreenReaderEnabled
-		);
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				if ( mounted ) {
-					setIsScreenReaderEnabled( screenReaderEnabled );
-				}
-			}
-		);
-
-		return () => {
-			mounted = false;
-
-			RCTAztecView.InputState.removeFocusChangeListener(
-				onFocusChangeAztec
-			);
-
-			screenReaderChangedListener.remove();
-		};
-	}, [] );
-
 	const onLongPressDraggable = useCallback( () => {
 		// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
 		RCTAztecView.InputState.blurCurrentFocusedElement();

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

@@ -44,24 +44,3 @@
 		font-size: $default-font-size;
 	}
 }
-
-// This creates a "slot" where the block you're dragging appeared.
-// We use !important as one of the rules are meant to be overriden.
-.block-editor-block-list__layout .is-dragging {
-	background-color: currentColor !important;
-	opacity: 0.05 !important;
-	border-radius: $radius-block-ui !important;
-
-	// Disabling pointer events during the drag event is necessary,
-	// lest the block might affect your drag operation.
-	pointer-events: none !important;
-
-	// Hide the multi selection indicator when dragging.
-	&::selection {
-		background: transparent !important;
-	}
-
-	&::after {
-		content: none !important;
-	}
-}

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

@@ -53,14 +53,14 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
 
 	const screen = await initializeEditor( { initialHtml } );
-	const { getByLabelText } = screen;
+	const { getAllByLabelText } = screen;
 
 	const waitPromises = [];
 	blocks.forEach( ( block, index ) => {
 		const a11yLabel = new RegExp(
 			`${ block.name } Block\\. Row ${ index + 1 }`
 		);
-		const element = getByLabelText( a11yLabel );
+		const [ element ] = getAllByLabelText( a11yLabel );
 		// "onLayout" event will populate the blocks layouts data.
 		fireEvent( element, 'layout', {
 			nativeEvent: { layout: block.layout },
@@ -91,13 +91,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 				const nestedA11yLabel = new RegExp(
 					`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
 				);
-				fireEvent(
-					within( element ).getByLabelText( nestedA11yLabel ),
-					'layout',
-					{
-						nativeEvent: { layout: nestedBlock.layout },
-					}
-				);
+				const [ nestedElement ] =
+					within( element ).getAllByLabelText( nestedA11yLabel );
+				fireEvent( nestedElement, 'layout', {
+					nativeEvent: { layout: nestedBlock.layout },
+				} );
 			} );
 		}
 	} );