@wordpress/block-editor 11.3.0 → 11.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.3.0",
+	"version": "11.3.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,34 +33,34 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.26.0",
-		"@wordpress/api-fetch": "^6.23.0",
-		"@wordpress/blob": "^3.26.0",
-		"@wordpress/blocks": "^12.3.0",
-		"@wordpress/components": "^23.3.0",
-		"@wordpress/compose": "^6.3.0",
-		"@wordpress/data": "^8.3.0",
-		"@wordpress/date": "^4.26.0",
-		"@wordpress/deprecated": "^3.26.0",
-		"@wordpress/dom": "^3.26.0",
-		"@wordpress/element": "^5.3.0",
-		"@wordpress/escape-html": "^2.26.0",
-		"@wordpress/experiments": "^0.8.0",
-		"@wordpress/hooks": "^3.26.0",
-		"@wordpress/html-entities": "^3.26.0",
-		"@wordpress/i18n": "^4.26.0",
-		"@wordpress/icons": "^9.17.0",
-		"@wordpress/is-shallow-equal": "^4.26.0",
-		"@wordpress/keyboard-shortcuts": "^4.3.0",
-		"@wordpress/keycodes": "^3.26.0",
-		"@wordpress/notices": "^3.26.0",
-		"@wordpress/rich-text": "^6.3.0",
-		"@wordpress/shortcode": "^3.26.0",
-		"@wordpress/style-engine": "^1.9.0",
-		"@wordpress/token-list": "^2.26.0",
-		"@wordpress/url": "^3.27.0",
-		"@wordpress/warning": "^2.26.0",
-		"@wordpress/wordcount": "^3.26.0",
+		"@wordpress/a11y": "^3.26.1",
+		"@wordpress/api-fetch": "^6.23.1",
+		"@wordpress/blob": "^3.26.1",
+		"@wordpress/blocks": "^12.3.1",
+		"@wordpress/components": "^23.3.1",
+		"@wordpress/compose": "^6.3.1",
+		"@wordpress/data": "^8.3.1",
+		"@wordpress/date": "^4.26.1",
+		"@wordpress/deprecated": "^3.26.1",
+		"@wordpress/dom": "^3.26.1",
+		"@wordpress/element": "^5.3.1",
+		"@wordpress/escape-html": "^2.26.1",
+		"@wordpress/experiments": "^0.8.1",
+		"@wordpress/hooks": "^3.26.1",
+		"@wordpress/html-entities": "^3.26.1",
+		"@wordpress/i18n": "^4.26.1",
+		"@wordpress/icons": "^9.17.1",
+		"@wordpress/is-shallow-equal": "^4.26.1",
+		"@wordpress/keyboard-shortcuts": "^4.3.1",
+		"@wordpress/keycodes": "^3.26.1",
+		"@wordpress/notices": "^3.26.1",
+		"@wordpress/rich-text": "^6.3.1",
+		"@wordpress/shortcode": "^3.26.1",
+		"@wordpress/style-engine": "^1.9.1",
+		"@wordpress/token-list": "^2.26.1",
+		"@wordpress/url": "^3.27.1",
+		"@wordpress/warning": "^2.26.1",
+		"@wordpress/wordcount": "^3.26.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cab6ebe2b4c5dbacfd753dcae4a2406559c4813c"
+	"gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
 }

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

@@ -58,6 +58,8 @@ export default function BlockActions( {
 		setBlockMovingClientId,
 		setNavigationMode,
 		selectBlock,
+		clearSelectedBlock,
+		multiSelect,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -132,6 +134,13 @@ export default function BlockActions( {
 		},
 		async onPasteStyles() {
 			await pasteStyles( blocks );
+
+			// Need to reselect the block(s) in order for optional tool panel control changes to register.
+			clearSelectedBlock();
+			multiSelect(
+				blocks[ 0 ].clientId,
+				blocks[ blocks.length - 1 ].clientId
+			);
 		},
 	} );
 }

package/src/components/iframe/index.js

@@ -19,6 +19,7 @@ import {
 	useResizeObserver,
 	useMergeRefs,
 	useRefEffect,
+	useDisabled,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -207,7 +208,13 @@ function Iframe( {
 				forceRender();
 			} );
 	}, [] );
-	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
+	const disabledRef = useDisabled( { isDisabled: ! readonly } );
+	const bodyRef = useMergeRefs( [
+		contentRef,
+		clearerRef,
+		writingFlowRef,
+		disabledRef,
+	] );
 
 	const styleAssets = (
 		<>
@@ -284,7 +291,6 @@ function Iframe( {
 									marginTop: frameSize,
 									transform: `scale( ${ scale } )`,
 								} }
-								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								<StyleProvider document={ iframeDocument }>

package/src/components/inserter/block-patterns-tab.js

@@ -195,6 +195,7 @@ function BlockPatternsTabs( {
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 	const categories = usePatternsCategories( rootClientId );
+	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
@@ -261,7 +262,7 @@ function BlockPatternsTabs( {
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ selectedCategory }
+					initialCategory={ initialCategory }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 				/>

package/src/components/inserter/menu.js

@@ -113,6 +113,13 @@ function InserterMenu(
 		[ onToggleInsertionPoint, setHoveredItem ]
 	);
 
+	const onHoverPattern = useCallback(
+		( item ) => {
+			onToggleInsertionPoint( !! item );
+		},
+		[ onToggleInsertionPoint ]
+	);
+
 	const onClickPatternCategory = useCallback(
 		( patternCategory ) => {
 			setSelectedPatternCategory( patternCategory );
@@ -296,7 +303,7 @@ function InserterMenu(
 				<BlockPatternsCategoryDialog
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
-					onHover={ onHover }
+					onHover={ onHoverPattern }
 					category={ selectedPatternCategory }
 					showTitlesAsTooltip
 				/>

package/src/components/off-canvas-editor/block-contents.js

@@ -12,6 +12,7 @@ import { forwardRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../experiments';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
@@ -52,7 +53,7 @@ const ListViewBlockContents = forwardRef(
 					hasBlockMovingClientId,
 					getSelectedBlockClientId,
 					getLastInsertedBlocksClientIds,
-				} = select( blockEditorStore );
+				} = unlock( select( blockEditorStore ) );
 				const lastInsertedBlocksClientIds =
 					getLastInsertedBlocksClientIds();
 				return {

package/src/components/off-canvas-editor/index.js

@@ -60,12 +60,23 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
+ * @param {string}  props.description     Optional accessible description for the tree grid component.
+ * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
-	{ id, blocks, showBlockMovers = false, isExpanded = false, LeafMoreMenu },
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		LeafMoreMenu,
+		description = __( 'Block navigation structure' ),
+		onSelect,
+	},
 	ref
 ) {
+	const { getBlock } = useSelect( blockEditorStore );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
@@ -105,8 +116,11 @@ function OffCanvasEditor(
 		( event, blockClientId ) => {
 			updateBlockSelection( event, blockClientId );
 			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -208,7 +222,8 @@ function OffCanvasEditor(
 					onCollapseRow={ collapseRow }
 					onExpandRow={ expandRow }
 					onFocusRow={ focusRow }
-					applicationAriaLabel={ __( 'Block navigation structure' ) }
+					// eslint-disable-next-line jsx-a11y/aria-props
+					aria-description={ description }
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch

package/src/hooks/position.js

@@ -365,6 +365,10 @@ export const withPositionStyles = createHigherOrderComponent(
 		// Attach a `wp-container-` id-based class name.
 		const className = classnames( props?.className, {
 			[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+			[ `is-position-${ attributes?.style?.position?.type }` ]:
+				allowPositionStyles &&
+				!! css &&
+				!! attributes?.style?.position?.type,
 		} );
 
 		return (

package/src/store/private-selectors.js

@@ -8,3 +8,13 @@
 export function isBlockInterfaceHidden( state ) {
 	return state.isBlockInterfaceHidden;
 }
+
+/**
+ * Gets the client ids of the last inserted blocks.
+ *
+ * @param {Object} state Global application state.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
+ */
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
+}

package/src/store/selectors.js

@@ -2703,16 +2703,6 @@ export function wasBlockJustInserted( state, clientId, source ) {
 	);
 }
 
-/**
- * Gets the client ids of the last inserted blocks.
- *
- * @param {Object} state Global application state.
- * @return {Array|undefined} Client Ids of the last inserted block(s).
- */
-export function getLastInsertedBlocksClientIds( state ) {
-	return state?.lastBlockInserted?.clientIds;
-}
-
 /**
  * Tells if the block is visible on the canvas or not.
  *

package/src/store/test/private-selectors.js

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { isBlockInterfaceHidden } from '../private-selectors';
+import {
+	isBlockInterfaceHidden,
+	getLastInsertedBlocksClientIds,
+} from '../private-selectors';
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -21,4 +24,29 @@ describe( 'private selectors', () => {
 			expect( isBlockInterfaceHidden( state ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'getLastInsertedBlocksClientIds', () => {
+		it( 'should return undefined if no blocks have been inserted', () => {
+			const state = {
+				lastBlockInserted: {},
+			};
+
+			expect( getLastInsertedBlocksClientIds( state ) ).toEqual(
+				undefined
+			);
+		} );
+
+		it( 'should return clientIds if blocks have been inserted', () => {
+			const state = {
+				lastBlockInserted: {
+					clientIds: [ '123456', '78910' ],
+				},
+			};
+
+			expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
+				'123456',
+				'78910',
+			] );
+		} );
+	} );
 } );

package/src/store/test/selectors.js

@@ -72,7 +72,6 @@ const {
 	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
 	__experimentalGetGlobalBlocksByName,
-	getLastInsertedBlocksClientIds,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -4688,26 +4687,3 @@ describe( '__unstableGetClientIdsTree', () => {
 		] );
 	} );
 } );
-
-describe( 'getLastInsertedBlocksClientIds', () => {
-	it( 'should return undefined if no blocks have been inserted', () => {
-		const state = {
-			lastBlockInserted: {},
-		};
-
-		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( undefined );
-	} );
-
-	it( 'should return clientIds if blocks have been inserted', () => {
-		const state = {
-			lastBlockInserted: {
-				clientIds: [ '123456', '78910' ],
-			},
-		};
-
-		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
-			'123456',
-			'78910',
-		] );
-	} );
-} );