@wordpress/block-editor 14.21.0 → 15.0.0

package/src/components/child-layout-control/index.js

@@ -6,7 +6,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
-	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -210,7 +209,7 @@ function GridControls( {
 	panelId,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
-	const { columnCount = 3, rowCount } = parentLayout ?? {};
+	const { columnCount, rowCount } = parentLayout ?? {};
 	const rootClientId = useSelect( ( select ) =>
 		select( blockEditorStore ).getBlockRootClientId( panelId )
 	);
@@ -218,7 +217,7 @@ function GridControls( {
 		useDispatch( blockEditorStore );
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		rootClientId,
-		columnCount
+		columnCount || 3
 	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
@@ -235,9 +234,20 @@ function GridControls( {
 		} );
 	};
 
+	// Calculate max column span based on current position and grid width
+	const maxColumnSpan = columnCount
+		? columnCount - ( columnStart ?? 1 ) + 1
+		: undefined;
+
+	// Calculate max row span based on current position and grid height
+	const maxRowSpan =
+		window.__experimentalEnableGridInteractivity && rowCount
+			? rowCount - ( rowStart ?? 1 ) + 1
+			: undefined;
+
 	return (
 		<>
-			<HStack
+			<Flex
 				as={ ToolsPanelItem }
 				hasValue={ hasSpanValue }
 				label={ __( 'Grid span' ) }
@@ -245,44 +255,58 @@ function GridControls( {
 				isShownByDefault={ isShownByDefault }
 				panelId={ panelId }
 			>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Column span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newColumnSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							rowSpan,
-							columnSpan: newColumnSpan,
-						} );
-					} }
-					value={ columnSpan ?? 1 }
-					min={ 1 }
-				/>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Row span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newRowSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							columnSpan,
-							rowSpan: newRowSpan,
-						} );
-					} }
-					value={ rowSpan ?? 1 }
-					min={ 1 }
-				/>
-			</HStack>
-			{ window.__experimentalEnableGridInteractivity && columnCount && (
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Column span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							// Don't allow unsetting.
+							const newColumnSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxColumnSpan
+								? Math.min( newColumnSpan, maxColumnSpan )
+								: newColumnSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								rowSpan,
+								columnSpan: constrainedValue,
+							} );
+						} }
+						value={ columnSpan ?? 1 }
+						min={ 1 }
+						max={ maxColumnSpan }
+					/>
+				</FlexItem>
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Row span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const newRowSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxRowSpan
+								? Math.min( newRowSpan, maxRowSpan )
+								: newRowSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								columnSpan,
+								rowSpan: constrainedValue,
+							} );
+						} }
+						value={ rowSpan ?? 1 }
+						min={ 1 }
+						max={ maxRowSpan }
+					/>
+				</FlexItem>
+			</Flex>
+
+			{ window.__experimentalEnableGridInteractivity && (
 				// Use Flex with an explicit width on the FlexItem instead of HStack to
 				// work around an issue in webkit where inputs with a max attribute are
 				// sized incorrectly.

package/src/components/colors-gradients/style.scss

@@ -10,6 +10,11 @@ $swatch-gap: 12px;
 }
 
 .block-editor-color-gradient-control__fieldset {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	// Prevents the `fieldset` from growing beyond its parent's size
 	// in order to fit its content.
 	min-width: 0;

package/src/components/image-size-control/index.js

@@ -137,7 +137,7 @@ export default function ImageSizeControl( {
 									key={ scale }
 									value={ scale }
 									label={ sprintf(
-										/* translators: Percentage value. */
+										/* translators: %d: Percentage value. */
 										__( '%d%%' ),
 										scale
 									) }

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

@@ -49,12 +49,13 @@
 	position: relative;
 	height: auto;
 
-	&:disabled {
+	&:disabled,
+	&[aria-disabled="true"] {
 		opacity: 0.6;
 		cursor: default;
 	}
 
-	&:not(:disabled) {
+	&:not(:disabled, [aria-disabled="true"]) {
 		&:hover {
 			.block-editor-block-types-list__item-title {
 				color: var(--wp-admin-theme-color) !important;
@@ -80,10 +81,6 @@
 			}
 		}
 
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
 		&.is-active {
 			color: $white;
 			background: $gray-900;
@@ -93,6 +90,12 @@
 			outline-offset: -2px;
 		}
 	}
+
+	&:not(:disabled) {
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
 }
 
 .block-editor-block-types-list__item-icon {

package/src/components/link-control/search-input.js

@@ -114,16 +114,23 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const _placeholder = placeholder ?? __( 'Search or type URL' );
+
+		const label =
+			hideLabelFromVision && placeholder !== ''
+				? _placeholder
+				: __( 'Link' );
+
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					label={ __( 'Link' ) }
+					label={ label }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type URL' ) }
+					placeholder={ _placeholder }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}

package/src/components/link-control/style.scss

@@ -345,6 +345,13 @@ $block-editor-link-control-number-of-actions: 1;
 	position: relative;
 }
 
+.block-editor-link-control__settings {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .block-editor-link-control__setting {
 	margin-bottom: 0;
 	flex: 1;

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

@@ -139,7 +139,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		expect( searchInput ).toBeVisible();
@@ -150,7 +150,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		expect( searchInput ).toBeVisible();
@@ -175,7 +175,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -290,7 +290,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -304,7 +304,7 @@ describe( 'Basic rendering', () => {
 			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'Link' } )
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -317,7 +317,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Link' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 		} );
 
@@ -335,7 +335,7 @@ describe( 'Basic rendering', () => {
 			await user.click( editButton );
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Link' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 
 			// If passed `forceIsEditingLink` of `false` while editing, should
@@ -348,7 +348,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'Link' } )
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -438,7 +438,7 @@ describe( 'Basic rendering', () => {
 
 			// Should revert back to editing mode.
 			expect(
-				screen.getByRole( 'combobox', { name: 'Link' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 		} );
 	} );
@@ -461,7 +461,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -487,7 +487,7 @@ describe( 'Searching for a link', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -538,7 +538,7 @@ describe( 'Searching for a link', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -571,7 +571,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -616,7 +616,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -635,7 +635,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -667,7 +667,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -699,7 +699,7 @@ describe( 'Manual link entry', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -735,7 +735,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				if ( searchString.length ) {
@@ -769,7 +769,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Remove the existing link.
@@ -937,7 +937,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -973,7 +973,7 @@ describe( 'Link submission', () => {
 		render( <LinkControlConsumer /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		const submitButton = screen.getByRole( 'button', {
@@ -1012,7 +1012,7 @@ describe( 'Link submission', () => {
 		render( <LinkControlConsumer /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		const createSubmitButton = screen.queryByRole( 'button', {
@@ -1059,9 +1059,9 @@ describe( 'Default search suggestions', () => {
 		// Verify input has no value has default suggestions should only show
 		// when this does not have a value.
 		// Search Input UI.
-		expect( screen.getByRole( 'combobox', { name: 'Link' } ) ).toHaveValue(
-			''
-		);
+		expect(
+			screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+		).toHaveValue( '' );
 
 		// Ensure only called once as a guard against potential infinite
 		// re-render loop within `componentDidUpdate` calling `updateSuggestions`
@@ -1091,7 +1091,7 @@ describe( 'Default search suggestions', () => {
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Search input is set to the URL value.
@@ -1115,7 +1115,7 @@ describe( 'Default search suggestions', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1155,7 +1155,7 @@ describe( 'Default search suggestions', () => {
 		render( <LinkControl showInitialSuggestions /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
@@ -1215,7 +1215,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -1285,7 +1285,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1338,7 +1338,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1385,7 +1385,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1410,7 +1410,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1431,7 +1431,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1455,7 +1455,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -1490,7 +1490,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -1507,7 +1507,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			await user.click( createButton );
 
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			const errorNotice = screen.getAllByText(
@@ -1586,7 +1586,7 @@ describe( 'Selecting links', () => {
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 		currentLinkUI = screen.queryByRole( 'group', {
 			name: 'Manage link',
@@ -1630,7 +1630,7 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -1692,7 +1692,7 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -1783,7 +1783,7 @@ describe( 'Selecting links', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Step down into the search results, highlighting the first result item.
@@ -1841,7 +1841,7 @@ describe( 'Selecting links', () => {
 
 			// focus the search input
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			fireEvent.focus( searchInput );
@@ -2064,7 +2064,7 @@ describe( 'Post types', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -2093,7 +2093,7 @@ describe( 'Post types', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.

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

@@ -15,7 +15,7 @@ import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useDebounce } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
 import {
 	useCallback,
@@ -97,6 +97,10 @@ function ListViewBlock( {
 		insertBeforeBlock,
 		setOpenedBlockSettingsMenu,
 	} = unlock( useDispatch( blockEditorStore ) );
+	const debouncedToggleBlockHighlight = useDebounce(
+		toggleBlockHighlight,
+		50
+	);
 
 	const {
 		canInsertBlockType,
@@ -363,12 +367,12 @@ function ListViewBlock( {
 
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
-		toggleBlockHighlight( clientId, true );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+		debouncedToggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, debouncedToggleBlockHighlight ] );
 	const onMouseLeave = useCallback( () => {
 		setIsHovered( false );
-		toggleBlockHighlight( clientId, false );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+		debouncedToggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, debouncedToggleBlockHighlight ] );
 
 	const selectEditorBlock = useCallback(
 		( event ) => {