@wordpress/block-editor 15.22.1 → 16.0.0

package/src/store/actions.js

@@ -4,7 +4,7 @@
  */
 import {
 	cloneBlock,
-	__experimentalCloneSanitizedBlock,
+	cloneSanitizedBlock,
 	createBlock,
 	doBlocksMatchTemplate,
 	getBlockType,
@@ -1755,7 +1755,7 @@ export const duplicateBlocks =
 			clientIdsArray[ clientIdsArray.length - 1 ]
 		);
 		const clonedBlocks = blocks.map( ( block ) =>
-			__experimentalCloneSanitizedBlock( block )
+			cloneSanitizedBlock( block )
 		);
 		dispatch.insertBlocks(
 			clonedBlocks,
@@ -1935,6 +1935,7 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  *
  * @typedef {Object} InserterMediaRequest
  * @property {number} per_page How many items to fetch per page.
+ * @property {number} [page]   Which page of results to fetch. Defaults to the first page.
  * @property {string} search   The search term to use for filtering the results.
  */
 
@@ -1953,6 +1954,17 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * @property {string}        [caption]    The caption of the media item.
  */
 
+/**
+ * Interface for paginated inserter media responses. A media category's `fetch`
+ * may return this instead of a plain array to opt into pagination, in which case
+ * the media tab renders paging controls for the category.
+ *
+ * @typedef {Object} InserterMediaResponse
+ * @property {InserterMediaItem[]} mediaItems The media items for the requested page.
+ * @property {number}              totalItems The total number of items across all pages.
+ * @property {number}              totalPages The total number of pages available.
+ */
+
 /**
  * Registers a new inserter media category. Once registered, the media category is
  * available in the inserter's media tab.
@@ -1966,6 +1978,7 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * _Properties_
  *
  * - _per_page_ `number`: How many items to fetch per page.
+ * - _page_ `[number]`: Which page of results to fetch. Defaults to the first page.
  * - _search_ `string`: The search term to use for filtering the results.
  *
  * _Type Definition_
@@ -1984,7 +1997,19 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * - _alt_ `[string]`: The alt text of the media item.
  * - _caption_ `[string]`: The caption of the media item.
  *
- * @param    {InserterMediaCategory}                                  category                       The inserter media category to register.
+ * _Type Definition_
+ *
+ * - _InserterMediaResponse_ `Object`: Interface for paginated inserter media responses. A media
+ * category's `fetch` may return this instead of a plain array to opt into pagination, in which
+ * case the media tab renders paging controls for the category.
+ *
+ * _Properties_
+ *
+ * - _mediaItems_ `InserterMediaItem[]`: The media items for the requested page.
+ * - _totalItems_ `number`: The total number of items across all pages.
+ * - _totalPages_ `number`: The total number of pages available.
+ *
+ * @param    {InserterMediaCategory}                                                        category                       The inserter media category to register.
  *
  * @example
  * ```js
@@ -2041,16 +2066,20 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * ```
  *
  * @typedef {Object} InserterMediaCategory Interface for inserter media category.
- * @property {string}                                                 name                           The name of the media category, that should be unique among all media categories.
- * @property {Object}                                                 labels                         Labels for the media category.
- * @property {string}                                                 labels.name                    General name of the media category. It's used in the inserter media items list.
- * @property {string}                                                 [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
- * @property {('image'|'audio'|'video')}                              mediaType                      The media type of the media category.
- * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                          The function to fetch media items for the category.
- * @property {(InserterMediaItem) => string}                          [getReportUrl]                 If the media category supports reporting media items, this function should return
- *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
- * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
- *                                                                                                   This is used to avoid making a request to the external resource when the user
+ * @property {string}                                                                       name                           The name of the media category, that should be unique among all media categories.
+ * @property {Object}                                                                       labels                         Labels for the media category.
+ * @property {string}                                                                       labels.name                    General name of the media category. It's used in the inserter media items list.
+ * @property {string}                                                                       [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
+ * @property {('image'|'audio'|'video')}                                                    mediaType                      The media type of the media category.
+ * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]|InserterMediaResponse>} fetch                          The function to fetch media items for the category. Returning an
+ *                                                                                                                         `InserterMediaResponse` instead of a plain array opts the category into
+ *                                                                                                                         pagination.
+ * @property {(InserterMediaItem) => string}                                                [getReportUrl]                 If the media category supports reporting media items, this function should return
+ *                                                                                                                         the report url for the media item. It accepts the `InserterMediaItem` as an argument.
+ * @property {boolean}                                                                      [isExternalResource]           If the media category is an external resource, this should be set to true.
+ *                                                                                                                         This is used to avoid making a request to the external resource when checking
+ *                                                                                                                         whether the category has any media items to display in the media tab.
+ * @property {string}                                                                       [emptyMessage]                 Optional message shown in place of the generic "No results found." when the source has no items and there is no active search. Providing it also keeps the source in the tab list while empty, so the message stays reachable.
  */
 export const registerInserterMediaCategory =
 	( category ) =>
@@ -2079,7 +2108,7 @@ export const registerInserterMediaCategory =
 		}
 		if ( ! category.fetch || typeof category.fetch !== 'function' ) {
 			console.error(
-				'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.'
+				'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]|InserterMediaResponse>`.'
 			);
 			return;
 		}

package/src/store/private-actions.js

@@ -558,3 +558,34 @@ export function setSelectedBlockStyleStateCanvasPreview( clientId, value ) {
 		value,
 	};
 }
+
+/**
+ * Sets the globally selected viewport style state. When set to a value other
+ * than 'default', block style edits in the inspector apply to that viewport.
+ * Driven by the editor's device preview while Responsive editing is enabled.
+ *
+ * @param {string} viewport The selected viewport state (e.g. 'default', 'tablet', 'mobile').
+ *
+ * @return {Object} Action object.
+ */
+export function setStyleStateViewport( viewport ) {
+	return {
+		type: 'SET_STYLE_STATE_VIEWPORT',
+		viewport,
+	};
+}
+
+/**
+ * Sets whether Responsive editing is enabled. When enabled, the device preview
+ * also drives which viewport block style edits are applied to. Session-only.
+ *
+ * @param {boolean} enabled Whether Responsive editing is enabled.
+ *
+ * @return {Object} Action object.
+ */
+export function setResponsiveEditing( enabled ) {
+	return {
+		type: 'SET_RESPONSIVE_EDITING',
+		enabled,
+	};
+}

package/src/store/private-keys.js

@@ -10,10 +10,10 @@ export const mediaEditKey = Symbol( 'mediaEditKey' );
 export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const isIsolatedEditorKey = Symbol( 'isIsolatedEditor' );
 export const deviceTypeKey = Symbol( 'deviceTypeKey' );
-export const onViewportStateChangeKey = Symbol( 'onViewportStateChangeKey' );
 export const isNavigationOverlayContextKey = Symbol(
 	'isNavigationOverlayContext'
 );
 export const isNavigationPostEditorKey = Symbol( 'isNavigationPostEditor' );
 export const mediaUploadOnSuccessKey = Symbol( 'mediaUploadOnSuccess' );
+export const mediaSideloadFromUrlKey = Symbol( 'mediaSideloadFromUrl' );
 export const openMediaEditorModalKey = Symbol( 'openMediaEditorModal' );

package/src/store/private-selectors.js

@@ -6,6 +6,7 @@ import {
 	hasBlockSupport,
 	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -42,9 +43,22 @@ import {
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 export { getBlockSettings } from './get-block-settings';
 
+function isViewportAvailable( state, viewport ) {
+	if ( viewport === BLOCK_VISIBILITY_VIEWPORTS.desktop.key ) {
+		return true;
+	}
+
+	return (
+		getViewportBreakpoints(
+			getSettings( state )?.__experimentalFeatures?.viewport
+		)[ viewport ] !== undefined
+	);
+}
+
 /**
  * Returns true if the block interface is hidden, or false otherwise.
  *
@@ -159,16 +173,31 @@ export const getClientIdsTree = createSelector(
 	( state ) => [ state.blocks.order ]
 );
 
-function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+/**
+ * Returns a tree of block objects filtered by a block inclusion callback.
+ * Excluded blocks are replaced by any included descendants.
+ *
+ * @param {Object}   state         Global application state.
+ * @param {?string}  rootClientId  Optional root client ID of block list.
+ * @param {Function} includesBlock Callback that returns whether to include a block.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+function getFilteredClientIdsTreeUnmemoized(
+	state,
+	rootClientId,
+	includesBlock
+) {
 	const blockOrder = getBlockOrder( state, rootClientId );
 	const result = [];
 
 	for ( const clientId of blockOrder ) {
-		const innerBlocks = getEnabledClientIdsTreeUnmemoized(
+		const innerBlocks = getFilteredClientIdsTreeUnmemoized(
 			state,
-			clientId
+			clientId,
+			includesBlock
 		);
-		if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
+		if ( includesBlock( state, clientId ) ) {
 			result.push( { clientId, innerBlocks } );
 		} else {
 			result.push( ...innerBlocks );
@@ -178,6 +207,100 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 	return result;
 }
 
+function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+	return getFilteredClientIdsTreeUnmemoized(
+		state,
+		rootClientId,
+		( _state, clientId ) =>
+			getBlockEditingMode( _state, clientId ) !== 'disabled'
+	);
+}
+
+/**
+ * Returns whether the nearest explicit block editing mode in the block's
+ * ancestry is disabled.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether an explicit parent block editing mode disables this
+ *                   block.
+ */
+function hasExplicitDisabledParent( state, clientId ) {
+	let parent = state.blocks.parents.get( clientId );
+
+	while ( parent !== undefined ) {
+		const parentBlockEditingMode =
+			state.blocks.blockEditingModes.get( parent );
+
+		if ( parentBlockEditingMode ) {
+			return parentBlockEditingMode === 'disabled';
+		}
+
+		parent = state.blocks.parents.get( parent );
+	}
+
+	return false;
+}
+
+/**
+ * Returns the block tree displayed by List View.
+ *
+ * @param {Object}  state        Global application state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+function getListViewClientIdsTreeUnmemoized( state, rootClientId ) {
+	return getFilteredClientIdsTreeUnmemoized(
+		state,
+		rootClientId,
+		( _state, clientId ) => {
+			// Non-disabled blocks are always shown in List view.
+			if ( getBlockEditingMode( _state, clientId ) !== 'disabled' ) {
+				return true;
+			}
+
+			const explicitBlockEditingMode =
+				_state.blocks.blockEditingModes.get( clientId );
+			if ( explicitBlockEditingMode ) {
+				return explicitBlockEditingMode !== 'disabled';
+			}
+
+			if ( hasExplicitDisabledParent( _state, clientId ) ) {
+				return false;
+			}
+
+			// When a contentOnly section is being edited, there's some special handling.
+			if ( _state.editedContentOnlySection ) {
+				// Blocks within the edited content only section generally have their block
+				// editing mode flipped from disabled to default for editing, any disabled
+				// blocks can still be excluded.
+				if ( isWithinEditedContentOnlySection( _state, clientId ) ) {
+					return false;
+				}
+
+				// Blocks that are not in another section but are disabled are shown.
+				// These are blocks that would usually be visible.
+				const parentSectionBlock = getParentSectionBlock(
+					_state,
+					clientId
+				);
+				if ( ! parentSectionBlock ) {
+					return true;
+				}
+
+				// If a block is in another section, then it is only visible if its a content block.
+				if ( isContentBlock( getBlockName( _state, clientId ) ) ) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+	);
+}
+
 /**
  * Returns a tree of block objects with only clientID and innerBlocks set.
  * Blocks with a 'disabled' editing mode are not included.
@@ -195,6 +318,34 @@ export const getEnabledClientIdsTree = createRegistrySelector( () =>
 	] )
 );
 
+/**
+ * Returns the block tree displayed by List View.
+ *
+ * Blocks with a 'disabled' editing mode are usually not included. When a
+ * content-only section is being edited, List View keeps visible outside-section
+ * context blocks in the tree so they can be faded. Blocks that were already
+ * hidden because they are non-content blocks inside another content-only section
+ * remain hidden.
+ *
+ * @param {Object}  state        Global application state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+export const getListViewClientIdsTree = createRegistrySelector( () =>
+	createSelector( getListViewClientIdsTreeUnmemoized, ( state ) => [
+		state.blocks.order,
+		state.derivedBlockEditingModes,
+		state.blocks.blockEditingModes,
+		state.blocks.parents,
+		state.blocks.byClientId,
+		state.blocks.attributes,
+		state.blockListSettings,
+		state.editedContentOnlySection,
+		state.settings,
+	] )
+);
+
 /**
  * Returns a list of a given block's ancestors, from top to bottom. Blocks with
  * a 'disabled' editing mode are excluded.
@@ -788,12 +939,12 @@ export function getInsertionPoint( state ) {
  * Returns true if the block is hidden anywhere, or false otherwise.
  *
  * This selector checks whether a block has visibility metadata set that would
- * hide it at any viewport or everywhere. It's useful for flagging blocks that
- * have visibility restrictions.
+ * hide it at any available viewport or everywhere. It's useful for flagging
+ * blocks that have active visibility restrictions.
  *
  * A block is considered hidden anywhere if:
  * - blockVisibility is false (hidden everywhere)
- * - blockVisibility.viewport has any viewport set to false (hidden at specific screen sizes)
+ * - blockVisibility.viewport has any available viewport set to false (hidden at specific screen sizes)
  *
  * @param {Object} state    Global application state.
  * @param {string} clientId Client ID of the block.
@@ -819,6 +970,7 @@ export const isBlockHiddenAnywhere = ( state, clientId ) => {
 		// Check if the block is hidden at any viewport.
 		return Object.values( BLOCK_VISIBILITY_VIEWPORTS ).some(
 			( viewport ) =>
+				isViewportAvailable( state, viewport.key ) &&
 				blockVisibility?.viewport?.[ viewport.key ] === false
 		);
 	}
@@ -873,7 +1025,7 @@ export const isBlockParentHiddenEverywhere = ( state, clientId ) => {
  *
  * A block is considered hidden at a viewport if:
  * - blockVisibility is false (hidden everywhere)
- * - blockVisibility is an object with the specified viewport set to false
+ * - blockVisibility is an object with an available specified viewport set to false
  *
  * @param {Object} state    Global application state.
  * @param {string} clientId Client ID of the block.
@@ -894,7 +1046,12 @@ export const isBlockHiddenAtViewport = ( state, clientId, viewport ) => {
 		blockVisibilityViewport !== null &&
 		typeof viewport === 'string'
 	) {
-		return blockVisibilityViewport?.[ viewport.toLowerCase() ] === false;
+		const viewportKey = viewport.toLowerCase();
+
+		return (
+			isViewportAvailable( state, viewportKey ) &&
+			blockVisibilityViewport?.[ viewportKey ] === false
+		);
 	}
 	return false;
 };
@@ -1152,6 +1309,30 @@ const DEFAULT_BLOCK_STYLE_STATE = {
 	pseudo: 'default',
 };
 
+/**
+ * Returns the globally selected viewport style state. When set to a value other
+ * than 'default', block style edits in the inspector apply to that viewport.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} The selected viewport style state.
+ */
+export function getStyleStateViewport( state ) {
+	return state.styleStateViewport ?? DEFAULT_BLOCK_STYLE_STATE.viewport;
+}
+
+/**
+ * Returns whether Responsive editing is enabled. When enabled, the device
+ * preview also drives which viewport block style edits are applied to.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether Responsive editing is enabled.
+ */
+export function isResponsiveEditing( state ) {
+	return state.isResponsiveEditing;
+}
+
 /**
  * Returns the selected style state for a block's style controls.
  *
@@ -1160,13 +1341,25 @@ const DEFAULT_BLOCK_STYLE_STATE = {
  *
  * @return {Object} The selected block style state.
  */
-export function getSelectedBlockStyleState( state, clientId ) {
-	if ( state.selectedBlockStyleState?.clientId !== clientId ) {
-		return DEFAULT_BLOCK_STYLE_STATE;
-	}
-
-	return state.selectedBlockStyleState.value ?? DEFAULT_BLOCK_STYLE_STATE;
-}
+export const getSelectedBlockStyleState = createSelector(
+	( state, clientId ) => {
+		const perBlockState =
+			state.selectedBlockStyleState?.clientId === clientId
+				? state.selectedBlockStyleState.value ??
+				  DEFAULT_BLOCK_STYLE_STATE
+				: DEFAULT_BLOCK_STYLE_STATE;
+
+		return {
+			...perBlockState,
+			// The viewport is tracked globally, so inject it here. This way
+			// consumers receive a single combined state object instead of
+			// merging the global viewport themselves, and selectors derived
+			// from this stay consistent.
+			viewport: getStyleStateViewport( state ),
+		};
+	},
+	( state ) => [ state.styleStateViewport, state.selectedBlockStyleState ]
+);
 
 /**
  * Returns whether a non-default style state is selected for a block.

package/src/store/reducer.js

@@ -2312,7 +2312,6 @@ export function selectedBlockStyleState( state = undefined, action ) {
 				clientId: action.clientId,
 				showStateOnCanvas,
 				value: {
-					viewport: 'default',
 					pseudo: 'default',
 					...previousValue,
 					...action.value,
@@ -2332,7 +2331,6 @@ export function selectedBlockStyleState( state = undefined, action ) {
 				clientId: action.clientId,
 				showStateOnCanvas: action.value,
 				value: {
-					viewport: 'default',
 					pseudo: 'default',
 					...previousValue,
 				},
@@ -2390,6 +2388,41 @@ export function selectedBlockStyleState( state = undefined, action ) {
 	return state;
 }
 
+/**
+ * Reducer holding the globally selected viewport style state. When set to a
+ * value other than 'default', block style edits in the inspector are applied to
+ * that viewport. Driven by the editor's device preview (Responsive editing).
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function styleStateViewport( state = 'default', action ) {
+	if ( action.type === 'SET_STYLE_STATE_VIEWPORT' ) {
+		return action.viewport ?? 'default';
+	}
+
+	return state;
+}
+
+/**
+ * Reducer for whether Responsive editing is enabled. When enabled, the device
+ * preview also drives which viewport block style edits are applied to.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isResponsiveEditing( state = false, action ) {
+	if ( action.type === 'SET_RESPONSIVE_EDITING' ) {
+		return action.enabled;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2426,6 +2459,8 @@ const combinedReducers = combineReducers( {
 	listViewContentPanelOpen,
 	requestedInspectorTab,
 	selectedBlockStyleState,
+	styleStateViewport,
+	isResponsiveEditing,
 } );
 
 /**

package/src/store/selectors.js

@@ -1692,6 +1692,12 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
+	// No insertion within static inner content: the inner blocks are fixed
+	// at their placeholder positions within the static markup.
+	if ( isInnerContentRoot( state, rootClientId ) ) {
+		return false;
+	}
+
 	const blockEditingMode = getBlockEditingMode( state, rootClientId ?? '' );
 
 	// Compute section context early so the disabled check below can use it.
@@ -1899,6 +1905,24 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
 	);
 }
 
+/**
+ * Returns whether the given root block keeps its markup as static inner
+ * content (the Custom HTML block). Its inner blocks are fixed at their
+ * positions within the static markup: they can be edited in place, but not
+ * moved or removed, and no blocks can be inserted alongside them. This only
+ * applies to the direct children; deeper descendants are unaffected.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Root block client ID.
+ *
+ * @return {boolean} Whether the root block uses static inner content.
+ */
+function isInnerContentRoot( state, rootClientId ) {
+	return (
+		!! rootClientId && getBlockName( state, rootClientId ) === 'core/html'
+	);
+}
+
 /**
  * Determines if the given block is allowed to be deleted.
  *
@@ -1913,6 +1937,14 @@ export function canRemoveBlock( state, clientId ) {
 		return false;
 	}
 
+	// Blocks within static inner content are fixed in place; a `lock`
+	// attribute can't override the structural constraint.
+	if (
+		isInnerContentRoot( state, getBlockRootClientId( state, clientId ) )
+	) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -2014,6 +2046,14 @@ export function canMoveBlock( state, clientId ) {
 		return false;
 	}
 
+	// Blocks within static inner content are fixed in place; a `lock`
+	// attribute can't override the structural constraint.
+	if (
+		isInnerContentRoot( state, getBlockRootClientId( state, clientId ) )
+	) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -2175,6 +2215,7 @@ const getItemFromVariation = ( state, item ) => ( variation ) => {
 			...variation.attributes,
 		},
 		innerBlocks: variation.innerBlocks,
+		innerContent: variation.innerContent,
 		keywords: variation.keywords || item.keywords,
 		frecency: calculateFrecency( time, count ),
 		// Pass through search-only flag for block-scope variations.

package/src/store/test/actions.js

@@ -1379,7 +1379,7 @@ describe( 'actions', () => {
 					fetch: 'c',
 				} )( {} );
 				expect( console ).toHaveErroredWith(
-					'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.'
+					'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]|InserterMediaResponse>`.'
 				);
 			} );
 			it( 'has unique name', () => {