@wordpress/block-editor 12.18.1 → 12.19.0

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

@@ -7,6 +7,8 @@ import {
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	BaseControl,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -17,6 +19,14 @@ import { __ } from '@wordpress/i18n';
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { mergeOrigins } from '../../store/get-block-settings';
+import { setImmutably } from '../../utils/object';
+import { getBorderPanelLabel } from '../../hooks/border';
+import { ShadowPopover } from './shadow-panel-components';
+
+function useHasShadowControl( settings ) {
+	return !! settings?.shadow;
+}
 
 export function useHasBorderPanel( settings ) {
 	const controls = [
@@ -24,6 +34,7 @@ export function useHasBorderPanel( settings ) {
 		useHasBorderRadiusControl( settings ),
 		useHasBorderStyleControl( settings ),
 		useHasBorderWidthControl( settings ),
+		useHasShadowControl( settings ),
 	];
 
 	return controls.some( Boolean );
@@ -51,6 +62,7 @@ function BorderToolsPanel( {
 	value,
 	panelId,
 	children,
+	label,
 } ) {
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
@@ -59,7 +71,7 @@ function BorderToolsPanel( {
 
 	return (
 		<ToolsPanel
-			label={ __( 'Border' ) }
+			label={ label }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
@@ -73,6 +85,7 @@ const DEFAULT_CONTROLS = {
 	radius: true,
 	color: true,
 	width: true,
+	shadow: false,
 };
 
 export default function BorderPanel( {
@@ -82,6 +95,7 @@ export default function BorderPanel( {
 	inheritedValue = value,
 	settings,
 	panelId,
+	name,
 	defaultControls = DEFAULT_CONTROLS,
 } ) {
 	const colors = useColorsPerOrigin( settings );
@@ -136,6 +150,29 @@ export default function BorderPanel( {
 		}
 		return !! borderValues;
 	};
+	const hasShadowControl = useHasShadowControl( settings );
+
+	// Shadow
+	const shadow = decodeValue( inheritedValue?.shadow );
+	const shadowPresets = settings?.shadow?.presets;
+	const mergedShadowPresets = shadowPresets
+		? mergeOrigins( shadowPresets )
+		: [];
+	const setShadow = ( newValue ) => {
+		const slug = mergedShadowPresets?.find(
+			( { shadow: shadowName } ) => shadowName === newValue
+		)?.slug;
+
+		onChange(
+			setImmutably(
+				value,
+				[ 'shadow' ],
+				slug ? `var:preset|shadow|${ slug }` : newValue || undefined
+			)
+		);
+	};
+	const hasShadow = () => !! value?.shadow;
+	const resetShadow = () => setShadow( undefined );
 
 	const resetBorder = () => {
 		if ( hasBorderRadius() ) {
@@ -173,18 +210,30 @@ export default function BorderPanel( {
 		return {
 			...previousValue,
 			border: undefined,
+			shadow: undefined,
 		};
 	}, [] );
 
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
+	const label = getBorderPanelLabel( {
+		blockName: name,
+		hasShadowControl,
+		hasBorderControl:
+			showBorderColor ||
+			showBorderStyle ||
+			showBorderWidth ||
+			showBorderRadius,
+	} );
+
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
+			label={ label }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
 				<ToolsPanelItem
@@ -204,6 +253,8 @@ export default function BorderPanel( {
 						value={ border }
 						__experimentalIsRenderedInSidebar={ true }
 						size={ '__unstable-large' }
+						hideLabelFromVision={ ! hasShadowControl }
+						label={ __( 'Border' ) }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -223,6 +274,26 @@ export default function BorderPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasShadowControl && (
+				<ToolsPanelItem
+					label={ __( 'Shadow' ) }
+					hasValue={ hasShadow }
+					onDeselect={ resetShadow }
+					isShownByDefault={ defaultControls.shadow }
+					panelId={ panelId }
+				>
+					<BaseControl.VisualLabel as="legend">
+						{ __( 'Shadow' ) }
+					</BaseControl.VisualLabel>
+					<ItemGroup isBordered isSeparated>
+						<ShadowPopover
+							shadow={ shadow }
+							onShadowChange={ setShadow }
+							settings={ settings }
+						/>
+					</ItemGroup>
+				</ToolsPanelItem>
+			) }
 		</Wrapper>
 	);
 }

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

@@ -50,13 +50,7 @@ function getTranslation( key ) {
 
 	if ( keyArray?.[ 0 ] === 'blocks' ) {
 		const blockName = getBlockNames()?.[ keyArray[ 1 ] ];
-		return blockName
-			? sprintf(
-					// translators: %s: block name.
-					__( '%s block' ),
-					blockName
-			  )
-			: keyArray[ 1 ];
+		return blockName || keyArray[ 1 ];
 	}
 
 	if ( keyArray?.[ 0 ] === 'elements' ) {
@@ -200,7 +194,7 @@ export default function getGlobalStylesChanges( next, previous, options = {} ) {
 		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 ),
+			_n( '…and %d more change', '…and %d more changes', deleteCount ),
 			deleteCount
 		);
 		changes.splice( maxResults, deleteCount, andMoreText );

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

@@ -67,7 +67,6 @@ const VALID_SETTINGS = [
 	'spacing.units',
 	'typography.fluid',
 	'typography.customFontSize',
-	'typography.defaultFontSizes',
 	'typography.dropCap',
 	'typography.fontFamilies',
 	'typography.fontSizes',
@@ -240,7 +239,6 @@ export function useSettingsForBlockElement(
 				...updatedSettings.typography,
 				fontSizes: {},
 				customFontSize: false,
-				defaultFontSizes: false,
 			};
 		}
 

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

@@ -21,7 +21,6 @@ export {
 } from './dimensions-panel';
 export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
-export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
 export {
 	default as ImageSettingsPanel,

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

@@ -0,0 +1,125 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	FlexItem,
+	Dropdown,
+} from '@wordpress/components';
+import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
+	const defaultShadows = settings?.shadow?.presets?.default;
+	const themeShadows = settings?.shadow?.presets?.theme;
+	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+
+	const shadows = [
+		...( defaultPresetsEnabled ? defaultShadows : [] ),
+		...( themeShadows || [] ),
+	];
+
+	return (
+		<div className="block-editor-global-styles__shadow-popover-container">
+			<VStack spacing={ 4 }>
+				<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
+				<ShadowPresets
+					presets={ shadows }
+					activeShadow={ shadow }
+					onSelect={ onShadowChange }
+				/>
+			</VStack>
+		</div>
+	);
+}
+
+export function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	return ! presets ? null : (
+		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
+			{ presets.map( ( { name, slug, shadow } ) => (
+				<ShadowIndicator
+					key={ slug }
+					label={ name }
+					isActive={ shadow === activeShadow }
+					onSelect={ () =>
+						onSelect( shadow === activeShadow ? undefined : shadow )
+					}
+					shadow={ shadow }
+				/>
+			) ) }
+		</Grid>
+	);
+}
+
+export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+	return (
+		<div className="block-editor-global-styles__shadow-indicator-wrapper">
+			<Button
+				className="block-editor-global-styles__shadow-indicator"
+				onClick={ onSelect }
+				label={ label }
+				style={ { boxShadow: shadow } }
+				showTooltip
+			>
+				{ isActive && <Icon icon={ check } /> }
+			</Button>
+		</div>
+	);
+}
+
+export function ShadowPopover( { shadow, onShadowChange, settings } ) {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-global-styles__shadow-dropdown"
+			renderToggle={ renderShadowToggle() }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<ShadowPopoverContainer
+						shadow={ shadow }
+						onShadowChange={ onShadowChange }
+						settings={ settings }
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function renderShadowToggle() {
+	return ( { onToggle, isOpen } ) => {
+		const toggleProps = {
+			onClick: onToggle,
+			className: classNames( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+		};
+
+		return (
+			<Button { ...toggleProps }>
+				<HStack justify="flex-start">
+					<Icon
+						className="block-editor-global-styles__toggle-icon"
+						icon={ shadowIcon }
+						size={ 24 }
+					/>
+					<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+				</HStack>
+			</Button>
+		);
+	};
+}

package/src/components/global-styles/style.scss

@@ -1,13 +1,13 @@
-.block-editor-global-styles-effects-panel__toggle-icon {
+.block-editor-global-styles__toggle-icon {
 	fill: currentColor;
 }
 
-.block-editor-global-styles-effects-panel__shadow-popover-container {
+.block-editor-global-styles__shadow-popover-container {
 	width: 230px;
 }
 
 .block-editor-global-styles-filters-panel__dropdown,
-.block-editor-global-styles-effects-panel__shadow-dropdown {
+.block-editor-global-styles__shadow-dropdown {
 	display: block;
 	padding: 0;
 
@@ -22,24 +22,23 @@
 }
 
 // wrapper to clip the shadow beyond 6px
-.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
-	padding: 6px;
-	overflow: hidden;
+.block-editor-global-styles__shadow-indicator-wrapper {
+	padding: $grid-unit-15 * 0.5;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
 // These styles are similar to the color palette.
-.block-editor-global-styles-effects-panel__shadow-indicator {
+.block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 	cursor: pointer;
 	padding: 0;
 
-	height: 24px;
-	width: 24px;
+	height: $button-size-small;
+	width: $button-size-small;
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {

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

@@ -171,7 +171,7 @@ describe( 'getGlobalStylesChanges', () => {
 		expect( resultA ).toEqual( [
 			'Colors',
 			'Typography',
-			'Test pumpkin flowers block',
+			'Test pumpkin flowers',
 			'H3 element',
 			'Caption element',
 			'H6 element',
@@ -191,8 +191,8 @@ describe( 'getGlobalStylesChanges', () => {
 		expect( resultA ).toEqual( [
 			'Colors',
 			'Typography',
-			'Test pumpkin flowers block',
-			'…and 5 more changes.',
+			'Test pumpkin flowers',
+			'…and 5 more changes',
 		] );
 	} );
 

package/src/components/global-styles/test/use-global-styles-output.js

@@ -816,7 +816,7 @@ describe( 'global styles renderer', () => {
 						filter: { duotone: 'img' },
 					},
 					styleVariationSelectors: {
-						foo: '.is-style-foo.my-image',
+						foo: '.my-image.is-style-foo',
 					},
 					hasLayoutSupport: false,
 				},

package/src/components/global-styles/test/utils.js

@@ -3,6 +3,7 @@
  */
 import {
 	areGlobalStyleConfigsEqual,
+	getBlockStyleVariationSelector,
 	getPresetVariableFromValue,
 	getValueFromVariable,
 } from '../utils';
@@ -259,4 +260,89 @@ describe( 'editor utils', () => {
 			}
 		);
 	} );
+
+	describe( 'getBlockStyleVariationSelector', () => {
+		test.each( [
+			{ type: 'empty', selector: '', expected: '.is-style-custom' },
+			{
+				type: 'class',
+				selector: '.wp-block',
+				expected: '.wp-block.is-style-custom',
+			},
+			{
+				type: 'id',
+				selector: '#wp-block',
+				expected: '#wp-block.is-style-custom',
+			},
+			{
+				type: 'element tag',
+				selector: 'p',
+				expected: 'p.is-style-custom',
+			},
+			{
+				type: 'attribute',
+				selector: '[style*="color"]',
+				expected: '[style*="color"].is-style-custom',
+			},
+			{
+				type: 'descendant',
+				selector: '.wp-block .inner',
+				expected: '.wp-block.is-style-custom .inner',
+			},
+			{
+				type: 'comma-separated',
+				selector: '.wp-block .inner, .wp-block .alternative',
+				expected:
+					'.wp-block.is-style-custom .inner, .wp-block.is-style-custom .alternative',
+			},
+			{
+				type: 'pseudo',
+				selector: 'div:first-child',
+				expected: 'div.is-style-custom:first-child',
+			},
+			{
+				type: ':is',
+				selector: '.wp-block:is(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:is(.outer .inner:first-child)',
+			},
+			{
+				type: ':not',
+				selector: '.wp-block:not(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:not(.outer .inner:first-child)',
+			},
+			{
+				type: ':has',
+				selector: '.wp-block:has(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:has(.outer .inner:first-child)',
+			},
+			{
+				type: ':where',
+				selector: '.wp-block:where(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:where(.outer .inner:first-child)',
+			},
+			{
+				type: 'wrapping :where',
+				selector: ':where(.outer .inner:first-child)',
+				expected: ':where(.outer.is-style-custom .inner:first-child)',
+			},
+			{
+				type: 'complex',
+				selector:
+					'.wp:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+				expected:
+					'.wp.is-style-custom:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp.is-style-custom:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+			},
+		] )(
+			'should add variation class to ancestor in $type selector',
+			( { selector, expected } ) => {
+				expect(
+					getBlockStyleVariationSelector( 'custom', selector )
+				).toBe( expected );
+			}
+		);
+	} );
 } );

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

@@ -13,7 +13,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { mergeOrigins, hasMergedOrigins } from '../use-settings';
+import { mergeOrigins, hasMergedOrigins } from '../../store/get-block-settings';
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';
@@ -22,7 +22,7 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
-import { setImmutably, uniqByProperty } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -53,10 +53,7 @@ export function useHasTypographyPanel( settings ) {
 
 function useHasFontSizeControl( settings ) {
 	return (
-		( settings?.typography?.defaultFontSizes !== false &&
-			settings?.typography?.fontSizes?.default?.length ) ||
-		settings?.typography?.fontSizes?.theme?.length ||
-		settings?.typography?.fontSizes?.custom?.length ||
+		hasMergedOrigins( settings?.typography?.fontSizes ) ||
 		settings?.typography?.customFontSize
 	);
 }
@@ -103,45 +100,16 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
-/**
- * TODO: The reversing and filtering of default font sizes is a hack so the
- * dropdown UI matches what is generated in the global styles CSS stylesheet.
- *
- * This is a temporary solution until #57733 is resolved. At which point,
- * the mergedFontSizes would just need to be the concatenated array of all
- * presets or a custom dropdown with sections for each.
- *
- * @see {@link https://github.com/WordPress/gutenberg/issues/57733}
- *
- * @param {Object} settings The global styles settings.
- *
- * @return {Array} The merged font sizes.
- */
-function getMergedFontSizes( settings ) {
-	// The font size presets are merged in reverse order so that the duplicates
-	// that may defined later in the array have higher priority to match the CSS.
-	const mergedFontSizesAll = uniqByProperty(
-		[
-			settings?.typography?.fontSizes?.custom,
-			settings?.typography?.fontSizes?.theme,
-			settings?.typography?.fontSizes?.default,
-		].flatMap( ( presets ) => presets?.toReversed() ?? [] ),
-		'slug'
-	).reverse();
-
-	// Default presets exist in the global styles CSS no matter the setting, so
-	// filtering them out in the UI has to be done after merging.
-	const mergedFontSizes =
-		settings?.typography?.defaultFontSizes === false
-			? mergedFontSizesAll.filter(
-					( { slug } ) =>
-						! [ 'small', 'medium', 'large', 'x-large' ].includes(
-							slug
-						)
-			  )
-			: mergedFontSizesAll;
-
-	return mergedFontSizes;
+function getUniqueFontSizesBySlug( settings ) {
+	const fontSizes = settings?.typography?.fontSizes;
+	const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : [];
+	const uniqueSizes = [];
+	for ( const currentSize of mergedFontSizes ) {
+		if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			uniqueSizes.push( currentSize );
+		}
+	}
+	return uniqueSizes;
 }
 
 function TypographyToolsPanel( {
@@ -217,7 +185,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const mergedFontSizes = getMergedFontSizes( settings );
+	const mergedFontSizes = getUniqueFontSizesBySlug( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
@@ -405,7 +373,6 @@ export default function TypographyPanel( {
 						withReset={ false }
 						withSlider
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/use-global-styles-output.js

@@ -21,6 +21,7 @@ import {
 	ROOT_BLOCK_SELECTOR,
 	scopeSelector,
 	appendToSelector,
+	getBlockStyleVariationSelector,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import {
@@ -1077,7 +1078,10 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 		const styleVariationSelectors = {};
 		if ( blockStyleVariations?.length ) {
 			blockStyleVariations.forEach( ( variation ) => {
-				const styleVariationSelector = `.is-style-${ variation.name }${ selector }`;
+				const styleVariationSelector = getBlockStyleVariationSelector(
+					variation.name,
+					selector
+				);
 				styleVariationSelectors[ variation.name ] =
 					styleVariationSelector;
 			} );

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

@@ -446,3 +446,39 @@ export function areGlobalStyleConfigsEqual( original, variation ) {
 		fastDeepEqual( original?.settings, variation?.settings )
 	);
 }
+
+/**
+ * Generates the selector for a block style variation by creating the
+ * appropriate CSS class and adding it to the ancestor portion of the block's
+ * selector.
+ *
+ * For example, take the Button block which has a compound selector:
+ * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',
+ * the class `.is-style-custom` should be added to the `.wp-block-button`
+ * ancestor only.
+ *
+ * This function will take into account comma separated and complex selectors.
+ *
+ * @param {string} variation     Name for the variation.
+ * @param {string} blockSelector CSS selector for the block.
+ *
+ * @return {string} CSS selector for the block style variation.
+ */
+export function getBlockStyleVariationSelector( variation, blockSelector ) {
+	const variationClass = `.is-style-${ variation }`;
+
+	if ( ! blockSelector ) {
+		return variationClass;
+	}
+
+	const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
+	const addVariationClass = ( _match, group1, group2 ) => {
+		return group1 + group2 + variationClass;
+	};
+
+	const result = blockSelector
+		.split( ',' )
+		.map( ( part ) => part.replace( ancestorRegex, addVariationClass ) );
+
+	return result.join( ',' );
+}