@wordpress/block-editor 15.17.0 → 15.18.1-next.v.202604201441.0

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

@@ -33,69 +33,63 @@ import { setImmutably } from '../../utils/object';
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
 export function useHasDimensionsPanel( settings ) {
-	const hasContentSize = useHasContentSize( settings );
-	const hasWideSize = useHasWideSize( settings );
-	const hasPadding = useHasPadding( settings );
-	const hasMargin = useHasMargin( settings );
-	const hasGap = useHasGap( settings );
-	const hasHeight = useHasHeight( settings );
-	const hasMinHeight = useHasMinHeight( settings );
-	const hasWidth = useHasWidth( settings );
-	const hasAspectRatio = useHasAspectRatio( settings );
-	const hasChildLayout = useHasChildLayout( settings );
-
 	return (
 		Platform.OS === 'web' &&
-		( hasContentSize ||
-			hasWideSize ||
-			hasPadding ||
-			hasMargin ||
-			hasGap ||
-			hasHeight ||
-			hasMinHeight ||
-			hasWidth ||
-			hasAspectRatio ||
-			hasChildLayout )
+		( hasContentSize( settings ) ||
+			hasWideSize( settings ) ||
+			hasPadding( settings ) ||
+			hasMargin( settings ) ||
+			hasGap( settings ) ||
+			hasHeight( settings ) ||
+			hasMinHeight( settings ) ||
+			hasMinWidth( settings ) ||
+			hasWidth( settings ) ||
+			hasAspectRatio( settings ) ||
+			hasChildLayout( settings ) )
 	);
 }
 
-function useHasContentSize( settings ) {
+function hasContentSize( settings ) {
 	return settings?.layout?.contentSize;
 }
 
-function useHasWideSize( settings ) {
+function hasWideSize( settings ) {
 	return settings?.layout?.wideSize;
 }
 
-function useHasPadding( settings ) {
+function hasPadding( settings ) {
 	return settings?.spacing?.padding;
 }
 
-function useHasMargin( settings ) {
+function hasMargin( settings ) {
 	return settings?.spacing?.margin;
 }
 
-function useHasGap( settings ) {
+function hasGap( settings ) {
 	return settings?.spacing?.blockGap;
 }
 
-function useHasHeight( settings ) {
+function hasHeight( settings ) {
 	return settings?.dimensions?.height;
 }
 
-function useHasMinHeight( settings ) {
+function hasMinHeight( settings ) {
 	return settings?.dimensions?.minHeight;
 }
 
-function useHasWidth( settings ) {
+function hasMinWidth( settings ) {
+	return settings?.dimensions?.minWidth;
+}
+
+function hasWidth( settings ) {
 	return settings?.dimensions?.width;
 }
 
-function useHasAspectRatio( settings ) {
+function hasAspectRatio( settings ) {
 	return settings?.dimensions?.aspectRatio;
 }
 
-function useHasChildLayout( settings ) {
+function hasChildLayout( settings ) {
 	const {
 		type: parentLayoutType = 'default',
 		default: { type: defaultParentLayoutType = 'default' } = {},
@@ -111,7 +105,7 @@ function useHasChildLayout( settings ) {
 	return !! settings?.layout && support;
 }
 
-function useHasSpacingPresets( settings ) {
+function hasSpacingPresets( settings ) {
 	const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {};
 	return (
 		( defaultSpacingSizes !== false &&
@@ -219,6 +213,7 @@ const DEFAULT_CONTROLS = {
 	blockGap: true,
 	height: true,
 	minHeight: true,
+	minWidth: true,
 	width: true,
 	aspectRatio: true,
 	childLayout: true,
@@ -257,7 +252,7 @@ export default function DimensionsPanel( {
 		);
 	};
 
-	const showSpacingPresetsControl = useHasSpacingPresets( settings );
+	const showSpacingPresetsControl = hasSpacingPresets( settings );
 	const units = useCustomUnits( {
 		availableUnits: settings?.spacing?.units || [
 			'%',
@@ -272,9 +267,40 @@ export default function DimensionsPanel( {
 	const minimumMargin = -Infinity;
 	const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin );
 
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			layout: cleanEmptyObject( {
+				...previousValue?.layout,
+				contentSize: undefined,
+				wideSize: undefined,
+				selfStretch: undefined,
+				flexSize: undefined,
+				columnStart: undefined,
+				rowStart: undefined,
+				columnSpan: undefined,
+				rowSpan: undefined,
+			} ),
+			spacing: {
+				...previousValue?.spacing,
+				padding: undefined,
+				margin: undefined,
+				blockGap: undefined,
+			},
+			dimensions: {
+				...previousValue?.dimensions,
+				height: undefined,
+				minHeight: undefined,
+				minWidth: undefined,
+				aspectRatio: undefined,
+				width: undefined,
+			},
+		};
+	}, [] );
+
 	// Content Width
 	const showContentSizeControl =
-		useHasContentSize( settings ) && includeLayoutControls;
+		hasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
 		onChange(
@@ -290,7 +316,7 @@ export default function DimensionsPanel( {
 
 	// Wide Width
 	const showWideSizeControl =
-		useHasWideSize( settings ) && includeLayoutControls;
+		hasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
 		onChange(
@@ -305,7 +331,7 @@ export default function DimensionsPanel( {
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
 
 	// Padding
-	const showPaddingControl = useHasPadding( settings );
+	const showPaddingControl = hasPadding( settings );
 	const rawPadding = decodeValue( inheritedValue?.spacing?.padding );
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = Array.isArray( settings?.spacing?.padding )
@@ -325,7 +351,7 @@ export default function DimensionsPanel( {
 	const onMouseOverPadding = () => onVisualize( 'padding' );
 
 	// Margin
-	const showMarginControl = useHasMargin( settings );
+	const showMarginControl = hasMargin( settings );
 	const rawMargin = decodeValue( inheritedValue?.spacing?.margin );
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = Array.isArray( settings?.spacing?.margin )
@@ -345,7 +371,7 @@ export default function DimensionsPanel( {
 	const onMouseOverMargin = () => onVisualize( 'margin' );
 
 	// Block Gap
-	const showGapControl = useHasGap( settings );
+	const showGapControl = hasGap( settings );
 	const gapSides = Array.isArray( settings?.spacing?.blockGap )
 		? settings?.spacing?.blockGap
 		: settings?.spacing?.blockGap?.sides;
@@ -376,7 +402,7 @@ export default function DimensionsPanel( {
 	const hasGapValue = () => !! value?.spacing?.blockGap;
 
 	// Min Height
-	const showMinHeightControl = useHasMinHeight( settings );
+	const showMinHeightControl = hasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
 		const tempValue = setImmutably(
@@ -399,7 +425,7 @@ export default function DimensionsPanel( {
 	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
 
 	// Height
-	const showHeightControl = useHasHeight( settings );
+	const showHeightControl = hasHeight( settings );
 	const heightValue = decodeValue( inheritedValue?.dimensions?.height );
 	const setHeightValue = ( newValue ) => {
 		const tempValue = setImmutably(
@@ -421,8 +447,21 @@ export default function DimensionsPanel( {
 	};
 	const hasHeightValue = () => !! value?.dimensions?.height;
 
+	// Min Width
+	const showMinWidthControl = hasMinWidth( settings );
+	const minWidthValue = decodeValue( inheritedValue?.dimensions?.minWidth );
+	const setMinWidthValue = ( newValue ) => {
+		onChange(
+			setImmutably( value, [ 'dimensions', 'minWidth' ], newValue )
+		);
+	};
+	const resetMinWidthValue = () => {
+		setMinWidthValue( undefined );
+	};
+	const hasMinWidthValue = () => !! value?.dimensions?.minWidth;
+
 	// Width
-	const showWidthControl = useHasWidth( settings );
+	const showWidthControl = hasWidth( settings );
 	const widthValue = decodeValue( inheritedValue?.dimensions?.width );
 	const setWidthValue = ( newValue ) => {
 		onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) );
@@ -433,7 +472,7 @@ export default function DimensionsPanel( {
 	const hasWidthValue = () => !! value?.dimensions?.width;
 
 	// Aspect Ratio
-	const showAspectRatioControl = useHasAspectRatio( settings );
+	const showAspectRatioControl = hasAspectRatio( settings );
 	const aspectRatioValue = decodeValue(
 		inheritedValue?.dimensions?.aspectRatio
 	);
@@ -451,7 +490,7 @@ export default function DimensionsPanel( {
 	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
 
 	// Child Layout
-	const showChildLayoutControl = useHasChildLayout( settings );
+	const showChildLayoutControl = hasChildLayout( settings );
 	const childLayout = inheritedValue?.layout;
 
 	const setChildLayout = ( newChildLayout ) => {
@@ -463,36 +502,6 @@ export default function DimensionsPanel( {
 		} );
 	};
 
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			layout: cleanEmptyObject( {
-				...previousValue?.layout,
-				contentSize: undefined,
-				wideSize: undefined,
-				selfStretch: undefined,
-				flexSize: undefined,
-				columnStart: undefined,
-				rowStart: undefined,
-				columnSpan: undefined,
-				rowSpan: undefined,
-			} ),
-			spacing: {
-				...previousValue?.spacing,
-				padding: undefined,
-				margin: undefined,
-				blockGap: undefined,
-			},
-			dimensions: {
-				...previousValue?.dimensions,
-				height: undefined,
-				minHeight: undefined,
-				aspectRatio: undefined,
-				width: undefined,
-			},
-		};
-	}, [] );
-
 	const onMouseLeaveControls = () => onVisualize( false );
 
 	return (
@@ -739,6 +748,24 @@ export default function DimensionsPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showMinWidthControl && (
+				<ToolsPanelItem
+					hasValue={ hasMinWidthValue }
+					label={ __( 'Minimum width' ) }
+					onDeselect={ resetMinWidthValue }
+					isShownByDefault={
+						defaultControls.minWidth ?? DEFAULT_CONTROLS.minWidth
+					}
+					panelId={ panelId }
+				>
+					<DimensionControl
+						label={ __( 'Minimum width' ) }
+						value={ minWidthValue }
+						onChange={ setMinWidthValue }
+						dimensionSizes={ dimensions?.dimensionSizes }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ showHeightControl && (
 				<ToolsPanelItem
 					hasValue={ hasHeightValue }

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

@@ -10,8 +10,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
-	// TODO: Replace this ZStack with ad hoc CSS.
-	// eslint-disable-next-line @wordpress/use-recommended-components
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	MenuGroup,

package/src/components/global-styles/hooks.js

@@ -166,14 +166,16 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		[ 'aspectRatio', 'height', 'minHeight', 'width' ].forEach( ( key ) => {
-			if ( ! supportedStyles.includes( key ) ) {
-				updatedSettings.dimensions = {
-					...updatedSettings.dimensions,
-					[ key ]: false,
-				};
+		[ 'aspectRatio', 'height', 'minHeight', 'minWidth', 'width' ].forEach(
+			( key ) => {
+				if ( ! supportedStyles.includes( key ) ) {
+					updatedSettings.dimensions = {
+						...updatedSettings.dimensions,
+						[ key ]: false,
+					};
+				}
 			}
-		} );
+		);
 
 		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
 			if (

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

@@ -71,7 +71,7 @@
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	display: inline-flex;
 	align-items: center;
 

package/src/components/inserter/style.scss

@@ -85,7 +85,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__toggle.components-button {
 	display: inline-flex;
 	align-items: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	border: none;
 	outline: none;
 	padding: 0;
@@ -482,7 +482,7 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__media-list__list-item {
 	position: relative;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	margin-bottom: $grid-unit-30;
 
 	&.is-placeholder {

package/src/components/inserter-list-item/style.scss

@@ -42,7 +42,7 @@
 	padding: $grid-unit-10;
 	align-items: stretch;
 	justify-content: center;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: transparent;
 	word-break: break-word;
 	@media not ( prefers-reduced-motion ) {

package/src/components/list-view/style.scss

@@ -469,7 +469,7 @@ $block-navigation-max-indent: 8;
 .block-editor-list-view__expander {
 	height: $icon-size;
 	width: $icon-size;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {

package/src/components/media-placeholder/content.scss

@@ -7,7 +7,7 @@
 	min-height: 0;
 
 	&:hover {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
 }

package/src/components/url-input/style.scss

@@ -61,7 +61,7 @@ $input-size: 300px;
 	color: $gray-700;
 	display: block;
 	font-size: $default-font-size;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	background: $white;
 	width: 100%;
 	border: none;

package/src/components/url-popover/image-url-input-ui.js

@@ -38,7 +38,7 @@ const LINK_DESTINATION_NONE = 'none';
 const LINK_DESTINATION_CUSTOM = 'custom';
 const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
-const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
+const NEW_TAB_REL = [ 'noopener' ];
 
 const ImageURLInputUI = ( {
 	linkDestination,

package/src/components/writing-flow/use-arrow-nav.js

@@ -115,9 +115,16 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		// If it's a block and there are nested focusable nodes, skip because
-		// there are better candidates.
+		// If it's a block wrapper (not itself a contenteditable editing surface)
+		// and there are nested focusable nodes, skip because there are better
+		// candidates. We must not skip contenteditable nodes that happen to
+		// contain links or other focusable inline elements, since those are the
+		// correct navigation targets.
+		//
+		// See https://github.com/WordPress/gutenberg/pull/77474
+		// TODO: Consider fixing focus.tabbable
 		if (
+			node.contentEditable !== 'true' &&
 			getBlockClientId( node ) &&
 			focus.focusable
 				.find( node )

package/src/hooks/block-fields/link/index.js

@@ -18,7 +18,7 @@ import { prependHTTP } from '@wordpress/url';
 import LinkControl from '../../../components/link-control';
 import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
 
-export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_REL = 'noopener';
 export const NEW_TAB_TARGET = '_blank';
 export const NOFOLLOW_REL = 'nofollow';
 

package/src/hooks/custom-css.js

@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useEffect, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import { processCSSNesting } from '@wordpress/global-styles-engine';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -69,6 +70,8 @@ function CustomCSSControl( { blockName, setAttributes, style } ) {
 	);
 }
 
+const CUSTOM_CSS_WARNING_NOTICE_ID = 'custom-css-edit-warning';
+
 function CustomCSSEdit( { clientId, name, setAttributes } ) {
 	const { style, canEditCSS } = useSelect(
 		( select ) => {
@@ -113,6 +116,31 @@ function useBlockProps( { style } ) {
 		customCSS.trim().length > 0 &&
 		validateCSS( customCSS );
 
+	const canEditCSS = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().canEditCSS,
+		[]
+	);
+
+	const { createWarningNotice } = useDispatch( noticesStore );
+
+	// Show a warning notice when the user lacks edit_css and a block has
+	// custom CSS. The fixed notice ID ensures only one notice is shown
+	// regardless of how many blocks have CSS.
+	const hasCustomCSS = !! customCSS?.trim();
+	useEffect( () => {
+		if ( ! canEditCSS && hasCustomCSS ) {
+			createWarningNotice(
+				__(
+					'This post contains blocks with custom CSS. You do not have permission to edit CSS. If you save this post, the custom CSS will be removed.'
+				),
+				{
+					id: CUSTOM_CSS_WARNING_NOTICE_ID,
+					isDismissible: true,
+				}
+			);
+		}
+	}, [ canEditCSS, hasCustomCSS, createWarningNotice ] );
+
 	const customCSSIdentifier = useInstanceId(
 		CUSTOM_CSS_INSTANCE_REFERENCE,
 		'wp-custom-css'

package/src/hooks/dimensions.js

@@ -102,6 +102,10 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 		'__experimentalDefaultControls',
 	] );
 	const defaultControls = {
+		// In the block inspector, minHeight and minWidth should not
+		// be shown by default unless the block explicitly opts in.
+		minHeight: false,
+		minWidth: false,
 		...defaultDimensionsControls,
 		...defaultSpacingControls,
 	};
@@ -161,7 +165,8 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 			support?.aspectRatio ||
 			!! support?.height ||
 			!! support?.minHeight ||
-			!! support?.width
+			!! support?.width ||
+			!! support?.minWidth
 		);
 	}
 

package/src/hooks/grid-visualizer.js

@@ -54,7 +54,7 @@ function GridTools( { clientId, layout } ) {
 				const settings = getSettings();
 				const currentDeviceType =
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value;
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
 				return {
 					isVisible: true,

package/src/hooks/layout-child.js

@@ -244,7 +244,7 @@ function GridTools( {
 					blockAttributes?.metadata?.blockVisibility,
 				deviceType:
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};

package/src/hooks/test/dimensions.js

@@ -76,6 +76,22 @@ describe( 'getDimensionsClassesAndStyles', () => {
 		} );
 	} );
 
+	it( 'should return minWidth style', () => {
+		const attributes = {
+			style: {
+				dimensions: {
+					minWidth: '200px',
+				},
+			},
+		};
+		expect( getDimensionsClassesAndStyles( attributes ) ).toEqual( {
+			className: undefined,
+			style: {
+				minWidth: '200px',
+			},
+		} );
+	} );
+
 	it( 'should return all dimension styles when multiple are provided', () => {
 		const attributes = {
 			style: {

package/src/hooks/test/style.js

@@ -25,6 +25,7 @@ describe( 'getInlineStyles', () => {
 				},
 				dimensions: {
 					minHeight: '50vh',
+					minWidth: '200px',
 				},
 				spacing: {
 					blockGap: '1em',
@@ -44,6 +45,7 @@ describe( 'getInlineStyles', () => {
 			fontSize: 10,
 			marginBottom: '15px',
 			minHeight: '50vh',
+			minWidth: '200px',
 			paddingTop: '10px',
 		} );
 	} );

package/src/hooks/utils.js

@@ -269,6 +269,7 @@ export function useBlockSettings( name, parentLayout ) {
 		aspectRatio,
 		height,
 		minHeight,
+		minWidth,
 		width,
 		dimensionSizes,
 		layout,
@@ -332,6 +333,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'dimensions.aspectRatio',
 		'dimensions.height',
 		'dimensions.minHeight',
+		'dimensions.minWidth',
 		'dimensions.width',
 		'dimensions.dimensionSizes',
 		'layout',
@@ -446,6 +448,7 @@ export function useBlockSettings( name, parentLayout ) {
 				aspectRatio,
 				height,
 				minHeight,
+				minWidth,
 				width,
 				dimensionSizes,
 			},
@@ -487,6 +490,7 @@ export function useBlockSettings( name, parentLayout ) {
 		aspectRatio,
 		height,
 		minHeight,
+		minWidth,
 		width,
 		dimensionSizes,
 		layout,