@wordpress/block-editor 7.0.2 → 8.0.1

package/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -6,7 +6,7 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu
     className="block-editor-block-switcher__no-switcher-icon"
     disabled={true}
     icon={
-      <BlockIcon
+      <Memo(BlockIcon)
         icon={
           <SVG
             viewBox="0 0 24 24"

package/src/components/block-switcher/test/index.js

@@ -120,6 +120,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				{ name: 'core/heading', frecency: 1 },
 				{ name: 'core/paragraph', frecency: 1 },
 			],
+			canRemove: true,
 		} ) );
 		const wrapper = shallow(
 			<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
@@ -146,6 +147,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				{ name: 'core/heading', frecency: 1 },
 				{ name: 'core/paragraph', frecency: 1 },
 			],
+			canRemove: true,
 		} ) );
 		const wrapper = shallow(
 			<BlockSwitcherDropdownMenu
@@ -161,6 +163,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 				possibleBlockTransformations: [
 					{ name: 'core/paragraph', frecency: 3 },
 				],
+				canRemove: true,
 			} ) );
 		} );
 		const getDropdown = () =>

package/src/components/block-title/index.js

@@ -66,11 +66,14 @@ export default function BlockTitle( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	if ( ! name || ! blockInformation ) return null;
 	const blockType = getBlockType( name );
-	const label = reusableBlockTitle || getBlockLabel( blockType, attributes );
+	const blockLabel = blockType
+		? getBlockLabel( blockType, attributes )
+		: null;
+	const label = reusableBlockTitle || blockLabel;
 	// Label will fallback to the title if no label is defined for the current
 	// label context. If the label is defined we prioritize it over possible
 	// possible block variation title match.
-	if ( label !== blockType.title ) {
+	if ( label && label !== blockType.title ) {
 		return truncate( label, { length: 35 } );
 	}
 	return blockInformation.title;

package/src/components/block-tools/block-popover.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useRef, useEffect } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -107,13 +107,11 @@ function BlockPopover( {
 
 	useShortcut(
 		'core/block-editor/focus-toolbar',
-		useCallback( () => {
+		() => {
 			setIsToolbarForced( true );
 			stopTyping( true );
-		}, [] ),
+		},
 		{
-			bindGlobal: true,
-			eventName: 'keydown',
 			isDisabled: ! canFocusHiddenToolbar,
 		}
 	);

package/src/components/block-tools/index.js

@@ -128,8 +128,11 @@ export default function BlockTools( {
 					ref={ usePopoverScroll( __unstableContentRef ) }
 				/>
 				{ children }
-				{ /* Forward compatibility: a place to render block tools behind the
-                 content so it can be tabbed to properly. */ }
+				{ /* Used for inline rich text popovers. */ }
+				<Popover.Slot
+					name="__unstable-block-tools-after"
+					ref={ usePopoverScroll( __unstableContentRef ) }
+				/>
 			</InsertionPoint>
 		</div>
 	);

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

@@ -14,7 +14,8 @@ import {
 	createContext,
 	useContext,
 } from '@wordpress/element';
-import { Popover } from '@wordpress/components';
+import { Popover, __unstableMotion as motion } from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -79,7 +80,7 @@ function InsertionPointPopover( {
 	}, [] );
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
-
+	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
 		if ( ! previousElement && ! nextElement ) {
 			return {};
@@ -92,7 +93,7 @@ function InsertionPointPopover( {
 			? nextElement.getBoundingClientRect()
 			: null;
 
-		if ( orientation === 'vertical' ) {
+		if ( isVertical ) {
 			return {
 				width: previousElement
 					? previousElement.offsetWidth
@@ -133,7 +134,7 @@ function InsertionPointPopover( {
 			? nextElement.getBoundingClientRect()
 			: null;
 
-		if ( orientation === 'vertical' ) {
+		if ( isVertical ) {
 			if ( isRTL() ) {
 				return {
 					top: previousRect ? previousRect.bottom : nextRect.top,
@@ -173,6 +174,7 @@ function InsertionPointPopover( {
 	}, [ previousElement, nextElement ] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const disableMotion = useReducedMotion();
 
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
@@ -198,6 +200,79 @@ function InsertionPointPopover( {
 	const showInsertionPointInserter =
 		previousElement && nextElement && isInserterShown;
 
+	// 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,
+		},
+		// 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',
+			transition: { delay: showInsertionPointInserter ? 0.4 : 0 },
+		},
+		hover: {
+			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
+			opacity: 1,
+			borderRadius: '2px',
+			transition: { delay: 0.4 },
+		},
+	};
+
+	const inserterVariants = {
+		start: {
+			scale: disableMotion ? 1 : 0,
+		},
+		rest: {
+			scale: 1,
+			transition: { delay: 0.2 },
+		},
+	};
+
 	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	// While ideally it would be enough to capture the
 	// bubbling focus event from the Inserter, due to the
@@ -216,8 +291,17 @@ function InsertionPointPopover( {
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
+			// Forces a remount of the popover when its position changes
+			// This makes sure the popover doesn't animate from its previous position.
+			key={ nextClientId + '--' + rootClientId }
 		>
-			<div
+			<motion.div
+				layout={ ! disableMotion }
+				initial={ disableMotion ? 'rest' : 'start' }
+				animate="rest"
+				whileHover="hover"
+				whileTap="pressed"
+				exit="start"
 				ref={ ref }
 				tabIndex={ -1 }
 				onClick={ onClick }
@@ -227,9 +311,13 @@ function InsertionPointPopover( {
 				} ) }
 				style={ style }
 			>
-				<div className="block-editor-block-list__insertion-point-indicator" />
+				<motion.div
+					variants={ lineVariants }
+					className="block-editor-block-list__insertion-point-indicator"
+				/>
 				{ showInsertionPointInserter && (
-					<div
+					<motion.div
+						variants={ inserterVariants }
 						className={ classnames(
 							'block-editor-block-list__insertion-point-inserter'
 						) }
@@ -246,9 +334,9 @@ function InsertionPointPopover( {
 								openRef.current = false;
 							} }
 						/>
-					</div>
+					</motion.div>
 				) }
-			</div>
+			</motion.div>
 		</Popover>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */

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

@@ -10,15 +10,8 @@
 	position: absolute;
 	background: var(--wp-admin-theme-color);
 
-	// Provide a muted animation that isn't too noisy.
-	animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
-
 	.block-editor-block-list__insertion-point.is-vertical > & {
 		top: 50%;
-		right: 0;
-		left: 0;
 		height: $border-width;
 	}
 
@@ -26,7 +19,6 @@
 		top: 0;
 		right: 0;
 		left: 50%;
-		height: 100%;
 		width: $border-width;
 	}
 }
@@ -42,8 +34,8 @@
 
 	justify-content: center;
 
-	top: calc(50% - #{  $button-size-small * 0.5 });
-	left: calc(50% - #{  $button-size-small * 0.5 });
+	top: calc(50% - #{$button-size-small * 0.5});
+	left: calc(50% - #{$button-size-small * 0.5});
 }
 
 .block-editor-block-list__block-popover-inserter {
@@ -86,29 +78,6 @@
 	}
 }
 
-.block-editor-block-list__insertion-point-inserter,
-.block-editor-block-list__block-popover-inserter {
-	.block-editor-inserter__toggle.components-button {
-		// Fade it in after a delay.
-		animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-	}
-}
-
-@keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
-	0% {
-		opacity: 0;
-	}
-	60% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-
 /**
  * Block Toolbar when contextual.
  */
@@ -181,7 +150,6 @@
 	}
 }
 
-
 /**
  * Block Label for Navigation/Selection Mode
  */
@@ -270,7 +238,8 @@
 		}
 	}
 
-	.components-popover__content.components-popover__content { // Needs specificity.
+	.components-popover__content.components-popover__content {
+		// Needs specificity.
 		background: none;
 		border: none;
 		box-shadow: none;

package/src/components/block-types-list/style.scss

@@ -1,7 +1,4 @@
 .block-editor-block-types-list > [role="presentation"] {
-	padding: 4px;
-	margin-left: -4px;
-	margin-right: -4px;
 	overflow: hidden;
 	display: flex;
 	flex-wrap: wrap;

package/src/components/border-radius-control/index.js

@@ -53,6 +53,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
+
 	const unit = getAllUnit( values );
 	const unitConfig = units && units.find( ( item ) => item.value === unit );
 	const step = unitConfig?.step || 1;

package/src/components/border-radius-control/test/utils.js

@@ -0,0 +1,216 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getAllUnit,
+	getAllValue,
+	hasMixedValues,
+	hasDefinedValues,
+	mode,
+} from '../utils';
+
+describe( 'getAllUnit', () => {
+	describe( 'when provided string based values', () => {
+		it( 'should return valid unit when passed a valid unit', () => {
+			expect( getAllUnit( '32em' ) ).toBe( 'em' );
+		} );
+
+		it( 'should fall back to px when passed an invalid unit', () => {
+			expect( getAllUnit( '32apples' ) ).toBe( 'px' );
+		} );
+
+		it( 'should fall back to px when passed a value without a unit', () => {
+			expect( getAllUnit( '32' ) ).toBe( 'px' );
+		} );
+	} );
+
+	describe( 'when provided object based values', () => {
+		it( 'should return the most common value', () => {
+			const values = {
+				bottomLeft: '2em',
+				bottomRight: '2em',
+				topLeft: '0',
+				topRight: '2px',
+			};
+			expect( getAllUnit( values ) ).toBe( 'em' );
+		} );
+
+		it( 'should return the real value when the most common value is undefined', () => {
+			const values = {
+				bottomLeft: '0',
+				bottomRight: '0',
+				topLeft: '0',
+				topRight: '2em',
+			};
+			expect( getAllUnit( values ) ).toBe( 'em' );
+		} );
+
+		it( 'should return the most common value there are no undefined values', () => {
+			const values = {
+				bottomLeft: '1em',
+				bottomRight: '1em',
+				topLeft: '2px',
+				topRight: '2em',
+			};
+			expect( getAllUnit( values ) ).toBe( 'em' );
+		} );
+
+		it( 'should fall back to px when all values are undefined or equivalent', () => {
+			const values = {
+				bottomLeft: '0',
+				bottomRight: undefined,
+				topLeft: undefined,
+				topRight: '0',
+			};
+			expect( getAllUnit( values ) ).toBe( 'px' );
+		} );
+	} );
+
+	describe( 'when provided invalid values', () => {
+		it( 'should return px when passed an array', () => {
+			expect( getAllUnit( [] ) ).toBe( 'px' );
+		} );
+		it( 'should return px when passed a boolean', () => {
+			expect( getAllUnit( false ) ).toBe( 'px' );
+		} );
+		it( 'should return px when passed undefined', () => {
+			expect( getAllUnit( false ) ).toBe( 'px' );
+		} );
+	} );
+} );
+
+describe( 'getAllValue', () => {
+	describe( 'when provided string based values', () => {
+		it( 'should return valid value + unit when passed a valid unit', () => {
+			expect( getAllValue( '32em' ) ).toBe( '32em' );
+		} );
+
+		it( 'should return string as-is without parsing it', () => {
+			expect( getAllValue( '32apples' ) ).toBe( '32apples' );
+		} );
+	} );
+
+	describe( 'when provided object based values', () => {
+		it( 'should return null if values are mixed', () => {
+			const values = {
+				bottomLeft: '2em',
+				bottomRight: '2em',
+				topLeft: '0',
+				topRight: '2px',
+			};
+			expect( getAllValue( values ) ).toBe( null );
+		} );
+
+		it( 'should return the common value + unit when all values are the same', () => {
+			const values = {
+				bottomLeft: '1em',
+				bottomRight: '1em',
+				topLeft: '1em',
+				topRight: '1em',
+			};
+			expect( getAllValue( values ) ).toBe( '1em' );
+		} );
+
+		it( 'should return the common value + most common unit when same values but different units', () => {
+			const values = {
+				bottomLeft: '1em',
+				bottomRight: '1em',
+				topLeft: '1px',
+				topRight: '1rem',
+			};
+			expect( getAllValue( values ) ).toBe( '1em' );
+		} );
+
+		it( 'should fall back to null when values are undefined', () => {
+			const values = {
+				bottomLeft: undefined,
+				bottomRight: undefined,
+				topLeft: undefined,
+				topRight: undefined,
+			};
+			expect( getAllValue( values ) ).toBe( null );
+		} );
+	} );
+
+	describe( 'when provided invalid values', () => {
+		it( 'should return px when passed an array', () => {
+			expect( getAllValue( [] ) ).toBe( null );
+		} );
+		it( 'should return px when passed a boolean', () => {
+			expect( getAllValue( false ) ).toBe( null );
+		} );
+		it( 'should return px when passed undefined', () => {
+			expect( getAllValue( false ) ).toBe( null );
+		} );
+	} );
+} );
+
+describe( 'hasMixedValues', () => {
+	it( 'should return false when passed a string value', () => {
+		expect( hasMixedValues( '2px' ) ).toBe( false );
+	} );
+
+	it( 'should return true when passed mixed values', () => {
+		const values = {
+			bottomLeft: '1em',
+			bottomRight: '1px',
+			topLeft: '2px',
+			topRight: '2em',
+		};
+		expect( hasMixedValues( values ) ).toBe( true );
+	} );
+
+	it( 'should return false when passed a common value', () => {
+		const values = {
+			bottomLeft: '1em',
+			bottomRight: '1em',
+			topLeft: '1em',
+			topRight: '1em',
+		};
+		expect( hasMixedValues( values ) ).toBe( false );
+	} );
+} );
+
+describe( 'hasDefinedValues', () => {
+	it( 'should return false when passed a falsy value', () => {
+		expect( hasDefinedValues( undefined ) ).toBe( false );
+		expect( hasDefinedValues( null ) ).toBe( false );
+		expect( hasDefinedValues( '' ) ).toBe( false );
+	} );
+
+	it( 'should return true when passed a non empty string value', () => {
+		expect( hasDefinedValues( '1px' ) ).toBe( true );
+	} );
+
+	it( 'should return false when passed an object with empty values', () => {
+		const values = {
+			bottomLeft: undefined,
+			bottomRight: undefined,
+			topLeft: undefined,
+			topRight: undefined,
+		};
+		expect( hasDefinedValues( values ) ).toBe( false );
+	} );
+
+	it( 'should return true when passed an object with at least one real value', () => {
+		const values = {
+			bottomLeft: undefined,
+			bottomRight: '1px',
+			topLeft: undefined,
+			topRight: undefined,
+		};
+		expect( hasDefinedValues( values ) ).toBe( true );
+	} );
+} );
+
+describe( 'mode', () => {
+	it( 'should return the most common value', () => {
+		const values = [ 'a', 'z', 'z', 'b', undefined ];
+		expect( mode( values ) ).toBe( 'z' );
+	} );
+
+	it( 'should return the most common real value', () => {
+		const values = [ undefined, 'a', undefined, undefined, undefined ];
+		expect( mode( values ) ).toBe( 'a' );
+	} );
+} );

package/src/components/border-radius-control/utils.js

@@ -4,27 +4,35 @@
 import { __experimentalParseUnit as parseUnit } from '@wordpress/components';
 
 /**
- * Gets the item with the highest occurrence within an array
- * https://stackoverflow.com/a/20762713
+ * Gets the (non-undefined) item with the highest occurrence within an array
+ * Based in part on: https://stackoverflow.com/a/20762713
  *
- * @param {Array<any>} arr Array of items to check.
- * @return {any}           The item with the most occurrences.
+ * Undefined values are always sorted to the end by `sort`, so this function
+ * returns the first element, to always prioritize real values over undefined
+ * values.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description
+ *
+ * @param {Array<any>} inputArray Array of items to check.
+ * @return {any}                  The item with the most occurrences.
  */
-function mode( arr ) {
+export function mode( inputArray ) {
+	const arr = [ ...inputArray ];
 	return arr
 		.sort(
 			( a, b ) =>
-				arr.filter( ( v ) => v === a ).length -
-				arr.filter( ( v ) => v === b ).length
+				inputArray.filter( ( v ) => v === b ).length -
+				inputArray.filter( ( v ) => v === a ).length
 		)
-		.pop();
+		.shift();
 }
 
 /**
  * Returns the most common CSS unit in the radius values.
+ * Falls back to `px` as a default unit.
  *
  * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values.
+ * @return {string}              Most common CSS unit in values. Default: `px`.
  */
 export function getAllUnit( values = {} ) {
 	if ( typeof values === 'string' ) {
@@ -37,7 +45,7 @@ export function getAllUnit( values = {} ) {
 		return unit;
 	} );
 
-	return mode( allUnits );
+	return mode( allUnits ) || 'px';
 }
 
 /**