@wordpress/block-editor 12.16.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

@@ -21,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;
@@ -53,7 +53,10 @@ export function useHasTypographyPanel( settings ) {
 
 function useHasFontSizeControl( settings ) {
 	return (
-		hasMergedOrigins( settings?.typography?.fontSizes ) ||
+		( settings?.typography?.defaultFontSizes !== false &&
+			settings?.typography?.fontSizes?.default?.length ) ||
+		settings?.typography?.fontSizes?.theme?.length ||
+		settings?.typography?.fontSizes?.custom?.length ||
 		settings?.typography?.customFontSize
 	);
 }
@@ -100,16 +103,45 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
-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;
+/**
+ * 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( {
@@ -129,6 +161,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>
@@ -184,7 +217,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const mergedFontSizes = getUniqueFontSizesBySlug( settings );
+	const mergedFontSizes = getMergedFontSizes( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {

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-size-control/index.js

@@ -87,7 +87,7 @@ export default function ImageSizeControl( {
 								return (
 									<Button
 										key={ scale }
-										isSmall
+										size="small"
 										variant={
 											isCurrent ? 'primary' : undefined
 										}
@@ -104,7 +104,10 @@ export default function ImageSizeControl( {
 								);
 							} ) }
 						</ButtonGroup>
-						<Button isSmall onClick={ () => updateDimensions() }>
+						<Button
+							size="small"
+							onClick={ () => updateDimensions() }
+						>
 							{ __( 'Reset' ) }
 						</Button>
 					</HStack>

package/src/components/index.native.js

@@ -45,13 +45,13 @@ export {
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
 } from './media-upload/constants';
+export { default as MediaUploadProgress } from './media-upload-progress';
 export {
-	default as MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from './media-upload-progress';
+} from './media-upload-progress/constants';
 export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';

package/src/components/inner-blocks/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
@@ -33,6 +33,15 @@ import { useSettings } from '../use-settings';
 
 const EMPTY_OBJECT = {};
 
+function BlockContext( { children, clientId } ) {
+	const context = useBlockContext( clientId );
+	return (
+		<BlockContextProvider value={ context }>
+			{ children }
+		</BlockContextProvider>
+	);
+}
+
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
  * as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -60,10 +69,15 @@ function UncontrolledInnerBlocks( props ) {
 		orientation,
 		placeholder,
 		layout,
+		name,
+		blockType,
+		innerBlocks,
+		parentLock,
 	} = props;
 
 	useNestedSettingsUpdate(
 		clientId,
+		parentLock,
 		allowedBlocks,
 		prioritizedInserterBlocks,
 		defaultBlock,
@@ -78,19 +92,12 @@ function UncontrolledInnerBlocks( props ) {
 
 	useInnerBlockTemplateSync(
 		clientId,
+		innerBlocks,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection
 	);
 
-	const context = useBlockContext( clientId );
-	const name = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId )?.name;
-		},
-		[ clientId ]
-	);
-
 	const defaultLayoutBlockSupport =
 		getBlockSupport( name, 'layout' ) ||
 		getBlockSupport( name, '__experimentalLayout' ) ||
@@ -114,20 +121,22 @@ function UncontrolledInnerBlocks( props ) {
 		[ defaultLayout, usedLayout, allowSizingOnChildren ]
 	);
 
-	// This component needs to always be synchronous as it's the one changing
-	// the async mode depending on the block selection.
-	return (
-		<BlockContextProvider value={ context }>
-			<BlockListItems
-				rootClientId={ clientId }
-				renderAppender={ renderAppender }
-				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				layout={ memoedLayout }
-				wrapperRef={ wrapperRef }
-				placeholder={ placeholder }
-			/>
-		</BlockContextProvider>
+	const items = (
+		<BlockListItems
+			rootClientId={ clientId }
+			renderAppender={ renderAppender }
+			__experimentalAppenderTagName={ __experimentalAppenderTagName }
+			layout={ memoedLayout }
+			wrapperRef={ wrapperRef }
+			placeholder={ placeholder }
+		/>
 	);
+
+	if ( Object.keys( blockType.providesContext ).length === 0 ) {
+		return items;
+	}
+
+	return <BlockContext clientId={ clientId }>{ items }</BlockContext>;
 }
 
 /**
@@ -179,8 +188,16 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		layout = null,
 		__unstableLayoutClassNames: layoutClassNames = '',
 	} = useBlockEditContext();
-	const isSmallScreen = useViewportMatch( 'medium', '<' );
-	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
+	const {
+		__experimentalCaptureToolbars,
+		hasOverlay,
+		name,
+		blockType,
+		innerBlocks,
+		parentLock,
+		parentClientId,
+		isDropZoneDisabled,
+	} = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
 				return {};
@@ -191,14 +208,21 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				isBlockSelected,
 				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
+				getBlocks,
+				getTemplateLock,
+				getBlockRootClientId,
+				__unstableIsWithinBlockOverlay,
+				__unstableHasActiveBlockOverlayActive,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
+			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation' || isSmallScreen;
+				__unstableGetEditorMode() === 'navigation';
+			const blockEditingMode = getBlockEditingMode( clientId );
+			const _parentClientId = getBlockRootClientId( clientId );
 			return {
-				__experimentalCaptureToolbars: select(
-					blocksStore
-				).hasBlockSupport(
+				__experimentalCaptureToolbars: hasBlockSupport(
 					blockName,
 					'__experimentalExposeControlsToChildren',
 					false
@@ -208,14 +232,25 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					! isBlockSelected( clientId ) &&
 					! hasSelectedInnerBlock( clientId, true ) &&
 					enableClickThrough,
+				name: blockName,
+				blockType: getBlockType( blockName ),
+				innerBlocks: getBlocks( clientId ),
+				parentLock: getTemplateLock( _parentClientId ),
+				parentClientId: _parentClientId,
+				isDropZoneDisabled:
+					blockEditingMode !== 'default' ||
+					__unstableHasActiveBlockOverlayActive( clientId ) ||
+					__unstableIsWithinBlockOverlay( clientId ),
 			};
 		},
-		[ clientId, isSmallScreen ]
+		[ clientId ]
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
 		dropZoneElement,
 		rootClientId: clientId,
+		parentClientId,
+		isDisabled: isDropZoneDisabled,
 	} );
 
 	const ref = useMergeRefs( [
@@ -226,6 +261,10 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	const innerBlocksProps = {
 		__experimentalCaptureToolbars,
 		layout,
+		name,
+		blockType,
+		innerBlocks,
+		parentLock,
 		...options,
 	};
 	const InnerBlocks =