@wordpress/block-editor 12.12.0 → 12.13.0

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 },
@@ -69,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',

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,

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/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/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/resizable-box-popover/index.js

@@ -17,7 +17,7 @@ export default function ResizableBoxPopover( {
 		<BlockPopover
 			clientId={ clientId }
 			__unstableCoverTarget
-			__unstablePopoverSlot="block-toolbar"
+			__unstablePopoverSlot="__unstable-block-tools-after"
 			shift={ false }
 			{ ...props }
 		>

package/src/components/rich-text/index.js

@@ -141,7 +141,7 @@ export function RichTextWrapper(
 		};
 	};
 	// This selector must run on every render so the right selection state is
-	// retreived from the store on merge.
+	// retrieved from the store on merge.
 	// To do: fix this somehow.
 	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -6,13 +6,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../../use-setting';
+import { useSettings } from '../../use-settings';
 
 export default function useSpacingSizes() {
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
+	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
+
+	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
+	if ( settingsSizes ) {
+		spacingSizes.push( ...settingsSizes );
+	}
 
 	if ( spacingSizes.length > 8 ) {
 		spacingSizes.unshift( {

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

@@ -20,7 +20,7 @@ import { settings } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import useSetting from '../../use-setting';
+import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';
 import {
 	ALL_SIDES,
@@ -102,8 +102,9 @@ export default function SpacingInputControl( {
 		setShowCustomValueControl( true );
 	}
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
 	let currentValue = null;

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

@@ -9,17 +9,12 @@ import {
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		units: unitsProp,
 	} );
 

package/src/components/use-block-commands/index.js

@@ -22,6 +22,7 @@ import {
 /**
  * Internal dependencies
  */
+import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export const useTransformCommands = () => {
@@ -100,7 +101,7 @@ export const useTransformCommands = () => {
 			name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
 			// translators: %s: block title/name.
 			label: sprintf( __( 'Transform to %s' ), title ),
-			icon: icon.src,
+			icon: <BlockIcon icon={ icon } />,
 			callback: ( { close } ) => {
 				onBlockTransform( name );
 				close();

package/src/components/{use-setting → use-settings}/README.md

@@ -1,8 +1,8 @@
-## Use Setting
+## Use Settings
 
-`useSetting` is a hook that will retrive the setting for the block instance that's in use. 
+`useSettings` is a hook that will retrieve the settings for the block instance that's in use.
 
-It does the lookup of the setting in the following order:
+It does the lookup of the settings in the following order:
 
 1. Third parties can provide the settings for the block using the filter `blockEditor.useSetting.before`.
 2. If no third parties have provided this setting, then it looks up in the block instance hierachy starting from the current block and working its way upwards to its ancestors.
@@ -20,20 +20,19 @@ It does the lookup of the setting in the following order:
 This will fetch the default color palette based on the block instance.
 
 ```jsx
-import { useSetting } from '@wordpress/block-editor';
+import { useSettings } from '@wordpress/block-editor';
 
-const defaultColorPalette = useSetting( 'color.palette.default' );
+const [ defaultColorPalette ] = useSettings( 'color.palette.default' );
 ```
 
 Refer [here](https://github.com/WordPress/gutenberg/blob/HEAD/docs/how-to-guides/curating-the-editor-experience.md?plain=1#L330) in order to understand how the filter mentioned above `blockEditor.useSetting.before` can be used.
 
 ### Props
 
-This hooks accepts the following props.
+This hooks accepts the following arguments.
 
-#### `path`
+#### `paths`
 
--   **Type:** `String`
--   **Default:** `undefined`
+-   **Type:** `Array<String>`
 
-The path to the setting that is to be used for a block. Ex: `typography.fontSizes`
+Array of paths to the settings to be retrieved. E.g., `[ 'typography.fontSizes' ]`