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

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

@@ -0,0 +1,234 @@
+/**
+ * Internal dependencies
+ */
+import getGlobalStylesChanges from '../get-global-styles-changes';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+
+describe( 'getGlobalStylesChanges', () => {
+	beforeEach( () => {
+		registerBlockType( 'core/test-fiori-di-zucca', {
+			save: () => {},
+			category: 'text',
+			title: 'Test pumpkin flowers',
+			edit: () => {},
+		} );
+	} );
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	const revision = {
+		id: 10,
+		styles: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--potato)',
+				fontStyle: 'normal',
+				fontWeight: '600',
+				lineHeight: '1.85',
+				fontFamily: 'var(--wp--preset--font-family--asparagus)',
+			},
+			spacing: {
+				padding: {
+					top: '36px',
+					right: '89px',
+					bottom: '133px',
+					left: 'var(--wp--preset--spacing--20)',
+				},
+				blockGap: '114px',
+			},
+			elements: {
+				heading: {
+					typography: {
+						letterSpacing: '37px',
+					},
+				},
+				h3: {
+					typography: {
+						lineHeight: '1.2',
+					},
+				},
+				caption: {
+					color: {
+						text: 'var(--wp--preset--color--pineapple)',
+					},
+				},
+			},
+			color: {
+				text: 'var(--wp--preset--color--tomato)',
+			},
+			blocks: {
+				'core/test-fiori-di-zucca': {
+					color: {
+						text: '#000000',
+					},
+				},
+			},
+		},
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'one',
+							color: 'pink',
+						},
+					],
+				},
+			},
+		},
+	};
+	const previousRevision = {
+		id: 9,
+		styles: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--fungus)',
+				fontStyle: 'normal',
+				fontWeight: '600',
+				lineHeight: '1.85',
+				fontFamily: 'var(--wp--preset--font-family--grapes)',
+			},
+			spacing: {
+				padding: {
+					top: '36px',
+					right: '89px',
+					bottom: '133px',
+					left: 'var(--wp--preset--spacing--20)',
+				},
+				blockGap: '114px',
+			},
+			elements: {
+				heading: {
+					typography: {
+						letterSpacing: '37px',
+					},
+				},
+				h3: {
+					typography: {
+						lineHeight: '2',
+					},
+				},
+				h6: {
+					typography: {
+						lineHeight: '1.2',
+					},
+				},
+				caption: {
+					typography: {
+						fontSize: '1.11rem',
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
+				link: {
+					typography: {
+						lineHeight: 2,
+						textDecoration: 'line-through',
+					},
+					color: {
+						text: 'var(--wp--preset--color--egg)',
+					},
+				},
+			},
+			color: {
+				text: 'var(--wp--preset--color--tomato)',
+				background: 'var(--wp--preset--color--pumpkin)',
+			},
+			blocks: {
+				'core/test-fiori-di-zucca': {
+					color: {
+						text: '#fff',
+					},
+				},
+			},
+		},
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'one',
+							color: 'blue',
+						},
+					],
+				},
+			},
+		},
+	};
+
+	it( 'returns a list of changes and caches them', () => {
+		const resultA = getGlobalStylesChanges( revision, previousRevision );
+		expect( resultA ).toEqual( [
+			'Colors',
+			'Typography',
+			'Test pumpkin flowers block',
+			'H3 element',
+			'Caption element',
+			'H6 element',
+			'Link element',
+			'Color settings',
+		] );
+
+		const resultB = getGlobalStylesChanges( revision, previousRevision );
+
+		expect( resultA ).toBe( resultB );
+	} );
+
+	it( 'returns a list of truncated changes', () => {
+		const resultA = getGlobalStylesChanges( revision, previousRevision, {
+			maxResults: 3,
+		} );
+		expect( resultA ).toEqual( [
+			'Colors',
+			'Typography',
+			'Test pumpkin flowers block',
+			'…and 5 more changes.',
+		] );
+	} );
+
+	it( 'skips unknown and unchanged keys', () => {
+		const result = getGlobalStylesChanges(
+			{
+				styles: {
+					frogs: {
+						legs: 'green',
+					},
+					typography: {
+						fontSize: '1rem',
+					},
+					settings: {
+						'': {
+							'': 'foo',
+						},
+					},
+				},
+			},
+			{
+				styles: {
+					frogs: {
+						legs: 'yellow',
+					},
+					typography: {
+						fontSize: '1rem',
+					},
+					settings: {
+						'': {
+							'': 'bar',
+						},
+					},
+				},
+			}
+		);
+		expect( result ).toEqual( [] );
+	} );
+} );

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

@@ -13,6 +13,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { mergeOrigins, hasMergedOrigins } from '../use-settings';
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';
@@ -20,8 +21,8 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
-import { getValueFromVariable } from './utils';
-import { setImmutably } from '../../utils/object';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { setImmutably, uniqByProperty } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -51,25 +52,17 @@ export function useHasTypographyPanel( settings ) {
 }
 
 function useHasFontSizeControl( settings ) {
-	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
-	return !! fontSizes?.length || ! disableCustomFontSizes;
+	return (
+		( settings?.typography?.defaultFontSizes !== false &&
+			settings?.typography?.fontSizes?.default?.length ) ||
+		settings?.typography?.fontSizes?.theme?.length ||
+		settings?.typography?.fontSizes?.custom?.length ||
+		settings?.typography?.customFontSize
+	);
 }
 
 function useHasFontFamilyControl( settings ) {
-	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies = []
-		.concat( fontFamiliesPerOrigin?.custom ?? [] )
-		.concat( fontFamiliesPerOrigin?.theme ?? [] )
-		.concat( fontFamiliesPerOrigin?.default ?? [] )
-		.sort( ( a, b ) =>
-			( a?.name || a?.slug )?.localeCompare( b?.name || a?.slug )
-		);
-	return !! fontFamilies?.length;
+	return hasMergedOrigins( settings?.typography?.fontFamilies );
 }
 
 function useHasLineHeightControl( settings ) {
@@ -77,18 +70,14 @@ function useHasLineHeightControl( settings ) {
 }
 
 function useHasAppearanceControl( settings ) {
-	const hasFontStyles = settings?.typography?.fontStyle;
-	const hasFontWeights = settings?.typography?.fontWeight;
-	return hasFontStyles || hasFontWeights;
+	return settings?.typography?.fontStyle || settings?.typography?.fontWeight;
 }
 
 function useAppearanceControlLabel( settings ) {
-	const hasFontStyles = settings?.typography?.fontStyle;
-	const hasFontWeights = settings?.typography?.fontWeight;
-	if ( ! hasFontStyles ) {
+	if ( ! settings?.typography?.fontStyle ) {
 		return __( 'Font weight' );
 	}
-	if ( ! hasFontWeights ) {
+	if ( ! settings?.typography?.fontWeight ) {
 		return __( 'Font style' );
 	}
 	return __( 'Appearance' );
@@ -114,19 +103,45 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
-function getUniqueFontSizesBySlug( settings ) {
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
-
-	return fontSizes.reduce( ( acc, currentSize ) => {
-		if ( ! acc.some( ( { slug } ) => slug === currentSize.slug ) ) {
-			acc.push( currentSize );
-		}
-		return acc;
-	}, [] );
+/**
+ * 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 TypographyToolsPanel( {
@@ -146,6 +161,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>
@@ -178,14 +194,11 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies = []
-		.concat( fontFamiliesPerOrigin?.custom ?? [] )
-		.concat( fontFamiliesPerOrigin?.theme ?? [] )
-		.concat( fontFamiliesPerOrigin?.default ?? [] );
+	const fontFamilies = settings?.typography?.fontFamilies;
+	const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : [];
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {
-		const slug = fontFamilies?.find(
+		const slug = mergedFontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
 		onChange(
@@ -204,7 +217,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizes = getUniqueFontSizesBySlug( settings );
+	const mergedFontSizes = getMergedFontSizes( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
@@ -368,7 +381,7 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<FontFamilyControl
-						fontFamilies={ fontFamilies }
+						fontFamilies={ mergedFontFamilies }
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
@@ -387,7 +400,7 @@ export default function TypographyPanel( {
 					<FontSizePicker
 						value={ fontSize }
 						onChange={ setFontSize }
-						fontSizes={ fontSizes }
+						fontSizes={ mergedFontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider

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

@@ -11,6 +11,7 @@ import {
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -32,12 +33,9 @@ import { getDuotoneFilter } from '../duotone/utils';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
-import {
-	getValueFromObjectPath,
-	kebabCase,
-	setImmutably,
-} from '../../utils/object';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import BlockContext from '../block-context';
+import { unlock } from '../../lock-unlock';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -72,6 +70,8 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
+
 	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
 			const presetByOrigin = getValueFromObjectPath(
@@ -116,6 +116,8 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
+
 	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
@@ -180,6 +182,7 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 }
 
 function flattenTree( input = {}, prefix, token ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
 	let result = [];
 	Object.keys( input ).forEach( ( key ) => {
 		const newKey = prefix + kebabCase( key.replace( '/', '-' ) );
@@ -321,6 +324,7 @@ export function getStylesDeclarations(
 	tree = {},
 	isTemplate = true
 ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = Object.entries( STYLE_PROPERTY ).reduce(
 		(

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

@@ -159,6 +159,13 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
+export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
+	popoverProps: {
+		placement: 'left-start',
+		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+	},
+};
+
 function findInPresetsBy(
 	features,
 	blockName,

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

@@ -2,12 +2,7 @@
 
 The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks.
 
-_Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/theme-json/#opt-in-into-ui-controls) UI controls.
-
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
+_Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls) UI controls.
 
 ## Development guidelines
 
@@ -48,7 +43,7 @@ A callback function that handles the application of the height value.
 -   **Type:** `String`
 -   **Default:** `'Height'`
 
-A label for the height control. This is useful when using the height control for a feature that is controlled in the same way as height, but requires a different label. For example, "Min. height".
+A label for the height control. This is useful when using the height control for a feature that is controlled in the same way as height, but requires a different label. For example, "Minimum height".
 
 ## Related components
 

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

@@ -157,6 +157,8 @@ export default function HeightControl( {
 						onUnitChange={ handleUnitChange }
 						min={ 0 }
 						size={ '__unstable-large' }
+						label={ label }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 				<FlexItem isBlock>
@@ -175,6 +177,8 @@ export default function HeightControl( {
 							withInputField={ false }
 							onChange={ handleSliderChange }
 							__nextHasNoMarginBottom
+							label={ label }
+							hideLabelFromVision
 						/>
 					</Spacer>
 				</FlexItem>

package/src/components/image-link-destinations/index.native.js

@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { BottomSheet, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+import { blockSettingsScreens } from '../block-settings';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		linkDestination,
+	} = route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters.
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker.
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;

package/src/components/image-link-destinations/style.native.scss

@@ -0,0 +1,16 @@
+// used in both light and dark modes
+.placeholderTextColor {
+	color: #87a6bc;
+}
+
+.optionIcon {
+	color: $blue-50;
+}
+
+.optionIconDark {
+	color: $blue-30;
+}
+
+.unselectedOptionIcon {
+	opacity: 0;
+}