@wordpress/block-editor 15.11.0 → 15.12.0

package/src/store/actions.js

@@ -248,6 +248,13 @@ export const selectPreviousBlock =
 			const firstParentClientId = select.getBlockRootClientId( clientId );
 			if ( firstParentClientId ) {
 				dispatch.selectBlock( firstParentClientId, -1 );
+			} else {
+				// Fallback to next block when no previous block and no parent
+				const nextBlockClientId =
+					select.getNextBlockClientId( clientId );
+				if ( nextBlockClientId ) {
+					dispatch.selectBlock( nextBlockClientId, 0 );
+				}
 			}
 		}
 	};

package/src/store/defaults.js

@@ -157,6 +157,10 @@ export const SETTINGS_DEFAULTS = {
 	// Allows to disable block locking interface.
 	canLockBlocks: true,
 
+	// Whether the user can edit custom CSS (requires edit_css capability).
+	// Defaults to false for safety - PHP passes true when user has capability.
+	canEditCSS: false,
+
 	// Allows to disable Openverse media category in the inserter.
 	enableOpenverseMediaCategory: true,
 

package/src/store/private-selectors.js

@@ -36,12 +36,8 @@ import {
 	reusableBlocksSelectKey,
 	sectionRootClientIdKey,
 	isIsolatedEditorKey,
-	deviceTypeKey,
 } from './private-keys';
-import {
-	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
-	BLOCK_VISIBILITY_VIEWPORTS,
-} from '../components/block-visibility/constants';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
 
@@ -527,7 +523,6 @@ export function isSectionBlock( state, clientId ) {
 
 	if (
 		( attributes?.metadata?.patternName || isTemplatePart ) &&
-		!! window?.__experimentalContentOnlyPatternInsertion &&
 		! isIsolatedEditor
 	) {
 		return true;
@@ -703,18 +698,22 @@ export function getInsertionPoint( state ) {
 }
 
 /**
- * Returns true if the block is hidden, or false otherwise.
+ * 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.
  *
- * A block is considered hidden if:
+ * A block is considered hidden anywhere if:
  * - blockVisibility is false (hidden everywhere)
- * - blockVisibility is an object with the current device preview set to false
+ * - blockVisibility.viewport has any viewport set to false (hidden at specific screen sizes)
  *
  * @param {Object} state    Global application state.
  * @param {string} clientId Client ID of the block.
  *
- * @return {boolean} Whether the block is hidden.
+ * @return {boolean} Whether the block is hidden anywhere.
  */
-export const isBlockHidden = ( state, clientId ) => {
+export const isBlockHiddenAnywhere = ( state, clientId ) => {
 	const blockName = getBlockName( state, clientId );
 	if ( ! hasBlockSupport( blockName, 'visibility', true ) ) {
 		return false;
@@ -726,79 +725,110 @@ export const isBlockHidden = ( state, clientId ) => {
 		return true;
 	}
 
-	if ( ! window.__experimentalHideBlocksBasedOnScreenSize ) {
-		return false;
+	if (
+		typeof blockVisibility?.viewport === 'object' &&
+		blockVisibility?.viewport !== null
+	) {
+		// Check if the block is hidden at any viewport.
+		return Object.values( BLOCK_VISIBILITY_VIEWPORTS ).some(
+			( viewport ) =>
+				blockVisibility?.viewport?.[ viewport.key ] === false
+		);
 	}
+	return false;
+};
 
-	// Check viewport-specific hiding based on current device preview
-	// Only apply when a device is explicitly selected.
-	if ( typeof blockVisibility === 'object' && blockVisibility !== null ) {
-		const settings = getSettings( state );
-		const viewportType =
-			settings[ deviceTypeKey ] ?? BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
-		const viewportKey = viewportType.toLowerCase();
-		return blockVisibility?.[ viewportKey ] === false;
+/**
+ * Returns true if the block is hidden everywhere (blockVisibility is false).
+ *
+ * A block is considered hidden everywhere when blockVisibility is explicitly
+ * set to false, which means it's hidden on all viewports.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ *
+ * @return {boolean} Whether the block is hidden everywhere.
+ */
+export const isBlockHiddenEverywhere = ( state, clientId ) => {
+	const blockName = getBlockName( state, clientId );
+	if ( ! hasBlockSupport( blockName, 'visibility', true ) ) {
+		return false;
 	}
+	const attributes = state.blocks.attributes.get( clientId );
+	const blockVisibility = attributes?.metadata?.blockVisibility;
 
+	if ( blockVisibility === false ) {
+		return true;
+	}
 	return false;
 };
 
 /**
- * Returns true if any of the provided blocks are hidden.
+ * Returns true if any parent block (immediate or further up the chain) is hidden everywhere.
  *
- * @param {Object} state     Global application state.
- * @param {Array}  clientIds Array of block client IDs to check.
- * @return {boolean} Whether any block is hidden.
+ * Checks all parent blocks in the hierarchy and returns true if any of them
+ * is hidden everywhere.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ *
+ * @return {boolean} Whether any parent block is hidden everywhere.
  */
-export const areBlocksHidden = ( state, clientIds ) => {
-	if ( ! clientIds || clientIds.length === 0 ) {
-		return false;
-	}
-	return clientIds.some( ( clientId ) => isBlockHidden( state, clientId ) );
+export const isBlockParentHiddenEverywhere = ( state, clientId ) => {
+	const parents = getBlockParents( state, clientId );
+	return parents.some( ( parentId ) =>
+		isBlockHiddenEverywhere( state, parentId )
+	);
 };
 
 /**
- * Checks if at least one block in an array is hidden according to viewport visibility metadata.
+ * Returns true if the block is hidden at the given viewport.
  *
- * This is typically used to determine if the block visibility button should be shown in the toolbar.
- * TODO: This is temporary for now. Later the UI will
- * want to know where exactly the block is hidden, e.g., to display icons or other things.
+ * 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
  *
- * A block is considered hidden if:
- * - Its `blockVisibility` metadata is `false` (hidden everywhere), or
- * - Any viewport is set to `false`
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ * @param {string} viewport Viewport to check ('desktop', 'tablet', 'mobile').
  *
- * @param {Object} state     Global application state.
- * @param {Array}  clientIds Array of block client IDs to check.
- * @return {boolean} `true` if at least one block meets the visibility criteria, `false` otherwise.
+ * @return {boolean} Whether the block is hidden at the viewport.
  */
-export const areBlocksHiddenAnywhere = ( state, clientIds ) => {
-	if ( ! clientIds?.length ) {
-		return false;
+export const isBlockHiddenAtViewport = ( state, clientId, viewport ) => {
+	if ( isBlockHiddenEverywhere( state, clientId ) ) {
+		return true;
 	}
-	return clientIds.some( ( clientId ) => {
-		if ( ! clientId ) {
-			return false;
-		}
-
-		const attributes = state.blocks.attributes.get( clientId );
-		const blockVisibility = attributes?.metadata?.blockVisibility;
-
-		// If explicitly hidden everywhere (false), return true.
-		if ( typeof blockVisibility === 'boolean' ) {
-			return blockVisibility === false;
-		}
 
-		// If not an object, block is not hidden in any viewport.
-		if ( 'object' !== typeof blockVisibility ) {
-			return false;
-		}
+	const attributes = state.blocks.attributes.get( clientId );
+	const blockVisibilityViewport =
+		attributes?.metadata?.blockVisibility?.viewport;
+	if (
+		typeof blockVisibilityViewport === 'object' &&
+		blockVisibilityViewport !== null &&
+		typeof viewport === 'string'
+	) {
+		return blockVisibilityViewport?.[ viewport.toLowerCase() ] === false;
+	}
+	return false;
+};
 
-		// Check viewport-specific visibility.
-		return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
-			( [ , { key } ] ) => blockVisibility?.[ key ] === false
-		);
-	} );
+/**
+ * Returns true if any parent block (immediate or further up the chain) is hidden at the given viewport.
+ *
+ * Checks all parent blocks in the hierarchy and returns true if any of them
+ * is hidden at the specified viewport.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ * @param {string} viewport Viewport to check ('desktop', 'tablet', 'mobile').
+ *
+ * @return {boolean} Whether any parent block is hidden at the viewport.
+ */
+export const isBlockParentHiddenAtViewport = ( state, clientId, viewport ) => {
+	const parents = getBlockParents( state, clientId );
+	return parents.some( ( parentId ) =>
+		isBlockHiddenAtViewport( state, parentId, viewport )
+	);
 };
 
 /**

package/src/store/reducer.js

@@ -2283,22 +2283,17 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 
 	// Use array.from for better back compat. Older versions of the iterator returned
 	// from `keys()` didn't have the `filter` method.
-	const unsyncedPatternClientIds =
-		!! window?.__experimentalContentOnlyPatternInsertion &&
-		! isIsolatedEditor
-			? Array.from( state.blocks.attributes.keys() ).filter(
-					( clientId ) =>
-						state.blocks.attributes.get( clientId )?.metadata
-							?.patternName
-			  )
-			: [];
+	const unsyncedPatternClientIds = isIsolatedEditor
+		? []
+		: Array.from( state.blocks.attributes.keys() ).filter(
+				( clientId ) =>
+					state.blocks.attributes.get( clientId )?.metadata
+						?.patternName
+		  );
 	const contentOnlyParents = [
 		...contentOnlyTemplateLockedClientIds,
 		...unsyncedPatternClientIds,
-		...( window?.__experimentalContentOnlyPatternInsertion &&
-		! isIsolatedEditor
-			? templatePartClientIds
-			: [] ),
+		...( isIsolatedEditor ? [] : templatePartClientIds ),
 	];
 
 	traverseBlockTree( state, treeClientId, ( block ) => {
@@ -2323,11 +2318,9 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 				return;
 			}
 
-			// For the content only pattern experiment, disable blocks that are outside of the edited section.
-			if ( window?.__experimentalContentOnlyPatternInsertion ) {
-				derivedBlockEditingModes.set( clientId, 'disabled' );
-				return;
-			}
+			// Disable blocks that are outside of the edited section.
+			derivedBlockEditingModes.set( clientId, 'disabled' );
+			return;
 		}
 
 		// If the block already has an explicit block editing mode set,

package/src/store/selectors.js

@@ -1681,6 +1681,11 @@ const canInsertBlockTypeUnmemoized = (
 	blockName,
 	rootClientId = null
 ) => {
+	// Disable insertion in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	if ( ! isBlockVisibleInTheInserter( state, blockName, rootClientId ) ) {
 		return false;
 	}
@@ -1868,6 +1873,11 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
  * @return {boolean} Whether the given block is allowed to be removed.
  */
 export function canRemoveBlock( state, clientId ) {
+	// Disable removal in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -1930,6 +1940,11 @@ export function canRemoveBlocks( state, clientIds ) {
  * @return {boolean} Whether the given block is allowed to be moved.
  */
 export function canMoveBlock( state, clientId ) {
+	// Disable moving in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -1991,6 +2006,11 @@ export function canMoveBlocks( state, clientIds ) {
  * @return {boolean} Whether the given block is allowed to be edited.
  */
 export function canEditBlock( state, clientId ) {
+	// Disable editing in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
 		return true;
@@ -2011,6 +2031,11 @@ export function canEditBlock( state, clientId ) {
  * @return {boolean} Whether a given block type can be locked/unlocked.
  */
 export function canLockBlockType( state, nameOrType ) {
+	// Disable locking in preview mode.
+	if ( state.settings.isPreviewMode ) {
+		return false;
+	}
+
 	if ( ! hasBlockSupport( nameOrType, 'lock', true ) ) {
 		return false;
 	}

package/src/store/test/actions.js

@@ -60,6 +60,7 @@ const {
 
 describe( 'actions', () => {
 	const defaultBlockSettings = {
+		apiVersion: 3,
 		attributes: {
 			content: {},
 		},
@@ -863,6 +864,7 @@ describe( 'actions', () => {
 
 		it( 'should merge the blocks if blocks of the same type', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -933,6 +935,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks have different types without transformation', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -986,6 +989,7 @@ describe( 'actions', () => {
 
 		it( 'should transform and merge the blocks', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {
 						type: 'string',
@@ -1004,6 +1008,7 @@ describe( 'actions', () => {
 				title: 'test block',
 			} );
 			registerBlockType( 'core/test-block-2', {
+				apiVersion: 3,
 				attributes: {
 					content2: {
 						type: 'string',
@@ -1081,6 +1086,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks if blockB editing mode is `disabled`', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -1140,6 +1146,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks if blockA editing mode is `disabled`', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},