@wordpress/block-editor 10.3.0 → 10.5.0

package/src/hooks/padding.js

@@ -29,10 +29,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
 import SpacingSizesControl from '../components/spacing-sizes-control';
-import {
-	getSpacingPresetCssVar,
-	isValueSpacingPreset,
-} from '../components/spacing-sizes-control/utils';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 /**
  * Determines if there is padding support.
  *
@@ -103,6 +100,8 @@ export function PaddingEdit( props ) {
 		name: blockName,
 		attributes: { style },
 		setAttributes,
+		onMouseOver,
+		onMouseOut,
 	} = props;
 
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -150,6 +149,8 @@ export function PaddingEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 				{ spacingSizes?.length > 0 && (
@@ -161,6 +162,8 @@ export function PaddingEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 			</>
@@ -169,22 +172,22 @@ export function PaddingEdit( props ) {
 	} );
 }
 
-export function PaddingVisualizer( { clientId, attributes } ) {
+export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 	const padding = attributes?.style?.spacing?.padding;
 	const style = useMemo( () => {
 		return {
-			borderTopWidth: isValueSpacingPreset( padding?.top )
+			borderTopWidth: padding?.top
 				? getSpacingPresetCssVar( padding?.top )
-				: padding?.top,
-			borderRightWidth: isValueSpacingPreset( padding?.right )
+				: 0,
+			borderRightWidth: padding?.right
 				? getSpacingPresetCssVar( padding?.right )
-				: padding?.right,
-			borderBottomWidth: isValueSpacingPreset( padding?.bottom )
+				: 0,
+			borderBottomWidth: padding?.bottom
 				? getSpacingPresetCssVar( padding?.bottom )
-				: padding?.bottom,
-			borderLeftWidth: isValueSpacingPreset( padding?.left )
+				: 0,
+			borderLeftWidth: padding?.left
 				? getSpacingPresetCssVar( padding?.left )
-				: padding?.left,
+				: 0,
 		};
 	}, [ padding ] );
 
@@ -199,21 +202,22 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 	};
 
 	useEffect( () => {
-		if ( ! isShallowEqual( padding, valueRef.current ) ) {
+		if ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {
 			setIsActive( true );
 			valueRef.current = padding;
 
-			clearTimer();
-
 			timeoutRef.current = setTimeout( () => {
 				setIsActive( false );
 			}, 400 );
 		}
 
-		return () => clearTimer();
-	}, [ padding ] );
+		return () => {
+			setIsActive( false );
+			clearTimer();
+		};
+	}, [ padding, forceShow ] );
 
-	if ( ! isActive ) {
+	if ( ! isActive && ! forceShow ) {
 		return null;
 	}
 

package/src/hooks/style.js

@@ -27,7 +27,11 @@ import {
 	TYPOGRAPHY_SUPPORT_KEY,
 	TYPOGRAPHY_SUPPORT_KEYS,
 } from './typography';
-import { SPACING_SUPPORT_KEY, DimensionsPanel } from './dimensions';
+import {
+	DIMENSIONS_SUPPORT_KEY,
+	SPACING_SUPPORT_KEY,
+	DimensionsPanel,
+} from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 import { shouldSkipSerialization } from './utils';
 
@@ -35,6 +39,7 @@ const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
+	DIMENSIONS_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
 ];
 
@@ -98,8 +103,11 @@ const skipSerializationPathsEdit = {
 	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
+	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		DIMENSIONS_SUPPORT_KEY,
+	],
 	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		'spacing',
+		SPACING_SUPPORT_KEY,
 	],
 };
 

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

@@ -28,6 +28,9 @@ describe( 'getInlineStyles', () => {
 					style: 'dotted',
 					color: '#21759b',
 				},
+				dimensions: {
+					minHeight: '50vh',
+				},
 				spacing: {
 					blockGap: '1em',
 					padding: { top: '10px' },
@@ -44,6 +47,7 @@ describe( 'getInlineStyles', () => {
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',
+			minHeight: '50vh',
 			paddingTop: '10px',
 		} );
 	} );

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

@@ -42,7 +42,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 			style: {
 				letterSpacing: '22px',
 				fontSize:
-					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );

package/src/hooks/utils.js

@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import { pickBy, isEmpty, mapValues, get, setWith, clone } 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;
 };

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

@@ -10,7 +10,14 @@ import {
 	arrowRight,
 	arrowDown,
 } from '@wordpress/icons';
-import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
+import {
+	Button,
+	ToggleControl,
+	Flex,
+	FlexItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -257,7 +264,7 @@ function FlexLayoutJustifyContentControl( {
 				onChange={ onJustificationChange }
 				popoverProps={ {
 					position: 'bottom right',
-					isAlternate: true,
+					variant: 'toolbar',
 				} }
 			/>
 		);
@@ -289,22 +296,23 @@ function FlexLayoutJustifyContentControl( {
 	}
 
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-justification-controls">
-			<legend>{ __( 'Justification' ) }</legend>
-			<div>
-				{ justificationOptions.map( ( { value, icon, label } ) => {
-					return (
-						<Button
-							key={ value }
-							label={ label }
-							icon={ icon }
-							isPressed={ justifyContent === value }
-							onClick={ () => onJustificationChange( value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			label={ __( 'Justification' ) }
+			value={ justifyContent }
+			onChange={ onJustificationChange }
+			className="block-editor-hooks__flex-layout-justification-controls"
+		>
+			{ justificationOptions.map( ( { value, icon, label } ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ value }
+						value={ value }
+						icon={ icon }
+						label={ label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
 
@@ -327,30 +335,27 @@ function FlexWrapControl( { layout, onChange } ) {
 function OrientationControl( { layout, onChange } ) {
 	const { orientation = 'horizontal' } = layout;
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-orientation-controls">
-			<legend>{ __( 'Orientation' ) }</legend>
-			<Button
-				label={ __( 'Horizontal' ) }
+		<ToggleGroupControl
+			className="block-editor-hooks__flex-layout-orientation-controls"
+			label={ __( 'Orientation' ) }
+			value={ orientation }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					orientation: value,
+				} )
+			}
+		>
+			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }
-				isPressed={ orientation === 'horizontal' }
-				onClick={ () =>
-					onChange( {
-						...layout,
-						orientation: 'horizontal',
-					} )
-				}
+				value={ 'horizontal' }
+				label={ __( 'Horizontal' ) }
 			/>
-			<Button
-				label={ __( 'Vertical' ) }
+			<ToggleGroupControlOptionIcon
 				icon={ arrowDown }
-				isPressed={ orientation === 'vertical' }
-				onClick={ () =>
-					onChange( {
-						...layout,
-						orientation: 'vertical',
-					} )
-				}
+				value={ 'vertical' }
+				label={ __( 'Vertical' ) }
 			/>
-		</fieldset>
+		</ToggleGroupControl>
 	);
 }

package/src/store/actions.js

@@ -1263,6 +1263,28 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalHideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalShowBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *
@@ -1712,6 +1734,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 ),
 	];
 }