@wordpress/block-editor 11.2.0 → 11.3.1

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 } />

package/src/hooks/position.js

@@ -10,6 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import {
 	useContext,
 	useMemo,
@@ -25,6 +26,7 @@ import BlockList from '../components/block-list';
 import useSetting from '../components/use-setting';
 import InspectorControls from '../components/inspector-controls';
 import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
 
 const POSITION_SUPPORT_KEY = 'position';
 
@@ -196,15 +198,16 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
 }
 
 /*
- * Position controls to be rendered in an inspector control panel.
+ * Position controls rendered in an inspector control panel.
  *
  * @param {Object} props
  *
- * @return {WPElement} Padding edit element.
+ * @return {WPElement} Position panel.
  */
-export function PositionEdit( props ) {
+export function PositionPanel( props ) {
 	const {
 		attributes: { style = {} },
+		clientId,
 		name: blockName,
 		setAttributes,
 	} = props;
@@ -213,16 +216,32 @@ export function PositionEdit( props ) {
 	const allowSticky = hasStickyPositionSupport( blockName );
 	const value = style?.position?.type;
 
+	const { hasParents } = useSelect(
+		( select ) => {
+			const { getBlockParents } = select( blockEditorStore );
+			const parents = getBlockParents( clientId );
+			return {
+				hasParents: parents.length,
+			};
+		},
+		[ clientId ]
+	);
+
 	const options = useMemo( () => {
 		const availableOptions = [ DEFAULT_OPTION ];
-		if ( allowSticky || value === STICKY_OPTION.value ) {
+		// Only display sticky option if the block has no parents (is at the root of the document),
+		// or if the block already has a sticky position value set.
+		if (
+			( allowSticky && ! hasParents ) ||
+			value === STICKY_OPTION.value
+		) {
 			availableOptions.push( STICKY_OPTION );
 		}
 		if ( allowFixed || value === FIXED_OPTION.value ) {
 			availableOptions.push( FIXED_OPTION );
 		}
 		return availableOptions;
-	}, [ allowFixed, allowSticky, value ] );
+	}, [ allowFixed, allowSticky, hasParents, value ] );
 
 	const onChangeType = ( next ) => {
 		// For now, use a hard-coded `0px` value for the position.
@@ -251,32 +270,34 @@ export function PositionEdit( props ) {
 		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
 		: DEFAULT_OPTION;
 
+	// Only display position controls if there is at least one option to choose from.
 	return Platform.select( {
-		web: (
-			<>
-				<BaseControl className="block-editor-hooks__position-selection">
-					<CustomSelectControl
-						__nextUnconstrainedWidth
-						__next36pxDefaultSize
-						className="block-editor-hooks__position-selection__select-control"
-						label={ __( 'Position' ) }
-						hideLabelFromVision
-						describedBy={ sprintf(
-							// translators: %s: Currently selected font size.
-							__( 'Currently selected position: %s' ),
-							selectedOption.name
-						) }
-						options={ options }
-						value={ selectedOption }
-						__experimentalShowSelectedHint
-						onChange={ ( { selectedItem } ) => {
-							onChangeType( selectedItem.value );
-						} }
-						size={ '__unstable-large' }
-					/>
-				</BaseControl>
-			</>
-		),
+		web:
+			options.length > 1 ? (
+				<InspectorControls group="position">
+					<BaseControl className="block-editor-hooks__position-selection">
+						<CustomSelectControl
+							__nextUnconstrainedWidth
+							__next36pxDefaultSize
+							className="block-editor-hooks__position-selection__select-control"
+							label={ __( 'Position' ) }
+							hideLabelFromVision
+							describedBy={ sprintf(
+								// translators: %s: Currently selected position.
+								__( 'Currently selected position: %s' ),
+								selectedOption.name
+							) }
+							options={ options }
+							value={ selectedOption }
+							__experimentalShowSelectedHint
+							onChange={ ( { selectedItem } ) => {
+								onChangeType( selectedItem.value );
+							} }
+							size={ '__unstable-large' }
+						/>
+					</BaseControl>
+				</InspectorControls>
+			) : null,
 		native: null,
 	} );
 }
@@ -300,12 +321,7 @@ export const withInspectorControls = createHigherOrderComponent(
 
 		return [
 			showPositionControls && (
-				<InspectorControls
-					key="position"
-					__experimentalGroup="position"
-				>
-					<PositionEdit { ...props } />
-				</InspectorControls>
+				<PositionPanel key="position" { ...props } />
 			),
 			<BlockEdit key="edit" { ...props } />,
 		];
@@ -349,6 +365,10 @@ export const withPositionStyles = createHigherOrderComponent(
 		// Attach a `wp-container-` id-based class name.
 		const className = classnames( props?.className, {
 			[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+			[ `is-position-${ attributes?.style?.position?.type }` ]:
+				allowPositionStyles &&
+				!! css &&
+				!! attributes?.style?.position?.type,
 		} );
 
 		return (

package/src/hooks/test/align.native.js

@@ -83,7 +83,7 @@ describe( 'Align options', () => {
 					expect( paragraphBlock ).toBeVisible();
 
 					// Open alignments menu
-					const alignmentButtons = getByLabelText( 'Align' );
+					const alignmentButtons = getByLabelText( 'Align text' );
 					fireEvent.press( alignmentButtons );
 
 					// Select alignment option.