@wordpress/block-editor 10.4.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/selected-block-popover.js

@@ -21,6 +21,7 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
 
 function selector( select ) {
 	const {
@@ -28,13 +29,16 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
+		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
+
 	return {
 		editorMode: __unstableGetEditorMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
+		isBlockInterfaceHidden: isBlockInterfaceHidden(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
@@ -56,6 +60,7 @@ function SelectedBlockPopover( {
 		editorMode,
 		isMultiSelecting,
 		isTyping,
+		isBlockInterfaceHidden,
 		hasFixedToolbar,
 		isDistractionFree,
 		lastClientId,
@@ -92,7 +97,8 @@ function SelectedBlockPopover( {
 		isLargeViewport &&
 		! isMultiSelecting &&
 		! showEmptyBlockSideInserter &&
-		! isTyping;
+		! isTyping &&
+		! isBlockInterfaceHidden;
 	const canFocusHiddenToolbar =
 		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
@@ -124,45 +130,85 @@ function SelectedBlockPopover( {
 		clientId,
 	} );
 
-	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
+	if (
+		! shouldShowBreadcrumb &&
+		! shouldShowContextualToolbar &&
+		! showEmptyBlockSideInserter
+	) {
 		return null;
 	}
 
 	return (
-		<BlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ classnames( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			__unstablePopoverSlot={ __unstablePopoverSlot }
-			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			{ shouldShowContextualToolbar && showContents && (
-				<BlockContextualToolbar
-					// If the toolbar is being shown because of being forced
-					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
-					__experimentalInitialIndex={
-						initialToolbarItemIndexRef.current
-					}
-					__experimentalOnIndexChange={ ( index ) => {
-						initialToolbarItemIndexRef.current = index;
-					} }
-					// Resets the index whenever the active block changes so
-					// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-					key={ clientId }
-				/>
+		<>
+			{ showEmptyBlockSideInserter && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					__unstableCoverTarget
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-side-inserter-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					shift={ false }
+					{ ...popoverProps }
+				>
+					<div className="block-editor-block-list__empty-block-inserter">
+						<Inserter
+							position="bottom right"
+							rootClientId={ rootClientId }
+							clientId={ clientId }
+							__experimentalIsQuick
+						/>
+					</div>
+				</BlockPopover>
 			) }
-			{ shouldShowBreadcrumb && (
-				<BlockSelectionButton
-					clientId={ clientId }
-					rootClientId={ rootClientId }
-				/>
+			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					{ ...popoverProps }
+				>
+					{ shouldShowContextualToolbar && showContents && (
+						<BlockContextualToolbar
+							// If the toolbar is being shown because of being forced
+							// it should focus the toolbar right after the mount.
+							focusOnMount={ isToolbarForced.current }
+							__experimentalInitialIndex={
+								initialToolbarItemIndexRef.current
+							}
+							__experimentalOnIndexChange={ ( index ) => {
+								initialToolbarItemIndexRef.current = index;
+							} }
+							// Resets the index whenever the active block changes so
+							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+							key={ clientId }
+						/>
+					) }
+					{ shouldShowBreadcrumb && (
+						<BlockSelectionButton
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+						/>
+					) }
+				</BlockPopover>
 			) }
-		</BlockPopover>
+		</>
 	);
 }
 

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;
 	}
@@ -42,7 +49,16 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+	pointer-events: none;
+
+	> * {
+		pointer-events: all;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
+.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
@@ -166,6 +182,12 @@
 		&:active {
 			color: $white;
 		}
+
+		// Make sure the button has no hover style when it's disabled.
+		&[aria-disabled="true"]:hover {
+			color: $white;
+		}
+
 		display: flex;
 	}
 	.block-selection-button_select-button.components-button {

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/colors/with-colors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase, reduce } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -83,18 +83,14 @@ const withEditorColorPalette = () =>
  * @return {WPComponent} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
-	const colorMap = reduce(
-		colorTypes,
-		( colorObject, colorType ) => {
-			return {
-				...colorObject,
-				...( typeof colorType === 'string'
-					? { [ colorType ]: kebabCase( colorType ) }
-					: colorType ),
-			};
-		},
-		{}
-	);
+	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
+		return {
+			...colorObject,
+			...( typeof colorType === 'string'
+				? { [ colorType ]: kebabCase( colorType ) }
+				: colorType ),
+		};
+	}, {} );
 
 	return compose( [
 		withColorPalette,
@@ -118,13 +114,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 				}
 
 				createSetters() {
-					return reduce(
-						colorMap,
-						(
-							settersAccumulator,
-							colorContext,
-							colorAttributeName
-						) => {
+					return Object.keys( colorMap ).reduce(
+						( settersAccumulator, colorAttributeName ) => {
 							const upperFirstColorAttributeName =
 								upperFirst( colorAttributeName );
 							const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
@@ -163,9 +154,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 					{ attributes, colors },
 					previousState
 				) {
-					return reduce(
-						colorMap,
-						( newState, colorContext, colorAttributeName ) => {
+					return Object.entries( colorMap ).reduce(
+						( newState, [ colorAttributeName, colorContext ] ) => {
 							const colorObject = getColorObjectByAttributeValues(
 								colors,
 								attributes[ colorAttributeName ],

package/src/components/default-block-appender/{style.scss → content.scss}

@@ -34,6 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;

package/src/components/font-sizes/fluid-utils.js

@@ -9,7 +9,6 @@ const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
 const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
 const DEFAULT_SCALE_FACTOR = 1;
 const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
-const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
@@ -41,7 +40,6 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
  * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
  * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @param {?number}       args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -53,15 +51,8 @@ export function getComputedFluidTypographyValue( {
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
 	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
-	maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,
 	minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
 } ) {
-	/*
-	 * Caches minimumFontSize in minimumFontSizeValue
-	 * so we can check if minimumFontSize exists later.
-	 */
-	let minimumFontSizeValue = minimumFontSize;
-
 	/*
 	 * Calculates missing minimumFontSize and maximumFontSize from
 	 * defaultFontSize if provided.
@@ -75,15 +66,6 @@ export function getComputedFluidTypographyValue( {
 			return null;
 		}
 
-		// If no minimumFontSize is provided, derive using min scale factor.
-		if ( ! minimumFontSizeValue ) {
-			minimumFontSizeValue =
-				roundToPrecision(
-					fontSizeParsed.value * minimumFontSizeFactor,
-					3
-				) + fontSizeParsed.unit;
-		}
-
 		// Parses the minimum font size limit, so we can perform checks using it.
 		const minimumFontSizeLimitParsed = getTypographyValueAndUnit(
 			minimumFontSizeLimit,
@@ -92,57 +74,51 @@ export function getComputedFluidTypographyValue( {
 			}
 		);
 
-		if ( !! minimumFontSizeLimitParsed?.value ) {
+		// Don't enforce minimum font size if a font size has explicitly set a min and max value.
+		if (
+			!! minimumFontSizeLimitParsed?.value &&
+			! minimumFontSize &&
+			! maximumFontSize
+		) {
 			/*
 			 * If a minimum size was not passed to this function
-			 * and the user-defined font size is lower than `minimumFontSizeLimit`,
-			 * then uses the user-defined font size as the minimum font-size.
+			 * and the user-defined font size is lower than $minimum_font_size_limit,
+			 * do not calculate a fluid value.
 			 */
-			if (
-				! minimumFontSize &&
-				fontSizeParsed?.value < minimumFontSizeLimitParsed?.value
-			) {
-				minimumFontSizeValue = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
-			} else {
-				const minimumFontSizeParsed = getTypographyValueAndUnit(
-					minimumFontSizeValue,
-					{
-						coerceTo: fontSizeParsed.unit,
-					}
-				);
-
-				/*
-				 * Otherwise, if the passed or calculated minimum font size is lower than `minimumFontSizeLimit`
-				 * use `minimumFontSizeLimit` instead.
-				 */
-				if (
-					!! minimumFontSizeParsed?.value &&
-					minimumFontSizeParsed.value <
-						minimumFontSizeLimitParsed.value
-				) {
-					minimumFontSizeValue = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
-				}
+			if ( fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value ) {
+				return null;
 			}
 		}
 
-		// If no maximumFontSize is provided, derive using max scale factor.
+		// If no fluid max font size is available use the incoming value.
 		if ( ! maximumFontSize ) {
-			maximumFontSize =
-				roundToPrecision(
-					fontSizeParsed.value * maximumFontSizeFactor,
-					3
-				) + fontSizeParsed.unit;
+			maximumFontSize = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
 		}
-	}
 
-	// Return early if one of the provided inputs is not provided.
-	if ( ! minimumFontSizeValue || ! maximumFontSize ) {
-		return null;
+		/*
+		 * If no minimumFontSize is provided, create one using
+		 * the given font size multiplied by the min font size scale factor.
+		 */
+		if ( ! minimumFontSize ) {
+			const calculatedMinimumFontSize = roundToPrecision(
+				fontSizeParsed.value * minimumFontSizeFactor,
+				3
+			);
+
+			// Only use calculated min font size if it's > $minimum_font_size_limit value.
+			if (
+				!! minimumFontSizeLimitParsed?.value &&
+				calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value
+			) {
+				minimumFontSize = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
+			} else {
+				minimumFontSize = `${ calculatedMinimumFontSize }${ fontSizeParsed.unit }`;
+			}
+		}
 	}
 
 	// Grab the minimum font size and normalize it in order to use the value for calculations.
-	const minimumFontSizeParsed =
-		getTypographyValueAndUnit( minimumFontSizeValue );
+	const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
 
 	// We get a 'preferred' unit to keep units consistent when calculating,
 	// otherwise the result will not be accurate.
@@ -159,12 +135,9 @@ export function getComputedFluidTypographyValue( {
 	}
 
 	// Uses rem for accessible fluid target font scaling.
-	const minimumFontSizeRem = getTypographyValueAndUnit(
-		minimumFontSizeValue,
-		{
-			coerceTo: 'rem',
-		}
-	);
+	const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+		coerceTo: 'rem',
+	} );
 
 	// Viewport widths defined for fluid typography. Normalize units
 	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
@@ -205,7 +178,7 @@ export function getComputedFluidTypographyValue( {
 	);
 	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
 
-	return `clamp(${ minimumFontSizeValue }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
 }
 
 /**

package/src/components/font-sizes/test/fluid-utils.js

@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
 		);
 	} );
 
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
 		);
 	} );
 
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumViewPortWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 4.5), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
 		);
 	} );
 
@@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 5.409), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
 		);
 	} );
 
@@ -74,7 +74,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSizeFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 5.409), 60px)'
+			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
 		);
 	} );
 

package/src/components/font-sizes/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce } from 'lodash';
+import { find, pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,8 +43,7 @@ export default ( ...fontSizeNames ) => {
 	 * and the value is the custom font size attribute name.
 	 * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.
 	 */
-	const fontSizeAttributeNames = reduce(
-		fontSizeNames,
+	const fontSizeAttributeNames = fontSizeNames.reduce(
 		( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {
 			fontSizeAttributeNamesAccumulator[
 				fontSizeAttributeName
@@ -81,12 +80,13 @@ export default ( ...fontSizeNames ) => {
 					}
 
 					createSetters() {
-						return reduce(
-							fontSizeAttributeNames,
+						return Object.entries( fontSizeAttributeNames ).reduce(
 							(
 								settersAccumulator,
-								customFontSizeAttributeName,
-								fontSizeAttributeName
+								[
+									fontSizeAttributeName,
+									customFontSizeAttributeName,
+								]
 							) => {
 								const upperFirstFontSizeAttributeName =
 									upperFirst( fontSizeAttributeName );
@@ -159,15 +159,18 @@ export default ( ...fontSizeNames ) => {
 							return null;
 						}
 
-						const newState = reduce(
+						const newState = Object.entries(
 							pickBy(
 								fontSizeAttributeNames,
 								didAttributesChange
-							),
+							)
+						).reduce(
 							(
 								newStateAccumulator,
-								customFontSizeAttributeName,
-								fontSizeAttributeName
+								[
+									fontSizeAttributeName,
+									customFontSizeAttributeName,
+								]
 							) => {
 								const fontSizeAttributeValue =
 									attributes[ fontSizeAttributeName ];