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

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/font-size-picker.js

@@ -19,6 +19,7 @@ function FontSizePicker( props ) {
 			{ ...props }
 			fontSizes={ fontSizes }
 			disableCustomFontSizes={ ! customFontSize }
+			__next40pxDefaultSize
 		/>
 	);
 }

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

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

@@ -136,7 +136,7 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 }
 
 function renderShadowToggle( shadow, onShadowChange ) {
-	return ( { onToggle, isOpen } ) => {
+	return function ShadowToggle( { onToggle, isOpen } ) {
 		const shadowButtonRef = useRef( undefined );
 
 		const toggleProps = {

package/src/components/global-styles/style.scss

@@ -100,11 +100,15 @@
 	}
 }
 
-.block-editor-global-styles-advanced-panel__custom-css-input textarea {
-	font-family: $editor_html_font;
-	// CSS input is always LTR regardless of language.
-	/*rtl:ignore*/
-	direction: ltr;
+.block-editor-global-styles-advanced-panel__custom-css-input {
+	margin-bottom: $grid-unit-20;
+
+	textarea {
+		font-family: $editor_html_font;
+		// CSS input is always LTR regardless of language.
+		/*rtl:ignore*/
+		direction: ltr;
+	}
 }
 
 .block-editor-panel-duotone-settings__reset {

package/src/components/gradients/with-gradient.js

@@ -3,7 +3,10 @@
  */
 import { __experimentalUseGradient } from './use-gradient';
 
-export const withGradient = ( WrappedComponent ) => ( props ) => {
-	const { gradientValue } = __experimentalUseGradient();
-	return <WrappedComponent { ...props } gradientValue={ gradientValue } />;
-};
+export const withGradient = ( WrappedComponent ) =>
+	function WithGradient( props ) {
+		const { gradientValue } = __experimentalUseGradient();
+		return (
+			<WrappedComponent { ...props } gradientValue={ gradientValue } />
+		);
+	};

package/src/components/inner-blocks/test/index.js

@@ -27,6 +27,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should return element as string, with inner blocks', () => {
 		registerBlockType( 'core/fruit', {
+			apiVersion: 3,
 			category: 'text',
 
 			title: 'fruit',
@@ -62,6 +63,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should force serialize for invalid block with inner blocks', () => {
 		const blockType = {
+			apiVersion: 3,
 			attributes: {
 				throw: {
 					type: 'boolean',

package/src/components/inspector-controls/fill.js

@@ -15,15 +15,18 @@ import { useEffect, useContext } from '@wordpress/element';
 import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
+	mayDisplayPatternEditingControlsKey,
 } from '../block-edit/context';
 import groups from './groups';
 
-export function PrivateInspectorControlsFill( {
+const PATTERN_EDITING_GROUPS = [ 'content', 'list' ];
+const TEMPLATE_PART_GROUPS = [ 'default', 'settings', 'advanced' ];
+
+export default function InspectorControlsFill( {
 	children,
 	group = 'default',
 	__experimentalGroup,
 	resetAllFilter,
-	forceDisplayControls,
 } ) {
 	if ( __experimentalGroup ) {
 		deprecated(
@@ -43,7 +46,31 @@ export function PrivateInspectorControlsFill( {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! forceDisplayControls && ! context[ mayDisplayControlsKey ] ) {
+
+	// During pattern editing:
+	// - All blocks can show pattern editing groups (content, list).
+	// - Template parts can show a settings tab (default, settings, advanced groups).
+	// - Other blocks cannot show a settings tab.
+	if ( context[ mayDisplayPatternEditingControlsKey ] ) {
+		// Template parts are allowed to show a settings tab to allow access to the
+		// 'Design' and 'Advanced' panels.
+		const isTemplatePart = context.name === 'core/template-part';
+		const isTemplatePartGroup = TEMPLATE_PART_GROUPS.includes( group );
+		const isPatternEditingGroup = PATTERN_EDITING_GROUPS.includes( group );
+
+		const canShowGroup =
+			( isTemplatePart && isTemplatePartGroup ) || isPatternEditingGroup;
+
+		if ( ! canShowGroup ) {
+			return null;
+		}
+	}
+
+	// Outside pattern editing, use the standard rules for displaying controls.
+	if (
+		! context[ mayDisplayPatternEditingControlsKey ] &&
+		! context[ mayDisplayControlsKey ]
+	) {
 		return null;
 	}
 
@@ -64,23 +91,6 @@ export function PrivateInspectorControlsFill( {
 	);
 }
 
-export default function InspectorControlsFill( {
-	children,
-	group = 'default',
-	__experimentalGroup,
-	resetAllFilter,
-} ) {
-	return (
-		<PrivateInspectorControlsFill
-			group={ group }
-			__experimentalGroup={ __experimentalGroup }
-			resetAllFilter={ resetAllFilter }
-		>
-			{ children }
-		</PrivateInspectorControlsFill>
-	);
-}
-
 function RegisterResetAll( { resetAllFilter, children } ) {
 	const { registerResetAllFilter, deregisterResetAllFilter } =
 		useContext( ToolsPanelContext );

package/src/components/inspector-controls/index.js

@@ -12,7 +12,7 @@ InspectorControls.Slot = InspectorControlsSlot;
 export const InspectorAdvancedControls = ( props ) => {
 	return <InspectorControlsFill { ...props } group="advanced" />;
 };
-InspectorAdvancedControls.Slot = ( props ) => {
+InspectorAdvancedControls.Slot = function Slot( props ) {
 	return <InspectorControlsSlot { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';

package/src/components/inspector-controls-tabs/index.js

@@ -44,7 +44,11 @@ export default function InspectorControlsTabs( {
 
 	// Auto-select first available tab unless user has made a selection
 	useEffect( () => {
-		if ( ! tabs?.length || hasUserSelectionRef.current ) {
+		if (
+			! tabs?.length ||
+			( hasUserSelectionRef.current &&
+				tabs.some( ( tab ) => tab.name === selectedTabId ) )
+		) {
 			return;
 		}
 

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -84,27 +84,29 @@ export default function useInspectorControlsTabs(
 		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
 	];
 
+	// When the block fields experiment is active, only rely on `hasContentFills`
+	// to determine whether the content tab to be shown. The tab purely uses slot
+	// fills in this situation.
+	const shouldShowBlockFields =
+		window?.__experimentalContentOnlyInspectorFields;
 	const hasContentTab =
 		hasContentFills ||
-		!! ( contentClientIds && contentClientIds.length > 0 );
+		( ! shouldShowBlockFields && contentClientIds?.length );
 
-	const hasListTab = hasListFills && ! isSectionBlock;
+	if ( hasContentTab ) {
+		tabs.push( TAB_CONTENT );
+	}
 
 	// Add the tabs in the order that they will default to if available.
 	// List View > Content > Settings > Styles.
-	if ( hasListTab ) {
+	if ( hasListFills ) {
 		tabs.push( TAB_LIST_VIEW );
 	}
 
-	if ( hasContentTab ) {
-		tabs.push( TAB_CONTENT );
-	}
-
 	if (
-		( settingsFills.length ||
-			// Advanded fills who up in settings tab if available or they blend into the default tab, if there's only one tab.
-			( advancedFills.length && ( hasContentTab || hasListTab ) ) ) &&
-		! isSectionBlock
+		settingsFills.length ||
+		// Advanced fills show up in settings tab if available or they blend into the default tab, if there's only one tab.
+		( advancedFills.length && ( hasContentTab || hasListFills ) )
 	) {
 		tabs.push( TAB_SETTINGS );
 	}

package/src/components/link-control/test/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	fireEvent,
-	render,
+	render as baseRender,
 	screen,
 	waitFor,
 	within,
@@ -13,6 +13,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * WordPress dependencies
  */
+import { SlotFillProvider } from '@wordpress/components';
 import { useState, createElement } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
@@ -79,6 +80,10 @@ afterEach( () => {
 	mockFetchRichUrlData?.mockReset(); // Conditionally reset as it may NOT be a mock.
 } );
 
+function render( ui ) {
+	return baseRender( ui, { wrapper: SlotFillProvider } );
+}
+
 /**
  * Workaround to trigger an arrow up keypress event.
  *

package/src/components/list-view/block-select-button.js

@@ -21,7 +21,6 @@ import {
 } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
-import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -61,30 +60,22 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { canToggleBlockVisibility, isBlockHidden, hasPatternName } =
-		useSelect(
-			( select ) => {
-				const { getBlockName, getBlockAttributes } =
-					select( blockEditorStore );
-				const { areBlocksHiddenAnywhere } = unlock(
-					select( blockEditorStore )
-				);
-				const blockAttributes = getBlockAttributes( clientId );
-				return {
-					canToggleBlockVisibility: hasBlockSupport(
-						getBlockName( clientId ),
-						'visibility',
-						true
-					),
-					isBlockHidden: areBlocksHiddenAnywhere( [ clientId ] ),
-					hasPatternName: !! blockAttributes?.metadata?.patternName,
-				};
-			},
-			[ clientId ]
-		);
+	const { isBlockHidden, hasPatternName } = useSelect(
+		( select ) => {
+			const {
+				isBlockHiddenAnywhere: _isBlockHidden,
+				getBlockAttributes,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				isBlockHidden: _isBlockHidden( clientId ),
+				hasPatternName:
+					!! getBlockAttributes( clientId )?.metadata?.patternName,
+			};
+		},
+		[ clientId ]
+	);
+
 	const shouldShowLockIcon = isLocked;
-	const shouldShowBlockVisibilityIcon =
-		canToggleBlockVisibility && isBlockHidden;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
@@ -170,7 +161,7 @@ function ListViewBlockSelectButton(
 						) ) }
 					</span>
 				) : null }
-				{ shouldShowBlockVisibilityIcon && (
+				{ isBlockHidden && (
 					<span className="block-editor-list-view-block-select-button__block-visibility">
 						<Icon icon={ unseen } />
 					</span>

package/src/components/list-view/block.js

@@ -25,7 +25,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
@@ -53,8 +53,9 @@ import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
-import { cleanEmptyObject } from '../../hooks/utils';
-import { BlockVisibilityModal } from '../block-visibility';
+import { useBlockVisibility, BlockVisibilityModal } from '../block-visibility';
+import { deviceTypeKey } from '../../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../block-visibility/constants';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -98,7 +99,6 @@ function ListViewBlock( {
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	const debouncedToggleBlockHighlight = useDebounce(
@@ -125,29 +125,52 @@ function ListViewBlock( {
 
 	const pasteStyles = usePasteStyles();
 
-	const { block, blockName, allowRightClickOverrides, isBlockHidden } =
+	const { block, blockName, allowRightClickOverrides, selectedDeviceType } =
 		useSelect(
 			( select ) => {
-				const {
-					getBlock,
-					getBlockName: _getBlockName,
-					getSettings,
-				} = select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
+				const { getBlock, getBlockName, getSettings } = unlock(
 					select( blockEditorStore )
 				);
 
 				return {
 					block: getBlock( clientId ),
-					blockName: _getBlockName( clientId ),
+					blockName: getBlockName( clientId ),
 					allowRightClickOverrides:
 						getSettings().allowRightClickOverrides,
-					isBlockHidden: _isBlockHidden( clientId ),
+					selectedDeviceType:
+						getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
+						BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
 				};
 			},
 			[ clientId ]
 		);
 
+	// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)
+	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
+		blockVisibility: block?.attributes?.metadata?.blockVisibility,
+		deviceType: selectedDeviceType,
+	} );
+
+	// Determine label based on whether block or parent is hidden
+	const blockVisibilityDescription = useMemo( () => {
+		if ( isBlockCurrentlyHidden ) {
+			if ( block?.attributes?.metadata?.blockVisibility === false ) {
+				return __( 'Block is hidden' );
+			}
+			return sprintf(
+				/* translators: %s: viewport name (Desktop, Tablet, Mobile) */
+				__( 'Block is hidden on %s' ),
+				BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||
+					currentViewport
+			);
+		}
+		return null;
+	}, [
+		isBlockCurrentlyHidden,
+		block?.attributes?.metadata?.blockVisibility,
+		currentViewport,
+	] );
+
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
 		// since that menu is part of the toolbar in the editor canvas.
@@ -387,32 +410,8 @@ function ListViewBlock( {
 				return;
 			}
 
-			if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
-				// Open the visibility breakpoints modal.
-				setVisibilityModalClientIds( blocksToUpdate );
-			} else {
-				const hasHiddenBlock = blocks.some(
-					( blockToUpdate ) =>
-						blockToUpdate.attributes.metadata?.blockVisibility ===
-						false
-				);
-				const attributesByClientId = Object.fromEntries(
-					blocks.map( ( { clientId: mapClientId, attributes } ) => [
-						mapClientId,
-						{
-							metadata: cleanEmptyObject( {
-								...attributes?.metadata,
-								blockVisibility: hasHiddenBlock
-									? undefined
-									: false,
-							} ),
-						},
-					] )
-				);
-				updateBlockAttributes( blocksToUpdate, attributesByClientId, {
-					uniqueByBlock: true,
-				} );
-			}
+			// Open the visibility breakpoints modal.
+			setVisibilityModalClientIds( blocksToUpdate );
 		}
 	}
 
@@ -540,10 +539,6 @@ function ListViewBlock( {
 		isLocked
 	);
 
-	const blockVisibilityDescription = isBlockHidden
-		? __( 'Block is hidden.' )
-		: null;
-
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = clsx(