@wordpress/block-editor 15.11.0 → 15.12.0

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/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();

package/src/components/colors/with-colors.js

@@ -39,9 +39,10 @@ const upperFirst = ( [ firstLetter, ...rest ] ) =>
  */
 const withCustomColorPalette = ( colorsArray ) =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) => (
-			<WrappedComponent { ...props } colors={ colorsArray } />
-		),
+		( WrappedComponent ) =>
+			function WithCustomColorPalette( props ) {
+				return <WrappedComponent { ...props } colors={ colorsArray } />;
+			},
 		'withCustomColorPalette'
 	);
 
@@ -53,22 +54,24 @@ const withCustomColorPalette = ( colorsArray ) =>
  */
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) => {
-			const [ userPalette, themePalette, defaultPalette ] = useSettings(
-				'color.palette.custom',
-				'color.palette.theme',
-				'color.palette.default'
-			);
-			const allColors = useMemo(
-				() => [
-					...( userPalette || [] ),
-					...( themePalette || [] ),
-					...( defaultPalette || [] ),
-				],
-				[ userPalette, themePalette, defaultPalette ]
-			);
-			return <WrappedComponent { ...props } colors={ allColors } />;
-		},
+		( WrappedComponent ) =>
+			function WithEditorColorPalette( props ) {
+				const [ userPalette, themePalette, defaultPalette ] =
+					useSettings(
+						'color.palette.custom',
+						'color.palette.theme',
+						'color.palette.default'
+					);
+				const allColors = useMemo(
+					() => [
+						...( userPalette || [] ),
+						...( themePalette || [] ),
+						...( defaultPalette || [] ),
+					],
+					[ userPalette, themePalette, defaultPalette ]
+				);
+				return <WrappedComponent { ...props } colors={ allColors } />;
+			},
 		'withEditorColorPalette'
 	);
 
@@ -94,7 +97,7 @@ function createColorHOC( colorTypes, withColorPalette ) {
 	return compose( [
 		withColorPalette,
 		( WrappedComponent ) => {
-			return class extends Component {
+			return class WithColors extends Component {
 				constructor( props ) {
 					super( props );
 

package/src/components/colors-gradients/dropdown.js

@@ -80,9 +80,8 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
-const renderToggle =
-	( settings ) =>
-	( { onToggle, isOpen } ) => {
+const renderToggle = ( settings ) =>
+	function Toggle( { onToggle, isOpen } ) {
 		const {
 			clearable,
 			colorValue,

package/src/components/editable-text/index.js

@@ -12,7 +12,11 @@ const EditableText = forwardRef( ( props, ref ) => {
 	return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
 } );
 
-EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {
+EditableText.Content = function Content( {
+	value = '',
+	tagName: Tag = 'div',
+	...props
+} ) {
 	return <Tag { ...props }>{ value }</Tag>;
 };
 

package/src/components/font-sizes/with-font-sizes.js

@@ -51,19 +51,22 @@ export default ( ...fontSizeNames ) => {
 	return createHigherOrderComponent(
 		compose( [
 			createHigherOrderComponent(
-				( WrappedComponent ) => ( props ) => {
-					const [ fontSizes ] = useSettings( 'typography.fontSizes' );
-					return (
-						<WrappedComponent
-							{ ...props }
-							fontSizes={ fontSizes || DEFAULT_FONT_SIZES }
-						/>
-					);
-				},
+				( WrappedComponent ) =>
+					function WithFontSizesInner( props ) {
+						const [ fontSizes ] = useSettings(
+							'typography.fontSizes'
+						);
+						return (
+							<WrappedComponent
+								{ ...props }
+								fontSizes={ fontSizes || DEFAULT_FONT_SIZES }
+							/>
+						);
+					},
 				'withFontSizes'
 			),
 			( WrappedComponent ) => {
-				return class extends Component {
+				return class WithFontSizes extends Component {
 					constructor( props ) {
 						super( props );
 

package/src/components/global-styles/advanced-panel.js

@@ -14,10 +14,26 @@ import { __ } from '@wordpress/i18n';
  */
 import { default as transformStyles } from '../../utils/transform-styles';
 
+/**
+ * Validates that a CSS string doesn't contain HTML markup.
+ * Uses the same validation as the PHP/global styles REST API.
+ *
+ * @param {string} css The CSS string to validate.
+ * @return {boolean} True if the CSS is valid, false otherwise.
+ */
+export function validateCSS( css ) {
+	// Check for HTML markup.
+	if ( typeof css === 'string' && /<\/?\w/.test( css ) ) {
+		return false;
+	}
+	return true;
+}
+
 export default function AdvancedPanel( {
 	value,
 	onChange,
 	inheritedValue = value,
+	help,
 } ) {
 	// Custom CSS
 	const [ cssError, setCSSError ] = useState( null );
@@ -27,30 +43,32 @@ export default function AdvancedPanel( {
 			...value,
 			css: newValue,
 		} );
-		if ( cssError ) {
-			// Check if the new value is valid CSS, and pass a wrapping selector
-			// to ensure that `transformStyles` validates the CSS. Note that the
-			// wrapping selector here is not used in the actual output of any styles.
-			const [ transformed ] = transformStyles(
-				[ { css: newValue } ],
-				'.for-validation-only'
+
+		// Validate immediately on change for quick feedback.
+		if ( ! validateCSS( newValue ) ) {
+			setCSSError(
+				__( 'The custom CSS is invalid. Do not use <> markup.' )
 			);
-			if ( transformed ) {
-				setCSSError( null );
-			}
+			return;
+		}
+
+		// Clear HTML markup error if CSS is now valid.
+		if ( cssError ) {
+			setCSSError( null );
 		}
 	}
 	function handleOnBlur( event ) {
-		if ( ! event?.target?.value ) {
-			setCSSError( null );
+		const cssValue = event?.target?.value;
+
+		if ( ! cssValue || ! validateCSS( cssValue ) ) {
 			return;
 		}
 
-		// Check if the new value is valid CSS, and pass a wrapping selector
-		// to ensure that `transformStyles` validates the CSS. Note that the
-		// wrapping selector here is not used in the actual output of any styles.
+		// Check if the value is valid CSS structure on blur (more expensive check).
+		// Pass a wrapping selector to ensure that `transformStyles` validates the CSS.
+		// Note that the wrapping selector here is not used in the actual output of any styles.
 		const [ transformed ] = transformStyles(
-			[ { css: event.target.value } ],
+			[ { css: cssValue } ],
 			'.for-validation-only'
 		);
 
@@ -75,6 +93,7 @@ export default function AdvancedPanel( {
 				onBlur={ handleOnBlur }
 				className="block-editor-global-styles-advanced-panel__custom-css-input"
 				spellCheck={ false }
+				help={ help }
 			/>
 		</VStack>
 	);

package/src/components/global-styles/filters-panel.js

@@ -118,9 +118,8 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 	</HStack>
 );
 
-const renderToggle =
-	( duotone, resetDuotone ) =>
-	( { onToggle, isOpen } ) => {
+const renderToggle = ( duotone, resetDuotone ) =>
+	function Toggle( { onToggle, isOpen } ) {
 		const duotoneButtonRef = useRef( undefined );
 
 		const toggleProps = {