@wordpress/block-editor 9.4.0 → 9.5.0

package/src/components/block-pattern-setup/index.js

@@ -11,7 +11,7 @@ import {
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
-import { useInstanceId, useResizeObserver } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,7 +28,6 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
-	height,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -39,10 +38,7 @@ const SetupContent = ( {
 			[ activeSlide + 1, 'next-slide' ],
 		] );
 		return (
-			<div
-				className="block-editor-block-pattern-setup__carousel"
-				style={ { height } }
-			>
+			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
 					<ul className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
@@ -50,7 +46,6 @@ const SetupContent = ( {
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
-								minHeight={ height }
 							/>
 						) ) }
 					</ul>
@@ -59,10 +54,7 @@ const SetupContent = ( {
 		);
 	}
 	return (
-		<div
-			style={ { height } }
-			className="block-editor-block-pattern-setup__grid"
-		>
+		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
 				{ ...composite }
 				role="listbox"
@@ -151,8 +143,6 @@ const BlockPatternSetup = ( {
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
 
 	if ( ! patterns?.length ) {
 		return null;
@@ -166,7 +156,6 @@ const BlockPatternSetup = ( {
 		onBlockPatternSelect || onBlockPatternSelectDefault;
 	return (
 		<>
-			{ contentResizeListener }
 			<div
 				className={ `block-editor-block-pattern-setup view-mode-${ viewMode }` }
 			>
@@ -175,7 +164,6 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
-					height={ contentHeight - 2 * 60 }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }

package/src/components/block-pattern-setup/style.scss

@@ -17,6 +17,8 @@
 			display: block;
 			width: 100%;
 			padding: $grid-unit-40;
+			padding-bottom: 0;
+			padding-top: 0;
 			column-count: 2;
 
 			@include break-huge() {
@@ -53,8 +55,9 @@
 		text-align: left;
 		margin: 0;
 		color: $gray-900;
+		position: absolute;
+		bottom: 0;
 		// Block UI appearance.
-		border-radius: $radius-block-ui $radius-block-ui 0 0;
 		background-color: $white;
 		display: flex;
 		flex-direction: row;
@@ -129,5 +132,4 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
 	width: 100%;
-	overflow-y: auto;
 }

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

@@ -172,7 +172,7 @@ function BlockPopoverInbetween( {
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in 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.

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

@@ -57,7 +57,7 @@ export default function BlockPopover( {
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
 			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
+			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -22,6 +22,7 @@ export function BlockModeToggle( {
 	isCodeEditingEnabled = true,
 } ) {
 	if (
+		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
 		! isCodeEditingEnabled
 	) {

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

@@ -125,7 +125,10 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: firstBlockClientId,
+		maximumLength: 25,
+	} );
 
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock

package/src/components/block-styles/preview.native.js

@@ -8,8 +8,9 @@ import {
 	Dimensions,
 	Animated,
 	Easing,
-	Image,
 } from 'react-native';
+import FastImage from 'react-native-fast-image';
+
 /**
  * WordPress dependencies
  */
@@ -90,7 +91,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 				<View style={ styles.imageWrapper }>
 					{ isActive &&
 						getOutline( [ styles.outline, innerOutlineStyle ] ) }
-					<Image
+					<FastImage
 						style={ [ styles.image, styles[ name ] ] }
 						source={ { uri: url } }
 					/>

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

@@ -98,8 +98,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	// Pattern transformation through the `Patterns` API.
 	const onPatternTransform = ( transformedBlocks ) =>
 		replaceBlocks( clientIds, transformedBlocks );
+
+	/**
+	 * The `isTemplate` check is a stopgap solution here.
+	 * Ideally, the Transforms API should handle this
+	 * by allowing to exclude blocks from wildcard transformations.
+	 */
 	const hasPossibleBlockTransformations =
-		!! possibleBlockTransformations.length && canRemove;
+		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
 	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 		return (

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

@@ -17,9 +17,10 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @param {Object}           props
  * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  *
  * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId, maximumLength } ) {
-	return useBlockDisplayTitle( clientId, maximumLength );
+export default function BlockTitle( { clientId, maximumLength, context } ) {
+	return useBlockDisplayTitle( { clientId, maximumLength, context } );
 }

package/src/components/block-title/use-block-display-title.js

@@ -21,14 +21,20 @@ import { store as blockEditorStore } from '../../store';
  * @example
  *
  * ```js
- * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
+ * useBlockDisplayTitle( { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', maximumLength: 17 } );
  * ```
  *
- * @param {string}           clientId      Client ID of block.
- * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
+ * @param {Object}           props
+ * @param {string}           props.clientId      Client ID of block.
+ * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle( clientId, maximumLength ) {
+export default function useBlockDisplayTitle( {
+	clientId,
+	maximumLength,
+	context,
+} ) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
@@ -63,7 +69,7 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	}
 	const blockType = getBlockType( name );
 	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes )
+		? getBlockLabel( blockType, attributes, context )
 		: null;
 
 	const label = reusableBlockTitle || blockLabel;

package/src/components/block-tools/block-contextual-toolbar.js

@@ -36,11 +36,13 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					getBlockType( getBlockName( selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
+					parentBlockType &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
 						true
-					) && selectedBlockClientIds.length <= 1,
+					) &&
+					selectedBlockClientIds.length <= 1,
 			};
 		},
 		[]

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

@@ -82,6 +82,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							label={ __( 'Border radius' ) }
+							hideLabelFromVision
 							className="components-border-radius-control__range-control"
 							value={ allValue ?? '' }
 							min={ MIN_BORDER_RADIUS_VALUE }

package/src/components/colors/with-colors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isString, kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce, upperFirst } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ function createColorHOC( colorTypes, withColorPalette ) {
 		( colorObject, colorType ) => {
 			return {
 				...colorObject,
-				...( isString( colorType )
+				...( typeof colorType === 'string'
 					? { [ colorType ]: kebabCase( colorType ) }
 					: colorType ),
 			};

package/src/components/colors-gradients/control.js

@@ -7,16 +7,13 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	TabPanel,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -30,6 +27,19 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
+const TAB_COLOR = {
+	name: 'color',
+	title: 'Solid color',
+	value: 'color',
+};
+const TAB_GRADIENT = {
+	name: 'gradient',
+	title: 'Gradient',
+	value: 'gradient',
+};
+
+const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
+
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -52,13 +62,57 @@ function ColorGradientControlInner( {
 	const canChooseAGradient =
 		onGradientChange &&
 		( ! isEmpty( gradients ) || ! disableCustomGradients );
-	const [ currentTab, setCurrentTab ] = useState(
-		gradientValue ? 'gradient' : !! canChooseAColor && 'color'
-	);
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
 		return null;
 	}
+
+	const tabPanels = {
+		[ TAB_COLOR.value ]: (
+			<ColorPalette
+				value={ colorValue }
+				onChange={
+					canChooseAGradient
+						? ( newColor ) => {
+								onColorChange( newColor );
+								onGradientChange();
+						  }
+						: onColorChange
+				}
+				{ ...{ colors, disableCustomColors } }
+				__experimentalHasMultipleOrigins={
+					__experimentalHasMultipleOrigins
+				}
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				clearable={ clearable }
+				enableAlpha={ enableAlpha }
+			/>
+		),
+		[ TAB_GRADIENT.value ]: (
+			<GradientPicker
+				value={ gradientValue }
+				onChange={
+					canChooseAColor
+						? ( newGradient ) => {
+								onGradientChange( newGradient );
+								onColorChange();
+						  }
+						: onGradientChange
+				}
+				{ ...{ gradients, disableCustomGradients } }
+				__experimentalHasMultipleOrigins={
+					__experimentalHasMultipleOrigins
+				}
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				clearable={ clearable }
+			/>
+		),
+	};
+
 	return (
 		<BaseControl
 			className={ classnames(
@@ -78,66 +132,24 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<ToggleGroupControl
-							value={ currentTab }
-							onChange={ setCurrentTab }
-							label={ __( 'Select color type' ) }
-							hideLabelFromVision
-							isBlock
-						>
-							<ToggleGroupControlOption
-								value="color"
-								label={ __( 'Solid' ) }
-							/>
-							<ToggleGroupControlOption
-								value="gradient"
-								label={ __( 'Gradient' ) }
-							/>
-						</ToggleGroupControl>
-					) }
-					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
-						<ColorPalette
-							value={ colorValue }
-							onChange={
-								canChooseAGradient
-									? ( newColor ) => {
-											onColorChange( newColor );
-											onGradientChange();
-									  }
-									: onColorChange
+						<TabPanel
+							className="block-editor-color-gradient-control__tabs"
+							tabs={ TABS_SETTINGS }
+							initialTabName={
+								gradientValue
+									? TAB_GRADIENT.value
+									: !! canChooseAColor && TAB_COLOR.value
 							}
-							{ ...{ colors, disableCustomColors } }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-							enableAlpha={ enableAlpha }
-						/>
-					) }
-					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
-						<GradientPicker
-							value={ gradientValue }
-							onChange={
-								canChooseAColor
-									? ( newGradient ) => {
-											onGradientChange( newGradient );
-											onColorChange();
-									  }
-									: onGradientChange
-							}
-							{ ...{ gradients, disableCustomGradients } }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							clearable={ clearable }
-						/>
+						>
+							{ ( tab ) => (
+								<div className="block-editor-color-gradient-control__tab-panel">
+									{ tabPanels[ tab.value ] }
+								</div>
+							) }
+						</TabPanel>
 					) }
+					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
+					{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }
 				</VStack>
 			</fieldset>
 		</BaseControl>

package/src/components/colors-gradients/style.scss

@@ -100,3 +100,7 @@
 .block-editor-panel-color-gradient-settings__dropdown {
 	width: 100%;
 }
+
+.block-editor-color-gradient-control__tab-panel {
+	padding-top: $grid-unit-10;
+}

package/src/components/colors-gradients/test/control.js

@@ -20,17 +20,6 @@ const getButtonWithAriaLabelStartPredicate =
 		);
 	};
 
-const getTabWithTestPredicate = ( text ) => ( element ) => {
-	return (
-		element.type === 'button' &&
-		element.props[ 'aria-label' ] &&
-		element.props[ 'aria-label' ] === text
-	);
-};
-
-const colorTabButtonPredicate = getTabWithTestPredicate( 'Solid' );
-const gradientTabButtonPredicate = getTabWithTestPredicate( 'Gradient' );
-
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
 		render(
@@ -63,8 +52,12 @@ describe( 'ColorPaletteControl', () => {
 		);
 
 		// Is showing the two tab buttons.
-		expect( screen.queryByLabelText( 'Solid' ) ).toBeInTheDocument();
-		expect( screen.queryByLabelText( 'Gradient' ) ).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'tab', { name: 'Solid color' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'tab', { name: 'Gradient' } )
+		).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
 		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
@@ -92,12 +85,12 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		// Is not showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			0
-		);
 		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'tab', { name: 'Solid color' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tab', { name: 'Gradient' } )
+		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
 		expect(
@@ -139,12 +132,12 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		// Is not showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			0
-		);
 		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'tab', { name: 'Solid color' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tab', { name: 'Gradient' } )
+		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Gradients.
 		expect(

package/src/components/date-format-picker/index.js

@@ -90,6 +90,7 @@ function NonDefaultControls( { format, onChange } ) {
 		_x( 'M j, Y', 'medium date format' ),
 		_x( 'M j, Y g:i A', 'medium date format with time' ),
 		_x( 'F j, Y', 'long date format' ),
+		_x( 'M j', 'short date format without the year' ),
 	] );
 
 	const suggestedOptions = suggestedFormats.map(

package/src/components/iframe/index.js

@@ -65,12 +65,31 @@ function useStylesCompatibility() {
 				return;
 			}
 
-			const isMatch = Array.from( cssRules ).find(
-				( { selectorText } ) =>
-					selectorText &&
-					( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
-						selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-			);
+			function matchFromRules( _cssRules ) {
+				return Array.from( _cssRules ).find(
+					( {
+						selectorText,
+						conditionText,
+						cssRules: __cssRules,
+					} ) => {
+						// If the rule is conditional then it will not have selector text.
+						// Recurse into child CSS ruleset to determine selector eligibility.
+						if ( conditionText ) {
+							return matchFromRules( __cssRules );
+						}
+
+						return (
+							selectorText &&
+							( selectorText.includes(
+								`.${ BODY_CLASS_NAME }`
+							) ||
+								selectorText.includes( `.${ BLOCK_PREFIX }` ) )
+						);
+					}
+				);
+			}
+
+			const isMatch = matchFromRules( cssRules );
 
 			if (
 				isMatch &&

package/src/components/inserter/style.scss

@@ -342,7 +342,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height;
+		top: $header-height + $grid-unit-20;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

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

@@ -235,6 +235,7 @@ function LinkControl( {
 			internalTextValue !== value?.title
 		) {
 			onChange( {
+				...value,
 				url: currentInputValue,
 				title: internalTextValue,
 			} );

package/src/components/link-control/test/index.js

@@ -2417,10 +2417,12 @@ describe( 'Controlling link title text', () => {
 			Simulate.keyDown( textInput, { keyCode: ENTER } );
 		} );
 
-		expect( mockOnChange ).toHaveBeenCalledWith( {
-			title: textValue,
-			url: selectedLink.url,
-		} );
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: textValue,
+				url: selectedLink.url,
+			} )
+		);
 
 		// The text input should not be showing as the form is submitted.
 		expect(