@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

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

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { getTypographyClassesAndStyles } from '../use-typography-props';
+
+describe( 'getTypographyClassesAndStyles', () => {
+	it( 'should return styles and classes', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			fontSize: 'large',
+			style: {
+				typography: {
+					letterSpacing: '22px',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
+			className: 'has-tofu-font-family has-large-font-size',
+			style: {
+				letterSpacing: '22px',
+				fontSize: '2rem',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
+} );

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

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getInlineStyles } from './style';
+import { getFontSizeClass } from '../components/font-sizes';
+
+// 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
+// styles still need to be generated so they can be applied to inner elements.
+
+/**
+ * Provides the CSS class names and inline styles for a block's typography support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Typography block support derived CSS classes & styles.
+ */
+export function getTypographyClassesAndStyles( attributes ) {
+	const typographyStyles = attributes?.style?.typography || {};
+	const style = getInlineStyles( { typography: typographyStyles } );
+	const fontFamilyClassName = !! attributes?.fontFamily
+		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
+		: '';
+
+	const className = classnames(
+		fontFamilyClassName,
+		getFontSizeClass( attributes?.fontSize )
+	);
+
+	return {
+		className,
+		style,
+	};
+}

package/src/hooks/utils.js

@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	pickBy,
-	isEmpty,
-	mapValues,
-	forEach,
-	get,
-	setWith,
-	clone,
-	every,
-} from 'lodash';
+import { pickBy, isEmpty, mapValues, get, setWith, clone, every } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -77,7 +68,7 @@ export function transformStyles(
 		}
 	}
 	let returnBlock = result;
-	forEach( activeSupports, ( isActive, support ) => {
+	Object.entries( activeSupports ).forEach( ( [ support, isActive ] ) => {
 		if ( isActive ) {
 			migrationPaths[ support ].forEach( ( path ) => {
 				const styleValue = get( referenceBlockAttributes, path );

package/src/index.js

@@ -6,6 +6,7 @@ export {
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
 	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
+	getTypographyClassesAndStyles,
 	useColorProps as __experimentalUseColorProps,
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,

package/src/layouts/constrained.js

@@ -2,12 +2,20 @@
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import {
+	Icon,
+	positionCenter,
+	stretchWide,
+	justifyLeft,
+	justifyCenter,
+	justifyRight,
+} from '@wordpress/icons';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
@@ -25,7 +33,30 @@ export default {
 		layout,
 		onChange,
 	} ) {
-		const { wideSize, contentSize } = layout;
+		const { wideSize, contentSize, justifyContent = 'center' } = layout;
+		const onJustificationChange = ( value ) => {
+			onChange( {
+				...layout,
+				justifyContent: value,
+			} );
+		};
+		const justificationOptions = [
+			{
+				value: 'left',
+				icon: justifyLeft,
+				label: __( 'Justify items left' ),
+			},
+			{
+				value: 'center',
+				icon: justifyCenter,
+				label: __( 'Justify items center' ),
+			},
+			{
+				value: 'right',
+				icon: justifyRight,
+				label: __( 'Justify items right' ),
+			},
+		];
 		const units = useCustomUnits( {
 			availableUnits: useSetting( 'spacing.units' ) || [
 				'%',
@@ -35,7 +66,6 @@ export default {
 				'vw',
 			],
 		} );
-
 		return (
 			<>
 				<div className="block-editor-hooks__layout-controls">
@@ -80,28 +110,28 @@ export default {
 						<Icon icon={ stretchWide } />
 					</div>
 				</div>
-				<div className="block-editor-hooks__layout-controls-reset">
-					<Button
-						variant="secondary"
-						isSmall
-						disabled={ ! contentSize && ! wideSize }
-						onClick={ () =>
-							onChange( {
-								contentSize: undefined,
-								wideSize: undefined,
-								inherit: false,
-							} )
-						}
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</div>
-
 				<p className="block-editor-hooks__layout-controls-helptext">
 					{ __(
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
+				<ToggleGroupControl
+					__experimentalIsBorderless
+					label={ __( 'Justification' ) }
+					value={ justifyContent }
+					onChange={ onJustificationChange }
+				>
+					{ justificationOptions.map( ( { value, icon, label } ) => {
+						return (
+							<ToggleGroupControlOptionIcon
+								key={ value }
+								value={ value }
+								icon={ icon }
+								label={ label }
+							/>
+						);
+					} ) }
+				</ToggleGroupControl>
 			</>
 		);
 	},
@@ -116,7 +146,7 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { contentSize, wideSize } = layout;
+		const { contentSize, wideSize, justifyContent } = layout;
 		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
 
 		// If a block's block.json skips serialization for spacing or
@@ -131,6 +161,11 @@ export default {
 			}
 		}
 
+		const marginLeft =
+			justifyContent === 'left' ? '0 !important' : 'auto !important';
+		const marginRight =
+			justifyContent === 'right' ? '0 !important' : 'auto !important';
+
 		let output =
 			!! contentSize || !! wideSize
 				? `
@@ -139,8 +174,8 @@ export default {
 						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
 					) } {
 						max-width: ${ contentSize ?? wideSize };
-						margin-left: auto !important;
-						margin-right: auto !important;
+						margin-left: ${ marginLeft };
+						margin-right: ${ marginRight }t;
 					}
 					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
@@ -151,6 +186,20 @@ export default {
 				`
 				: '';
 
+		if ( justifyContent === 'left' ) {
+			output += `${ appendSelectors(
+				selector,
+				'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+			) }
+			{ margin-left: ${ marginLeft }; }`;
+		} else if ( justifyContent === 'right' ) {
+			output += `${ appendSelectors(
+				selector,
+				'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+			) }
+			{ margin-right: ${ marginRight }; }`;
+		}
+
 		// If there is custom padding, add negative margins for alignfull blocks.
 		if ( style?.spacing?.padding ) {
 			// The style object might be storing a preset so we need to make sure we get a usable value.

package/src/store/actions.js

@@ -1474,25 +1474,52 @@ export const __unstableMarkAutomaticChange =
 /**
  * Action that enables or disables the navigation mode.
  *
- * @param {string} isNavigationMode Enable/Disable navigation mode.
+ * @param {boolean} isNavigationMode Enable/Disable navigation mode.
  */
 export const setNavigationMode =
 	( isNavigationMode = true ) =>
 	( { dispatch } ) => {
-		dispatch( { type: 'SET_NAVIGATION_MODE', isNavigationMode } );
+		dispatch.__unstableSetEditorMode(
+			isNavigationMode ? 'navigation' : 'edit'
+		);
+	};
+
+/**
+ * Action that sets the editor mode
+ *
+ * @param {string} mode Editor mode
+ */
+export const __unstableSetEditorMode =
+	( mode ) =>
+	( { dispatch, select } ) => {
+		// When switching to zoom-out mode, we need to select the root block
+		if ( mode === 'zoom-out' ) {
+			const firstSelectedClientId = select.getBlockSelectionStart();
+			if ( firstSelectedClientId ) {
+				dispatch.selectBlock(
+					select.getBlockHierarchyRootClientId(
+						firstSelectedClientId
+					)
+				);
+			}
+		}
 
-		if ( isNavigationMode ) {
+		dispatch( { type: 'SET_EDITOR_MODE', mode } );
+
+		if ( mode === 'navigation' ) {
 			speak(
 				__(
 					'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
 				)
 			);
-		} else {
+		} else if ( mode === 'edit' ) {
 			speak(
 				__(
 					'You are currently in edit mode. To return to the navigation mode, press Escape.'
 				)
 			);
+		} else if ( mode === 'zoom-out' ) {
+			speak( __( 'You are currently in zoom-out mode.' ) );
 		}
 	};
 
@@ -1673,3 +1700,17 @@ export function setBlockVisibility( updates ) {
 		updates,
 	};
 }
+
+/**
+ * Action that sets whether a block is being temporaritly edited as blocks.
+ *
+ * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
+ */
+export function __unstableSetTemporarilyEditingAsBlocks(
+	temporarilyEditingAsBlocks
+) {
+	return {
+		type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
+		temporarilyEditingAsBlocks,
+	};
+}

package/src/store/reducer.js

@@ -4,8 +4,6 @@
 import {
 	flow,
 	reduce,
-	first,
-	last,
 	omit,
 	without,
 	mapValues,
@@ -1004,13 +1002,10 @@ export const blocks = flow(
 
 			case 'MOVE_BLOCKS_UP': {
 				const { clientIds, rootClientId = '' } = action;
-				const firstClientId = first( clientIds );
+				const firstClientId = clientIds[ 0 ];
 				const subState = state[ rootClientId ];
 
-				if (
-					! subState.length ||
-					firstClientId === first( subState )
-				) {
+				if ( ! subState.length || firstClientId === subState[ 0 ] ) {
 					return state;
 				}
 
@@ -1029,11 +1024,14 @@ export const blocks = flow(
 
 			case 'MOVE_BLOCKS_DOWN': {
 				const { clientIds, rootClientId = '' } = action;
-				const firstClientId = first( clientIds );
-				const lastClientId = last( clientIds );
+				const firstClientId = clientIds[ 0 ];
+				const lastClientId = clientIds[ clientIds.length - 1 ];
 				const subState = state[ rootClientId ];
 
-				if ( ! subState.length || lastClientId === last( subState ) ) {
+				if (
+					! subState.length ||
+					lastClientId === subState[ subState.length - 1 ]
+				) {
 					return state;
 				}
 
@@ -1610,21 +1608,21 @@ export const blockListSettings = ( state = {}, action ) => {
 };
 
 /**
- * Reducer returning whether the navigation mode is enabled or not.
+ * Reducer returning which mode is enabled.
  *
  * @param {string} state  Current state.
  * @param {Object} action Dispatched action.
  *
  * @return {string} Updated state.
  */
-export function isNavigationMode( state = false, action ) {
-	// Let inserting block always trigger Edit mode.
-	if ( action.type === 'INSERT_BLOCKS' ) {
-		return false;
+export function editorMode( state = 'edit', action ) {
+	// Let inserting block in navigation mode always trigger Edit mode.
+	if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
+		return 'edit';
 	}
 
-	if ( action.type === 'SET_NAVIGATION_MODE' ) {
-		return action.isNavigationMode;
+	if ( action.type === 'SET_EDITOR_MODE' ) {
+		return action.mode;
 	}
 
 	return state;
@@ -1639,13 +1637,11 @@ export function isNavigationMode( state = false, action ) {
  * @return {string|null} Updated state.
  */
 export function hasBlockMovingClientId( state = null, action ) {
-	// Let inserting block always trigger Edit mode.
-
 	if ( action.type === 'SET_BLOCK_MOVING_MODE' ) {
 		return action.hasBlockMovingClientId;
 	}
 
-	if ( action.type === 'SET_NAVIGATION_MODE' ) {
+	if ( action.type === 'SET_EDITOR_MODE' ) {
 		return null;
 	}
 
@@ -1778,6 +1774,21 @@ export function lastBlockInserted( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the block that is eding temporarily edited as blocks.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function temporarilyEditingAsBlocks( state = '', action ) {
+	if ( action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS' ) {
+		return action.temporarilyEditingAsBlocks;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1793,9 +1804,10 @@ export default combineReducers( {
 	settings,
 	preferences,
 	lastBlockAttributesChange,
-	isNavigationMode,
+	editorMode,
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,
 	lastBlockInserted,
+	temporarilyEditingAsBlocks,
 } );

package/src/store/selectors.js

@@ -1,17 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	castArray,
-	first,
-	last,
-	map,
-	reduce,
-	some,
-	find,
-	filter,
-	orderBy,
-} from 'lodash';
+import { castArray, map, reduce, some, find, filter, orderBy } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -798,7 +788,7 @@ export const getMultiSelectedBlocks = createSelector(
  * @return {?string} First block client ID in the multi-selection set.
  */
 export function getFirstMultiSelectedBlockClientId( state ) {
-	return first( getMultiSelectedBlockClientIds( state ) ) || null;
+	return getMultiSelectedBlockClientIds( state )[ 0 ] || null;
 }
 
 /**
@@ -810,7 +800,8 @@ export function getFirstMultiSelectedBlockClientId( state ) {
  * @return {?string} Last block client ID in the multi-selection set.
  */
 export function getLastMultiSelectedBlockClientId( state ) {
-	return last( getMultiSelectedBlockClientIds( state ) ) || null;
+	const selectedClientIds = getMultiSelectedBlockClientIds( state );
+	return selectedClientIds[ selectedClientIds.length - 1 ] || null;
 }
 
 /**
@@ -948,6 +939,14 @@ export function __unstableIsSelectionCollapsed( state ) {
 	);
 }
 
+export function __unstableSelectionHasUnmergeableBlock( state ) {
+	return getSelectedBlockClientIds( state ).some( ( clientId ) => {
+		const blockName = getBlockName( state, clientId );
+		const blockType = getBlockType( blockName );
+		return ! blockType.merge;
+	} );
+}
+
 /**
  * Check whether the selection is mergeable.
  *
@@ -1009,19 +1008,19 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 		? selectionStart.clientId
 		: selectionEnd.clientId;
 
-	const targetBlock = getBlock( state, targetBlockClientId );
-	const targetBlockType = getBlockType( targetBlock.name );
+	const targetBlockName = getBlockName( state, targetBlockClientId );
+	const targetBlockType = getBlockType( targetBlockName );
 
 	if ( ! targetBlockType.merge ) return false;
 
 	const blockToMerge = getBlock( state, blockToMergeClientId );
 
 	// It's mergeable if the blocks are of the same type.
-	if ( blockToMerge.name === targetBlock.name ) return true;
+	if ( blockToMerge.name === targetBlockName ) return true;
 
 	// If the blocks are of a different type, try to transform the block being
 	// merged into the same type of block.
-	const blocksToMerge = switchToBlockType( blockToMerge, targetBlock.name );
+	const blocksToMerge = switchToBlockType( blockToMerge, targetBlockName );
 
 	return blocksToMerge && blocksToMerge.length;
 }
@@ -2542,7 +2541,18 @@ function getReusableBlocks( state ) {
  * @return {boolean} Is navigation mode enabled.
  */
 export function isNavigationMode( state ) {
-	return state.isNavigationMode;
+	return state.editorMode === 'navigation';
+}
+
+/**
+ * Returns the current editor mode.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string} the editor mode.
+ */
+export function __unstableGetEditorMode( state ) {
+	return state.editorMode;
 }
 
 /**
@@ -2625,7 +2635,7 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 		);
 		if ( entityAreaParents ) {
 			// Last parent closest/most interior.
-			return last( entityAreaParents );
+			return entityAreaParents[ entityAreaParents.length - 1 ];
 		}
 		return null;
 	},
@@ -2679,3 +2689,72 @@ export const __unstableGetVisibleBlocks = createSelector(
 	},
 	( state ) => [ state.blocks.visibility ]
 );
+
+export const __unstableGetContentLockingParent = createSelector(
+	( state, clientId ) => {
+		let current = clientId;
+		let result;
+		while ( !! state.blocks.parents[ current ] ) {
+			current = state.blocks.parents[ current ];
+			if ( getTemplateLock( state, current ) === 'noContent' ) {
+				result = current;
+			}
+		}
+		return result;
+	},
+	( state ) => [ state.blocks.parents, state.blockListSettings ]
+);
+
+export function __unstableGetTemporarilyEditingAsBlocks( state ) {
+	return state.temporarilyEditingAsBlocks;
+}
+
+export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
+	// If the block editing is locked, the block overlay is always active.
+	if ( ! canEditBlock( state, clientId ) ) {
+		return true;
+	}
+
+	const editorMode = __unstableGetEditorMode( state );
+
+	// In zoom-out mode, the block overlay is always active for top level blocks.
+	if (
+		editorMode === 'zoom-out' &&
+		! getBlockRootClientId( state, clientId )
+	) {
+		return true;
+	}
+
+	// In navigation mode, the block overlay is active when the block is not
+	// selected (and doesn't contain a selected child). The same behavior is
+	// also enabled in all modes for blocks that have controlled children
+	// (reusable block, template part, navigation), unless explicitly disabled
+	// with `supports.__experimentalDisableBlockOverlay`.
+	const blockSupportDisable = hasBlockSupport(
+		getBlockName( state, clientId ),
+		'__experimentalDisableBlockOverlay',
+		false
+	);
+	const shouldEnableIfUnselected =
+		editorMode === 'navigation' ||
+		( blockSupportDisable
+			? false
+			: areInnerBlocksControlled( state, clientId ) );
+
+	return (
+		shouldEnableIfUnselected &&
+		! isBlockSelected( state, clientId ) &&
+		! hasSelectedInnerBlock( state, clientId, true )
+	);
+}
+
+export function __unstableIsWithinBlockOverlay( state, clientId ) {
+	let parent = state.blocks.parents[ clientId ];
+	while ( !! parent ) {
+		if ( __unstableHasActiveBlockOverlayActive( state, parent ) ) {
+			return true;
+		}
+		parent = state.blocks.parents[ parent ];
+	}
+	return false;
+}

package/src/store/test/reducer.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
 import deepFreeze from 'deep-freeze';
 
 /**
@@ -260,7 +259,8 @@ describe( 'state', () => {
 
 				const state = blocks( existingState, action );
 
-				expect( omit( state, [ 'tree' ] ) ).toEqual( {
+				const { tree, ...restState } = state;
+				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
 					byClientId: {
@@ -342,7 +342,8 @@ describe( 'state', () => {
 
 				const state = blocks( existingState, action );
 
-				expect( omit( state, [ 'tree' ] ) ).toEqual( {
+				const { tree, ...restState } = state;
+				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
 					byClientId: {
@@ -466,7 +467,8 @@ describe( 'state', () => {
 
 				const state = blocks( existingState, action );
 
-				expect( omit( state, [ 'tree' ] ) ).toEqual( {
+				const { tree, ...restState } = state;
+				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
 					byClientId: {
@@ -603,7 +605,8 @@ describe( 'state', () => {
 
 				const state = blocks( existingState, action );
 
-				expect( omit( state, [ 'tree' ] ) ).toEqual( {
+				const { tree, ...restState } = state;
+				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
 					byClientId: {

package/src/utils/parse-css-unit-to-px.js

@@ -221,7 +221,7 @@ export function getPxFromCssUnit( cssUnit, options = {} ) {
 	let parsedUnit = parseUnit( cssUnit );
 
 	if ( ! parsedUnit.unit ) {
-		parsedUnit = parseUnitFunction( cssUnit, options );
+		parsedUnit = parseUnitFunction( cssUnit );
 	}
 
 	if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {