@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -3,7 +3,7 @@
 $swatch-size: 28px;
 $swatch-gap: 12px;
 
-$popover-width: $sidebar-width;
+$popover-width: 260px;
 $popover-padding: $grid-unit-20;
 
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
@@ -26,11 +26,6 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	}
 }
 
-.block-editor-duotone-control__description {
-	margin: $grid-unit-20 0;
-	font-size: $helptext-font-size;
-}
-
 .block-editor-duotone-control__unset-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);

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

@@ -1,7 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-import { kebabCase } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -64,5 +69,6 @@ export function getFontSizeClass( fontSizeSlug ) {
 		return;
 	}
 
+	const { kebabCase } = unlock( componentsPrivateApis );
 	return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
 }

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

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
  */
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 
 export function useHasBorderPanel( settings ) {
 	const controls = [
@@ -62,6 +62,7 @@ function BorderToolsPanel( {
 			label={ __( 'Border' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

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

@@ -12,12 +12,12 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	TabPanel,
 	ColorIndicator,
 	Flex,
 	FlexItem,
 	Dropdown,
 	Button,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -27,8 +27,9 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -129,6 +130,7 @@ function ColorToolsPanel( {
 			className="color-block-support-panel"
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			<div className="color-block-support-panel__inner-wrapper">
 				{ children }
@@ -203,12 +205,11 @@ function ColorPanelDropdown( {
 	colorGradientControlSettings,
 	panelId,
 } ) {
-	const tabConfigs = tabs.map( ( { key, label: tabLabel } ) => {
-		return {
-			name: key,
-			title: tabLabel,
-		};
-	} );
+	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+	// object, due to circular dependencies.
+	// See https://github.com/WordPress/gutenberg/issues/52692
+	const { Tabs } = unlock( componentsPrivateApis );
 
 	return (
 		<ToolsPanelItem
@@ -258,26 +259,35 @@ function ColorPanelDropdown( {
 								/>
 							) }
 							{ tabs.length > 1 && (
-								<TabPanel tabs={ tabConfigs }>
-									{ ( tab ) => {
-										const selectedTab = tabs.find(
-											( t ) => t.key === tab.name
-										);
-
-										if ( ! selectedTab ) {
-											return null;
-										}
-
+								<Tabs initialTabId={ currentTab?.key }>
+									<Tabs.TabList>
+										{ tabs.map( ( tab ) => (
+											<Tabs.Tab
+												key={ tab.key }
+												tabId={ tab.key }
+											>
+												{ tab.label }
+											</Tabs.Tab>
+										) ) }
+									</Tabs.TabList>
+
+									{ tabs.map( ( tab ) => {
 										return (
-											<ColorPanelTab
-												{ ...selectedTab }
-												colorGradientControlSettings={
-													colorGradientControlSettings
-												}
-											/>
+											<Tabs.TabPanel
+												key={ tab.key }
+												tabId={ tab.key }
+												focusable={ false }
+											>
+												<ColorPanelTab
+													{ ...tab }
+													colorGradientControlSettings={
+														colorGradientControlSettings
+													}
+												/>
+											</Tabs.TabPanel>
 										);
-									} }
-								</TabPanel>
+									} ) }
+								</Tabs>
 							) }
 						</div>
 					</DropdownContentWrapper>

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

@@ -23,7 +23,7 @@ import { useCallback, Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
@@ -178,6 +178,7 @@ function DimensionsToolsPanel( {
 			label={ __( 'Dimensions' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>
@@ -602,7 +603,7 @@ export default function DimensionsPanel( {
 			{ showMinHeightControl && (
 				<ToolsPanelItem
 					hasValue={ hasMinHeightValue }
-					label={ __( 'Min. height' ) }
+					label={ __( 'Minimum height' ) }
 					onDeselect={ resetMinHeightValue }
 					isShownByDefault={
 						defaultControls.minHeight ?? DEFAULT_CONTROLS.minHeight
@@ -610,7 +611,7 @@ export default function DimensionsPanel( {
 					panelId={ panelId }
 				>
 					<HeightControl
-						label={ __( 'Min. height' ) }
+						label={ __( 'Minimum height' ) }
 						value={ minHeightValue }
 						onChange={ setMinHeightValue }
 					/>

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

@@ -26,7 +26,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 export function useHasEffectsPanel( settings ) {
@@ -55,6 +55,7 @@ function EffectsToolsPanel( {
 			label={ __( 'Effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

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

@@ -12,9 +12,9 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
-	__experimentalVStack as VStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
+	MenuGroup,
 	ColorIndicator,
 	DuotonePicker,
 	DuotoneSwatch,
@@ -28,7 +28,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const EMPTY_ARRAY = [];
@@ -82,6 +82,7 @@ function FiltersToolsPanel( {
 			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>
@@ -197,8 +198,8 @@ export default function FiltersPanel( {
 							);
 						} }
 						renderContent={ () => (
-							<DropdownContentWrapper paddingSize="medium">
-								<VStack>
+							<DropdownContentWrapper paddingSize="small">
+								<MenuGroup label={ __( 'Duotone' ) }>
 									<p>
 										{ __(
 											'Create a two-tone color effect without losing your original image.'
@@ -213,7 +214,7 @@ export default function FiltersPanel( {
 										value={ duotone }
 										onChange={ setDuotone }
 									/>
-								</VStack>
+								</MenuGroup>
 							</DropdownContentWrapper>
 						) }
 					/>

package/src/components/global-styles/get-global-styles-changes.js

@@ -0,0 +1,210 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { getBlockTypes } from '@wordpress/blocks';
+
+const globalStylesChangesCache = new Map();
+const EMPTY_ARRAY = [];
+const translationMap = {
+	caption: __( 'Caption' ),
+	link: __( 'Link' ),
+	button: __( 'Button' ),
+	heading: __( 'Heading' ),
+	h1: __( 'H1' ),
+	h2: __( 'H2' ),
+	h3: __( 'H3' ),
+	h4: __( 'H4' ),
+	h5: __( 'H5' ),
+	h6: __( 'H6' ),
+	'settings.color': __( 'Color settings' ),
+	'settings.typography': __( 'Typography settings' ),
+	'styles.color': __( 'Colors' ),
+	'styles.spacing': __( 'Spacing' ),
+	'styles.typography': __( 'Typography' ),
+};
+const getBlockNames = memoize( () =>
+	getBlockTypes().reduce( ( accumulator, { name, title } ) => {
+		accumulator[ name ] = title;
+		return accumulator;
+	}, {} )
+);
+const isObject = ( obj ) => obj !== null && typeof obj === 'object';
+
+/**
+ * Get the translation for a given global styles key.
+ * @param {string} key A key representing a path to a global style property or setting.
+ * @return {string|undefined}                A translated key or undefined if no translation exists.
+ */
+function getTranslation( key ) {
+	if ( translationMap[ key ] ) {
+		return translationMap[ key ];
+	}
+
+	const keyArray = key.split( '.' );
+
+	if ( keyArray?.[ 0 ] === 'blocks' ) {
+		const blockName = getBlockNames()?.[ keyArray[ 1 ] ];
+		return blockName
+			? sprintf(
+					// translators: %s: block name.
+					__( '%s block' ),
+					blockName
+			  )
+			: keyArray[ 1 ];
+	}
+
+	if ( keyArray?.[ 0 ] === 'elements' ) {
+		const elementName = translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];
+		return sprintf(
+			// translators: %s: element name, e.g., heading button, link, caption.
+			__( '%s element' ),
+			elementName
+		);
+	}
+
+	return undefined;
+}
+
+/**
+ * A deep comparison of two objects, optimized for comparing global styles.
+ * @param {Object} changedObject  The changed object to compare.
+ * @param {Object} originalObject The original object to compare against.
+ * @param {string} parentPath     A key/value pair object of block names and their rendered titles.
+ * @return {string[]}             An array of paths whose values have changed.
+ */
+function deepCompare( changedObject, originalObject, parentPath = '' ) {
+	// We have two non-object values to compare.
+	if ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {
+		/*
+		 * Only return a path if the value has changed.
+		 * And then only the path name up to 2 levels deep.
+		 */
+		return changedObject !== originalObject
+			? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )
+			: undefined;
+	}
+
+	// Enable comparison when an object doesn't have a corresponding property to compare.
+	changedObject = isObject( changedObject ) ? changedObject : {};
+	originalObject = isObject( originalObject ) ? originalObject : {};
+
+	const allKeys = new Set( [
+		...Object.keys( changedObject ),
+		...Object.keys( originalObject ),
+	] );
+
+	let diffs = [];
+	for ( const key of allKeys ) {
+		const path = parentPath ? parentPath + '.' + key : key;
+		const changedPath = deepCompare(
+			changedObject[ key ],
+			originalObject[ key ],
+			path
+		);
+		if ( changedPath ) {
+			diffs = diffs.concat( changedPath );
+		}
+	}
+	return diffs;
+}
+
+/**
+ * Returns an array of translated summarized global styles changes.
+ * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.
+ *
+ * @param {Object} next     The changed object to compare.
+ * @param {Object} previous The original object to compare against.
+ * @return {string[]}                        An array of translated changes.
+ */
+function getGlobalStylesChangelist( next, previous ) {
+	const cacheKey = JSON.stringify( { next, previous } );
+
+	if ( globalStylesChangesCache.has( cacheKey ) ) {
+		return globalStylesChangesCache.get( cacheKey );
+	}
+
+	/*
+	 * Compare the two changesets with normalized keys.
+	 * The order of these keys determines the order in which
+	 * they'll appear in the results.
+	 */
+	const changedValueTree = deepCompare(
+		{
+			styles: {
+				color: next?.styles?.color,
+				typography: next?.styles?.typography,
+				spacing: next?.styles?.spacing,
+			},
+			blocks: next?.styles?.blocks,
+			elements: next?.styles?.elements,
+			settings: next?.settings,
+		},
+		{
+			styles: {
+				color: previous?.styles?.color,
+				typography: previous?.styles?.typography,
+				spacing: previous?.styles?.spacing,
+			},
+			blocks: previous?.styles?.blocks,
+			elements: previous?.styles?.elements,
+			settings: previous?.settings,
+		}
+	);
+
+	if ( ! changedValueTree.length ) {
+		globalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );
+		return EMPTY_ARRAY;
+	}
+
+	// Remove duplicate results.
+	const result = [ ...new Set( changedValueTree ) ]
+		/*
+		 * Translate the keys.
+		 * Remove duplicate or empty translations.
+		 */
+		.reduce( ( acc, curr ) => {
+			const translation = getTranslation( curr );
+			if ( translation && ! acc.includes( translation ) ) {
+				acc.push( translation );
+			}
+			return acc;
+		}, [] );
+
+	globalStylesChangesCache.set( cacheKey, result );
+
+	return result;
+}
+
+/**
+ * From a getGlobalStylesChangelist() result, returns a truncated array of translated changes.
+ * Appends a translated string indicating the number of changes that were truncated.
+ *
+ * @param {Object}              next     The changed object to compare.
+ * @param {Object}              previous The original object to compare against.
+ * @param {{maxResults:number}} options  Options. maxResults: results to return before truncating.
+ * @return {string[]}                        An array of translated changes.
+ */
+export default function getGlobalStylesChanges( next, previous, options = {} ) {
+	const changes = getGlobalStylesChangelist( next, previous );
+	const changesLength = changes.length;
+	const { maxResults } = options;
+
+	// Truncate to `n` results if necessary.
+	if ( !! maxResults && changesLength && changesLength > maxResults ) {
+		const deleteCount = changesLength - maxResults;
+		const andMoreText = sprintf(
+			// translators: %d: number of global styles changes that are not displayed in the UI.
+			_n( '…and %d more change.', '…and %d more changes.', deleteCount ),
+			deleteCount
+		);
+		changes.splice( maxResults, deleteCount, andMoreText );
+	}
+
+	return changes;
+}

package/src/components/global-styles/hooks.js

@@ -24,6 +24,9 @@ const EMPTY_CONFIG = { settings: {}, styles: {} };
 const VALID_SETTINGS = [
 	'appearanceTools',
 	'useRootPaddingAwareAlignments',
+	'background.backgroundImage',
+	'background.backgroundRepeat',
+	'background.backgroundSize',
 	'border.color',
 	'border.radius',
 	'border.style',
@@ -63,6 +66,7 @@ const VALID_SETTINGS = [
 	'spacing.units',
 	'typography.fluid',
 	'typography.customFontSize',
+	'typography.defaultFontSizes',
 	'typography.dropCap',
 	'typography.fontFamilies',
 	'typography.fontSizes',
@@ -235,6 +239,7 @@ export function useSettingsForBlockElement(
 				...updatedSettings.typography,
 				fontSizes: {},
 				customFontSize: false,
+				defaultFontSizes: false,
 			};
 		}
 

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

@@ -8,6 +8,11 @@ import {
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {
 	// Note: If lightbox `value` exists, that means it was
 	// defined via the the Global Styles UI and will NOT
@@ -47,6 +52,7 @@ export default function ImageSettingsPanel( {
 				label={ _x( 'Settings', 'Image settings' ) }
 				resetAll={ resetLightbox }
 				panelId={ panelId }
+				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 			>
 				<ToolsPanelItem
 					// We use the `userSettings` prop instead of `settings`, because `settings`

package/src/components/global-styles/index.js

@@ -29,3 +29,4 @@ export {
 } from './image-settings-panel';
 export { default as AdvancedPanel } from './advanced-panel';
 export { areGlobalStyleConfigsEqual } from './utils';
+export { default as getGlobalStylesChanges } from './get-global-styles-changes';