@wordpress/block-editor 10.5.0 → 11.0.0

package/src/components/block-tools/insertion-point.js

@@ -79,7 +79,6 @@ function InbetweenInsertionPointPopover( {
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
-	const isVertical = orientation === 'vertical';
 
 	const disableMotion = useReducedMotion();
 
@@ -105,65 +104,22 @@ function InbetweenInsertionPointPopover( {
 		}
 	}
 
-	// Define animation variants for the line element.
-	const horizontalLine = {
-		start: {
-			width: 0,
-			top: '50%',
-			bottom: '50%',
-			x: 0,
-		},
-		rest: {
-			width: 4,
-			top: 0,
-			bottom: 0,
-			x: -2,
-		},
-		hover: {
-			width: 4,
-			top: 0,
-			bottom: 0,
-			x: -2,
-		},
-	};
-	const verticalLine = {
-		start: {
-			height: 0,
-			left: '50%',
-			right: '50%',
-			y: 0,
-		},
-		rest: {
-			height: 4,
-			left: 0,
-			right: 0,
-			y: -2,
-		},
-		hover: {
-			height: 4,
-			left: 0,
-			right: 0,
-			y: -2,
-		},
-	};
 	const lineVariants = {
 		// Initial position starts from the center and invisible.
 		start: {
-			...( ! isVertical ? horizontalLine.start : verticalLine.start ),
 			opacity: 0,
+			scale: 0,
 		},
 		// The line expands to fill the container. If the inserter is visible it
 		// is delayed so it appears orchestrated.
 		rest: {
-			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
-			borderRadius: '2px',
+			scale: 1,
 			transition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' },
 		},
 		hover: {
-			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
-			borderRadius: '2px',
+			scale: 1,
 			transition: { delay: 0.5, type: 'tween' },
 		},
 	};

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

@@ -13,17 +13,22 @@
 .block-editor-block-list__insertion-point-indicator {
 	position: absolute;
 	background: var(--wp-admin-theme-color);
+	border-radius: 2px;
+	transform-origin: center;
+	opacity: 0;
+	will-change: transform, opacity;
 
 	.block-editor-block-list__insertion-point.is-vertical > & {
-		top: 50%;
-		height: $border-width;
+		top: calc(50% - 2px);
+		height: 4px;
+		width: 100%;
 	}
 
 	.block-editor-block-list__insertion-point.is-horizontal > & {
 		top: 0;
-		right: 0;
-		left: 50%;
-		width: $border-width;
+		bottom: 0;
+		left: calc(50% - 2px);
+		width: 4px;
 	}
 }
 
@@ -32,6 +37,8 @@
 	// Don't show on mobile.
 	display: none;
 	position: absolute;
+	will-change: transform;
+
 	@include break-mobile() {
 		display: flex;
 	}

package/src/components/block-variation-picker/index.js

@@ -49,10 +49,7 @@ function BlockVariationPicker( {
 							className="block-editor-block-variation-picker__variation"
 							label={ variation.description || variation.title }
 						/>
-						<span
-							className="block-editor-block-variation-picker__variation-label"
-							role="presentation"
-						>
+						<span className="block-editor-block-variation-picker__variation-label">
 							{ variation.title }
 						</span>
 					</li>

package/src/components/block-vertical-alignment-control/test/index.js

@@ -45,7 +45,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
 
-		render(
+		const { unmount } = render(
 			<BlockVerticalAlignmentUI
 				isToolbar
 				value={ alignment }
@@ -70,6 +70,9 @@ describe( 'BlockVerticalAlignmentUI', () => {
 				name: /^Align \w+$/,
 			} )
 		).toHaveLength( 3 );
+
+		// Cancel running effects, like delayed dropdown menu popover positioning.
+		unmount();
 	} );
 
 	it( 'should call onChange with undefined, when the control is already active', async () => {

package/src/components/height-control/index.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	__experimentalSpacer as Spacer,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+
+const RANGE_CONTROL_CUSTOM_SETTINGS = {
+	px: { max: 1000, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 50, step: 0.1 },
+	rem: { max: 50, step: 0.1 },
+};
+
+export default function HeightControl( {
+	onChange,
+	label = __( 'Height' ),
+	value,
+} ) {
+	const customRangeValue = parseFloat( value );
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( value ),
+			[ value ]
+		)[ 1 ] ||
+		units[ 0 ]?.value ||
+		'px';
+
+	const handleSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		const [ currentValue, currentUnit ] =
+			parseQuantityAndUnitFromRawValue( value );
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			onChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );
+		} else if (
+			[ 'em', 'rem' ].includes( currentUnit ) &&
+			newUnit === 'px'
+		) {
+			// Convert to pixel value assuming a root size of 16px.
+			onChange( Math.round( currentValue * 16 ) + newUnit );
+		} else if (
+			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			currentValue > 100
+		) {
+			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			onChange( 100 + newUnit );
+		}
+	};
+
+	return (
+		<fieldset className="block-editor-height-control">
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						value={ value }
+						units={ units }
+						onChange={ onChange }
+						onUnitChange={ handleUnitChange }
+						min={ 0 }
+						size={ '__unstable-large' }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							value={ customRangeValue }
+							min={ 0 }
+							max={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.max ?? 100
+							}
+							step={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.step ?? 0.1
+							}
+							withInputField={ false }
+							onChange={ handleSliderChange }
+							__nextHasNoMarginBottom
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}

package/src/components/height-control/stories/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeightControl from '../';
+
+export default {
+	component: HeightControl,
+	title: 'BlockEditor/HeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return <HeightControl onChange={ setValue } value={ value } { ...props } />;
+};
+
+export const Default = Template.bind( {} );

package/src/components/height-control/style.scss

@@ -0,0 +1,5 @@
+.block-editor-height-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

package/src/components/iframe/index.js

@@ -188,7 +188,17 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
+	{
+		contentRef,
+		children,
+		head,
+		tabIndex = 0,
+		assets,
+		scale = 1,
+		frameSize = 0,
+		readonly,
+		...props
+	},
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -322,7 +332,7 @@ function Iframe(
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
-										isZoomedOut
+										frameSize
 											? 'background: #2f2f2f; transition: background 0s;'
 											: ''
 									} }` }
@@ -333,23 +343,20 @@ function Iframe(
 								className={ classnames(
 									'block-editor-iframe__body',
 									BODY_CLASS_NAME,
-									...bodyClasses,
-									{
-										'is-zoomed-out': isZoomedOut,
-									}
+									...bodyClasses
 								) }
-								style={
-									isZoomedOut
-										? {
-												// This is the remaining percentage from the scaling down
-												// of the iframe body(`scale(0.45)`). We also need to subtract
-												// the body's bottom margin.
-												marginBottom: `-${
-													contentHeight * 0.55 - 100
-												}px`,
-										  }
-										: {}
-								}
+								style={ {
+									// This is the remaining percentage from the scaling down
+									// of the iframe body(`scale(0.45)`). We also need to subtract
+									// the body's bottom margin.
+									marginBottom: `-${
+										contentHeight * ( 1 - scale ) -
+										frameSize
+									}px`,
+									marginTop: frameSize,
+									transform: `scale( ${ scale } )`,
+								} }
+								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								{ /*

package/src/components/image-editor/use-save-image.js

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import apiFetch from '@wordpress/api-fetch';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';

package/src/components/image-editor/zoom-dropdown.js

@@ -28,6 +28,7 @@ export default function ZoomDropdown() {
 			) }
 			renderContent={ () => (
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Zoom' ) }
 					min={ MIN_ZOOM }
 					max={ MAX_ZOOM }

package/src/components/index.js

@@ -53,6 +53,7 @@ export { default as __experimentalColorGradientControl } from './colors-gradient
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as __experimentalHeightControl } from './height-control';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,

package/src/components/inner-blocks/index.js

@@ -7,9 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
+	getBlockSupport,
 	getBlockType,
 	store as blocksStore,
 	__unstableGetInnerBlocksProps as getInnerBlocksProps,
@@ -74,27 +75,43 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const context = useSelect(
+	const { context, name } = useSelect(
 		( select ) => {
 			const block = select( blockEditorStore ).getBlock( clientId );
 
 			// This check is here to avoid the Redux zombie bug where a child subscription
 			// is called before a parent, causing potential JS errors when the child has been removed.
 			if ( ! block ) {
-				return;
+				return {};
 			}
 
 			const blockType = getBlockType( block.name );
 
 			if ( ! blockType || ! blockType.providesContext ) {
-				return;
+				return {};
 			}
 
-			return getBlockContext( block.attributes, blockType );
+			return {
+				context: getBlockContext( block.attributes, blockType ),
+				name: block.name,
+			};
 		},
 		[ clientId ]
 	);
 
+	const { allowSizingOnChildren = false } =
+		getBlockSupport( name, '__experimentalLayout' ) || {};
+
+	const layout = useMemo(
+		() => ( {
+			...__experimentalLayout,
+			...( allowSizingOnChildren && {
+				allowSizingOnChildren: true,
+			} ),
+		} ),
+		[ __experimentalLayout, allowSizingOnChildren ]
+	);
+
 	// This component needs to always be synchronous as it's the one changing
 	// the async mode depending on the block selection.
 	return (
@@ -103,7 +120,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ __experimentalLayout }
+				__experimentalLayout={ layout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -40,23 +40,36 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition, isBlockSelected } =
-		useSelect( blockEditorStore );
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-	const innerBlocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( clientId ),
+	const {
+		getBlocks,
+		getSelectedBlocksInitialCaretPosition,
+		isBlockSelected,
+	} = useSelect( blockEditorStore );
+	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const { innerBlocks } = useSelect(
+		( select ) => ( {
+			innerBlocks: select( blockEditorStore ).getBlocks( clientId ),
+		} ),
 		[ clientId ]
 	);
-	const { getBlocks } = useSelect( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
+
 	useLayoutEffect( () => {
+		let isCancelled = false;
+
 		// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
 		// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
 		// we need to schedule this one in a microtask as well.
-		// Exemple: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
+		// Example: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
 		window.queueMicrotask( () => {
+			if ( isCancelled ) {
+				return;
+			}
+
 			// Only synchronize innerBlocks with template if innerBlocks are empty
 			// or a locking "all" or "contentOnly" exists directly on the block.
 			const currentInnerBlocks = getBlocks( clientId );
@@ -65,7 +78,7 @@ export default function useInnerBlockTemplateSync(
 				templateLock === 'all' ||
 				templateLock === 'contentOnly';
 
-			const hasTemplateChanged = ! isEqual(
+			const hasTemplateChanged = ! fastDeepEqual(
 				template,
 				existingTemplate.current
 			);
@@ -80,7 +93,8 @@ export default function useInnerBlockTemplateSync(
 				template
 			);
 
-			if ( ! isEqual( nextBlocks, currentInnerBlocks ) ) {
+			if ( ! fastDeepEqual( nextBlocks, currentInnerBlocks ) ) {
+				__unstableMarkNextChangeAsNotPersistent();
 				replaceInnerBlocks(
 					clientId,
 					nextBlocks,
@@ -96,5 +110,9 @@ export default function useInnerBlockTemplateSync(
 				);
 			}
 		} );
+
+		return () => {
+			isCancelled = true;
+		};
 	}, [ innerBlocks, template, templateLock, clientId ] );
 }

package/src/components/inserter/block-patterns-explorer/sidebar.js

@@ -36,6 +36,7 @@ function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
 	return (
 		<div className={ baseClassName }>
 			<SearchControl
+				__nextHasNoMarginBottom
 				onChange={ setFilterValue }
 				value={ filterValue }
 				label={ __( 'Search for patterns' ) }