@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/src/hooks/test/gap.js

@@ -27,28 +27,6 @@ describe( 'gap', () => {
 				...blockGapValue,
 			} );
 		} );
-		it( 'should unwrap var: values from a string into a CSS var() function', () => {
-			const expectedValue = {
-				top: 'var(--wp--preset--spacing--60)',
-				left: 'var(--wp--preset--spacing--60)',
-			};
-			expect(
-				getGapBoxControlValueFromStyle( 'var:preset|spacing|60' )
-			).toEqual( expectedValue );
-		} );
-		it( 'should unwrap var: values from an object into a CSS var() function', () => {
-			const expectedValue = {
-				top: 'var(--wp--preset--spacing--20)',
-				left: 'var(--wp--preset--spacing--60)',
-			};
-			const blockGapValue = {
-				top: 'var:preset|spacing|20',
-				left: 'var:preset|spacing|60',
-			};
-			expect( getGapBoxControlValueFromStyle( blockGapValue ) ).toEqual(
-				expectedValue
-			);
-		} );
 	} );
 	describe( 'getGapCSSValue()', () => {
 		it( 'should return `null` if argument is falsey', () => {
@@ -84,5 +62,21 @@ describe( 'gap', () => {
 				'88px 1px'
 			);
 		} );
+
+		it( 'should unwrap var: values from a string into a CSS var() function', () => {
+			expect( getGapCSSValue( 'var:preset|spacing|60' ) ).toEqual(
+				'var(--wp--preset--spacing--60)'
+			);
+		} );
+
+		it( 'should unwrap var: values from an object into a CSS var() function and return shorthand values', () => {
+			const blockGapValue = {
+				top: 'var:preset|spacing|20',
+				left: 'var:preset|spacing|60',
+			};
+			expect( getGapCSSValue( blockGapValue ) ).toEqual(
+				'var(--wp--preset--spacing--20) var(--wp--preset--spacing--60)'
+			);
+		} );
 	} );
 } );

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/text-decoration.js

@@ -46,6 +46,7 @@ export function TextDecorationEdit( props ) {
 		<TextDecorationControl
 			value={ style?.typography?.textDecoration }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/text-transform.js

@@ -46,6 +46,7 @@ export function TextTransformEdit( props ) {
 		<TextTransformControl
 			value={ style?.typography?.textTransform }
 			onChange={ onChange }
+			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/typography.scss

@@ -1,10 +1,4 @@
 .typography-block-support-panel {
-	.components-font-size-picker__controls,
-	.block-editor-text-decoration-control__buttons,
-	.block-editor-text-transform-control__buttons {
-		margin-bottom: 0;
-	}
-
 	.single-column {
 		grid-column: span 1;
 	}

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';
 
 /**
@@ -15,7 +23,7 @@ import { getCSSRules } from '@wordpress/style-engine';
  */
 import useSetting from '../components/use-setting';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
@@ -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,17 +146,25 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { contentSize, wideSize } = layout;
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const { contentSize, wideSize, justifyContent } = layout;
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
 		// If a block's block.json skips serialization for spacing or
 		// spacing.blockGap, don't apply the user-defined value to the styles.
-		const blockGapValue =
-			blockGapStyleValue?.top &&
-			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? blockGapStyleValue?.top
-				: '';
+		let blockGapValue = '';
+		if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+			// If an object is provided only use the 'top' value for this kind of gap.
+			if ( blockGapStyleValue?.top ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+			} else if ( typeof blockGapStyleValue === 'string' ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue );
+			}
+		}
+
+		const marginLeft =
+			justifyContent === 'left' ? '0 !important' : 'auto !important';
+		const marginRight =
+			justifyContent === 'right' ? '0 !important' : 'auto !important';
 
 		let output =
 			!! contentSize || !! wideSize
@@ -136,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 };
@@ -148,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/layouts/flow.js

@@ -6,9 +6,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-
 import { getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
@@ -27,16 +26,19 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
 		// If a block's block.json skips serialization for spacing or
 		// spacing.blockGap, don't apply the user-defined value to the styles.
-		const blockGapValue =
-			blockGapStyleValue?.top &&
-			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? blockGapStyleValue?.top
-				: '';
+		let blockGapValue = '';
+		if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+			// If an object is provided only use the 'top' value for this kind of gap.
+			if ( blockGapStyleValue?.top ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+			} else if ( typeof blockGapStyleValue === 'string' ) {
+				blockGapValue = getGapCSSValue( blockGapStyleValue );
+			}
+		}
 
 		let output = '';
 
@@ -65,6 +67,7 @@ export default {
 				info: alignmentInfo[ alignment ],
 			} ) );
 		}
+		const { contentSize, wideSize } = layout;
 
 		const alignments = [
 			{ name: 'left' },
@@ -72,6 +75,14 @@ export default {
 			{ name: 'right' },
 		];
 
+		if ( contentSize ) {
+			alignments.unshift( { name: 'full' } );
+		}
+
+		if ( wideSize ) {
+			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
+		}
+
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
 
 		return alignments;

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