@wordpress/block-editor 12.10.2 → 12.10.4

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/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			popoverProps={ { placement: 'bottom-start' } }
+			popoverProps={ { placement: 'bottom-start', variant: undefined } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>

package/src/hooks/block-rename-ui.js

@@ -44,17 +44,21 @@ function RenameModal( { blockName, originalBlockName, onClose, onSave } ) {
 	);
 
 	const handleSubmit = () => {
-		// Must be assertive to immediately announce change.
-		speak(
-			sprintf(
-				/* translators: %1$s: type of update (either reset of changed). %2$s: new name/label for the block */
-				__( 'Block name %1$s to: "%2$s".' ),
-				nameIsOriginal || nameIsEmpty ? __( 'reset' ) : __( 'changed' ),
-				editedBlockName
-			),
-			'assertive'
-		);
+		const message =
+			nameIsOriginal || nameIsEmpty
+				? sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name reset to: "%s".' ),
+						editedBlockName
+				  )
+				: sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name changed to: "%s".' ),
+						editedBlockName
+				  );
 
+		// Must be assertive to immediately announce change.
+		speak( message, 'assertive' );
 		onSave( editedBlockName );
 
 		// Immediate close avoids ability to hit save multiple times.

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 ) {

package/src/store/test/actions.js

@@ -1279,9 +1279,9 @@ describe( 'actions', () => {
 					fetch: () => {},
 				} )( {
 					select: {
-						getSettings: () => ( {
-							inserterMediaCategories: [ { name: 'a' } ],
-						} ),
+						getRegisteredInserterMediaCategories: () => [
+							{ name: 'a' },
+						],
 					},
 				} );
 				expect( console ).toHaveErroredWith(
@@ -1296,11 +1296,9 @@ describe( 'actions', () => {
 					fetch: () => {},
 				} )( {
 					select: {
-						getSettings: () => ( {
-							inserterMediaCategories: [
-								{ labels: { name: 'a' } },
-							],
-						} ),
+						getRegisteredInserterMediaCategories: () => [
+							{ labels: { name: 'a' } },
+						],
 					},
 				} );
 				expect( console ).toHaveErroredWith(
@@ -1321,18 +1319,14 @@ describe( 'actions', () => {
 			const dispatch = jest.fn();
 			registerInserterMediaCategory( category )( {
 				select: {
-					getSettings: () => ( { inserterMediaCategories } ),
+					getRegisteredInserterMediaCategories: () =>
+						inserterMediaCategories,
 				},
 				dispatch,
 			} );
 			expect( dispatch ).toHaveBeenLastCalledWith( {
-				type: 'UPDATE_SETTINGS',
-				settings: {
-					inserterMediaCategories: [
-						...inserterMediaCategories,
-						{ ...category, isExternalResource: true },
-					],
-				},
+				type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+				category: { ...category, isExternalResource: true },
 			} );
 		} );
 	} );

package/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap

@@ -22,6 +22,19 @@ color: red;
 }"
 `;
 
+exports[`CSS selector wrap should not double wrap selectors 1`] = `
+".my-namespace h1,
+.my-namespace .red {
+color: red;
+}"
+`;
+
+exports[`CSS selector wrap should replace :root selectors 1`] = `
+".my-namespace {
+--my-color: #ff0000;
+}"
+`;
+
 exports[`CSS selector wrap should replace root tags 1`] = `
 ".my-namespace,
 .my-namespace h1 {
@@ -49,9 +62,3 @@ color: red;
 }
 }"
 `;
-
-exports[`CSS selector wrap should replace :root selectors 1`] = `
-".my-namespace {
---my-color: #ff0000;
-}"
-`;

package/src/utils/transform-styles/transforms/test/wrap.js

@@ -83,4 +83,13 @@ describe( 'CSS selector wrap', () => {
 
 		expect( output ).toMatchSnapshot();
 	} );
+
+	it( 'should not double wrap selectors', () => {
+		const callback = wrap( '.my-namespace' );
+		const input = ` .my-namespace h1, .red { color: red; }`;
+
+		const output = traverse( input, callback );
+
+		expect( output ).toMatchSnapshot();
+	} );
 } );

package/src/utils/transform-styles/transforms/wrap.js

@@ -27,6 +27,11 @@ const wrap =
 				return selector;
 			}
 
+			// Skip the update when a selector already has a namespace + space (" ").
+			if ( selector.trim().startsWith( `${ namespace } ` ) ) {
+				return selector;
+			}
+
 			// Anything other than a root tag is always prefixed.
 			{
 				if ( ! selector.match( IS_ROOT_TAG ) ) {