@wordpress/block-editor 10.2.0 → 10.3.0

package/src/hooks/align.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,9 +23,11 @@ addFilter(
 			settings.supports = {
 				...settings.supports,
 				align: Array.isArray( blockAlign )
-					? without(
-							blockAlign,
-							...Object.values( WIDE_ALIGNMENTS.alignments )
+					? blockAlign.filter(
+							( alignment ) =>
+								! Object.values(
+									WIDE_ALIGNMENTS.alignments
+								).includes( alignment )
 					  )
 					: blockAlign,
 				alignWide: false,

package/src/hooks/font-size.js

@@ -5,6 +5,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ import {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 	FontSizePicker,
+	getComputedFluidTypographyValue,
 } from '../components/font-sizes';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import {
@@ -22,6 +24,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import useSetting from '../components/use-setting';
+import { store as blockEditorStore } from '../store';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -282,6 +285,69 @@ export function addTransforms( result, source, index, results ) {
 	);
 }
 
+/**
+ * Allow custom font sizes to appear fluid when fluid typography is enabled at
+ * the theme level.
+ *
+ * Adds a custom getEditWrapperProps() callback to all block types that support
+ * font sizes. Then, if fluid typography is enabled, this callback will swap any
+ * custom font size in style.fontSize with a fluid font size (i.e. one that uses
+ * clamp()).
+ *
+ * It's important that this hook runs after 'core/style/addEditProps' sets
+ * style.fontSize as otherwise fontSize will be overwritten.
+ *
+ * @param {Object} blockType Block settings object.
+ */
+function addEditPropsForFluidCustomFontSizes( blockType ) {
+	if (
+		! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||
+		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
+	) {
+		return blockType;
+	}
+
+	const existingGetEditWrapperProps = blockType.getEditWrapperProps;
+
+	blockType.getEditWrapperProps = ( attributes ) => {
+		const wrapperProps = existingGetEditWrapperProps
+			? existingGetEditWrapperProps( attributes )
+			: {};
+
+		const fontSize = wrapperProps?.style?.fontSize;
+
+		// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
+		// or even useSelect( blockEditorStore ). We can't do either here
+		// because getEditWrapperProps is a plain JavaScript function called by
+		// BlockListBlock and not a React component rendered within
+		// BlockListContext.Provider. If we set fontSize using editor.
+		// BlockListBlock instead of using getEditWrapperProps then the value is
+		// clobbered when the core/style/addEditProps filter runs.
+		const isFluidTypographyEnabled =
+			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.typography?.fluid;
+
+		const newFontSize =
+			fontSize && isFluidTypographyEnabled
+				? getComputedFluidTypographyValue( { fontSize } )
+				: null;
+
+		if ( newFontSize === null ) {
+			return wrapperProps;
+		}
+
+		return {
+			...wrapperProps,
+			style: {
+				...wrapperProps?.style,
+				fontSize: newFontSize,
+			},
+		};
+	};
+
+	return blockType;
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',
@@ -307,3 +373,12 @@ addFilter(
 	'core/font-size/addTransforms',
 	addTransforms
 );
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/font-size/addEditPropsForFluidCustomFontSizes',
+	addEditPropsForFluidCustomFontSizes,
+	// Run after 'core/style/addEditProps' so that the style object has already
+	// been translated into inline CSS.
+	11
+);

package/src/hooks/margin.js

@@ -190,10 +190,10 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			borderRightWidth: marginRight,
 			borderBottomWidth: marginBottom,
 			borderLeftWidth: marginLeft,
-			top: marginTop !== 0 ? `-${ marginTop }` : 0,
-			right: marginRight !== 0 ? `-${ marginRight }` : 0,
-			bottom: marginBottom !== 0 ? `-${ marginBottom }` : 0,
-			left: marginLeft !== 0 ? `-${ marginLeft }` : 0,
+			top: marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0,
+			right: marginRight !== 0 ? `calc(${ marginRight } * -1)` : 0,
+			bottom: marginBottom !== 0 ? `calc(${ marginBottom } * -1)` : 0,
+			left: marginLeft !== 0 ? `calc(${ marginLeft } * -1)` : 0,
 		};
 	}, [ margin ] );
 
@@ -231,6 +231,7 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ margin }
+			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
 		</BlockPopover>

package/src/hooks/padding.js

@@ -222,6 +222,7 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ padding }
+			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
 		</BlockPopover>

package/src/hooks/style.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -134,6 +133,126 @@ const skipSerializationPathsSave = {
  */
 const renamedFeatures = { gradients: 'gradient' };
 
+/**
+ * A utility function used to remove one or more paths from a style object.
+ * Works in a way similar to Lodash's `omit()`. See unit tests and examples below.
+ *
+ * It supports a single string path:
+ *
+ * ```
+ * omitStyle( { color: 'red' }, 'color' ); // {}
+ * ```
+ *
+ * or an array of paths:
+ *
+ * ```
+ * omitStyle( { color: 'red', background: '#fff' }, [ 'color', 'background' ] ); // {}
+ * ```
+ *
+ * It also allows you to specify paths at multiple levels in a string.
+ *
+ * ```
+ * omitStyle( { typography: { textDecoration: 'underline' } }, 'typography.textDecoration' ); // {}
+ * ```
+ *
+ * You can remove multiple paths at the same time:
+ *
+ * ```
+ * omitStyle(
+ * 		{
+ * 			typography: {
+ * 				textDecoration: 'underline',
+ * 				textTransform: 'uppercase',
+ * 			}
+ *		},
+ *		[
+ * 			'typography.textDecoration',
+ * 			'typography.textTransform',
+ *		]
+ * );
+ * // {}
+ * ```
+ *
+ * You can also specify nested paths as arrays:
+ *
+ * ```
+ * omitStyle(
+ * 		{
+ * 			typography: {
+ * 				textDecoration: 'underline',
+ * 				textTransform: 'uppercase',
+ * 			}
+ *		},
+ *		[
+ * 			[ 'typography', 'textDecoration' ],
+ * 			[ 'typography', 'textTransform' ],
+ *		]
+ * );
+ * // {}
+ * ```
+ *
+ * With regards to nesting of styles, infinite depth is supported:
+ *
+ * ```
+ * omitStyle(
+ * 		{
+ * 			border: {
+ * 				radius: {
+ * 					topLeft: '10px',
+ * 					topRight: '0.5rem',
+ * 				}
+ * 			}
+ *		},
+ *		[
+ * 			[ 'border', 'radius', 'topRight' ],
+ *		]
+ * );
+ * // { border: { radius: { topLeft: '10px' } } }
+ * ```
+ *
+ * The third argument, `preserveReference`, defines how to treat the input style object.
+ * It is mostly necessary to properly handle mutation when recursively handling the style object.
+ * Defaulting to `false`, this will always create a new object, avoiding to mutate `style`.
+ * However, when recursing, we change that value to `true` in order to work with a single copy
+ * of the original style object.
+ *
+ * @see https://lodash.com/docs/4.17.15#omit
+ *
+ * @param {Object}       style             Styles object.
+ * @param {Array|string} paths             Paths to remove.
+ * @param {boolean}      preserveReference True to mutate the `style` object, false otherwise.
+ * @return {Object}      Styles object with the specified paths removed.
+ */
+export function omitStyle( style, paths, preserveReference = false ) {
+	if ( ! style ) {
+		return style;
+	}
+
+	let newStyle = style;
+	if ( ! preserveReference ) {
+		newStyle = JSON.parse( JSON.stringify( style ) );
+	}
+
+	if ( ! Array.isArray( paths ) ) {
+		paths = [ paths ];
+	}
+
+	paths.forEach( ( path ) => {
+		if ( ! Array.isArray( path ) ) {
+			path = path.split( '.' );
+		}
+
+		if ( path.length > 1 ) {
+			const [ firstSubpath, ...restPath ] = path;
+			omitStyle( newStyle[ firstSubpath ], [ restPath ], true );
+		} else if ( path.length === 1 ) {
+			delete newStyle[ path[ 0 ] ];
+		}
+	} );
+
+	return newStyle;
+}
+
 /**
  * Override props assigned to save component to inject the CSS variables definition.
  *
@@ -159,13 +278,13 @@ export function addSaveProps(
 		const skipSerialization = getBlockSupport( blockType, indicator );
 
 		if ( skipSerialization === true ) {
-			style = omit( style, path );
+			style = omitStyle( style, path );
 		}
 
 		if ( Array.isArray( skipSerialization ) ) {
 			skipSerialization.forEach( ( featureName ) => {
 				const feature = renamedFeatures[ featureName ] || featureName;
-				style = omit( style, [ [ ...path, feature ] ] );
+				style = omitStyle( style, [ [ ...path, feature ] ] );
 			} );
 		}
 	} );

package/src/hooks/test/style.js

@@ -6,7 +6,7 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import { getInlineStyles } from '../style';
+import { getInlineStyles, omitStyle } from '../style';
 
 describe( 'getInlineStyles', () => {
 	it( 'should return an empty object when called with undefined', () => {
@@ -202,3 +202,208 @@ describe( 'addSaveProps', () => {
 		} );
 	} );
 } );
+
+describe( 'omitStyle', () => {
+	it( 'should remove a single path', () => {
+		const style = { color: '#d92828', padding: '10px' };
+		const path = 'color';
+		const expected = { padding: '10px' };
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should remove multiple paths', () => {
+		const style = { color: '#d92828', padding: '10px', background: 'red' };
+		const path = [ 'color', 'background' ];
+		const expected = { padding: '10px' };
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should remove nested paths when specified as a string', () => {
+		const style = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {
+				textDecoration: 'underline',
+				textTransform: 'uppercase',
+			},
+		};
+		const path = 'typography.textTransform';
+		const expected = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {
+				textDecoration: 'underline',
+			},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should remove nested paths when specified as an array', () => {
+		const style = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {
+				textDecoration: 'underline',
+				textTransform: 'uppercase',
+			},
+		};
+		const path = [ [ 'typography', 'textTransform' ] ];
+		const expected = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {
+				textDecoration: 'underline',
+			},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should remove multiple nested paths', () => {
+		const style = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {
+				textDecoration: 'underline',
+				textTransform: 'uppercase',
+			},
+		};
+		const path = [
+			[ 'typography', 'textTransform' ],
+			'typography.textDecoration',
+		];
+		const expected = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should remove paths with different nesting', () => {
+		const style = {
+			color: {
+				text: '#d92828',
+			},
+			typography: {
+				textDecoration: 'underline',
+				textTransform: 'uppercase',
+			},
+		};
+		const path = [
+			'color',
+			[ 'typography', 'textTransform' ],
+			'typography.textDecoration',
+		];
+		const expected = {
+			typography: {},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should support beyond 2 levels of nesting when passed as a single string', () => {
+		const style = {
+			border: {
+				radius: {
+					topLeft: '10px',
+					topRight: '0.5rem',
+				},
+			},
+		};
+		const path = 'border.radius.topRight';
+		const expected = {
+			border: {
+				radius: {
+					topLeft: '10px',
+				},
+			},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should support beyond 2 levels of nesting when passed as array of strings', () => {
+		const style = {
+			border: {
+				radius: {
+					topLeft: '10px',
+					topRight: '0.5rem',
+				},
+			},
+		};
+		const path = [ 'border.radius.topRight' ];
+		const expected = {
+			border: {
+				radius: {
+					topLeft: '10px',
+				},
+			},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should support beyond 2 levels of nesting when passed as array of arrays', () => {
+		const style = {
+			border: {
+				radius: {
+					topLeft: '10px',
+					topRight: '0.5rem',
+				},
+			},
+		};
+		const path = [ [ 'border', 'radius', 'topRight' ] ];
+		const expected = {
+			border: {
+				radius: {
+					topLeft: '10px',
+				},
+			},
+		};
+
+		expect( omitStyle( style, path ) ).toEqual( expected );
+	} );
+
+	it( 'should ignore a nullish style object', () => {
+		expect( omitStyle( undefined, 'color' ) ).toEqual( undefined );
+		expect( omitStyle( null, 'color' ) ).toEqual( null );
+	} );
+
+	it( 'should ignore a missing object property', () => {
+		const style1 = { typography: {} };
+		expect( omitStyle( style1, 'color' ) ).toEqual( style1 );
+
+		const style2 = { color: { text: '#d92828' } };
+		expect( omitStyle( style2, 'color.something' ) ).toEqual( style2 );
+
+		const style3 = {
+			border: {
+				radius: {
+					topLeft: '10px',
+					topRight: '0.5rem',
+				},
+			},
+		};
+		expect(
+			omitStyle( style3, [ [ 'border', 'radius', 'bottomLeft' ] ] )
+		).toEqual( style3 );
+	} );
+
+	it( 'should ignore an empty array path', () => {
+		const style = { typography: {}, '': 'test' };
+
+		expect( omitStyle( style, [] ) ).toEqual( style );
+		expect( omitStyle( style, [ [] ] ) ).toEqual( style );
+	} );
+} );

package/src/hooks/test/use-typography-props.js

@@ -25,4 +25,26 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					letterSpacing: '22px',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				letterSpacing: '22px',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

package/src/hooks/use-typography-props.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
+import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
 
 // This utility is intended to assist where the serialization of the typography
 // block support is being skipped for a block but the typography related CSS
@@ -18,12 +19,26 @@ import { getFontSizeClass } from '../components/font-sizes';
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}  attributes            Block attributes.
+ * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles( attributes ) {
-	const typographyStyles = attributes?.style?.typography || {};
+export function getTypographyClassesAndStyles(
+	attributes,
+	isFluidFontSizeActive
+) {
+	let typographyStyles = attributes?.style?.typography || {};
+
+	if ( isFluidFontSizeActive ) {
+		typographyStyles = {
+			...typographyStyles,
+			fontSize: getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+			} ),
+		};
+	}
+
 	const style = getInlineStyles( { typography: typographyStyles } );
 	const fontFamilyClassName = !! attributes?.fontFamily
 		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`

package/src/hooks/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { pickBy, isEmpty, mapValues, get, setWith, clone, every } from 'lodash';
+import { pickBy, isEmpty, mapValues, get, setWith, clone } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -44,7 +44,11 @@ export function transformStyles(
 	results
 ) {
 	// If there are no active supports return early.
-	if ( every( activeSupports, ( isActive ) => ! isActive ) ) {
+	if (
+		Object.values( activeSupports ?? {} ).every(
+			( isActive ) => ! isActive
+		)
+	) {
 		return result;
 	}
 	// If the condition verifies we are probably in the presence of a wrapping transform

package/src/store/actions.js

@@ -26,6 +26,8 @@ import {
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
 
+/** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
+
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
@@ -624,10 +626,13 @@ export const insertBlocks =
 /**
  * Action that shows the insertion point.
  *
- * @param {?string} rootClientId      Optional root client ID of block list on
- *                                    which to insert.
- * @param {?number} index             Index at which block should be inserted.
- * @param {Object}  __unstableOptions Whether or not to show an inserter button.
+ * @param    {?string}         rootClientId           Optional root client ID of block list on
+ *                                                    which to insert.
+ * @param    {?number}         index                  Index at which block should be inserted.
+ * @param    {?Object}         __unstableOptions      Additional options.
+ * @property {boolean}         __unstableWithInserter Whether or not to show an inserter button.
+ * @property {WPDropOperation} operation              The operation to perform when applied,
+ *                                                    either 'insert' or 'replace' for now.
  *
  * @return {Object} Action object.
  */
@@ -636,25 +641,28 @@ export function showInsertionPoint(
 	index,
 	__unstableOptions = {}
 ) {
-	const { __unstableWithInserter } = __unstableOptions;
+	const { __unstableWithInserter, operation } = __unstableOptions;
 	return {
 		type: 'SHOW_INSERTION_POINT',
 		rootClientId,
 		index,
 		__unstableWithInserter,
+		operation,
 	};
 }
-
 /**
  * Action that hides the insertion point.
- *
- * @return {Object} Action object.
  */
-export function hideInsertionPoint() {
-	return {
-		type: 'HIDE_INSERTION_POINT',
+export const hideInsertionPoint =
+	() =>
+	( { select, dispatch } ) => {
+		if ( ! select.isBlockInsertionPointVisible() ) {
+			return;
+		}
+		dispatch( {
+			type: 'HIDE_INSERTION_POINT',
+		} );
 	};
-}
 
 /**
  * Action that resets the template validity.