@wordpress/block-editor 14.21.1-next.719a03cbe.0 → 15.0.1-next.46f643fa0.0

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 ) => {
@@ -637,6 +641,7 @@ function ListViewBlock( {
 								tabIndex,
 								onClick: clearSettingsAnchorRect,
 								onFocus,
+								size: 'small',
 							} }
 							disableOpenOnArrowDown
 							expand={ expand }

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

@@ -78,10 +78,7 @@
 		}
 
 		&:focus::after {
-			box-shadow:
-				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-block-synced-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -308,7 +305,7 @@
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell {
 		line-height: 0;
-		width: $button-size;
+		width: $button-size-small + $grid-unit-05;
 		vertical-align: middle;
 
 		> * {
@@ -323,21 +320,6 @@
 				opacity: 1;
 			}
 		}
-
-		&,
-		.components-button.has-icon {
-			width: $button-size-small;
-			min-width: $button-size-small;
-			padding: 0;
-		}
-	}
-
-	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-05;
-
-		.components-button.has-icon {
-			height: 24px;
-		}
 	}
 
 	.block-editor-list-view-block__mover-cell-alignment-wrapper {

package/src/components/list-view/use-list-view-images.js

@@ -11,47 +11,70 @@ import { store as blockEditorStore } from '../../store';
 
 // Maximum number of images to display in a list view row.
 const MAX_IMAGES = 3;
+const IMAGE_GETTERS = {
+	'core/image': ( { clientId, attributes } ) => {
+		if ( attributes.url ) {
+			return {
+				url: attributes.url,
+				alt: attributes.alt || '',
+				clientId,
+			};
+		}
+	},
+	'core/cover': ( { clientId, attributes } ) => {
+		if ( attributes.backgroundType === 'image' && attributes.url ) {
+			return {
+				url: attributes.url,
+				alt: attributes.alt || '',
+				clientId,
+			};
+		}
+	},
+	'core/media-text': ( { clientId, attributes } ) => {
+		if ( attributes.mediaType === 'image' && attributes.mediaUrl ) {
+			return {
+				url: attributes.mediaUrl,
+				alt: attributes.mediaAlt || '',
+				clientId,
+			};
+		}
+	},
+	'core/gallery': ( { innerBlocks } ) => {
+		const images = [];
+		const getValues = !! innerBlocks?.length
+			? IMAGE_GETTERS[ innerBlocks[ 0 ].name ]
+			: undefined;
+		if ( ! getValues ) {
+			return images;
+		}
 
-function getImage( block ) {
-	if ( block.name !== 'core/image' ) {
-		return;
-	}
+		for ( const innerBlock of innerBlocks ) {
+			const img = getValues( innerBlock );
+			if ( img ) {
+				images.push( img );
+			}
+			if ( images.length >= MAX_IMAGES ) {
+				return images;
+			}
+		}
 
-	if ( block.attributes?.url ) {
-		return {
-			url: block.attributes.url,
-			alt: block.attributes.alt,
-			clientId: block.clientId,
-		};
-	}
-}
+		return images;
+	},
+};
+
+function getImagesFromBlock( block, isExpanded ) {
+	const getImages = IMAGE_GETTERS[ block.name ];
+	const images = !! getImages ? getImages( block ) : undefined;
 
-function getImagesFromGallery( block ) {
-	if ( block.name !== 'core/gallery' || ! block.innerBlocks ) {
+	if ( ! images ) {
 		return [];
 	}
 
-	const images = [];
-
-	for ( const innerBlock of block.innerBlocks ) {
-		const img = getImage( innerBlock );
-		if ( img ) {
-			images.push( img );
-		}
-		if ( images.length >= MAX_IMAGES ) {
-			return images;
-		}
+	if ( ! Array.isArray( images ) ) {
+		return [ images ];
 	}
 
-	return images;
-}
-
-function getImagesFromBlock( block, isExpanded ) {
-	const img = getImage( block );
-	if ( img ) {
-		return [ img ];
-	}
-	return isExpanded ? [] : getImagesFromGallery( block );
+	return isExpanded ? [] : images;
 }
 
 /**
@@ -69,12 +92,10 @@ function getImagesFromBlock( block, isExpanded ) {
 export default function useListViewImages( { clientId, isExpanded } ) {
 	const { block } = useSelect(
 		( select ) => {
-			const _block = select( blockEditorStore ).getBlock( clientId );
-			return { block: _block };
+			return { block: select( blockEditorStore ).getBlock( clientId ) };
 		},
 		[ clientId ]
 	);
-
 	const images = useMemo( () => {
 		return getImagesFromBlock( block, isExpanded );
 	}, [ block, isExpanded ] );

package/src/components/media-replace-flow/test/index.js

@@ -110,7 +110,7 @@ describe( 'General media replace flow', () => {
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Paste or type URL',
 			expanded: false,
 		} );
 

package/src/components/publish-date-time-picker/README.md

@@ -32,6 +32,7 @@ const MyDateTimePicker = () => {
 					currentDate={ date }
 					onChange={ ( newDate ) => setDate( newDate ) }
 					onClose={ onClose }
+					title={ __( 'Select post date' ) }
 				/>
 			) }
 		/>
@@ -44,6 +45,14 @@ const MyDateTimePicker = () => {
 `PublishDateTimePicker` supports all of the props that
 [`DateTimePicker`](/packages/components/src/date-time#Props) supports, plus:
 
+### title
+
+The title displayed in the header of the popover that contains the `DateTimePicker`.
+
+- Type: `String`
+- Required: No
+- Default: `Publish`
+
 ### onClose
 
 Called when the user presses the close button.

package/src/components/publish-date-time-picker/index.js

@@ -18,6 +18,7 @@ export function PublishDateTimePicker(
 		showPopoverHeaderActions,
 		isCompact,
 		currentDate,
+		title,
 		...additionalProps
 	},
 	ref
@@ -33,7 +34,7 @@ export function PublishDateTimePicker(
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
-				title={ __( 'Publish' ) }
+				title={ title || __( 'Publish' ) }
 				actions={
 					showPopoverHeaderActions
 						? [

package/src/components/spacing-sizes-control/style.scss

@@ -1,4 +1,9 @@
 .spacing-sizes-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	.spacing-sizes-control__custom-value-input,
 	.spacing-sizes-control__label {
 		margin-bottom: 0;

package/src/components/writing-flow/use-click-selection.js

@@ -27,7 +27,9 @@ export default function useClickSelection() {
 				const clickedClientId = getBlockClientId( event.target );
 
 				if ( event.shiftKey ) {
-					if ( startClientId !== clickedClientId ) {
+					// When selecting a single block in a document by holding the shift key,
+					// don't mark this action as multiselection.
+					if ( startClientId && startClientId !== clickedClientId ) {
 						node.contentEditable = true;
 						// Firefox doesn't automatically move focus.
 						node.focus();

package/src/hooks/layout.scss

@@ -17,3 +17,11 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.block-editor-hooks__grid-layout-columns-and-rows-controls,
+.block-editor-hooks__grid-layout-minimum-width-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}

package/src/layouts/grid.js

@@ -243,7 +243,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 	};
 
 	return (
-		<fieldset>
+		<fieldset className="block-editor-hooks__grid-layout-minimum-width-control">
 			<BaseControl.VisualLabel as="legend">
 				{ __( 'Minimum column width' ) }
 			</BaseControl.VisualLabel>
@@ -302,7 +302,7 @@ function GridLayoutColumnsAndRowsControl( {
 
 	return (
 		<>
-			<fieldset>
+			<fieldset className="block-editor-hooks__grid-layout-columns-and-rows-controls">
 				{ ( ! window.__experimentalEnableGridInteractivity ||
 					! isManualPlacement ) && (
 					<BaseControl.VisualLabel as="legend">