@wordpress/block-editor 15.10.1-next.v.0 → 15.11.1-next.v.0

package/src/components/block-switcher/test/index.js

@@ -33,6 +33,7 @@ describe( 'BlockSwitcher', () => {
 		clientId: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
 	};
 	const headingBlockType = {
+		apiVersion: 3,
 		category: 'text',
 		title: 'Heading',
 		edit: () => {},
@@ -54,6 +55,7 @@ describe( 'BlockSwitcher', () => {
 		},
 	};
 	const paragraphBlockType = {
+		apiVersion: 3,
 		category: 'text',
 		title: 'Paragraph',
 		edit: () => {},

package/src/components/block-switcher/test/use-transformed.patterns.js

@@ -14,6 +14,7 @@ import {
 describe( 'use-transformed-patterns', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block-1', {
+			apiVersion: 3,
 			attributes: {
 				align: {
 					type: 'string',
@@ -36,6 +37,7 @@ describe( 'use-transformed-patterns', () => {
 			title: 'test block 1',
 		} );
 		registerBlockType( 'core/test-block-2', {
+			apiVersion: 3,
 			attributes: {
 				align: { type: 'string' },
 				content: { type: 'boolean' },

package/src/components/block-switcher/test/utils.js

@@ -12,6 +12,7 @@ describe( 'BlockSwitcher - utils', () => {
 	describe( 'getRetainedBlockAttributes', () => {
 		beforeAll( () => {
 			registerBlockType( 'core/test-block-1', {
+				apiVersion: 3,
 				attributes: {
 					align: {
 						type: 'string',
@@ -34,6 +35,7 @@ describe( 'BlockSwitcher - utils', () => {
 				title: 'test block 1',
 			} );
 			registerBlockType( 'core/test-block-2', {
+				apiVersion: 3,
 				attributes: {
 					align: { type: 'string' },
 					content: { type: 'boolean' },

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

@@ -27,7 +27,7 @@ import BlockControls from '../block-controls';
 import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
-import { BlockVisibilityToolbar } from '../block-visibility';
+import { ViewportVisibilityToolbar } from '../block-visibility';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
@@ -213,7 +213,7 @@ export function PrivateBlockToolbar( {
 							/>
 							{ isDefaultEditingMode &&
 								showBlockVisibilityButton && (
-									<BlockVisibilityToolbar
+									<ViewportVisibilityToolbar
 										clientIds={ blockClientIds }
 									/>
 								) }

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

@@ -35,7 +35,6 @@ import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
 import { BlockVisibilityModal } from '../block-visibility';
-import { cleanEmptyObject } from '../../hooks/utils';
 
 function selector( select ) {
 	const {
@@ -101,7 +100,6 @@ export default function BlockTools( {
 		moveBlocksDown,
 		expandBlock,
 		stopEditingContentOnlySection,
-		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -230,33 +228,8 @@ export default function BlockTools( {
 					return;
 				}
 
-				if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
-					// Open the visibility breakpoints modal.
-					setVisibilityModalClientIds( clientIds );
-				} else {
-					const hasHiddenBlock = blocks.some(
-						( block ) =>
-							block.attributes.metadata?.blockVisibility === false
-					);
-					const attributesByClientId = Object.fromEntries(
-						blocks.map(
-							( { clientId: mapClientId, attributes } ) => [
-								mapClientId,
-								{
-									metadata: cleanEmptyObject( {
-										...attributes?.metadata,
-										blockVisibility: hasHiddenBlock
-											? undefined
-											: false,
-									} ),
-								},
-							]
-						)
-					);
-					updateBlockAttributes( clientIds, attributesByClientId, {
-						uniqueByBlock: true,
-					} );
-				}
+				// Open the visibility breakpoints modal.
+				setVisibilityModalClientIds( clientIds );
 			}
 		}
 

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

@@ -1,21 +1,5 @@
 export { default as BlockVisibilityModal } from './modal';
 export { default as useBlockVisibility } from './use-block-visibility';
-
-import BlockVisibilityToolbarDefault from './toolbar';
-import BlockVisibilityViewportToolbar from './viewport-toolbar';
-
-import BlockVisibilityMenuItemDefault from './menu-item';
-import BlockVisibilityViewportMenuItem from './viewport-menu-item';
-
-const hasViewportVisibilityExperiment =
-	typeof window !== 'undefined' &&
-	window.__experimentalHideBlocksBasedOnScreenSize;
-
-// Conditionally export the viewport versions when the experimental flag is enabled.
-export const BlockVisibilityMenuItem = hasViewportVisibilityExperiment
-	? BlockVisibilityViewportMenuItem
-	: BlockVisibilityMenuItemDefault;
-
-export const BlockVisibilityToolbar = hasViewportVisibilityExperiment
-	? BlockVisibilityViewportToolbar
-	: BlockVisibilityToolbarDefault;
+export { default as ViewportVisibilityToolbar } from './viewport-toolbar';
+export { default as BlockVisibilityViewportMenuItem } from './viewport-menu-item';
+export { default as ViewportVisibilityInfo } from './viewport-visibility-info';

package/src/components/block-visibility/modal.js

@@ -118,7 +118,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			return sprintf(
 				// translators: %s: The shortcut key to access the List View.
 				__(
-					'Block visibility settings saved. You can access them via the List View (%s).'
+					'Block visibility settings updated. You can access them via the List View (%s).'
 				),
 				listViewShortcut
 			);
@@ -160,18 +160,20 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			event.preventDefault();
 			const newVisibility = hideEverywhere
 				? false
-				: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(
-						( acc, [ , { key } ] ) => {
-							if ( viewportChecked[ key ] ) {
-								// Values are inverted to hide the block on the selected viewport.
-								// In the UI, the checkbox is checked (true) when the block is hidden on the selected viewport,
-								// so 'false' means hide the block on the selected viewport.
-								acc[ key ] = false;
-							}
-							return acc;
-						},
-						{}
-				  );
+				: {
+						viewport: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(
+							( acc, [ , { key } ] ) => {
+								if ( viewportChecked[ key ] ) {
+									// Values are inverted to hide the block on the selected viewport.
+									// In the UI, the checkbox is checked (true) when the block is hidden on the selected viewport,
+									// so 'false' means hide the block on the selected viewport.
+									acc[ key ] = false;
+								}
+								return acc;
+							},
+							{}
+						),
+				  };
 			const attributesByClientId = Object.fromEntries(
 				blocks.map( ( { clientId, attributes } ) => [
 					clientId,
@@ -190,7 +192,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			createSuccessNotice( noticeMessage, {
 				id: hideEverywhere
 					? 'block-visibility-hidden'
-					: 'block-visibility-viewports-saved',
+					: 'block-visibility-viewports-updated',
 				type: 'snackbar',
 			} );
 			onClose();

package/src/components/block-visibility/test/use-block-visibility.js

@@ -38,12 +38,6 @@ describe( 'useBlockVisibility', () => {
 	beforeEach( () => {
 		// Reset all mocks before each test
 		jest.clearAllMocks();
-		// Enable experimental flag
-		window.__experimentalHideBlocksBasedOnScreenSize = true;
-	} );
-
-	afterEach( () => {
-		delete window.__experimentalHideBlocksBasedOnScreenSize;
 	} );
 
 	describe( 'Device type overrides', () => {
@@ -52,7 +46,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { mobile: false },
+					blockVisibility: { viewport: { mobile: false } },
 					deviceType: 'mobile',
 				} )
 			);
@@ -66,9 +60,11 @@ describe( 'useBlockVisibility', () => {
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
 					blockVisibility: {
-						mobile: true,
-						tablet: false,
-						desktop: false,
+						viewport: {
+							mobile: true,
+							tablet: false,
+							desktop: false,
+						},
 					},
 					deviceType: 'mobile',
 				} )
@@ -82,7 +78,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { tablet: false },
+					blockVisibility: { viewport: { tablet: false } },
 					deviceType: 'tablet',
 				} )
 			);
@@ -98,7 +94,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { desktop: false },
+					blockVisibility: { viewport: { desktop: false } },
 					deviceType: 'desktop',
 				} )
 			);
@@ -116,7 +112,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { mobile: false },
+					blockVisibility: { viewport: { mobile: false } },
 					deviceType: 'desktop',
 				} )
 			);
@@ -133,9 +129,11 @@ describe( 'useBlockVisibility', () => {
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
 					blockVisibility: {
-						mobile: true,
-						tablet: false,
-						desktop: false,
+						viewport: {
+							mobile: true,
+							tablet: false,
+							desktop: false,
+						},
 					},
 					deviceType: 'desktop',
 				} )
@@ -152,7 +150,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { tablet: false },
+					blockVisibility: { viewport: { tablet: false } },
 					deviceType: 'desktop',
 				} )
 			);
@@ -169,9 +167,11 @@ describe( 'useBlockVisibility', () => {
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
 					blockVisibility: {
-						mobile: false,
-						tablet: true,
-						desktop: false,
+						viewport: {
+							mobile: false,
+							tablet: true,
+							desktop: false,
+						},
 					},
 					deviceType: 'desktop',
 				} )
@@ -188,7 +188,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { desktop: false },
+					blockVisibility: { viewport: { desktop: false } },
 					deviceType: 'desktop',
 				} )
 			);
@@ -205,9 +205,11 @@ describe( 'useBlockVisibility', () => {
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
 					blockVisibility: {
-						mobile: false,
-						tablet: false,
-						desktop: true,
+						viewport: {
+							mobile: false,
+							tablet: false,
+							desktop: true,
+						},
 					},
 					deviceType: 'desktop',
 				} )
@@ -306,7 +308,7 @@ describe( 'useBlockVisibility', () => {
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
-					blockVisibility: { desktop: false },
+					blockVisibility: { viewport: { desktop: false } },
 				} )
 			);
 

package/src/components/block-visibility/test/utils.js

@@ -21,7 +21,9 @@ describe( 'block-visibility utils', () => {
 				{
 					attributes: {
 						metadata: {
-							blockVisibility: {},
+							blockVisibility: {
+								viewport: {},
+							},
 						},
 					},
 				},
@@ -75,7 +77,9 @@ describe( 'block-visibility utils', () => {
 					attributes: {
 						metadata: {
 							blockVisibility: {
-								mobile: false,
+								viewport: {
+									mobile: false,
+								},
 							},
 						},
 					},
@@ -83,7 +87,9 @@ describe( 'block-visibility utils', () => {
 				{
 					attributes: {
 						metadata: {
-							blockVisibility: {},
+							blockVisibility: {
+								viewport: {},
+							},
 						},
 					},
 				},
@@ -105,7 +111,9 @@ describe( 'block-visibility utils', () => {
 				{
 					attributes: {
 						metadata: {
-							blockVisibility: {},
+							blockVisibility: {
+								viewport: {},
+							},
 						},
 					},
 				},
@@ -122,7 +130,9 @@ describe( 'block-visibility utils', () => {
 				attributes: {
 					metadata: {
 						blockVisibility: {
-							mobile: false,
+							viewport: {
+								mobile: false,
+							},
 						},
 					},
 				},
@@ -188,7 +198,9 @@ describe( 'block-visibility utils', () => {
 				{
 					attributes: {
 						metadata: {
-							blockVisibility: {},
+							blockVisibility: {
+								viewport: {},
+							},
 						},
 					},
 				},
@@ -245,7 +257,9 @@ describe( 'block-visibility utils', () => {
 					attributes: {
 						metadata: {
 							blockVisibility: {
-								mobile: false,
+								viewport: {
+									mobile: false,
+								},
 							},
 						},
 					},
@@ -254,7 +268,9 @@ describe( 'block-visibility utils', () => {
 					attributes: {
 						metadata: {
 							blockVisibility: {
-								tablet: false,
+								viewport: {
+									tablet: false,
+								},
 							},
 						},
 					},

package/src/components/block-visibility/use-block-visibility.js

@@ -53,10 +53,7 @@ export default function useBlockVisibility( options = {} ) {
 			return true;
 		}
 
-		if (
-			window.__experimentalHideBlocksBasedOnScreenSize &&
-			blockVisibility?.[ currentViewport ] === false
-		) {
+		if ( blockVisibility?.viewport?.[ currentViewport ] === false ) {
 			return true;
 		}
 

package/src/components/block-visibility/utils.js

@@ -27,6 +27,14 @@ function isBlockHiddenForViewport( block, viewport ) {
 		return false;
 	}
 
+	// Get viewport configuration from nested structure.
+	const viewportConfig = blockVisibility.viewport;
+
+	// If no viewport config, block is not hidden for any specific viewport.
+	if ( ! viewportConfig || 'object' !== typeof viewportConfig ) {
+		return false;
+	}
+
 	// Check if the viewport is valid.
 	if (
 		! BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
@@ -37,7 +45,7 @@ function isBlockHiddenForViewport( block, viewport ) {
 	}
 
 	// Check if the specific viewport is hidden.
-	return blockVisibility[ viewport ] === false;
+	return viewportConfig[ viewport ] === false;
 }
 
 /**

package/src/components/block-visibility/viewport-menu-item.js

@@ -16,11 +16,17 @@ import { unlock } from '../../lock-unlock';
 
 export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const areBlocksHiddenAnywhere = useSelect(
-		( select ) =>
-			unlock( select( blockEditorStore ) ).areBlocksHiddenAnywhere(
-				clientIds
-			),
+	const { areBlocksHiddenAnywhere } = useSelect(
+		( select ) => {
+			const { isBlockHiddenAnywhere } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				areBlocksHiddenAnywhere: clientIds?.every( ( clientId ) =>
+					isBlockHiddenAnywhere( clientId )
+				),
+			};
+		},
 		[ clientIds ]
 	);
 	return (

package/src/components/block-visibility/viewport-toolbar.js

@@ -20,11 +20,8 @@ export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(
 		( select ) => {
-			const {
-				getBlocksByClientId,
-				getBlockName,
-				areBlocksHiddenAnywhere: _areBlocksHiddenAnywhere,
-			} = unlock( select( blockEditorStore ) );
+			const { getBlocksByClientId, getBlockName, isBlockHiddenAnywhere } =
+				unlock( select( blockEditorStore ) );
 			const _blocks = getBlocksByClientId( clientIds );
 			return {
 				canToggleBlockVisibility: _blocks.every( ( { clientId } ) =>
@@ -34,7 +31,9 @@ export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 						true
 					)
 				),
-				areBlocksHiddenAnywhere: _areBlocksHiddenAnywhere( clientIds ),
+				areBlocksHiddenAnywhere: clientIds?.every( ( clientId ) =>
+					isBlockHiddenAnywhere( clientId )
+				),
 			};
 		},
 

package/src/components/block-visibility/viewport-visibility-info.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { unseen } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as blockEditorStore } from '../../store';
+import useBlockVisibility from './use-block-visibility';
+import { deviceTypeKey } from '../../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+
+const { Badge } = unlock( componentsPrivateApis );
+const DEFAULT_VISIBILITY_STATE = {
+	currentBlockVisibility: undefined,
+	hasParentHiddenEverywhere: false,
+	selectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+};
+
+export default function ViewportVisibilityInfo( { clientId } ) {
+	const {
+		currentBlockVisibility,
+		selectedDeviceType,
+		hasParentHiddenEverywhere,
+	} = useSelect(
+		( select ) => {
+			if ( ! clientId ) {
+				return DEFAULT_VISIBILITY_STATE;
+			}
+			const {
+				getBlockAttributes,
+				isBlockParentHiddenEverywhere,
+				getSettings,
+			} = unlock( select( blockEditorStore ) );
+
+			return {
+				currentBlockVisibility:
+					getBlockAttributes( clientId )?.metadata?.blockVisibility,
+				selectedDeviceType:
+					getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+				hasParentHiddenEverywhere:
+					isBlockParentHiddenEverywhere( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)
+	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
+		blockVisibility: currentBlockVisibility,
+		deviceType: selectedDeviceType,
+	} );
+
+	/*
+	 * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.
+	 * Separated because it depends on currentViewport from the hook above.
+	 */
+	const isBlockParentHiddenAtViewport = useSelect(
+		( select ) => {
+			if ( ! clientId || ! currentViewport ) {
+				return false;
+			}
+			return unlock(
+				select( blockEditorStore )
+			).isBlockParentHiddenAtViewport( clientId, currentViewport );
+		},
+		[ clientId, currentViewport ]
+	);
+
+	if (
+		! (
+			isBlockCurrentlyHidden ||
+			hasParentHiddenEverywhere ||
+			isBlockParentHiddenAtViewport
+		)
+	) {
+		return null;
+	}
+
+	// Determine label based on whether block or parent is hidden
+	let label;
+	if ( isBlockCurrentlyHidden ) {
+		// Block is currently hidden - check if hidden everywhere or at specific viewport
+		if ( currentBlockVisibility === false ) {
+			label = __( 'Block is hidden' );
+		} else {
+			const viewportLabel =
+				BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||
+				currentViewport;
+			label = sprintf(
+				/* translators: %s: viewport name (Desktop, Tablet, Mobile) */
+				__( 'Block is hidden on %s' ),
+				viewportLabel
+			);
+		}
+	}
+
+	// Parent is hidden - check if hidden everywhere or at specific viewport
+	if ( hasParentHiddenEverywhere ) {
+		label = __( 'Parent block is hidden' );
+	} else if ( isBlockParentHiddenAtViewport ) {
+		const viewportLabel =
+			BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||
+			currentViewport;
+		label = sprintf(
+			/* translators: %s: viewport name (Desktop, Tablet, Mobile) */
+			__( 'Parent block is hidden on %s' ),
+			viewportLabel
+		);
+	}
+
+	return (
+		<Badge className="block-editor-block-visibility-info">
+			<HStack spacing={ 2 } justify="start">
+				<Icon icon={ unseen } />
+				<Text>{ label }</Text>
+			</HStack>
+		</Badge>
+	);
+}

package/src/components/button-block-appender/index.js

@@ -54,6 +54,8 @@ function ButtonBlockAppender(
 					  );
 
 				return (
+					// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
+					// eslint-disable-next-line @wordpress/components-no-unsafe-button-disabled
 					<Button
 						__next40pxDefaultSize
 						ref={ ref }
@@ -66,8 +68,6 @@ function ButtonBlockAppender(
 						onClick={ onToggle }
 						aria-haspopup={ isToggleButton ? 'true' : undefined }
 						aria-expanded={ isToggleButton ? isOpen : undefined }
-						// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
-						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
 						showTooltip

package/src/components/color-palette/with-color-context.js

@@ -9,7 +9,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
-	return ( props ) => {
+	return function WithColorContext( props ) {
 		// Get the default colors, theme colors, and custom colors
 		const [
 			defaultColors,

package/src/components/color-style-selector/index.js

@@ -49,9 +49,8 @@ const ColorSelectorIcon = ( { style, className } ) => {
  *
  * @return {*} React toggle button component.
  */
-const renderToggleComponent =
-	( { TextColor, BackgroundColor } ) =>
-	( { onToggle, isOpen } ) => {
+const renderToggleComponent = ( { TextColor, BackgroundColor } ) =>
+	function ToggleComponent( { onToggle, isOpen } ) {
 		const openOnArrowDown = ( event ) => {
 			if ( ! isOpen && event.keyCode === DOWN ) {
 				event.preventDefault();