@wordpress/block-editor 10.5.0 → 11.1.0

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-input/test/button.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import URLInputButton from '../button';
 
+jest.useFakeTimers();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -189,7 +189,7 @@ const ImageURLInputUI = ( {
 			linkDestinationInput = LINK_DESTINATION_NONE;
 		} else {
 			linkDestinationInput = (
-				find( linkDestinations, ( destination ) => {
+				linkDestinations.find( ( destination ) => {
 					return destination.url === value;
 				} ) || { linkDestination: LINK_DESTINATION_CUSTOM }
 			).linkDestination;
@@ -236,8 +236,9 @@ const ImageURLInputUI = ( {
 	const linkEditorValue = urlInput !== null ? urlInput : url;
 
 	const urlLabel = (
-		find( getLinkDestinations(), [ 'linkDestination', linkDestination ] ) ||
-		{}
+		getLinkDestinations().find(
+			( destination ) => destination.linkDestination === linkDestination
+		) || {}
 	).title;
 
 	return (

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 { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,23 +9,45 @@ import userEvent from '@testing-library/user-event';
  */
 import URLPopover from '../';
 
+jest.useRealTimers();
+
+/**
+ * Returns the first found popover element up the DOM tree.
+ *
+ * @param {HTMLElement} element Element to start with.
+ * @return {HTMLElement|null} Popover element, or `null` if not found.
+ */
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 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>
 		);
 
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
+
 		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 +59,19 @@ 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>
 		);
 
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
+
 		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
@@ -122,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 );
 

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

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '..';
+import * as BlockEditContext from '../../block-edit/context';
+
+// Mock useSelect() functions used by useSetting()
+jest.mock( '@wordpress/data/src/components/use-select' );
+
+let selectMock = {};
+const setupSelectMock = () => {
+	selectMock = {
+		getSettings: () => ( {} ),
+		getBlockParents: () => [],
+		getBlockName: () => '',
+	};
+};
+
+useSelect.mockImplementation( ( callback ) => callback( () => selectMock ) );
+
+const mockSettings = ( settings ) => {
+	selectMock.getSettings = () => ( {
+		__experimentalFeatures: settings,
+	} );
+};
+
+const mockCurrentBlockContext = (
+	blockContext = { name: '', isSelected: false }
+) => {
+	jest.spyOn( BlockEditContext, 'useBlockEditContext' ).mockReturnValue(
+		blockContext
+	);
+};
+
+describe( 'useSetting', () => {
+	beforeEach( () => {
+		setupSelectMock();
+		mockCurrentBlockContext();
+	} );
+
+	it( 'uses block setting', () => {
+		mockSettings( {
+			blocks: {
+				'core/test-block': {
+					layout: {
+						contentSize: '840px',
+					},
+				},
+			},
+		} );
+
+		mockCurrentBlockContext( {
+			name: 'core/test-block',
+		} );
+
+		expect( useSetting( 'layout.contentSize' ) ).toBe( '840px' );
+	} );
+
+	it( 'uses blockEditor.useSetting.before hook override', () => {
+		mockSettings( {
+			blocks: {
+				'core/test-block': {
+					layout: {
+						contentSize: '840px',
+					},
+				},
+			},
+		} );
+
+		mockCurrentBlockContext( {
+			name: 'core/test-block',
+		} );
+
+		addFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before',
+			( result, path, clientId, blockName ) => {
+				if ( blockName === 'core/test-block' ) {
+					return '960px';
+				}
+
+				return result;
+			}
+		);
+
+		expect( useSetting( 'layout.contentSize' ) ).toBe( '960px' );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+} );

package/src/components/warning/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
+jest.useFakeTimers();
+
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );

package/src/components/writing-flow/index.js

@@ -44,7 +44,7 @@ export function useWritingFlow() {
 			useArrowNav(),
 			useRefEffect(
 				( node ) => {
-					node.tabIndex = -1;
+					node.tabIndex = 0;
 					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {

package/src/content.scss

@@ -0,0 +1,10 @@
+@import "./components/block-list/content.scss";
+@import "./components/block-list-appender/content.scss";
+@import "./components/block-content-overlay/content.scss";
+@import "./components/block-draggable/content.scss";
+@import "./components/block-preview/content.scss";
+@import "./components/default-block-appender/content.scss";
+@import "./components/inner-blocks/content.scss";
+@import "./components/media-placeholder/content.scss";
+@import "./components/plain-text/content.scss";
+@import "./components/rich-text/content.scss";

package/src/hooks/border.js

@@ -274,7 +274,6 @@ export function BorderPanel( props ) {
 						popoverPlacement="left-start"
 						size="__unstable-large"
 						value={ hydratedBorder }
-						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>