@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -222,6 +222,8 @@ export default function SpacingInputControl( {
 					<UnitControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
 						onChange={ ( newSize ) =>
 							onChange( getNewCustomValue( newSize ) )
 						}
@@ -239,6 +241,8 @@ export default function SpacingInputControl( {
 					<RangeControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
 						value={ customRangeValue }
 						min={ 0 }
 						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
@@ -248,6 +252,7 @@ export default function SpacingInputControl( {
 						withInputField={ false }
 						onChange={ handleCustomValueSliderChange }
 						className="components-spacing-sizes-control__custom-value-range"
+						__nextHasNoMarginBottom
 					/>
 				</>
 			) }
@@ -277,6 +282,8 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextHasNoMarginBottom={ true }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (
@@ -302,6 +309,8 @@ export default function SpacingInputControl( {
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 		</>

package/src/components/ungroup-button/index.native.js

@@ -14,6 +14,7 @@ import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
+const EMPTY_BLOCKS_LIST = [];
 
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
@@ -45,9 +46,12 @@ export default compose( [
 		const isUngroupable =
 			selectedBlock &&
 			selectedBlock.innerBlocks &&
-			!! selectedBlock.innerBlocks.length &&
+			selectedBlock.innerBlocks.length > 0 &&
 			selectedBlock.name === groupingBlockName;
-		const innerBlocks = isUngroupable ? selectedBlock.innerBlocks : [];
+
+		const innerBlocks = isUngroupable
+			? selectedBlock.innerBlocks
+			: EMPTY_BLOCKS_LIST;
 
 		return {
 			isUngroupable,

package/src/components/url-input/index.js

@@ -60,13 +60,14 @@ class URLInput extends Component {
 
 		this.suggestionNodes = [];
 
-		this.isUpdatingSuggestions = false;
+		this.suggestionsRequest = null;
 
 		this.state = {
 			suggestions: [],
 			showSuggestions: false,
+			isUpdatingSuggestions: false,
+			suggestionsValue: null,
 			selectedSuggestion: null,
-
 			suggestionsListboxId: '',
 			suggestionOptionIdPrefix: '',
 		};
@@ -103,7 +104,7 @@ class URLInput extends Component {
 		if (
 			prevProps.value !== value &&
 			! this.props.disableSuggestions &&
-			! this.isUpdatingSuggestions
+			! this.state.isUpdatingSuggestions
 		) {
 			if ( value?.length ) {
 				// If the new value is not empty we need to update with suggestions for it.
@@ -123,7 +124,7 @@ class URLInput extends Component {
 
 	componentWillUnmount() {
 		this.suggestionsRequest?.cancel?.();
-		delete this.suggestionsRequest;
+		this.suggestionsRequest = null;
 	}
 
 	bindSuggestionNode( index ) {
@@ -133,14 +134,10 @@ class URLInput extends Component {
 	}
 
 	shouldShowInitialSuggestions() {
-		const { suggestions } = this.state;
 		const { __experimentalShowInitialSuggestions = false, value } =
 			this.props;
 		return (
-			! this.isUpdatingSuggestions &&
-			__experimentalShowInitialSuggestions &&
-			! ( value && value.length ) &&
-			! ( suggestions && suggestions.length )
+			__experimentalShowInitialSuggestions && ! ( value && value.length )
 		);
 	}
 
@@ -170,8 +167,13 @@ class URLInput extends Component {
 			! isInitialSuggestions &&
 			( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) )
 		) {
+			this.suggestionsRequest?.cancel?.();
+			this.suggestionsRequest = null;
+
 			this.setState( {
+				suggestions: [],
 				showSuggestions: false,
+				suggestionsValue: value,
 				selectedSuggestion: null,
 				loading: false,
 			} );
@@ -179,9 +181,8 @@ class URLInput extends Component {
 			return;
 		}
 
-		this.isUpdatingSuggestions = true;
-
 		this.setState( {
+			isUpdatingSuggestions: true,
 			selectedSuggestion: null,
 			loading: true,
 		} );
@@ -201,6 +202,8 @@ class URLInput extends Component {
 
 				this.setState( {
 					suggestions,
+					isUpdatingSuggestions: false,
+					suggestionsValue: value,
 					loading: false,
 					showSuggestions: !! suggestions.length,
 				} );
@@ -224,15 +227,16 @@ class URLInput extends Component {
 						'assertive'
 					);
 				}
-				this.isUpdatingSuggestions = false;
 			} )
 			.catch( () => {
-				if ( this.suggestionsRequest === request ) {
-					this.setState( {
-						loading: false,
-					} );
-					this.isUpdatingSuggestions = false;
+				if ( this.suggestionsRequest !== request ) {
+					return;
 				}
+
+				this.setState( {
+					isUpdatingSuggestions: false,
+					loading: false,
+				} );
 			} );
 
 		// Note that this assignment is handled *before* the async search request
@@ -241,12 +245,7 @@ class URLInput extends Component {
 	}
 
 	onChange( event ) {
-		const inputValue = event.target.value;
-
-		this.props.onChange( inputValue );
-		if ( ! this.props.disableSuggestions ) {
-			this.updateSuggestions( inputValue );
-		}
+		this.props.onChange( event.target.value );
 	}
 
 	onFocus() {
@@ -258,7 +257,7 @@ class URLInput extends Component {
 		if (
 			value &&
 			! disableSuggestions &&
-			! this.isUpdatingSuggestions &&
+			! this.state.isUpdatingSuggestions &&
 			! ( suggestions && suggestions.length )
 		) {
 			// Ensure the suggestions are updated with the current input value.
@@ -490,19 +489,22 @@ class URLInput extends Component {
 		const {
 			className,
 			__experimentalRenderSuggestions: renderSuggestions,
-			value = '',
-			__experimentalShowInitialSuggestions = false,
 		} = this.props;
 
 		const {
 			showSuggestions,
 			suggestions,
+			suggestionsValue,
 			selectedSuggestion,
 			suggestionsListboxId,
 			suggestionOptionIdPrefix,
 			loading,
 		} = this.state;
 
+		if ( ! showSuggestions || suggestions.length === 0 ) {
+			return null;
+		}
+
 		const suggestionsListProps = {
 			id: suggestionsListboxId,
 			ref: this.autocompleteRef,
@@ -519,11 +521,7 @@ class URLInput extends Component {
 			};
 		};
 
-		if (
-			isFunction( renderSuggestions ) &&
-			showSuggestions &&
-			!! suggestions.length
-		) {
+		if ( isFunction( renderSuggestions ) ) {
 			return renderSuggestions( {
 				suggestions,
 				selectedSuggestion,
@@ -531,52 +529,38 @@ class URLInput extends Component {
 				buildSuggestionItemProps,
 				isLoading: loading,
 				handleSuggestionClick: this.handleOnClick,
-				isInitialSuggestions:
-					__experimentalShowInitialSuggestions &&
-					! ( value && value.length ),
+				isInitialSuggestions: ! suggestionsValue?.length,
+				currentInputValue: suggestionsValue,
 			} );
 		}
 
-		if (
-			! isFunction( renderSuggestions ) &&
-			showSuggestions &&
-			!! suggestions.length
-		) {
-			return (
-				<Popover placement="bottom" focusOnMount={ false }>
-					<div
-						{ ...suggestionsListProps }
-						className={ classnames(
-							'block-editor-url-input__suggestions',
-							`${ className }__suggestions`
-						) }
-					>
-						{ suggestions.map( ( suggestion, index ) => (
-							<Button
-								{ ...buildSuggestionItemProps(
-									suggestion,
-									index
-								) }
-								key={ suggestion.id }
-								className={ classnames(
-									'block-editor-url-input__suggestion',
-									{
-										'is-selected':
-											index === selectedSuggestion,
-									}
-								) }
-								onClick={ () =>
-									this.handleOnClick( suggestion )
+		return (
+			<Popover placement="bottom" focusOnMount={ false }>
+				<div
+					{ ...suggestionsListProps }
+					className={ classnames(
+						'block-editor-url-input__suggestions',
+						`${ className }__suggestions`
+					) }
+				>
+					{ suggestions.map( ( suggestion, index ) => (
+						<Button
+							{ ...buildSuggestionItemProps( suggestion, index ) }
+							key={ suggestion.id }
+							className={ classnames(
+								'block-editor-url-input__suggestion',
+								{
+									'is-selected': index === selectedSuggestion,
 								}
-							>
-								{ suggestion.title }
-							</Button>
-						) ) }
-					</div>
-				</Popover>
-			);
-		}
-		return null;
+							) }
+							onClick={ () => this.handleOnClick( suggestion ) }
+						>
+							{ suggestion.title }
+						</Button>
+					) ) }
+				</div>
+			</Popover>
+		);
 	}
 }
 

package/src/components/url-popover/README.md

@@ -94,13 +94,13 @@ class MyURLPopover extends Component {
 
 The component accepts the following props. Any other props are passed through to the underlying `Popover` component ([refer to props documentation](/packages/components/src/popover/README.md)).
 
-### position
+### placement
 
-Where the Popover should be positioned relative to its parent. Defaults to "bottom center".
+Where the Popover should be positioned relative to its parent. Defaults to "bottom".
 
 -   Type: `String`
 -   Required: No
--   Default: "bottom center"
+-   Default: "bottom"
 
 ### focusOnMount
 
@@ -194,3 +194,12 @@ Reference passed to the auto complete element of the ([URLInput component](/pack
 
 -   Type: `Object`
 -   Required: no
+
+### position
+
+_Note: this prop is deprecated. Please use the `placement` prop instead._
+
+Where the Popover should be positioned relative to its parent.
+
+-   Type: `String`
+-   Required: No

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

@@ -3,8 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button, Popover } from '@wordpress/components';
+import {
+	Button,
+	Popover,
+	__experimentalPopoverPositionToPlacement as positionToPlacement,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -12,14 +17,39 @@ import { chevronDown } from '@wordpress/icons';
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
 
+const DEFAULT_PLACEMENT = 'bottom';
+
 function URLPopover( {
 	additionalControls,
 	children,
 	renderSettings,
-	position = 'bottom center',
+	// The DEFAULT_PLACEMENT value is assigned inside the function's body
+	placement,
 	focusOnMount = 'firstElement',
+	// Deprecated
+	position,
+	// Rest
 	...popoverProps
 } ) {
+	if ( position !== undefined ) {
+		deprecated( '`position` prop in wp.blockEditor.URLPopover', {
+			since: '6.2',
+			alternative: '`placement` prop',
+		} );
+	}
+
+	// Compute popover's placement:
+	// - give priority to `placement` prop, if defined
+	// - otherwise, compute it from the legacy `position` prop (if defined)
+	// - finally, fallback to the DEFAULT_PLACEMENT.
+	let computedPlacement;
+	if ( placement !== undefined ) {
+		computedPlacement = placement;
+	} else if ( position !== undefined ) {
+		computedPlacement = positionToPlacement( position );
+	}
+	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
+
 	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
 	const showSettings = !! renderSettings && isSettingsExpanded;
@@ -32,7 +62,7 @@ function URLPopover( {
 		<Popover
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
-			position={ position }
+			placement={ computedPlacement }
 			shift
 			{ ...popoverProps }
 		>

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -4,12 +4,13 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
+      class="components-popover block-editor-url-popover is-positioned"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
         class="components-popover__content"
+        style="max-height: 0px; overflow: auto;"
       >
         <div
           class="block-editor-url-popover__input-container"
@@ -51,8 +52,8 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0; left: 0px; top: 0px;"
+      class="components-popover block-editor-url-popover is-positioned"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -106,12 +107,13 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
+      class="components-popover block-editor-url-popover is-positioned"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
         class="components-popover__content"
+        style="max-height: 0px; overflow: auto;"
       >
         <div
           class="block-editor-url-popover__input-container"

package/src/components/url-popover/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,23 +9,32 @@ import userEvent from '@testing-library/user-event';
  */
 import URLPopover from '../';
 
+jest.useRealTimers();
+
 describe( 'URLPopover', () => {
-	it( 'matches the snapshot in its default state', () => {
+	it( 'matches the snapshot in its default state', async () => {
 		const { container } = render(
-			<URLPopover renderSettings={ () => <div>Settings</div> }>
+			<URLPopover
+				animate={ false }
+				renderSettings={ () => <div>Settings</div> }
+			>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
+		// wait for `Popover` effects to finish
+		await act( () => Promise.resolve() );
+
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'matches the snapshot when the settings are toggled open', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const { container } = render(
-			<URLPopover renderSettings={ () => <div>Settings</div> }>
+			<URLPopover
+				animate={ false }
+				renderSettings={ () => <div>Settings</div> }
+			>
 				<div>Editor</div>
 			</URLPopover>
 		);
@@ -37,13 +46,16 @@ describe( 'URLPopover', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'matches the snapshot when there are no settings', () => {
+	it( 'matches the snapshot when there are no settings', async () => {
 		const { container } = render(
-			<URLPopover>
+			<URLPopover animate={ false }>
 				<div>Editor</div>
 			</URLPopover>
 		);
 
+		// wait for `Popover` effects to finish
+		await act( () => Promise.resolve() );
+
 		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/use-block-display-information/index.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blocksStore,
+	isReusableBlock,
+	isTemplatePart,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,10 +20,11 @@ import { store as blockEditorStore } from '../../store';
  *
  * @typedef {Object} WPBlockDisplayInformation
  *
- * @property {string} title       Human-readable block type label.
- * @property {WPIcon} icon        Block type icon.
- * @property {string} description A detailed block type description.
- * @property {string} anchor      HTML anchor.
+ * @property {boolean} isSynced    True if is a reusable block or template part
+ * @property {string}  title       Human-readable block type label.
+ * @property {WPIcon}  icon        Block type icon.
+ * @property {string}  description A detailed block type description.
+ * @property {string}  anchor      HTML anchor.
  */
 
 /**
@@ -50,7 +55,10 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
+			const isSynced =
+				isReusableBlock( blockType ) || isTemplatePart( blockType );
 			const blockTypeInfo = {
+				isSynced,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
@@ -59,6 +67,7 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! match ) return blockTypeInfo;
 
 			return {
+				isSynced,
 				title: match.title || blockType.title,
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,

package/src/components/use-setting/index.js

@@ -11,6 +11,7 @@ import {
 	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
 	hasBlockSupport,
 } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -18,7 +19,13 @@ import {
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 
-const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
+const blockedPaths = [
+	'color',
+	'border',
+	'dimensions',
+	'typography',
+	'spacing',
+];
 
 const deprecatedFlags = {
 	'color.palette': ( settings ) => settings.colors,
@@ -116,7 +123,18 @@ export default function useSetting( path ) {
 				return undefined;
 			}
 
-			let result;
+			// 0. Allow third parties to filter the block's settings at runtime.
+			let result = applyFilters(
+				'blockEditor.useSetting.before',
+				undefined,
+				path,
+				clientId,
+				blockName
+			);
+
+			if ( undefined !== result ) {
+				return result;
+			}
 
 			const normalizedPath = removeCustomPrefixes( path );