@wordpress/block-editor 14.18.0 → 14.20.0

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

@@ -249,6 +249,7 @@ function BackgroundImageControls( {
 	onResetImage = noop,
 	displayInPanel,
 	defaultValues,
+	containerRef,
 } ) {
 	const [ isUploading, setIsUploading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
@@ -256,7 +257,6 @@ function BackgroundImageControls( {
 	const { id, title, url } = style?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
-	const replaceContainerRef = useRef();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
@@ -324,6 +324,8 @@ function BackgroundImageControls( {
 			} )
 		);
 		setIsUploading( false );
+		// Close the dropdown and focus the toggle button.
+		closeAndFocus();
 	};
 
 	// Drag and drop callback, restricting image to one.
@@ -342,14 +344,19 @@ function BackgroundImageControls( {
 	const hasValue = hasBackgroundImageValue( style );
 
 	const closeAndFocus = () => {
-		const [ toggleButton ] = focus.tabbable.find(
-			replaceContainerRef.current
-		);
-		// Focus the toggle button and close the dropdown menu.
-		// This ensures similar behaviour as to selecting an image, where the dropdown is
-		// closed and focus is redirected to the dropdown toggle button.
-		toggleButton?.focus();
-		toggleButton?.click();
+		// Use requestAnimationFrame to ensure DOM updates are complete
+		window.requestAnimationFrame( () => {
+			const [ toggleButton ] = focus.tabbable.find(
+				containerRef?.current
+			);
+			if ( ! toggleButton ) {
+				return;
+			}
+			// Focus the toggle button and close the dropdown menu.
+			// This ensures similar behaviour as to selecting an image, where the dropdown is
+			// closed and focus is redirected to the dropdown toggle button.
+			toggleButton.focus();
+		} );
 	};
 
 	const onRemove = () =>
@@ -363,10 +370,7 @@ function BackgroundImageControls( {
 		title || getFilename( url ) || __( 'Add background image' );
 
 	return (
-		<div
-			ref={ replaceContainerRef }
-			className="block-editor-global-styles-background-panel__image-tools-panel-item"
-		>
+		<div className="block-editor-global-styles-background-panel__image-tools-panel-item">
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
@@ -697,9 +701,11 @@ export default function BackgroundImagePanel( {
 			settings?.background?.backgroundRepeat );
 
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
+	const containerRef = useRef();
 
 	return (
 		<div
+			ref={ containerRef }
 			className={ clsx(
 				'block-editor-global-styles-background-panel__inspector-media-replace-container',
 				{
@@ -727,6 +733,7 @@ export default function BackgroundImagePanel( {
 							} }
 							onRemoveImage={ () => setIsDropDownOpen( false ) }
 							defaultValues={ defaultValues }
+							containerRef={ containerRef }
 						/>
 						<BackgroundSizeControls
 							onChange={ onChange }
@@ -747,6 +754,7 @@ export default function BackgroundImagePanel( {
 						resetBackground();
 					} }
 					onRemoveImage={ () => setIsDropDownOpen( false ) }
+					containerRef={ containerRef }
 				/>
 			) }
 		</div>

package/src/components/block-inspector/style.scss

@@ -12,7 +12,8 @@
 
 	.components-base-control,
 	.components-radio-control,
-	.block-editor-html-element-control {
+	.block-editor-html-element-control,
+	.block-editor-image-size-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -22,7 +23,8 @@
 	.components-focal-point-picker-control,
 	.components-query-controls,
 	.components-range-control,
-	.block-editor-html-element-control {
+	.block-editor-html-element-control,
+	.block-editor-image-size-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

package/src/components/html-element-control/index.js

@@ -22,7 +22,7 @@ import { htmlElementMessages } from './messages';
  * @param {Object}   props          Component props.
  * @param {string}   props.tagName  The current HTML tag name.
  * @param {Function} props.onChange Function to call when the tag is changed.
- * @param {string}   props.clientId The client ID of the current block.
+ * @param {string}   props.clientId Optional. The client ID of the block. Used to check for existing <main> elements.
  * @param {Array}    props.options  SelectControl options (optional).
  *
  * @return {Component} The HTML element select control with validation.

package/src/components/html-element-control/messages.js

@@ -7,12 +7,18 @@ import { __ } from '@wordpress/i18n';
  * Messages providing helpful descriptions for HTML elements.
  */
 export const htmlElementMessages = {
+	a: __(
+		'The <a> element should be used for links that navigate to a different page or to a different section within the same page.'
+	),
 	article: __(
 		'The <article> element should represent a self-contained, syndicatable portion of the document.'
 	),
 	aside: __(
 		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
 	),
+	button: __(
+		'The <button> element should be used for interactive controls that perform an action on the current page, such as opening a modal or toggling content visibility.'
+	),
 	div: __(
 		'The <div> element should only be used if the block is a design element with no semantic meaning.'
 	),

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

@@ -5,6 +5,7 @@ import {
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
@@ -87,7 +88,7 @@ export default function ImageSizeControl( {
 	} );
 
 	return (
-		<>
+		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
@@ -100,10 +101,9 @@ export default function ImageSizeControl( {
 				/>
 			) }
 			{ isResizable && (
-				<div className="block-editor-image-size-control">
-					<HStack align="baseline" spacing="3">
+				<>
+					<HStack align="baseline" spacing="4">
 						<NumberControl
-							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
 							min={ 1 }
@@ -113,7 +113,6 @@ export default function ImageSizeControl( {
 							size="__unstable-large"
 						/>
 						<NumberControl
-							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
 							min={ 1 }
@@ -146,8 +145,8 @@ export default function ImageSizeControl( {
 							);
 						} ) }
 					</ToggleGroupControl>
-				</div>
+				</>
 			) }
-		</>
+		</VStack>
 	);
 }

package/src/components/media-placeholder/index.js

@@ -272,11 +272,11 @@ export function MediaPlaceholder( {
 			} )
 		).catch( ( err ) => onError( err ) );
 
-		if ( multiple ) {
-			onSelect( uploadedMediaList );
-		} else {
-			onSelect( uploadedMediaList[ 0 ] );
+		if ( ! uploadedMediaList?.length ) {
+			return;
 		}
+
+		onSelect( multiple ? uploadedMediaList : uploadedMediaList[ 0 ] );
 	}
 
 	const onUpload = ( event ) => {

package/src/components/rich-text/README.md

@@ -23,7 +23,7 @@ _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-na
 ### `placeholder: String`
 
 _Optional._ Placeholder text to show when the field is empty, similar to the
-[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
+[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
 
 ### `disableLineBreaks: Boolean`
 

package/src/components/url-popover/stories/index.story.js

@@ -20,6 +20,10 @@ const TestURLPopover = () => {
 	const close = () => setVisiblility( false );
 	const setTarget = () => {};
 
+	const handleUrlChange = ( event ) => {
+		setUrl( event.target.value );
+	};
+
 	return (
 		<>
 			<Button
@@ -40,7 +44,11 @@ const TestURLPopover = () => {
 					) }
 				>
 					<form onSubmit={ close }>
-						<input type="url" value={ url } onChange={ setUrl } />
+						<input
+							type="url"
+							value={ url }
+							onChange={ handleUrlChange }
+						/>
 						<Button
 							__next40pxDefaultSize
 							icon={ keyboardReturn }

package/src/layouts/flex.js

@@ -56,6 +56,11 @@ const verticalAlignmentMap = {
 	'space-between': 'space-between',
 };
 
+const defaultAlignments = {
+	horizontal: 'center',
+	vertical: 'top',
+};
+
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
@@ -201,8 +206,8 @@ function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 
 	const defaultVerticalAlignment =
 		orientation === 'horizontal'
-			? verticalAlignmentMap.center
-			: verticalAlignmentMap.top;
+			? defaultAlignments.horizontal
+			: defaultAlignments.vertical;
 
 	const { verticalAlignment = defaultVerticalAlignment } = layout;
 

package/src/store/selectors.js

@@ -1807,9 +1807,9 @@ export const canInsertBlockType = createRegistrySelector( ( select ) =>
  * Determines if the given blocks are allowed to be inserted into the block
  * list.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be inserted.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object}   state        Editor state.
+ * @param {string[]} clientIds    The block client IDs to be inserted.
+ * @param {?string}  rootClientId Optional root client ID of block list.
  *
  * @return {boolean} Whether the given blocks are allowed to be inserted.
  */

package/src/style.scss

@@ -33,7 +33,6 @@
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/iframe/style.scss";
-@import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";
 @import "./components/inspector-popover-header/style.scss";

package/src/components/image-size-control/style.scss

@@ -1,8 +0,0 @@
-.block-editor-image-size-control {
-	margin-bottom: 1em;
-
-	.block-editor-image-size-control__width,
-	.block-editor-image-size-control__height {
-		margin-bottom: 1.115em;
-	}
-}