@wordpress/block-editor 7.0.3 → 7.0.4

package/src/components/block-alignment-control/use-available-alignments.js

@@ -16,7 +16,7 @@ const WIDE_CONTROLS = [ 'wide', 'full' ];
 export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	// Always add the `none` option if not exists.
 	if ( ! controls.includes( 'none' ) ) {
-		controls.unshift( 'none' );
+		controls = [ 'none', ...controls ];
 	}
 	const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -34,9 +34,15 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	const layoutAlignments = layoutType.getAlignments( layout );
 
 	if ( themeSupportsLayout ) {
-		return layoutAlignments.filter( ( { name: alignmentName } ) =>
-			controls.includes( alignmentName )
+		const alignments = layoutAlignments.filter(
+			( { name: alignmentName } ) => controls.includes( alignmentName )
 		);
+		// While we treat `none` as an alignment, we shouldn't return it if no
+		// other alignments exist.
+		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
+			return [];
+		}
+		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
@@ -54,5 +60,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		)
 		.map( ( enabledControl ) => ( { name: enabledControl } ) );
 
+	// While we treat `none` as an alignment, we shouldn't return it if no
+	// other alignments exist.
+	if (
+		enabledControls.length === 1 &&
+		enabledControls[ 0 ].name === 'none'
+	) {
+		return [];
+	}
+
 	return enabledControls;
 }

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

@@ -131,7 +131,7 @@ const BlockInspectorSingleBlock = ( {
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
-				bubblesVirtually={ false }
+				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Dimensions' ) }
 			/>
 			<div>

package/src/components/block-list/block-html.js

@@ -30,6 +30,11 @@ function BlockHTML( { clientId } ) {
 	const { updateBlock } = useDispatch( blockEditorStore );
 	const onChange = () => {
 		const blockType = getBlockType( block.name );
+
+		if ( ! blockType ) {
+			return;
+		}
+
 		const attributes = getBlockAttributes(
 			blockType,
 			html,

package/src/components/block-list/block.native.js

@@ -321,8 +321,8 @@ export default compose( [
 		const { name, attributes, isValid } = block || {};
 
 		const blockType = getBlockType( name || 'core/missing' );
-		const title = blockType.title;
-		const icon = blockType.icon;
+		const title = blockType?.title;
+		const icon = blockType?.icon;
 
 		const parents = getBlockParents( clientId, true );
 		const parentId = parents[ 0 ] || '';

package/src/components/block-list-appender/index.js

@@ -87,6 +87,14 @@ function BlockListAppender( {
 				'block-list-appender wp-block',
 				className
 			) }
+			// The appender exists to let you add the first Paragraph before
+			// any is inserted. To that end, this appender should visually be
+			// presented as a block. That means theme CSS should style it as if
+			// it were an empty paragraph block. That means a `wp-block` class to
+			// ensure the width is correct, and a [data-block] attribute to ensure
+			// the correct margin is applied, especially for classic themes which
+			// have commonly targeted that attribute for margins.
+			data-block
 		>
 			{ appender }
 		</TagName>

package/src/components/block-preview/README.md

@@ -22,7 +22,7 @@ A block instance (object) or a blocks array you would like to render a preview.
 ### `viewportWidth`
 
 -   **Type:** `Int`
--   **Default:** `700`
+-   **Default:** `1200`
 
 Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview.
 

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

@@ -10,12 +10,6 @@
 
 	overflow: hidden;
 
-	// Overrides the default padding applied in editor styles otherwise preview centering break.
-	&.editor-styles-wrapper {
-		padding: 0;
-		margin: 0;
-	}
-
 	.block-editor-block-preview__content {
 		// This element receives inline styles for width, height, and transform-scale.
 		// Those inline styles are calculated to fit a perfect thumbnail.
@@ -40,16 +34,5 @@
 		.block-list-appender {
 			display: none;
 		}
-
-		// Reset default editor padding
-		.block-editor-block-list__layout.is-root-container {
-			padding-left: 0;
-			padding-right: 0;
-
-			> .wp-block[data-align="full"] {
-				margin-left: 0;
-				margin-right: 0;
-			}
-		}
 	}
 }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -90,11 +90,11 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canDuplicate,
 				canInsertDefaultBlock,
+				canMove,
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
 				onInsertBefore,
-				isLocked,
 				onRemove,
 				onCopy,
 				onMoveTo,
@@ -157,7 +157,7 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
-								{ ! isLocked && ! onlyBlock && (
+								{ canMove && ! onlyBlock && (
 									<MenuItem
 										onClick={ flow( onClose, onMoveTo ) }
 									>

package/src/components/block-settings-menu-controls/index.js

@@ -25,17 +25,20 @@ import { store as blockEditorStore } from '../../store';
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const selectedBlocks = useSelect(
+	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getSelectedBlockClientIds } = select(
 				blockEditorStore
 			);
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
-			return map(
-				compact( getBlocksByClientId( ids ) ),
-				( block ) => block.name
-			);
+			return {
+				selectedBlocks: map(
+					compact( getBlocksByClientId( ids ) ),
+					( block ) => block.name
+				),
+				selectedClientIds: ids,
+			};
 		},
 		[ clientIds ]
 	);
@@ -46,7 +49,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton = isGroupable || isUngroupable;
 	return (
-		<Slot fillProps={ { ...fillProps, selectedBlocks } }>
+		<Slot fillProps={ { ...fillProps, selectedBlocks, selectedClientIds } }>
 			{ ( fills ) => {
 				if ( fills?.length > 0 || showConvertToGroupButton ) {
 					return (

package/src/components/block-switcher/block-styles-menu.js

@@ -33,7 +33,7 @@ export default function BlockStylesMenu( { hoveredBlock, onSwitch } ) {
 			{ hoveredClassName && (
 				<PreviewBlockPopover
 					blocks={
-						blockType.example
+						blockType && blockType.example
 							? getBlockFromExample( blockType.name, {
 									attributes: {
 										...blockType.example.attributes,

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/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' );
+	} );
+} );