@wordpress/block-editor 12.16.0 → 12.17.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,7 +21,7 @@ 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 { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
@@ -129,6 +129,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

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 =

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

@@ -105,8 +105,26 @@ function UncontrolledInnerBlocks( props ) {
 
 	const context = useBlockContext( clientId );
 
+	const { nestingLevel, innerBlocks, parentLock } = useSelect(
+		( select ) => {
+			const {
+				getBlockParents,
+				getBlocks,
+				getTemplateLock,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			return {
+				nestingLevel: getBlockParents( clientId )?.length,
+				innerBlocks: getBlocks( clientId ),
+				parentLock: getTemplateLock( getBlockRootClientId( clientId ) ),
+			};
+		},
+		[ clientId ]
+	);
+
 	useNestedSettingsUpdate(
 		clientId,
+		parentLock,
 		allowedBlocks,
 		prioritizedInserterBlocks,
 		defaultBlock,
@@ -121,18 +139,12 @@ function UncontrolledInnerBlocks( props ) {
 
 	useInnerBlockTemplateSync(
 		clientId,
+		innerBlocks,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection
 	);
 
-	const nestingLevel = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlockParents( clientId )
-				?.length;
-		},
-		[ clientId ]
-	);
 	if ( nestingLevel >= MAX_NESTING_DEPTH ) {
 		return <WarningMaxDepthExceeded clientId={ clientId } />;
 	}

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../../store';
  * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
+ * @param {Array}   innerBlocks
  * @param {Object}  template                       The template to match.
  * @param {string}  templateLock                   The template lock state for the inner blocks. For
  *                                                 example, if the template lock is set to "all",
@@ -36,10 +37,14 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function useInnerBlockTemplateSync(
 	clientId,
+	innerBlocks,
 	template,
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
+	// Instead of adding a useSelect mapping here, please add to the useSelect
+	// mapping in InnerBlocks! Every subscription impacts performance.
+
 	const {
 		getBlocks,
 		getSelectedBlocksInitialCaretPosition,
@@ -48,13 +53,6 @@ export default function useInnerBlockTemplateSync(
 	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	const { innerBlocks } = useSelect(
-		( select ) => ( {
-			innerBlocks: select( blockEditorStore ).getBlocks( clientId ),
-		} ),
-		[ clientId ]
-	);
-
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );