@wordpress/block-editor 12.11.1 → 12.12.2-next.f8d8eceb.0

package/src/components/font-sizes/with-font-sizes.js

@@ -8,7 +8,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import { getFontSize, getFontSizeClass } from './utils';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const DEFAULT_FONT_SIZES = [];
 
@@ -52,13 +52,11 @@ export default ( ...fontSizeNames ) => {
 		compose( [
 			createHigherOrderComponent(
 				( WrappedComponent ) => ( props ) => {
-					const fontSizes =
-						useSetting( 'typography.fontSizes' ) ||
-						DEFAULT_FONT_SIZES;
+					const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 					return (
 						<WrappedComponent
 							{ ...props }
-							fontSizes={ fontSizes }
+							fontSizes={ fontSizes || DEFAULT_FONT_SIZES }
 						/>
 					);
 				},

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

@@ -54,13 +54,15 @@ function useMultiOriginColorPresets(
 }
 
 export function useHasFiltersPanel( settings ) {
-	const hasDuotone = useHasDuotoneControl( settings );
-
-	return hasDuotone;
+	return useHasDuotoneControl( settings );
 }
 
 function useHasDuotoneControl( settings ) {
-	return settings.color.customDuotone || settings.color.defaultDuotone;
+	return (
+		settings.color.customDuotone ||
+		settings.color.defaultDuotone ||
+		settings.color.duotone.length > 0
+	);
 }
 
 function FiltersToolsPanel( {
@@ -148,11 +150,6 @@ export default function FiltersPanel( {
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
-	const disableCustomColors = ! settings?.color?.custom;
-	const disableCustomDuotone =
-		! settings?.color?.customDuotone ||
-		( colorPalette?.length === 0 && disableCustomColors );
-
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -210,12 +207,9 @@ export default function FiltersPanel( {
 									<DuotonePicker
 										colorPalette={ colorPalette }
 										duotonePalette={ duotonePalette }
-										disableCustomColors={
-											disableCustomColors
-										}
-										disableCustomDuotone={
-											disableCustomDuotone
-										}
+										// TODO: Re-enable both when custom colors are supported for block-level styles.
+										disableCustomColors
+										disableCustomDuotone
 										value={ duotone }
 										onChange={ setDuotone }
 									/>

package/src/components/global-styles/image-settings-panel.js

@@ -54,13 +54,13 @@ export default function ImageSettingsPanel( {
 					// "RESET" button ONLY when the user has explicitly set a value in the
 					// Global Styles.
 					hasValue={ () => !! value?.lightbox }
-					label={ __( 'Expand on Click' ) }
+					label={ __( 'Expand on click' ) }
 					onDeselect={ resetLightbox }
 					isShownByDefault={ true }
 					panelId={ panelId }
 				>
 					<ToggleControl
-						label={ __( 'Expand on Click' ) }
+						label={ __( 'Expand on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
 					/>

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

@@ -67,7 +67,7 @@ function useHasFontFamilyControl( settings ) {
 		.concat( fontFamiliesPerOrigin?.theme ?? [] )
 		.concat( fontFamiliesPerOrigin?.default ?? [] )
 		.sort( ( a, b ) =>
-			( a?.name || a?.slug ).localeCompare( b?.name || a?.slug )
+			( a?.name || a?.slug )?.localeCompare( b?.name || a?.slug )
 		);
 	return !! fontFamilies?.length;
 }

package/src/components/gradients/use-gradient.js

@@ -8,7 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { useBlockEditContext } from '../block-edit';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import { store as blockEditorStore } from '../../store';
 
 export function __experimentalGetGradientClass( gradientSlug ) {
@@ -60,9 +60,15 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const userGradientPalette = useSetting( 'color.gradients.custom' );
-	const themeGradientPalette = useSetting( 'color.gradients.theme' );
-	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const [
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+	] = useSettings(
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default'
+	);
 	const allGradients = useMemo(
 		() => [
 			...( userGradientPalette || [] ),

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

@@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const RANGE_CONTROL_CUSTOM_SETTINGS = {
 	px: { max: 1000, step: 1 },
@@ -26,6 +26,28 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
 	vh: { max: 100, step: 1 },
 	em: { max: 50, step: 0.1 },
 	rem: { max: 50, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
 };
 
 /**
@@ -47,8 +69,9 @@ export default function HeightControl( {
 } ) {
 	const customRangeValue = parseFloat( value );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
+		availableUnits: availableUnits || [
 			'%',
 			'px',
 			'em',
@@ -86,10 +109,36 @@ export default function HeightControl( {
 			// Convert to pixel value assuming a root size of 16px.
 			onChange( Math.round( currentValue * 16 ) + newUnit );
 		} else if (
-			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			[
+				'%',
+				'vw',
+				'svw',
+				'lvw',
+				'dvw',
+				'vh',
+				'svh',
+				'lvh',
+				'dvh',
+				'vi',
+				'svi',
+				'lvi',
+				'dvi',
+				'vb',
+				'svb',
+				'lvb',
+				'dvb',
+				'vmin',
+				'svmin',
+				'lvmin',
+				'dvmin',
+				'vmax',
+				'svmax',
+				'lvmax',
+				'dvmax',
+			].includes( newUnit ) &&
 			currentValue > 100
 		) {
-			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			// When converting to `%` or viewport-relative units, cap the new value at 100.
 			onChange( 100 + newUnit );
 		}
 	};

package/src/components/iframe/index.js

@@ -38,7 +38,14 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	if ( event instanceof frame.ownerDocument.defaultView.MouseEvent ) {
+	// Check if the event is a MouseEvent generated within the iframe.
+	// If so, adjust the coordinates to be relative to the position of
+	// the iframe. This ensures that components such as Draggable
+	// receive coordinates relative to the window, instead of relative
+	// to the iframe. Without this, the Draggable event handler would
+	// result in components "jumping" position as soon as the user
+	// drags over the iframe.
+	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
 		init.clientX += rect.left;
 		init.clientY += rect.top;

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -74,10 +74,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
-							{
-								title: __( '16:10' ),
-								aspect: 16 / 10,
-							},
 							{
 								title: __( '16:9' ),
 								aspect: 16 / 9,
@@ -101,10 +97,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
-							{
-								title: __( '10:16' ),
-								aspect: 10 / 16,
-							},
 							{
 								title: __( '9:16' ),
 								aspect: 9 / 16,

package/src/components/index.js

@@ -165,7 +165,7 @@ export { useBlockEditingMode } from './block-editing-mode';
  */
 
 export { default as BlockEditorProvider } from './provider';
-export { default as useSetting } from './use-setting';
+export { useSettings, useSetting } from './use-settings';
 export { useBlockCommands } from './use-block-commands';
 
 /*

package/src/components/index.native.js

@@ -59,7 +59,7 @@ export { default as BlockCaption } from './block-caption';
 export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
-export { default as useSetting } from './use-setting';
+export { useSettings, default as useSetting } from './use-settings';
 export {
 	RecursionProvider as __experimentalRecursionProvider,
 	useHasRecursion as __experimentalUseHasRecursion,
@@ -67,6 +67,7 @@ export {
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as UnsupportedBlockDetails } from './unsupported-block-details';
 
 export {
 	BottomSheetSettings,

package/src/components/inner-blocks/index.js

@@ -29,7 +29,7 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const EMPTY_OBJECT = {};
 
@@ -98,7 +98,7 @@ function UncontrolledInnerBlocks( props ) {
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
 
-	const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT;
+	const [ defaultLayout ] = useSettings( 'layout' );
 
 	const usedLayout = layout || defaultLayoutBlockSupport;
 

package/src/components/inserter/style.scss

@@ -292,6 +292,11 @@ $block-inserter-tabs-height: 44px;
 	div[role="listitem"]:last-child {
 		margin-top: auto;
 	}
+
+	.block-editor-inserter__patterns-category {
+		// Account for the icon on the right so that it's visually balanced.
+		padding-right: $grid-unit-05;
+	}
 }
 
 .block-editor-inserter__patterns-category-dialog {
@@ -533,7 +538,10 @@ $block-inserter-tabs-height: 44px;
 		margin-top: auto;
 	}
 
-	&__media-category {
+	.block-editor-inserter__media-tabs__media-category {
+		// Account for the icon on the right so that it's visually balanced.
+		padding-right: $grid-unit-05;
+
 		&.is-selected {
 			color: var(--wp-admin-theme-color);
 			position: relative;

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

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../../components/use-setting';
+import { useSettings } from '../../components/use-settings';
 
 /**
  * Control for letter-spacing.
@@ -28,8 +28,9 @@ export default function LetterSpacingControl( {
 	__unstableInputWidth = '60px',
 	...otherProps
 } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
 	return (

package/src/components/link-control/README.md

@@ -4,6 +4,26 @@ Renders a link control. A link control is a controlled input which maintains a v
 
 It is designed to provide a standardized UI for the creation of a link throughout the Editor, see History section at bottom for further background.
 
+## Best Practices
+
+### Ensuring unique instances
+
+It is possible that a given editor may render multiple instances of the `<LinkControl>` component. As a result, it is important to ensure each instance is unique across the editor to avoid state "leaking" between components.
+
+Why would this happen?
+
+React's reconciliation algorithm means that if you return the same element from a component, it keeps the nodes around as an optimization, even if the props change. This means that if you render two (or more) `<LinkControl>`s, it is possible that the `value` from one will appear in the other as you move between them.
+
+As a result it is recommended that consumers provide a `key` prop to each instance of `<LinkControl>`:
+
+```jsx
+<LinkControl key="some-unique-key" { ...props } />
+```
+
+This will cause React to return the same component/element type but force remount a new instance, thus avoiding the issues described above.
+
+For more information see: https://github.com/WordPress/gutenberg/pull/34742.
+
 ## Relationship to `<URLInput>`
 
 As of Gutenberg 7.4, `<LinkControl>` became the default link creation interface within the Block Editor, replacing previous disparate uses of `<URLInput>` and standardizing the UI.
@@ -59,6 +79,29 @@ The resulting default properties of `value` include:
 -   `title` (`string`, optional): Link title.
 -   `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop.
 
+Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
+
+```jsx
+const memoizedValue = useMemo(
+	() => ( {
+		url: attributes.url,
+		type: attributes.type,
+		opensInNewTab: attributes.target === '_blank',
+		title: attributes.text,
+	} ),
+	[
+		attributes.url,
+		attributes.type,
+		attributes.target,
+		attributes.text,
+	]
+);
+
+<LinkControl
+	value={ memoizedValue }
+>
+```
+
 ### settings
 
 -   Type: `Array`

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

@@ -11,6 +11,7 @@ import {
 	Button,
 	ExternalLink,
 	__experimentalText as Text,
+	Tooltip,
 } from '@wordpress/components';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
@@ -87,12 +88,17 @@ export default function LinkPreview( {
 					<span className="block-editor-link-control__search-item-details">
 						{ ! isEmptyURL ? (
 							<>
-								<ExternalLink
-									className="block-editor-link-control__search-item-title"
-									href={ value.url }
+								<Tooltip
+									text={ value.url }
+									placement="bottom-start"
 								>
-									{ displayTitle }
-								</ExternalLink>
+									<ExternalLink
+										className="block-editor-link-control__search-item-title"
+										href={ value.url }
+									>
+										{ displayTitle }
+									</ExternalLink>
+								</Tooltip>
 
 								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">

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

@@ -11,6 +11,8 @@ import {
 	postList,
 	category,
 	file,
+	home,
+	verse,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
@@ -31,6 +33,14 @@ function SearchItemIcon( { isURL, suggestion } ) {
 		icon = globe;
 	} else if ( suggestion.type in ICONS_MAP ) {
 		icon = ICONS_MAP[ suggestion.type ];
+		if ( suggestion.type === 'page' ) {
+			if ( suggestion.isFrontPage ) {
+				icon = home;
+			}
+			if ( suggestion.isBlogHome ) {
+				icon = verse;
+			}
+		}
 	}
 
 	if ( icon ) {
@@ -135,6 +145,10 @@ function getVisualTypeName( suggestion ) {
 		return 'front page';
 	}
 
+	if ( suggestion.isBlogHome ) {
+		return 'blog home';
+	}
+
 	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
 	return suggestion.type === 'post_tag' ? 'tag' : suggestion.type;
 }

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

@@ -123,6 +123,7 @@ export default function LinkControlSearchResults( {
 								searchTerm={ currentInputValue }
 								shouldShowType={ shouldShowSuggestionsTypes }
 								isFrontPage={ suggestion?.isFrontPage }
+								isBlogHome={ suggestion?.isBlogHome }
 							/>
 						);
 					} ) }

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

@@ -297,9 +297,9 @@ $preview-image-height: 140px;
 
 		img {
 			display: block; // remove unwanted space below image
-			max-width: 100%;
-			height: $preview-image-height; // limit height
-			max-height: $preview-image-height; // limit height
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
 		}
 	}
 }

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

@@ -2056,6 +2056,25 @@ describe( 'Addition Settings UI', () => {
 			} )
 		);
 	} );
+
+	it( 'should show tooltip with full URL alongside filtered display', async () => {
+		const user = userEvent.setup();
+		const url =
+			'http://www.wordpress.org/wp-content/uploads/a-document.pdf';
+		render( <LinkControl value={ { url } } /> );
+
+		const link = screen.getByRole( 'link' );
+
+		expect( link ).toHaveTextContent( 'a-document.pdf' );
+
+		await user.hover( link );
+
+		expect( await screen.findByRole( 'tooltip' ) ).toHaveTextContent( url );
+
+		await user.unhover( link );
+
+		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+	} );
 } );
 
 describe( 'Post types', () => {

package/src/components/link-control/use-internal-value.js

@@ -1,21 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal';
 
 export default function useInternalValue( value ) {
 	const [ internalValue, setInternalValue ] = useState( value || {} );
+	const [ previousValue, setPreviousValue ] = useState( value );
 
 	// If the value prop changes, update the internal state.
-	useEffect( () => {
-		setInternalValue( ( prevValue ) => {
-			if ( value && value !== prevValue ) {
-				return value;
-			}
-
-			return prevValue;
-		} );
-	}, [ value ] );
+	// See:
+	// - https://github.com/WordPress/gutenberg/pull/51387#issuecomment-1722927384.
+	// - https://react.dev/reference/react/useState#storing-information-from-previous-renders.
+	if ( ! fastDeepEqual( value, previousValue ) ) {
+		setPreviousValue( value );
+		setInternalValue( value );
+	}
 
 	const setInternalURLInputValue = ( nextValue ) => {
 		setInternalValue( {

package/src/components/link-control/use-search-handler.js

@@ -52,7 +52,8 @@ const handleEntitySearch = async (
 	suggestionsQuery,
 	fetchSearchSuggestions,
 	withCreateSuggestion,
-	pageOnFront
+	pageOnFront,
+	pageForPosts
 ) => {
 	const { isInitialSuggestions } = suggestionsQuery;
 
@@ -63,6 +64,9 @@ const handleEntitySearch = async (
 		if ( Number( result.id ) === pageOnFront ) {
 			result.isFrontPage = true;
 			return result;
+		} else if ( Number( result.id ) === pageForPosts ) {
+			result.isBlogHome = true;
+			return result;
 		}
 
 		return result;
@@ -102,18 +106,21 @@ const handleEntitySearch = async (
 export default function useSearchHandler(
 	suggestionsQuery,
 	allowDirectEntry,
-	withCreateSuggestion,
-	withURLSuggestion
+	withCreateSuggestion
 ) {
-	const { fetchSearchSuggestions, pageOnFront } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-
-		return {
-			pageOnFront: getSettings().pageOnFront,
-			fetchSearchSuggestions:
-				getSettings().__experimentalFetchLinkSuggestions,
-		};
-	}, [] );
+	const { fetchSearchSuggestions, pageOnFront, pageForPosts } = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+
+			return {
+				pageOnFront: getSettings().pageOnFront,
+				pageForPosts: getSettings().pageForPosts,
+				fetchSearchSuggestions:
+					getSettings().__experimentalFetchLinkSuggestions,
+			};
+		},
+		[]
+	);
 
 	const directEntryHandler = allowDirectEntry
 		? handleDirectEntry
@@ -128,17 +135,17 @@ export default function useSearchHandler(
 						{ ...suggestionsQuery, isInitialSuggestions },
 						fetchSearchSuggestions,
 						withCreateSuggestion,
-						withURLSuggestion,
-						pageOnFront
+						pageOnFront,
+						pageForPosts
 				  );
 		},
 		[
 			directEntryHandler,
 			fetchSearchSuggestions,
 			pageOnFront,
+			pageForPosts,
 			suggestionsQuery,
 			withCreateSuggestion,
-			withURLSuggestion,
 		]
 	);
 }

package/src/components/list-view/index.js

@@ -6,7 +6,10 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import {
+	__experimentalTreeGrid as TreeGrid,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {
@@ -257,12 +260,20 @@ function ListViewComponent(
 		return null;
 	}
 
+	const describedById =
+		description && `block-editor-list-view-description-${ instanceId }`;
+
 	return (
 		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
 			/>
+			{ description && (
+				<VisuallyHidden id={ describedById }>
+					{ description }
+				</VisuallyHidden>
+			) }
 			<TreeGrid
 				id={ id }
 				className="block-editor-list-view-tree"
@@ -272,8 +283,7 @@ function ListViewComponent(
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
 				applicationAriaLabel={ __( 'Block navigation structure' ) }
-				// eslint-disable-next-line jsx-a11y/aria-props
-				aria-description={ description }
+				aria-describedby={ describedById }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch