@wordpress/block-editor 10.2.0 → 10.4.0

package/src/hooks/test/align.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import renderer, { act } from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,13 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockControls from '../../components/block-controls';
+import BlockEdit from '../../components/block-edit';
 import BlockEditorProvider from '../../components/provider';
 import {
 	getValidAlignments,
@@ -31,6 +34,7 @@ describe( 'align', () => {
 		save: noop,
 		category: 'text',
 		title: 'block title',
+		edit: ( { children } ) => <>{ children }</>,
 	};
 
 	afterEach( () => {
@@ -154,6 +158,12 @@ describe( 'align', () => {
 	} );
 
 	describe( 'withToolbarControls', () => {
+		const componentProps = {
+			name: 'core/foo',
+			attributes: {},
+			isSelected: true,
+		};
+
 		it( 'should do nothing if no valid alignments', () => {
 			registerBlockType( 'core/foo', blockSettings );
 
@@ -161,15 +171,21 @@ describe( 'align', () => {
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 
-			const wrapper = renderer.create(
-				<EnhancedComponent
-					name="core/foo"
-					attributes={ {} }
-					isSelected
-				/>
+			render(
+				<SlotFillProvider>
+					<BlockEdit { ...componentProps }>
+						<EnhancedComponent { ...componentProps } />
+					</BlockEdit>
+					<BlockControls.Slot group="block" />
+				</SlotFillProvider>
 			);
-			// When there's only one child, `rendered` in the tree is an object not an array.
-			expect( wrapper.toTree().rendered ).toBeInstanceOf( Object );
+
+			expect(
+				screen.queryByRole( 'button', {
+					name: 'Align',
+					expanded: false,
+				} )
+			).not.toBeInTheDocument();
 		} );
 
 		it( 'should render toolbar controls if valid alignments', () => {
@@ -185,14 +201,21 @@ describe( 'align', () => {
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 
-			const wrapper = renderer.create(
-				<EnhancedComponent
-					name="core/foo"
-					attributes={ {} }
-					isSelected
-				/>
+			render(
+				<SlotFillProvider>
+					<BlockEdit { ...componentProps }>
+						<EnhancedComponent { ...componentProps } />
+					</BlockEdit>
+					<BlockControls.Slot group="block" />
+				</SlotFillProvider>
 			);
-			expect( wrapper.toTree().rendered ).toHaveLength( 2 );
+
+			expect(
+				screen.getAllByRole( 'button', {
+					name: 'Align',
+					expanded: false,
+				} )
+			).toHaveLength( 2 );
 		} );
 	} );
 
@@ -207,28 +230,27 @@ describe( 'align', () => {
 			} );
 
 			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<div { ...wrapperProps } />
+				<button { ...wrapperProps } />
 			) );
 
-			let wrapper;
-			act( () => {
-				wrapper = renderer.create(
-					<BlockEditorProvider
-						settings={ { alignWide: true, supportsLayout: false } }
-						value={ [] }
-					>
-						<EnhancedComponent
-							attributes={ {
-								align: 'wide',
-							} }
-							name="core/foo"
-						/>
-					</BlockEditorProvider>
-				);
-			} );
-			expect( wrapper.root.findByType( 'div' ).props ).toEqual( {
-				'data-align': 'wide',
-			} );
+			render(
+				<BlockEditorProvider
+					settings={ { alignWide: true, supportsLayout: false } }
+					value={ [] }
+				>
+					<EnhancedComponent
+						attributes={ {
+							align: 'wide',
+						} }
+						name="core/foo"
+					/>
+				</BlockEditorProvider>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'data-align',
+				'wide'
+			);
 		} );
 
 		it( 'should not render wide/full wrapper props if wide controls are not enabled', () => {
@@ -241,26 +263,27 @@ describe( 'align', () => {
 			} );
 
 			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<div { ...wrapperProps } />
+				<button { ...wrapperProps } />
 			) );
 
-			let wrapper;
-			act( () => {
-				wrapper = renderer.create(
-					<BlockEditorProvider
-						settings={ { alignWide: false } }
-						value={ [] }
-					>
-						<EnhancedComponent
-							name="core/foo"
-							attributes={ {
-								align: 'wide',
-							} }
-						/>
-					</BlockEditorProvider>
-				);
-			} );
-			expect( wrapper.root.findByType( 'div' ).props ).toEqual( {} );
+			render(
+				<BlockEditorProvider
+					settings={ { alignWide: false } }
+					value={ [] }
+				>
+					<EnhancedComponent
+						name="core/foo"
+						attributes={ {
+							align: 'wide',
+						} }
+					/>
+				</BlockEditorProvider>
+			);
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'data-align',
+				'wide'
+			);
 		} );
 
 		it( 'should not render invalid align', () => {
@@ -273,26 +296,27 @@ describe( 'align', () => {
 			} );
 
 			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<div { ...wrapperProps } />
+				<button { ...wrapperProps } />
 			) );
 
-			let wrapper;
-			act( () => {
-				wrapper = renderer.create(
-					<BlockEditorProvider
-						settings={ { alignWide: true } }
-						value={ [] }
-					>
-						<EnhancedComponent
-							name="core/foo"
-							attributes={ {
-								align: 'wide',
-							} }
-						/>
-					</BlockEditorProvider>
-				);
-			} );
-			expect( wrapper.root.findByType( 'div' ).props ).toEqual( {} );
+			render(
+				<BlockEditorProvider
+					settings={ { alignWide: true } }
+					value={ [] }
+				>
+					<EnhancedComponent
+						name="core/foo"
+						attributes={ {
+							align: 'wide',
+						} }
+					/>
+				</BlockEditorProvider>
+			);
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'data-align',
+				'wide'
+			);
 		} );
 	} );
 

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,15 +1,13 @@
 /**
  * External dependencies
  */
-import { pickBy, isEmpty, mapValues, get, setWith, clone, every } from 'lodash';
+import { isEmpty, mapValues, get, setWith, clone } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
 
-const identity = ( x ) => x;
-
 /**
  * Removed falsy values from nested object.
  *
@@ -24,9 +22,10 @@ export const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
@@ -44,7 +43,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/layouts/constrained.js

@@ -116,7 +116,6 @@ export default {
 					) }
 				</p>
 				<ToggleGroupControl
-					__experimentalIsBorderless
 					label={ __( 'Justification' ) }
 					value={ justifyContent }
 					onChange={ onJustificationChange }

package/src/layouts/flex.js

@@ -257,7 +257,7 @@ function FlexLayoutJustifyContentControl( {
 				onChange={ onJustificationChange }
 				popoverProps={ {
 					position: 'bottom right',
-					isAlternate: true,
+					variant: 'toolbar',
 				} }
 			/>
 		);

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.
@@ -1704,6 +1712,10 @@ export function setBlockVisibility( updates ) {
 /**
  * Action that sets whether a block is being temporaritly edited as blocks.
  *
+ * DO-NOT-USE in production.
+ * This action is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
  * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
  */
 export function __unstableSetTemporarilyEditingAsBlocks(

package/src/store/array.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * Insert one or multiple elements into a given position of an array.
  *
@@ -15,7 +10,7 @@ import { castArray } from 'lodash';
 export function insertAt( array, elements, index ) {
 	return [
 		...array.slice( 0, index ),
-		...castArray( elements ),
+		...( Array.isArray( elements ) ? elements : [ elements ] ),
 		...array.slice( index ),
 	];
 }