@wordpress/block-editor 10.0.3 → 10.0.5

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

@@ -8,8 +8,19 @@
  * Cross-Block Selection
  */
 
+@keyframes selection-overlay__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 0.4;
+	}
+}
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
+// Also be sure to test partial selections in Safari, as it draws the
+// selection marker with an entirely different model than Blink.
 .block-editor-block-list__layout {
 	position: relative;
 
@@ -19,63 +30,88 @@
 		background: transparent;
 	}
 
-	// The primary indicator of selection in text is the native selection marker.
-	// When selecting multiple blocks, we provide an additional selection indicator.
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
-	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
+	.has-multi-selection &::selection {
+		background: transparent;
+	}
+
+	// Block multi selection
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+		// Hide the native selection indicator, for the selection, and children.
+		&::selection,
+		& ::selection {
+			background: transparent;
+		}
+
+		// Draw a spot color overlay.
 		&::after {
-			// Show selection borders around every non-nested block's actual footprint.
+			content: "";
 			position: absolute;
 			z-index: 1;
 			pointer-events: none;
-			content: "";
 			top: $border-width;
+			right: $border-width;
 			bottom: $border-width;
 			left: $border-width;
-			right: $border-width;
+			background: var(--wp-admin-theme-color);
+			opacity: 0.4;
 
-			// Everything else.
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			// Animate.
+			animation: selection-overlay__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
 
-			// Windows High Contrast mode will show this outline.
+			// Show outline in high contrast mode.
 			outline: 2px solid transparent;
-
-			// Show a lighter color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width $dark-theme-focus;
-			}
-		}
-
-		// Provide exceptions for placeholders.
-		.components-placeholder,
-		.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-			::selection {
-				background: transparent;
-			}
 		}
 	}
 
-	// Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
+	// Block highlight, and navigation mode, not focus.
+	// By not using a pseudo element, we can limit ourselves to only
+	// using ::after, leaving ::before free. Otherwise, highlight + multi-select
+	// would require the opacity-changing overlay to be on ::before.
+	.block-editor-block-list__block.is-highlighted,
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+	&.is-navigate-mode .block-editor-block-list__block.is-selected,
+	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-	.block-editor-block-list__block.is-highlighted::after {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		outline: $border-width solid transparent;
+		// Show outline in high contrast mode.
+		outline: 2px solid transparent;
 	}
 
-	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		outline: 2px solid transparent;
+	// Block focus.
+	.block-editor-block-list__block:not([contenteditable]):focus {
+		outline: none;
+
+		// We're using a pseudo element to overflow placeholder borders
+		// and any border inside the block itself.
+		&::after {
+			content: "";
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
+			top: $border-width;
+			right: $border-width;
+			bottom: $border-width;
+			left: $border-width;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
 	}
 
+	// Moving blocks using keyboard (Ellipsis > Move).
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
+		box-shadow: none;
+		outline: none;
 
-		&::before {
+		&::after {
 			content: "";
 			position: absolute;
 			z-index: 0;
@@ -90,14 +126,10 @@
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
 		}
-
-		&::after {
-			content: none;
-		}
 	}
 
 	& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
-		&::before {
+		&::after {
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
@@ -134,29 +166,16 @@
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {
+	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
+	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
+	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
+	// from the preceeding paragraph showing, which is effectively the above selection bleeding in.
+	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
 	// Re-enable text-selection on editable blocks.
 	user-select: text;
 
-	// Hide the select style pseudo element as otherwise it gets shwon as "selected" in Safari.
-	&.is-partially-selected::after {
-		// By positioning this pseudo element outside the boundaries of the parent block,
-		// when partially selected it hides the pseudo element selection in Safari.
-		top: -0.5px;
-		right: -0.5px;
-		bottom: -0.5px;
-		left: -0.5px;
-	}
-
-	&.is-highlighted::after,
-	&.is-highlighted ~ .is-multi-selected::after {
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
@@ -167,7 +186,6 @@
 	/**
 	 * Notices
 	 */
-
 	.components-placeholder .components-with-notices-ui {
 		margin: -10px 0 12px 0;
 	}
@@ -186,56 +204,6 @@
 		}
 	}
 
-
-	/**
-	 * Block Layout
-	 */
-
-	// Navigate mode & Focused wrapper.
-	// We're using a pseudo element to overflow placeholder borders
-	// and any border inside the block itself.
-	&:not([contenteditable]):focus {
-		outline: none;
-
-		&::after {
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-			content: "";
-			top: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			right: $border-width;
-
-			// 2px outside.
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-
-	/**
-	* Block styles and alignments
-	*/
-	&::after {
-		content: "";
-		pointer-events: none;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 0 transparent;
-		transition: box-shadow 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
 	// Warnings
 	&.has-warning {
 		min-height: $grid-unit-60;
@@ -282,7 +250,7 @@
 		}
 	}
 
-	// Reusable blocks parent borer.
+	// Reusable blocks parent border.
 	&.is-reusable.has-child-selected::after {
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
@@ -296,16 +264,8 @@
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered {
 		cursor: default;
-
-		&::after {
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			// Border is outset, so subtract the width to achieve correct radius.
-			border-radius: $radius-block-ui - $border-width;
-		}
+		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		border-radius: $radius-block-ui;
 	}
 
 	&.is-selected {
@@ -315,19 +275,11 @@
 			cursor: unset;
 		}
 
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-		}
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
+		border-radius: $radius-block-ui;
 
 		&:focus {
-			&::after {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 }

package/src/components/block-parent-selector/index.js

@@ -83,10 +83,10 @@ export default function BlockParentSelector() {
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select %s' ),
-					blockInformation.title
+					blockInformation?.title
 				) }
 				showTooltip
-				icon={ <BlockIcon icon={ blockInformation.icon } /> }
+				icon={ <BlockIcon icon={ blockInformation?.icon } /> }
 			/>
 		</div>
 	);

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

@@ -226,7 +226,7 @@ function BlockPopoverInbetween( {
 			forcePopoverRecompute
 		);
 		return () => {
-			previousElement.ownerDocument.defaultView.removeEventListener(
+			previousElement.ownerDocument.defaultView?.removeEventListener(
 				'resize',
 				forcePopoverRecompute
 			);

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

@@ -42,24 +42,15 @@ function BlockPopover(
 		ref,
 		usePopoverScroll( __unstableContentRef ),
 	] );
-	const style = useMemo( () => {
-		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
-	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
-		useReducer(
-			// Module is there to make sure that the counter doesn't overflow.
-			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
-			0
-		);
+	const [
+		popoverDimensionsRecomputeCounter,
+		forceRecomputePopoverDimensions,
+	] = useReducer(
+		// Module is there to make sure that the counter doesn't overflow.
+		( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+		0
+	);
 
 	// When blocks are moved up/down, they are animated to their new position by
 	// updating the `transform` property manually (i.e. without using CSS
@@ -74,7 +65,7 @@ function BlockPopover(
 		}
 
 		const observer = new window.MutationObserver(
-			forceRecomputePopoverAnchor
+			forceRecomputePopoverDimensions
 		);
 		observer.observe( selectedElement, { attributes: true } );
 
@@ -83,12 +74,36 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const style = useMemo( () => {
+		if (
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverDimensionsRecomputeCounter < 0 ||
+			! selectedElement ||
+			lastSelectedElement !== selectedElement
+		) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [
+		selectedElement,
+		lastSelectedElement,
+		__unstableRefreshSize,
+		popoverDimensionsRecomputeCounter,
+	] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
-			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
-			popoverAnchorRecomputeCounter < 0 ||
+			popoverDimensionsRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -132,7 +147,7 @@ function BlockPopover(
 		bottomClientId,
 		lastSelectedElement,
 		selectedElement,
-		popoverAnchorRecomputeCounter,
+		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

package/src/components/button-block-appender/style.scss

@@ -35,7 +35,9 @@
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > & {
 		pointer-events: none;
 
 		&::after {

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

@@ -41,7 +41,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		if ( angle === 0 ) {
 			setEditedUrl();
 			setRotation( angle );
-			setAspect( 1 / aspect );
+			setAspect( naturalWidth / naturalHeight );
 			setPosition( {
 				x: -( position.y * naturalAspectRatio ),
 				y: position.x * naturalAspectRatio,
@@ -80,7 +80,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 			canvas.toBlob( ( blob ) => {
 				setEditedUrl( URL.createObjectURL( blob ) );
 				setRotation( angle );
-				setAspect( 1 / aspect );
+				setAspect( canvas.width / canvas.height );
 				setPosition( {
 					x: -( position.y * naturalAspectRatio ),
 					y: position.x * naturalAspectRatio,

package/src/components/inserter/search-items.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { noCase } from 'change-case';
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
+import { find, words } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -36,17 +35,6 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
-/**
- * Extracts words from an input string.
- *
- * @param {string} input The input string.
- *
- * @return {Array} Words, extracted from the input string.
- */
-function extractWords( input = '' ) {
-	return noCase( input ).split( ' ' ).filter( Boolean );
-}
-
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -55,7 +43,7 @@ function extractWords( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return words( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -162,7 +150,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const normalizedSearchTerms = words( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms

package/src/components/inserter/test/search-items.js

@@ -42,6 +42,10 @@ describe( 'getNormalizedSearchTerms', () => {
 			getNormalizedSearchTerms( '  Média  &   Text Tag-Cloud > 123' )
 		).toEqual( [ 'media', 'text', 'tag', 'cloud', '123' ] );
 	} );
+
+	it( 'should support non-latin letters', () => {
+		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+	} );
 } );
 
 describe( 'getItemSearchRank', () => {

package/src/components/spacing-sizes-control/index.js

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { __experimentalText as Text } from '@wordpress/components';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -68,8 +73,15 @@ export default function SpacingSizesControl( {
 	};
 
 	return (
-		<fieldset role="region" className="component-spacing-sizes-control">
-			<Text as="legend">{ label }</Text>
+		<fieldset
+			role="region"
+			className={ classnames( 'component-spacing-sizes-control', {
+				'is-unlinked': ! isLinked,
+			} ) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
 			{ ! hasOneSide && (
 				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
 			) }

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -9,12 +9,12 @@ import classnames from 'classnames';
 import { useState, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
+	BaseControl,
 	Button,
 	RangeControl,
 	CustomSelectControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
@@ -167,21 +167,21 @@ export default function SpacingInputControl( {
 		<>
 			{ side !== 'all' && (
 				<HStack className="components-spacing-sizes-control__side-labels">
-					<Text className="components-spacing-sizes-control__side-label">
+					<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
 						{ LABELS[ side ] }
-					</Text>
+					</BaseControl.VisualLabel>
 
 					{ showHint && (
-						<Text className="components-spacing-sizes-control__hint-single">
+						<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
 							{ currentValueHint }
-						</Text>
+						</BaseControl.VisualLabel>
 					) }
 				</HStack>
 			) }
 			{ side === 'all' && showHint && (
-				<Text className="components-spacing-sizes-control__hint-all">
+				<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
 					{ currentValueHint }
-				</Text>
+				</BaseControl.VisualLabel>
 			) }
 
 			{ ! disableCustomSpacingSizes && (
@@ -256,6 +256,7 @@ export default function SpacingInputControl( {
 					marks={ marks }
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
+					__nextHasNoMarginBottom={ true }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (