@wordpress/block-editor 11.2.0 → 11.3.0

package/src/components/provider/test/experimental-provider.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { BlockEditorProvider, ExperimentalBlockEditorProvider } from '../';
+import { store as blockEditorStore } from '../../../store';
+
+const HasEditorSetting = ( props ) => {
+	const registry = useRegistry();
+	if ( props.setRegistry ) {
+		props.setRegistry( registry );
+	}
+	return <p>Test.</p>;
+};
+
+describe( 'BlockEditorProvider', () => {
+	let registry;
+	const setRegistry = ( reg ) => {
+		registry = reg;
+	};
+	beforeEach( () => {
+		registry = undefined;
+	} );
+	it( 'should strip experimental settings', async () => {
+		render(
+			<BlockEditorProvider
+				settings={ {
+					inserterMediaCategories: true,
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</BlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).not.toHaveProperty( 'inserterMediaCategories' );
+	} );
+	it( 'should preserve stable settings', async () => {
+		render(
+			<BlockEditorProvider
+				settings={ {
+					stableSetting: 'https://example.com',
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</BlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'stableSetting' );
+	} );
+} );
+
+describe( 'ExperimentalBlockEditorProvider', () => {
+	let registry;
+	const setRegistry = ( reg ) => {
+		registry = reg;
+	};
+	beforeEach( () => {
+		registry = undefined;
+	} );
+	it( 'should preserve experimental settings', async () => {
+		render(
+			<ExperimentalBlockEditorProvider
+				settings={ {
+					inserterMediaCategories: true,
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</ExperimentalBlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'inserterMediaCategories' );
+	} );
+	it( 'should preserve stable settings', async () => {
+		render(
+			<ExperimentalBlockEditorProvider
+				settings={ {
+					stableSetting: 'https://example.com',
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</ExperimentalBlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'stableSetting' );
+	} );
+} );

package/src/components/provider/test/use-block-sync.js

@@ -14,7 +14,17 @@ import { render } from '@testing-library/react';
 import useBlockSync from '../use-block-sync';
 import withRegistryProvider from '../with-registry-provider';
 import * as blockEditorActions from '../../../store/actions';
+
 import { store as blockEditorStore } from '../../../store';
+jest.mock( '../../../store/actions', () => {
+	const actions = jest.requireActual( '../../../store/actions' );
+	return {
+		...actions,
+		resetBlocks: jest.fn( actions.resetBlocks ),
+		replaceInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
+		setHasControlledInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
+	};
+} );
 
 const TestWrapper = withRegistryProvider( ( props ) => {
 	if ( props.setRegistry ) {

package/src/components/responsive-block-control/test/index.js

@@ -15,8 +15,6 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
-jest.useFakeTimers();
-
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -246,9 +244,7 @@ describe( 'Default and Responsive modes', () => {
 	} );
 
 	it( 'should switch between default and responsive modes when interacting with toggle control', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const ResponsiveBlockControlConsumer = () => {
 			const [ isResponsive, setIsResponsive ] = useState( false );
 

package/src/components/rich-text/use-before-input-rules.js

@@ -77,9 +77,17 @@ export function useBeforeInputRules( props ) {
 			const { defaultView } = ownerDocument;
 			const newEvent = new defaultView.InputEvent( 'input', init );
 
-			// Dispatch an input event with the new data. This will trigger the
+			// Dispatch an `input` event with the new data. This will trigger the
 			// input rules.
-			event.target.dispatchEvent( newEvent );
+			// Postpone the `input` to the next event loop tick so that the dispatch
+			// doesn't happen synchronously in the middle of `beforeinput` dispatch.
+			// This is closer to how native `input` event would be timed, and also
+			// makes sure that the `input` event is dispatched only after the `onChange`
+			// call few lines above has fully updated the data store state and rerendered
+			// all affected components.
+			window.queueMicrotask( () => {
+				event.target.dispatchEvent( newEvent );
+			} );
 			event.preventDefault();
 		}
 

package/src/components/rich-text/utils.js

@@ -23,7 +23,7 @@ export function addActiveFormats( value, activeFormats ) {
  *
  * @param {?(string|boolean)} multiline The multiline prop.
  *
- * @return {?string} The multiline tag.
+ * @return {string | undefined} The multiline tag.
  */
 export function getMultilineTag( multiline ) {
 	if ( multiline !== true && multiline !== 'p' && multiline !== 'li' ) {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,7 @@ export function getPresetValueFromCustomValue( value, spacingSizes ) {
  *
  * @param {string} value Value to convert.
  *
- * @return {string} CSS var string for given spacing preset value.
+ * @return {string | undefined} CSS var string for given spacing preset value.
  */
 export function getSpacingPresetCssVar( value ) {
 	if ( ! value ) {
@@ -211,5 +206,5 @@ export function isValuesDefined( values ) {
 	if ( values === undefined || values === null ) {
 		return false;
 	}
-	return ! isEmpty( Object.values( values ).filter( ( value ) => !! value ) );
+	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
 }

package/src/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>

package/src/components/url-input/test/button.js

@@ -4,13 +4,16 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 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 /> );
@@ -57,9 +60,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should render a form when `Insert link` button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render( <URLInputButton /> );
 
 		// Click the button to insert a link.
@@ -76,9 +77,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should call `onChange` function once per each value change', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChangeMock = jest.fn();
 
 		render( <URLInputButton onChange={ onChangeMock } /> );
@@ -104,9 +103,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should close the form when the user clicks the `Close` button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <URLInputButton /> );
 
@@ -135,12 +132,15 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should close the form when user submits it', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onChangeMock = jest.fn();
+		const user = userEvent.setup();
 
-		render( <URLInputButton onChange={ onChangeMock } /> );
+		function TestURLInputButton() {
+			// maintain state for the controlled component and process value changes
+			const [ url, setUrl ] = useState( '' );
+			return <URLInputButton url={ url } onChange={ setUrl } />;
+		}
+
+		render( <TestURLInputButton /> );
 
 		// Click the button to insert a link.
 		await user.click(
@@ -153,15 +153,15 @@ describe( 'URLInputButton', () => {
 		// Type something into the URL field.
 		await user.type( screen.getByRole( 'combobox' ), 'foo' );
 
+		const submitButton = screen.getByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		expect( submitButton ).toBeInTheDocument();
+
 		// Submit the form.
-		await user.click(
-			screen.getByRole( 'button', {
-				name: 'Submit',
-			} )
-		);
+		await user.click( submitButton );
 
-		expect(
-			screen.queryByRole( 'button', { name: 'Submit' } )
-		).not.toBeInTheDocument();
+		expect( submitButton ).not.toBeInTheDocument();
 	} );
 } );

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,7 @@ import {
 	TextControl,
 	SVG,
 	Path,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { link as linkIcon, close } from '@wordpress/icons';
 
@@ -214,23 +210,26 @@ const ImageURLInputUI = ( {
 	};
 
 	const advancedOptions = (
-		<>
+		<VStack spacing="3">
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link CSS Class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }
 			/>
-		</>
+		</VStack>
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
@@ -260,7 +259,7 @@ const ImageURLInputUI = ( {
 					additionalControls={
 						! linkEditorValue && (
 							<NavigableMenu>
-								{ map( getLinkDestinations(), ( link ) => (
+								{ getLinkDestinations().map( ( link ) => (
 									<MenuItem
 										key={ link.linkDestination }
 										icon={ link.icon }

package/src/components/url-popover/style.scss

@@ -52,12 +52,6 @@
 		transform: rotate(180deg);
 	}
 }
-.block-editor-url-popover__input-container {
-	.components-base-control:last-child,
-	.components-base-control:last-child .components-base-control__field {
-		margin-bottom: 0;
-	}
-}
 
 .block-editor-url-popover__settings {
 	display: block;
@@ -68,10 +62,6 @@
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;
-
-	.block-editor-url-input .components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-url-popover__link-viewer-url {

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

@@ -34,7 +34,7 @@ import { store as blockEditorStore } from '../../store';
  * 1. Block's client id to extract it's current attributes.
  * 2. A block variation should have set `isActive` prop to a proper function.
  *
- * If for any reason a block variaton match cannot be found,
+ * If for any reason a block variation match cannot be found,
  * the returned information come from the Block Type.
  * If no blockType is found with the provided clientId, returns null.
  *

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

@@ -9,8 +9,6 @@ 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> );
@@ -33,9 +31,7 @@ describe( 'Warning', () => {
 	} );
 
 	it( 'should show hidden secondary actions', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>

package/src/content.scss

@@ -1,11 +1,18 @@
+@import "./components/block-icon/content.scss";
 @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/block-variation-picker/content.scss";
 @import "./components/button-block-appender/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";
+@import "./components/warning/content.scss";
+
+// To do: ideally the iframe does not contain UI, but there's still the block
+// placeholders that will be moved to shadow DOM in the future.
+@include wordpress-admin-schemes();

package/src/experiments.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+import OffCanvasEditor from './components/off-canvas-editor';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/block-editor'
+	);
+
+/**
+ * Experimental @wordpress/block-editor APIs.
+ */
+export const experiments = {};
+lock( experiments, {
+	...globalStyles,
+	ExperimentalBlockEditorProvider,
+	OffCanvasEditor,
+} );

package/src/experiments.native.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/block-editor'
+	);
+
+/**
+ * Experimental @wordpress/block-editor APIs.
+ */
+export const experiments = {};
+lock( experiments, {
+	...globalStyles,
+	ExperimentalBlockEditorProvider,
+} );

package/src/hooks/anchor.js

@@ -68,6 +68,7 @@ export const withInspectorControl = createHigherOrderComponent(
 				const isWeb = Platform.OS === 'web';
 				const textControl = (
 					<TextControl
+						__nextHasNoMarginBottom
 						className="html-anchor-control"
 						label={ __( 'HTML anchor' ) }
 						help={
@@ -104,7 +105,7 @@ export const withInspectorControl = createHigherOrderComponent(
 					<>
 						<BlockEdit { ...props } />
 						{ isWeb && (
-							<InspectorControls __experimentalGroup="advanced">
+							<InspectorControls group="advanced">
 								{ textControl }
 							</InspectorControls>
 						) }

package/src/hooks/border.js

@@ -255,7 +255,7 @@ export function BorderPanel( props ) {
 	const hydratedBorder = getBorderObject( attributes, colors );
 
 	return (
-		<InspectorControls __experimentalGroup="border">
+		<InspectorControls group="border">
 			{ ( isWidthSupported || isColorSupported ) && (
 				<ToolsPanelItem
 					hasValue={ () => hasBorderValue( props ) }

package/src/hooks/child-layout.js

@@ -65,6 +65,7 @@ export function ChildLayoutEdit( {
 	return (
 		<>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				size={ '__unstable-large' }
 				label={ childLayoutOrientation( parentLayout ) }
 				value={ selfStretch || 'fit' }
@@ -134,9 +135,13 @@ export function hasChildLayoutSupport( {
 } ) {
 	const {
 		type: parentLayoutType = 'default',
+		default: { type: defaultParentLayoutType = 'default' } = {},
 		allowSizingOnChildren = false,
 	} = parentLayout;
-	const support = parentLayoutType === 'flex' && allowSizingOnChildren;
+
+	const support =
+		( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&
+		allowSizingOnChildren;
 
 	return support;
 }

package/src/hooks/color-panel.js

@@ -75,7 +75,7 @@ export default function ColorPanel( {
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	return (
-		<InspectorControls __experimentalGroup="color">
+		<InspectorControls group="color">
 			<ColorGradientSettingsDropdown
 				enableAlpha={ enableAlpha }
 				panelId={ clientId }

package/src/hooks/color.js

@@ -544,9 +544,9 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const userPalette = useSetting( 'color.palette.custom' ) || [];
-		const themePalette = useSetting( 'color.palette.theme' ) || [];
-		const defaultPalette = useSetting( 'color.palette.default' ) || [];
+		const userPalette = useSetting( 'color.palette.custom' );
+		const themePalette = useSetting( 'color.palette.theme' );
+		const defaultPalette = useSetting( 'color.palette.default' );
 		const colors = useMemo(
 			() => [
 				...( userPalette || [] ),

package/src/hooks/custom-class-name.js

@@ -59,8 +59,9 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						<InspectorControls __experimentalGroup="advanced">
+						<InspectorControls group="advanced">
 							<TextControl
+								__nextHasNoMarginBottom
 								autoComplete="off"
 								label={ __( 'Additional CSS class(es)' ) }
 								value={ props.attributes.className || '' }

package/src/hooks/dimensions.js

@@ -59,6 +59,7 @@ import {
 } from './child-layout';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../experiments';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -67,10 +68,9 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
 function useVisualizerMouseOver() {
 	const [ isMouseOver, setIsMouseOver ] = useState( false );
-	const {
-		__experimentalHideBlockInterface: hideBlockInterface,
-		__experimentalShowBlockInterface: showBlockInterface,
-	} = useDispatch( blockEditorStore );
+	const { hideBlockInterface, showBlockInterface } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const onMouseOver = ( e ) => {
 		e.stopPropagation();
 		hideBlockInterface();
@@ -137,7 +137,7 @@ export function DimensionsPanel( props ) {
 
 	return (
 		<>
-			<InspectorControls __experimentalGroup="dimensions">
+			<InspectorControls group="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
 						className={ spacingClassnames }
@@ -301,7 +301,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
  * @param {string} blockName Block name.
  * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
  *
- * @return {?string[]} Strings representing the custom sides available.
+ * @return {string[] | undefined} Strings representing the custom sides available.
  */
 export function useCustomSides( blockName, feature ) {
 	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );

package/src/hooks/layout.scss

@@ -12,6 +12,10 @@
 	}
 }
 
+.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
+	margin-bottom: 0;
+}
+
 .block-editor-hooks__layout-controls-reset {
 	display: flex;
 	justify-content: flex-end;

package/src/hooks/margin.js

@@ -237,6 +237,7 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ margin }
+			__unstablePopoverSlot="block-toolbar"
 			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />

package/src/hooks/padding.js

@@ -226,6 +226,7 @@ export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ padding }
+			__unstablePopoverSlot="block-toolbar"
 			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />