@wordpress/block-editor 12.16.0 → 12.17.0

package/src/components/block-variation-transforms/README.md

@@ -4,11 +4,6 @@ This component allows to display the selected block's variations which have the
 
 By selecting such a variation an update to the selected block's attributes happen, based on the variation's attributes.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -8,6 +8,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -95,6 +97,43 @@ function VariationsDropdown( {
 	);
 }
 
+function VariationsToggleGroupControl( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
+	return (
+		<div className={ className }>
+			<ToggleGroupControl
+				label={ __( 'Transform to variation' ) }
+				value={ selectedValue }
+				hideLabelFromVision
+				onChange={ onSelectVariation }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+			>
+				{ variations.map( ( variation ) => (
+					<ToggleGroupControlOptionIcon
+						key={ variation.name }
+						icon={ variation.icon }
+						value={ variation.name }
+						label={
+							selectedValue === variation.name
+								? variation.title
+								: sprintf(
+										/* translators: %s: Name of the block variation */
+										__( 'Transform to %s' ),
+										variation.title
+								  )
+						}
+					/>
+				) ) }
+			</ToggleGroupControl>
+		</div>
+	);
+}
+
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { activeBlockVariation, variations } = useSelect(
@@ -138,12 +177,19 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	const baseClass = 'block-editor-block-variation-transforms';
-
 	// Skip rendering if there are no variations
 	if ( ! variations?.length ) return null;
 
-	const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
+	const baseClass = 'block-editor-block-variation-transforms';
+
+	// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap
+	const showButtons = variations.length > 5;
+
+	const ButtonComponent = showButtons
+		? VariationsButtons
+		: VariationsToggleGroupControl;
+
+	const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
 
 	return (
 		<Component

package/src/components/border-radius-control/linked-button.js

@@ -13,7 +13,7 @@ export default function LinkedButton( { isLinked, ...props } ) {
 			<Button
 				{ ...props }
 				className="component-border-radius-control__linked-button"
-				isSmall
+				size="small"
 				icon={ isLinked ? link : linkOff }
 				iconSize={ 24 }
 				aria-label={ label }

package/src/components/caption/README.md

@@ -4,11 +4,6 @@ The `Caption` component renders the [caption part](https://wordpress.org/documen
 
 This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -221,7 +221,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
                           data-active-item=""
-                          data-command=""
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"

package/src/components/colors/utils.js

@@ -5,10 +5,15 @@ import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-import { kebabCase } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -70,6 +75,8 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
+	const { kebabCase } = unlock( componentsPrivateApis );
+
 	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 

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

@@ -3,6 +3,7 @@
  */
 import { useMemo, Component } from '@wordpress/element';
 import { compose, createHigherOrderComponent } from '@wordpress/compose';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,7 +15,7 @@ import {
 	getMostReadableColor,
 } from './utils';
 import { useSettings } from '../use-settings';
-import { kebabCase } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Capitalizes the first letter in a string.
@@ -79,6 +80,7 @@ const withEditorColorPalette = () =>
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
 		return {
 			...colorObject,

package/src/components/contrast-checker/README.md

@@ -6,10 +6,6 @@ ContrastChecker also accounts for font sizes.
 
 A notice will be rendered if the color combination of text and background colors are low.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Developer guidelines
 
 ### Usage

package/src/components/copy-handler/README.md

@@ -8,16 +8,6 @@ Concretely, it handles the display of success messages and takes care of copying
 
 ![Copy/cut behaviours](https://user-images.githubusercontent.com/150562/81698101-6e341d80-945d-11ea-9bfb-b20781f55033.gif)
 
-## Table of contents
-
-- [Copy Handler](#copy-handler)
-	- [Table of contents](#table-of-contents)
-	- [Development guidelines](#development-guidelines)
-		- [Usage](#usage)
-		- [Props](#props)
-		- [`children`](#children)
-	- [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -27,7 +27,7 @@ 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';
 
@@ -130,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 }

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

@@ -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,10 +82,7 @@ function FiltersToolsPanel( {
 			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

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',

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';