@wordpress/block-editor 15.3.1-next.836ecdcae.0 → 15.3.1-next.a730c9c8c.0

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

@@ -52,10 +52,8 @@
 			color: var(--wp-block-synced-color);
 		}
 
-		.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-			&:disabled .block-editor-block-icon.has-colors {
-				color: var(--wp-block-synced-color);
-			}
+		.block-editor-block-switcher__no-switcher-icon[aria-disabled="true"] .block-editor-block-icon {
+			color: var(--wp-block-synced-color);
 		}
 	}
 
@@ -175,7 +173,7 @@
 
 .show-icon-labels {
 	.block-editor-block-toolbar {
-		.components-button.has-icon {
+		.components-button.has-icon:where(:not(.has-text)) {
 			width: auto;
 
 			// Hide the button icons when labels are set to display...

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

@@ -7,7 +7,12 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useRef, createContext, useContext } from '@wordpress/element';
+import {
+	useRef,
+	createContext,
+	useContext,
+	useCallback,
+} from '@wordpress/element';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { useReducedMotion } from '@wordpress/compose';
 
@@ -113,6 +118,18 @@ function InbetweenInsertionPointPopover( {
 		}
 	}
 
+	// Reset the insertion point reference when the Inserter unmounts,
+	// avoids stale references when `onSelectOrClose` is not called.
+	// See: https://github.com/WordPress/gutenberg/issues/65598#issuecomment-3249229264.
+	const maybeResetOpenRef = useCallback(
+		( node ) => {
+			if ( ! node && openRef.current ) {
+				openRef.current = false;
+			}
+		},
+		[ openRef ]
+	);
+
 	const lineVariants = {
 		// Initial position starts from the center and invisible.
 		start: {
@@ -203,6 +220,7 @@ function InbetweenInsertionPointPopover( {
 						) }
 					>
 						<Inserter
+							ref={ maybeResetOpenRef }
 							position="bottom center"
 							clientId={ nextClientId }
 							rootClientId={ rootClientId }

package/src/components/block-variation-transforms/index.js

@@ -139,32 +139,41 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly } = useSelect(
-		( select ) => {
-			const { getActiveBlockVariation, getBlockVariations } =
-				select( blocksStore );
-
-			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
-				select( blockEditorStore );
-
-			const name = blockClientId && getBlockName( blockClientId );
-
-			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
-			const isContentBlock = hasContentRoleAttribute( name );
-
-			return {
-				activeBlockVariation: getActiveBlockVariation(
-					name,
-					getBlockAttributes( blockClientId )
-				),
-				variations: name && getBlockVariations( name, 'transform' ),
-				isContentOnly:
-					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
-					! isContentBlock,
-			};
-		},
-		[ blockClientId ]
-	);
+	const { activeBlockVariation, variations, isContentOnly, isSection } =
+		useSelect(
+			( select ) => {
+				const { getActiveBlockVariation, getBlockVariations } =
+					select( blocksStore );
+
+				const {
+					getBlockName,
+					getBlockAttributes,
+					getBlockEditingMode,
+					isSectionBlock,
+				} = unlock( select( blockEditorStore ) );
+
+				const name = blockClientId && getBlockName( blockClientId );
+
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContentBlock = hasContentRoleAttribute( name );
+
+				return {
+					activeBlockVariation: getActiveBlockVariation(
+						name,
+						getBlockAttributes( blockClientId ),
+						'transform'
+					),
+					variations: name && getBlockVariations( name, 'transform' ),
+					isContentOnly:
+						getBlockEditingMode( blockClientId ) ===
+							'contentOnly' && ! isContentBlock,
+					isSection: isSectionBlock( blockClientId ),
+				};
+			},
+			[ blockClientId ]
+		);
 
 	const selectedValue = activeBlockVariation?.name;
 
@@ -189,7 +198,10 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	if ( ! variations?.length || isContentOnly ) {
+	const hideVariationsForSections =
+		window?.__experimentalContentOnlyPatternInsertion && isSection;
+
+	if ( ! variations?.length || isContentOnly || hideVariationsForSections ) {
 		return null;
 	}
 

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

@@ -7,6 +7,8 @@ import {
 	hasMixedValues,
 	hasDefinedValues,
 	mode,
+	getPresetValueFromCustomValue,
+	getPresetValueFromControlValue,
 } from '../utils';
 
 const defaultUnitSelections = {
@@ -180,3 +182,72 @@ describe( 'mode', () => {
 		expect( mode( values ) ).toBe( 'a' );
 	} );
 } );
+
+describe( 'getPresetValueFromCustomValue', () => {
+	const presets = [
+		{ name: 'None', slug: '0', size: 0 },
+		{ name: 'Small', slug: 'sm', size: '4px' },
+		{ name: 'Medium', slug: 'md', size: 'clamp(2px, 1vw, 8px)' },
+	];
+
+	it( 'should return "0" if value is "0"', () => {
+		expect( getPresetValueFromCustomValue( '0', presets ) ).toBe( '0' );
+	} );
+
+	it( 'should return preset reference if value matches a preset', () => {
+		expect( getPresetValueFromCustomValue( '4px', presets ) ).toBe(
+			'var:preset|border-radius|sm'
+		);
+		expect(
+			getPresetValueFromCustomValue( 'clamp(2px, 1vw, 8px)', presets )
+		).toBe( 'var:preset|border-radius|md' );
+	} );
+
+	it( 'should return value as-is if no matching preset', () => {
+		expect( getPresetValueFromCustomValue( '7px', presets ) ).toBe( '7px' );
+	} );
+
+	it( 'should return value as-is if already a preset reference', () => {
+		expect(
+			getPresetValueFromCustomValue(
+				'var:preset|border-radius|md',
+				presets
+			)
+		).toBe( 'var:preset|border-radius|md' );
+	} );
+
+	it( 'should return undefined if value is undefined', () => {
+		expect(
+			getPresetValueFromCustomValue( undefined, presets )
+		).toBeUndefined();
+	} );
+} );
+
+describe( 'getPresetValueFromControlValue', () => {
+	const presets = [
+		{ name: 'None', slug: '0', size: 0 },
+		{ name: 'Small', slug: 'sm', size: '4px' },
+		{ name: 'Medium', slug: 'md', size: 'clamp(2px, 1vw, 8px)' },
+	];
+
+	it( 'should return "0" if control value is 0 and not selectList', () => {
+		expect( getPresetValueFromControlValue( 0, 'slider', presets ) ).toBe(
+			'0'
+		);
+	} );
+
+	it( 'should return undefined if control value is 0 and controlType is selectList', () => {
+		expect(
+			getPresetValueFromControlValue( 0, 'selectList', presets )
+		).toBeUndefined();
+	} );
+
+	it( 'should return preset reference for other values', () => {
+		expect( getPresetValueFromControlValue( 1, 'slider', presets ) ).toBe(
+			'var:preset|border-radius|sm'
+		);
+		expect( getPresetValueFromControlValue( 2, 'slider', presets ) ).toBe(
+			'var:preset|border-radius|md'
+		);
+	} );
+} );

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

@@ -234,6 +234,7 @@ export function getPresetValueFromControlValue(
 	} else if ( size === 0 ) {
 		return '0';
 	}
+
 	return `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;
 }
 

package/src/components/global-styles/border-panel.js

@@ -147,15 +147,16 @@ export default function BorderPanel( {
 	const showBorderRadius = useHasBorderRadiusControl( settings );
 	const borderRadiusValues = useMemo( () => {
 		if ( typeof border?.radius !== 'object' ) {
-			return decodeValue( border?.radius );
+			return border?.radius;
 		}
+
 		return {
-			topLeft: decodeValue( border?.radius?.topLeft ),
-			topRight: decodeValue( border?.radius?.topRight ),
-			bottomLeft: decodeValue( border?.radius?.bottomLeft ),
-			bottomRight: decodeValue( border?.radius?.bottomRight ),
+			topLeft: border?.radius?.topLeft,
+			topRight: border?.radius?.topRight,
+			bottomLeft: border?.radius?.bottomLeft,
+			bottomRight: border?.radius?.bottomRight,
 		};
-	}, [ border?.radius, decodeValue ] );
+	}, [ border?.radius ] );
 	const setBorderRadius = ( newBorderRadius ) =>
 		setBorder( { ...border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {

package/src/components/link-control/search-item.js

@@ -19,12 +19,27 @@ import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
 import { pipe } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
 
-const ICONS_MAP = {
-	post: postList,
-	page,
-	post_tag: tag,
-	category,
-	attachment: file,
+const TYPES = {
+	post: {
+		icon: postList,
+		label: __( 'Post' ),
+	},
+	page: {
+		icon: page,
+		label: __( 'Page' ),
+	},
+	post_tag: {
+		icon: tag,
+		label: __( 'Tag' ),
+	},
+	category: {
+		icon: category,
+		label: __( 'Category' ),
+	},
+	attachment: {
+		icon: file,
+		label: __( 'Attachment' ),
+	},
 };
 
 function SearchItemIcon( { isURL, suggestion } ) {
@@ -32,8 +47,8 @@ function SearchItemIcon( { isURL, suggestion } ) {
 
 	if ( isURL ) {
 		icon = globe;
-	} else if ( suggestion.type in ICONS_MAP ) {
-		icon = ICONS_MAP[ suggestion.type ];
+	} else if ( suggestion.type in TYPES ) {
+		icon = TYPES[ suggestion.type ].icon;
 		if ( suggestion.type === 'page' ) {
 			if ( suggestion.isFrontPage ) {
 				icon = home;
@@ -149,15 +164,19 @@ export const LinkControlSearchItem = ( {
 
 function getVisualTypeName( suggestion ) {
 	if ( suggestion.isFrontPage ) {
-		return 'front page';
+		return __( 'Front page' );
 	}
 
 	if ( suggestion.isBlogHome ) {
-		return 'blog home';
+		return __( 'Blog home' );
+	}
+
+	// Provide translated labels for built-in post types. Ideally, the API would return the localised CPT or taxonomy label.
+	if ( suggestion.type in TYPES ) {
+		return TYPES[ suggestion.type ].label;
 	}
 
-	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
-	return suggestion.type === 'post_tag' ? 'tag' : suggestion.type;
+	return suggestion.type;
 }
 
 export default LinkControlSearchItem;

package/src/components/link-control/style.scss

@@ -144,7 +144,6 @@ $block-editor-link-control-number-of-actions: 1;
 
 	.components-menu-item__shortcut {
 		color: $gray-700;
-		text-transform: capitalize;
 		white-space: nowrap; // tags shouldn't go over two lines.
 	}
 

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

@@ -28,6 +28,18 @@ import {
 
 const mockFetchSearchSuggestions = jest.fn();
 
+function getExpectedVisualTypeName( type ) {
+	const builtInLabels = {
+		post: 'Post',
+		page: 'Page',
+		post_tag: 'Tag',
+		category: 'Category',
+		attachment: 'Attachment',
+	};
+
+	return builtInLabels[ type ] || type;
+}
+
 /**
  * The call to the real method `fetchRichUrlData` is wrapped in a promise in order to make it cancellable.
  * Therefore if we pass any value as the mock of `fetchRichUrlData` then ALL of the tests will require
@@ -510,7 +522,7 @@ describe( 'Searching for a link', () => {
 				firstSuggestion.title
 			);
 			expect( searchResultElements[ 0 ] ).toHaveTextContent(
-				firstSuggestion.type
+				getExpectedVisualTypeName( firstSuggestion.type )
 			);
 
 			// The fallback URL suggestion should not be shown when input is not URL-like.
@@ -2078,7 +2090,7 @@ describe( 'Post types', () => {
 
 		searchResultElements.forEach( ( resultItem, index ) => {
 			expect( resultItem ).toHaveTextContent(
-				fauxEntitySuggestions[ index ].type
+				getExpectedVisualTypeName( fauxEntitySuggestions[ index ].type )
 			);
 		} );
 	} );

package/src/components/url-popover/image-url-input-ui.js

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import {
+	useRef,
+	useEffect,
+	useState,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import {
 	ToolbarButton,
@@ -12,6 +17,7 @@ import {
 	ToggleControl,
 	TextControl,
 	__experimentalVStack as VStack,
+	ExternalLink,
 } from '@wordpress/components';
 import {
 	Icon,
@@ -230,9 +236,19 @@ const ImageURLInputUI = ( {
 			<TextControl
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
-				label={ __( 'Link rel' ) }
+				label={ __( 'Link relation' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
+				help={ createInterpolateElement(
+					__(
+						'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+					),
+					{
+						a: (
+							<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+						),
+					}
+				) }
 			/>
 			<TextControl
 				__next40pxDefaultSize

package/src/components/writing-flow/use-clipboard-handler.js

@@ -137,6 +137,7 @@ export default function useClipboardHandler() {
 				const {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,
+					mediaUpload,
 				} = getSettings();
 				const isInternal =
 					event.clipboardData.getData( 'rich-text' ) === 'true';
@@ -148,6 +149,11 @@ export default function useClipboardHandler() {
 				let blocks = [];
 
 				if ( files.length ) {
+					if ( ! mediaUpload ) {
+						event.preventDefault();
+						return;
+					}
+
 					const fromTransforms = getBlockTransforms( 'from' );
 					blocks = files
 						.reduce( ( accumulator, file ) => {

package/src/store/private-selectors.js

@@ -18,14 +18,15 @@ import {
 	getClientIdsWithDescendants,
 	isNavigationMode,
 	getBlockRootClientId,
+	getBlockAttributes,
 } from './selectors';
 import {
 	checkAllowListRecursive,
 	getAllPatternsDependants,
 	getInsertBlockTypeDependants,
 	getGrammar,
+	mapUserPattern,
 } from './utils';
-import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
 import {
@@ -144,8 +145,6 @@ export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
 		state.derivedBlockEditingModes,
 		state.derivedNavModeBlockEditingModes,
 		state.blockEditingModes,
-		state.settings.templateLock,
-		state.blockListSettings,
 		select( STORE_NAME ).__unstableGetEditorMode( state ),
 	] )
 );
@@ -350,26 +349,6 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	)
 );
 
-function mapUserPattern(
-	userPattern,
-	__experimentalUserPatternCategories = []
-) {
-	return {
-		name: `core/block/${ userPattern.id }`,
-		id: userPattern.id,
-		type: INSERTER_PATTERN_TYPES.user,
-		title: userPattern.title.raw,
-		categories: userPattern.wp_pattern_category?.map( ( catId ) => {
-			const category = __experimentalUserPatternCategories.find(
-				( { id } ) => id === catId
-			);
-			return category ? category.slug : catId;
-		} ),
-		content: userPattern.content.raw,
-		syncStatus: userPattern.wp_pattern_sync_status,
-	};
-}
-
 export const getPatternBySlug = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state, patternName ) => {
@@ -539,9 +518,18 @@ export function isSectionBlock( state, clientId ) {
 		return true;
 	}
 
+	const attributes = getBlockAttributes( state, clientId );
+	const isTemplatePart = blockName === 'core/template-part';
+	if (
+		( attributes?.metadata?.patternName || isTemplatePart ) &&
+		!! window?.__experimentalContentOnlyPatternInsertion
+	) {
+		return true;
+	}
+
 	// Template parts become sections in navigation mode.
 	const _isNavigationMode = isNavigationMode( state );
-	if ( _isNavigationMode && blockName === 'core/template-part' ) {
+	if ( _isNavigationMode && isTemplatePart ) {
 		return true;
 	}