@wordpress/block-editor 10.3.0 → 10.4.0

package/src/hooks/margin.js

@@ -29,7 +29,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
 import SpacingSizesControl from '../components/spacing-sizes-control';
-import { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 
 /**
  * Determines if there is margin support.
@@ -101,6 +101,8 @@ export function MarginEdit( props ) {
 		name: blockName,
 		attributes: { style },
 		setAttributes,
+		onMouseOver,
+		onMouseOut,
 	} = props;
 
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -148,6 +150,8 @@ export function MarginEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 				{ spacingSizes?.length > 0 && (
@@ -159,6 +163,8 @@ export function MarginEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ false }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 			</>
@@ -167,22 +173,21 @@ export function MarginEdit( props ) {
 	} );
 }
 
-export function MarginVisualizer( { clientId, attributes } ) {
+export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 
 	const style = useMemo( () => {
 		const marginTop = margin?.top
-			? getCustomValueFromPreset( margin?.top, spacingSizes )
+			? getSpacingPresetCssVar( margin?.top )
 			: 0;
 		const marginRight = margin?.right
-			? getCustomValueFromPreset( margin?.right, spacingSizes )
+			? getSpacingPresetCssVar( margin?.right )
 			: 0;
 		const marginBottom = margin?.bottom
-			? getCustomValueFromPreset( margin?.bottom, spacingSizes )
+			? getSpacingPresetCssVar( margin?.bottom )
 			: 0;
 		const marginLeft = margin?.left
-			? getCustomValueFromPreset( margin?.left, spacingSizes )
+			? getSpacingPresetCssVar( margin?.left )
 			: 0;
 
 		return {
@@ -190,10 +195,10 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			borderRightWidth: marginRight,
 			borderBottomWidth: marginBottom,
 			borderLeftWidth: marginLeft,
-			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,
+			top: marginTop ? `calc(${ marginTop } * -1)` : 0,
+			right: marginRight ? `calc(${ marginRight } * -1)` : 0,
+			bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,
+			left: marginLeft ? `calc(${ marginLeft } * -1)` : 0,
 		};
 	}, [ margin ] );
 
@@ -208,7 +213,7 @@ export function MarginVisualizer( { clientId, attributes } ) {
 	};
 
 	useEffect( () => {
-		if ( ! isShallowEqual( margin, valueRef.current ) ) {
+		if ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {
 			setIsActive( true );
 			valueRef.current = margin;
 
@@ -220,9 +225,9 @@ export function MarginVisualizer( { clientId, attributes } ) {
 		}
 
 		return () => clearTimer();
-	}, [ margin ] );
+	}, [ margin, forceShow ] );
 
-	if ( ! isActive ) {
+	if ( ! isActive && ! forceShow ) {
 		return null;
 	}
 

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,7 +202,7 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 	};
 
 	useEffect( () => {
-		if ( ! isShallowEqual( padding, valueRef.current ) ) {
+		if ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {
 			setIsActive( true );
 			valueRef.current = padding;
 
@@ -211,9 +214,9 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 		}
 
 		return () => clearTimer();
-	}, [ padding ] );
+	}, [ padding, forceShow ] );
 
-	if ( ! isActive ) {
+	if ( ! isActive && ! forceShow ) {
 		return null;
 	}
 

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/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

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

package/src/store/actions.js

@@ -1712,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 ),
 	];
 }

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, map, reduce, some, find, filter, orderBy } from 'lodash';
+import { map, reduce, find, filter, orderBy } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -319,12 +319,13 @@ export const __experimentalGetGlobalBlocksByName = createSelector(
  */
 export const getBlocksByClientId = createSelector(
 	( state, clientIds ) =>
-		map( castArray( clientIds ), ( clientId ) =>
-			getBlock( state, clientId )
+		map(
+			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
+			( clientId ) => getBlock( state, clientId )
 		),
 	( state, clientIds ) =>
 		map(
-			castArray( clientIds ),
+			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
 			( clientId ) => state.blocks.tree[ clientId ]
 		)
 );
@@ -694,10 +695,7 @@ export const getSelectedBlockClientIds = createSelector(
 	( state ) => {
 		const { selectionStart, selectionEnd } = state.selection;
 
-		if (
-			selectionStart.clientId === undefined ||
-			selectionEnd.clientId === undefined
-		) {
+		if ( ! selectionStart.clientId || ! selectionEnd.clientId ) {
 			return EMPTY_ARRAY;
 		}
 
@@ -712,6 +710,7 @@ export const getSelectedBlockClientIds = createSelector(
 			state,
 			selectionStart.clientId
 		);
+
 		if ( rootClientId === null ) {
 			return EMPTY_ARRAY;
 		}
@@ -1183,8 +1182,7 @@ export function isBlockSelected( state, clientId ) {
  * @return {boolean} Whether the block as an inner block selected
  */
 export function hasSelectedInnerBlock( state, clientId, deep = false ) {
-	return some(
-		getBlockOrder( state, clientId ),
+	return getBlockOrder( state, clientId ).some(
 		( innerClientId ) =>
 			isBlockSelected( state, innerClientId ) ||
 			isBlockMultiSelected( state, innerClientId ) ||
@@ -1332,7 +1330,7 @@ export function isAncestorBeingDragged( state, clientId ) {
 	}
 
 	const parents = getBlockParents( state, clientId );
-	return some( parents, ( parentClientId ) =>
+	return parents.some( ( parentClientId ) =>
 		isBlockBeingDragged( state, parentClientId )
 	);
 }
@@ -1531,7 +1529,7 @@ const canInsertBlockTypeUnmemoized = (
 			...getBlockParents( state, rootClientId ),
 		];
 
-		hasBlockAllowedAncestor = some( ancestors, ( ancestorClientId ) =>
+		hasBlockAllowedAncestor = ancestors.some( ( ancestorClientId ) =>
 			checkAllowList(
 				blockAllowedAncestorBlocks,
 				getBlockName( state, ancestorClientId )
@@ -1845,13 +1843,10 @@ const buildBlockTypeItem =
 
 		let isDisabled = false;
 		if ( ! hasBlockSupport( blockType.name, 'multiple', true ) ) {
-			isDisabled = some(
-				getBlocksByClientId(
-					state,
-					getClientIdsWithDescendants( state )
-				),
-				{ name: blockType.name }
-			);
+			isDisabled = getBlocksByClientId(
+				state,
+				getClientIdsWithDescendants( state )
+			).some( ( { name } ) => name === blockType.name );
 		}
 
 		const { time, count = 0 } = getInsertUsage( state, id ) || {};
@@ -2065,7 +2060,7 @@ export const getInserterItems = createSelector(
  */
 export const getBlockTransformItems = createSelector(
 	( state, blocks, rootClientId = null ) => {
-		const normalizedBlocks = castArray( blocks );
+		const normalizedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
 		const [ sourceBlock ] = normalizedBlocks;
 		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
 			buildScope: 'transform',
@@ -2129,7 +2124,7 @@ export const getBlockTransformItems = createSelector(
  */
 export const hasInserterItems = createSelector(
 	( state, rootClientId = null ) => {
-		const hasBlockType = some( getBlockTypes(), ( blockType ) =>
+		const hasBlockType = getBlockTypes().some( ( blockType ) =>
 			canIncludeBlockTypeInInserter( state, blockType, rootClientId )
 		);
 		if ( hasBlockType ) {
@@ -2690,6 +2685,11 @@ export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => [ state.blockVisibility ]
 );
 
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ */
 export const __unstableGetContentLockingParent = createSelector(
 	( state, clientId ) => {
 		let current = clientId;
@@ -2705,6 +2705,13 @@ export const __unstableGetContentLockingParent = createSelector(
 	( state ) => [ state.blocks.parents, state.blockListSettings ]
 );
 
+/**
+ * DO-NOT-USE in production.
+ * This selector 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 {Object} state Global application state.
+ */
 export function __unstableGetTemporarilyEditingAsBlocks( state ) {
 	return state.temporarilyEditingAsBlocks;
 }

package/src/store/test/selectors.js

@@ -3995,7 +3995,7 @@ describe( 'selectors', () => {
 } );
 
 describe( 'getInserterItems with core blocks prioritization', () => {
-	// This test is in a seperate `describe` because all other tests register
+	// This test is in a separate `describe` because all other tests register
 	// some test `core` blocks and interfere with the purpose of the specific test.
 	// This tests the functionality to ensure core blocks are prioritized in the
 	// returned results, because third party blocks can be registered earlier than