@wordpress/block-editor 12.10.3 → 12.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.10.3",
+	"version": "12.10.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.42.3",
-		"@wordpress/api-fetch": "^6.39.3",
-		"@wordpress/blob": "^3.42.3",
-		"@wordpress/blocks": "^12.19.3",
-		"@wordpress/commands": "^0.13.3",
-		"@wordpress/components": "^25.8.3",
-		"@wordpress/compose": "^6.19.3",
-		"@wordpress/data": "^9.12.3",
-		"@wordpress/date": "^4.42.3",
-		"@wordpress/deprecated": "^3.42.3",
-		"@wordpress/dom": "^3.42.3",
-		"@wordpress/element": "^5.19.3",
-		"@wordpress/escape-html": "^2.42.3",
-		"@wordpress/hooks": "^3.42.3",
-		"@wordpress/html-entities": "^3.42.3",
-		"@wordpress/i18n": "^4.42.3",
-		"@wordpress/icons": "^9.33.3",
-		"@wordpress/is-shallow-equal": "^4.42.3",
-		"@wordpress/keyboard-shortcuts": "^4.19.3",
-		"@wordpress/keycodes": "^3.42.3",
-		"@wordpress/notices": "^4.10.3",
-		"@wordpress/preferences": "^3.19.3",
-		"@wordpress/private-apis": "^0.24.3",
-		"@wordpress/rich-text": "^6.19.3",
-		"@wordpress/shortcode": "^3.42.3",
-		"@wordpress/style-engine": "^1.25.3",
-		"@wordpress/token-list": "^2.42.3",
-		"@wordpress/url": "^3.43.3",
-		"@wordpress/warning": "^2.42.3",
-		"@wordpress/wordcount": "^3.42.3",
+		"@wordpress/a11y": "^3.42.4",
+		"@wordpress/api-fetch": "^6.39.4",
+		"@wordpress/blob": "^3.42.4",
+		"@wordpress/blocks": "^12.19.4",
+		"@wordpress/commands": "^0.13.4",
+		"@wordpress/components": "^25.8.4",
+		"@wordpress/compose": "^6.19.4",
+		"@wordpress/data": "^9.12.4",
+		"@wordpress/date": "^4.42.4",
+		"@wordpress/deprecated": "^3.42.4",
+		"@wordpress/dom": "^3.42.4",
+		"@wordpress/element": "^5.19.4",
+		"@wordpress/escape-html": "^2.42.4",
+		"@wordpress/hooks": "^3.42.4",
+		"@wordpress/html-entities": "^3.42.4",
+		"@wordpress/i18n": "^4.42.4",
+		"@wordpress/icons": "^9.33.4",
+		"@wordpress/is-shallow-equal": "^4.42.4",
+		"@wordpress/keyboard-shortcuts": "^4.19.4",
+		"@wordpress/keycodes": "^3.42.4",
+		"@wordpress/notices": "^4.10.4",
+		"@wordpress/preferences": "^3.19.4",
+		"@wordpress/private-apis": "^0.24.4",
+		"@wordpress/rich-text": "^6.19.4",
+		"@wordpress/shortcode": "^3.42.4",
+		"@wordpress/style-engine": "^1.25.4",
+		"@wordpress/token-list": "^2.42.4",
+		"@wordpress/url": "^3.43.4",
+		"@wordpress/warning": "^2.42.4",
+		"@wordpress/wordcount": "^3.42.4",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
+	"gitHead": "d1072bbcaf037a18d414da7865ebaf366a0e7062"
 }

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

@@ -14,7 +14,6 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -65,9 +64,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.isDefault
-						? __( 'Default' )
-						: style.label || style.name;
+					const buttonText = style.label || style.name;
 
 					return (
 						<Button

package/src/components/iframe/index.js

@@ -38,7 +38,14 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
+	// Check if the event is a MouseEvent generated within the iframe.
+	// If so, adjust the coordinates to be relative to the position of
+	// the iframe. This ensures that components such as Draggable
+	// receive coordinates relative to the window, instead of relative
+	// to the iframe. Without this, the Draggable event handler would
+	// result in components "jumping" position as soon as the user
+	// drags over the iframe.
+	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
 		init.clientX += rect.left;
 		init.clientY += rect.top;

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

@@ -7,10 +7,11 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	ExternalLink,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
+import { useMemo, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,13 +74,11 @@ export function BlockPatternsSyncFilter( {
 			{
 				value: SYNC_TYPES.full,
 				label: __( 'Synced' ),
-				info: __( 'Updated everywhere' ),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Standard' ),
-				info: __( 'Edit freely' ),
+				label: __( 'Not synced' ),
 				disabled: shouldDisableSyncFilter,
 			},
 		],
@@ -95,20 +94,17 @@ export function BlockPatternsSyncFilter( {
 			},
 			{
 				value: PATTERN_TYPES.directory,
-				label: __( 'Directory' ),
-				info: __( 'Pattern directory & core' ),
+				label: __( 'Pattern Directory' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.theme,
-				label: __( 'Theme' ),
-				info: __( 'Bundled with the theme' ),
+				label: __( 'Theme & Plugins' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
 				value: PATTERN_TYPES.user,
 				label: __( 'User' ),
-				info: __( 'Custom created' ),
 			},
 		],
 		[ shouldDisableNonUserSources ]
@@ -149,7 +145,7 @@ export function BlockPatternsSyncFilter( {
 			>
 				{ () => (
 					<>
-						<MenuGroup label={ __( 'Author' ) }>
+						<MenuGroup label={ __( 'Source' ) }>
 							<MenuItemsChoice
 								choices={ patternSourceMenuOptions }
 								onSelect={ ( value ) => {
@@ -175,6 +171,22 @@ export function BlockPatternsSyncFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
+						<div className="block-editor-tool-selector__help">
+							{ createInterpolateElement(
+								__(
+									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'
+								),
+								{
+									Link: (
+										<ExternalLink
+											href={ __(
+												'https://wordpress.org/patterns/'
+											) }
+										/>
+									),
+								}
+							) }
+						</div>
 					</>
 				) }
 			</DropdownMenu>

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

@@ -321,9 +321,6 @@ export function BlockPatternsCategoryPanel( {
 						category={ category }
 					/>
 				</HStack>
-				{ category.description && (
-					<Text>{ category.description }</Text>
-				) }
 				{ ! currentCategoryPatterns.length && (
 					<Text
 						variant="muted"

package/src/components/inserter/media-tab/hooks.js

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
-/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
-/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.
@@ -50,48 +51,14 @@ export function useMediaResults( category, query = {} ) {
 	return { mediaList, isLoading };
 }
 
-function useInserterMediaCategories() {
-	const {
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			inserterMediaCategories: settings.inserterMediaCategories,
-			allowedMimeTypes: settings.allowedMimeTypes,
-			enableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,
-		};
-	}, [] );
-	// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
-	// some of them. In this case we shouldn't add the category to the available media
-	// categories list in the inserter.
-	const allowedCategories = useMemo( () => {
-		if ( ! inserterMediaCategories || ! allowedMimeTypes ) {
-			return;
-		}
-		return inserterMediaCategories.filter( ( category ) => {
-			// Check if Openverse category is enabled.
-			if (
-				! enableOpenverseMediaCategory &&
-				category.name === 'openverse'
-			) {
-				return false;
-			}
-			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
-				mimeType.startsWith( `${ category.mediaType }/` )
-			);
-		} );
-	}, [
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	] );
-	return allowedCategories;
-}
-
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
+
+	const inserterMediaCategories = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getInserterMediaCategories(),
+		[]
+	);
 	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
 		( select ) => {
 			const { canInsertBlockType } = select( blockEditorStore );
@@ -112,7 +79,6 @@ export function useMediaCategories( rootClientId ) {
 		},
 		[ rootClientId ]
 	);
-	const inserterMediaCategories = useInserterMediaCategories();
 	useEffect( () => {
 		( async () => {
 			const _categories = [];

package/src/components/inserter/style.scss

@@ -314,7 +314,7 @@ $block-inserter-tabs-height: 44px;
 		overflow-y: auto;
 		flex-grow: 1;
 		height: 100%;
-		padding: $grid-unit-40 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30;
 	}
 }
 

package/src/components/list-view/block.js

@@ -13,16 +13,9 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
-import {
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	memo,
-} from '@wordpress/element';
+import { useState, useRef, useCallback, memo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -36,7 +29,7 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription } from './utils';
+import { getBlockPositionDescription, focusListItem } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
@@ -120,7 +113,6 @@ function ListViewBlock( {
 	);
 
 	const {
-		isTreeGridMounted,
 		expand,
 		collapse,
 		BlockSettingsMenu,
@@ -142,15 +134,6 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	// If ListView has experimental features related to the Persistent List View,
-	// only focus the selected list item on mount; otherwise the list would always
-	// try to steal the focus from the editor canvas.
-	useEffect( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
 	// If multiple blocks are selected, deselect all blocks when the user
 	// presses the escape key.
 	const onKeyDown = ( event ) => {
@@ -188,30 +171,7 @@ function ListViewBlock( {
 				selectBlock( undefined, focusClientId, null, null );
 			}
 
-			const getFocusElement = () => {
-				const row = treeGridElementRef.current?.querySelector(
-					`[role=row][data-block="${ focusClientId }"]`
-				);
-				if ( ! row ) return null;
-				// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-				return focus.focusable.find( row )[ 0 ];
-			};
-
-			let focusElement = getFocusElement();
-			if ( focusElement ) {
-				focusElement.focus();
-			} else {
-				// The element hasn't been painted yet. Defer focusing on the next frame.
-				// This could happen when all blocks have been deleted and the default block
-				// hasn't been added to the editor yet.
-				window.requestAnimationFrame( () => {
-					focusElement = getFocusElement();
-					// Ignore if the element still doesn't exist.
-					if ( focusElement ) {
-						focusElement.focus();
-					}
-				} );
-			}
+			focusListItem( focusClientId, treeGridElementRef );
 		},
 		[ selectBlock, treeGridElementRef ]
 	);

package/src/components/list-view/branch.js

@@ -168,8 +168,18 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
+
+				// To avoid performance issues, we only render blocks that are in view,
+				// or blocks that are selected or dragged. If a block is selected,
+				// it is only counted if it is the first of the block selection.
+				// This prevents the entire tree from being rendered when a branch is
+				// selected, or a user selects all blocks, while still enabling scroll
+				// into view behavior when selecting a block or opening the list view.
 				const showBlock =
-					isDragged || blockInView || isSelected || isBranchDragged;
+					isDragged ||
+					blockInView ||
+					isBranchDragged ||
+					( isSelected && clientId === selectedClientIds[ 0 ] );
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

package/src/components/list-view/index.js

@@ -32,6 +32,7 @@ import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
 import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
+import { focusListItem } from './utils';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -132,8 +133,6 @@ function ListViewComponent(
 	const elementRef = useRef();
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
-	const isMounted = useRef( false );
-
 	const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
@@ -156,7 +155,13 @@ function ListViewComponent(
 		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
-		isMounted.current = true;
+		// If a blocks are already selected when the list view is initially
+		// mounted, shift focus to the first selected block.
+		if ( selectedClientIds?.length ) {
+			focusListItem( selectedClientIds[ 0 ], elementRef );
+		}
+		// Disable reason: Only focus on the selected item when the list view is mounted.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const expand = useCallback(
@@ -204,7 +209,6 @@ function ListViewComponent(
 
 	const contextValue = useMemo(
 		() => ( {
-			isTreeGridMounted: isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,

package/src/components/list-view/utils.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { focus } from '@wordpress/dom';
 
 export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 	sprintf(
@@ -56,3 +57,39 @@ export function getCommonDepthClientIds(
 		end,
 	};
 }
+
+/**
+ * Shift focus to the list view item associated with a particular clientId.
+ *
+ * @typedef {import('@wordpress/element').RefObject} RefObject
+ *
+ * @param {string}                 focusClientId      The client ID of the block to focus.
+ * @param {RefObject<HTMLElement>} treeGridElementRef The container element to search within.
+ */
+export function focusListItem( focusClientId, treeGridElementRef ) {
+	const getFocusElement = () => {
+		const row = treeGridElementRef.current?.querySelector(
+			`[role=row][data-block="${ focusClientId }"]`
+		);
+		if ( ! row ) return null;
+		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+		return focus.focusable.find( row )[ 0 ];
+	};
+
+	let focusElement = getFocusElement();
+	if ( focusElement ) {
+		focusElement.focus();
+	} else {
+		// The element hasn't been painted yet. Defer focusing on the next frame.
+		// This could happen when all blocks have been deleted and the default block
+		// hasn't been added to the editor yet.
+		window.requestAnimationFrame( () => {
+			focusElement = getFocusElement();
+
+			// Ignore if the element still doesn't exist.
+			if ( focusElement ) {
+				focusElement.focus();
+			}
+		} );
+	}
+}

package/src/store/actions.js

@@ -1893,9 +1893,10 @@ export const registerInserterMediaCategory =
 			);
 			return;
 		}
-		const { inserterMediaCategories = [] } = select.getSettings();
+		const registeredInserterMediaCategories =
+			select.getRegisteredInserterMediaCategories();
 		if (
-			inserterMediaCategories.some(
+			registeredInserterMediaCategories.some(
 				( { name } ) => name === category.name
 			)
 		) {
@@ -1905,8 +1906,8 @@ export const registerInserterMediaCategory =
 			return;
 		}
 		if (
-			inserterMediaCategories.some(
-				( { labels: { name } } ) => name === category.labels?.name
+			registeredInserterMediaCategories.some(
+				( { labels: { name } = {} } ) => name === category.labels?.name
 			)
 		) {
 			console.error(
@@ -1919,13 +1920,8 @@ export const registerInserterMediaCategory =
 		// private, so extenders can only add new inserter media categories and don't have any
 		// control over the core media categories.
 		dispatch( {
-			type: 'UPDATE_SETTINGS',
-			settings: {
-				inserterMediaCategories: [
-					...inserterMediaCategories,
-					{ ...category, isExternalResource: true },
-				],
-			},
+			type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+			category: { ...category, isExternalResource: true },
 		} );
 	};
 

package/src/store/private-selectors.js

@@ -164,3 +164,75 @@ export function getOpenedBlockSettingsMenu( state ) {
 export function getStyleOverrides( state ) {
 	return state.styleOverrides;
 }
+
+/** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
+/**
+ * Returns the registered inserter media categories through the public API.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {InserterMediaCategory[]} Inserter media categories.
+ */
+export function getRegisteredInserterMediaCategories( state ) {
+	return state.registeredInserterMediaCategories;
+}
+
+/**
+ * Returns an array containing the allowed inserter media categories.
+ * It merges the registered media categories from extenders with the
+ * core ones. It also takes into account the allowed `mime_types`, which
+ * can be altered by `upload_mimes` filter and restrict some of them.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {InserterMediaCategory[]} Client IDs of descendants.
+ */
+export const getInserterMediaCategories = createSelector(
+	( state ) => {
+		const {
+			settings: {
+				inserterMediaCategories,
+				allowedMimeTypes,
+				enableOpenverseMediaCategory,
+			},
+			registeredInserterMediaCategories,
+		} = state;
+		// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
+		// some of them. In this case we shouldn't add the category to the available media
+		// categories list in the inserter.
+		if (
+			( ! inserterMediaCategories &&
+				! registeredInserterMediaCategories.length ) ||
+			! allowedMimeTypes
+		) {
+			return;
+		}
+		const coreInserterMediaCategoriesNames =
+			inserterMediaCategories?.map( ( { name } ) => name ) || [];
+		const mergedCategories = [
+			...( inserterMediaCategories || [] ),
+			...( registeredInserterMediaCategories || [] ).filter(
+				( { name } ) =>
+					! coreInserterMediaCategoriesNames.includes( name )
+			),
+		];
+		return mergedCategories.filter( ( category ) => {
+			// Check if Openverse category is enabled.
+			if (
+				! enableOpenverseMediaCategory &&
+				category.name === 'openverse'
+			) {
+				return false;
+			}
+			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
+				mimeType.startsWith( `${ category.mediaType }/` )
+			);
+		} );
+	},
+	( state ) => [
+		state.settings.inserterMediaCategories,
+		state.settings.allowedMimeTypes,
+		state.settings.enableOpenverseMediaCategory,
+		state.registeredInserterMediaCategories,
+	]
+);

package/src/store/reducer.js

@@ -1949,6 +1949,22 @@ export function styleOverrides( state = new Map(), action ) {
 	return state;
 }
 
+/**
+ * Reducer returning a map of the registered inserter media categories.
+ *
+ * @param {Array}  state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Array} Updated state.
+ */
+export function registeredInserterMediaCategories( state = [], action ) {
+	switch ( action.type ) {
+		case 'REGISTER_INSERTER_MEDIA_CATEGORY':
+			return [ ...state, action.category ];
+	}
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isTyping,
@@ -1976,6 +1992,7 @@ const combinedReducers = combineReducers( {
 	removalPromptData,
 	blockRemovalRules,
 	openedBlockSettingsMenu,
+	registeredInserterMediaCategories,
 } );
 
 function withAutomaticChangeReset( reducer ) {