@wordpress/block-editor 7.0.2 → 8.0.1

package/src/hooks/text-transform.js

@@ -29,11 +29,6 @@ export function TextTransformEdit( props ) {
 		attributes: { style },
 		setAttributes,
 	} = props;
-	const isDisabled = useIsTextTransformDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
 
 	function onChange( newTransform ) {
 		setAttributes( {
@@ -67,6 +62,39 @@ export function useIsTextTransformDisabled( { name: blockName } = {} ) {
 		blockName,
 		TEXT_TRANSFORM_SUPPORT_KEY
 	);
-	const hasTextTransforms = useSetting( 'typography.customTextTransforms' );
+	const hasTextTransforms = useSetting( 'typography.textTransform' );
 	return notSupported || ! hasTextTransforms;
 }
+
+/**
+ * Checks if there is a current value set for the text transform block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a text transform set.
+ */
+export function hasTextTransformValue( props ) {
+	return !! props.attributes.style?.typography?.textTransform;
+}
+
+/**
+ * Resets the text transform block support attribute. This can be used when
+ * disabling the text transform support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetTextTransform( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				textTransform: undefined,
+			},
+		} ),
+	} );
+}

package/src/hooks/typography.js

@@ -1,51 +1,66 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
-/**
- * External dependencies
- */
-import { PanelBody } from '@wordpress/components';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
-import TextDecorationAndTransformEdit from '../components/text-decoration-and-transform';
+import { getFontAppearanceLabel } from '../components/font-appearance-control';
 
 import {
 	LINE_HEIGHT_SUPPORT_KEY,
 	LineHeightEdit,
+	hasLineHeightValue,
+	resetLineHeight,
 	useIsLineHeightDisabled,
 } from './line-height';
 import {
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FontAppearanceEdit,
+	hasFontAppearanceValue,
+	resetFontAppearance,
 	useIsFontAppearanceDisabled,
+	useIsFontStyleDisabled,
+	useIsFontWeightDisabled,
 } from './font-appearance';
 import {
 	FONT_FAMILY_SUPPORT_KEY,
 	FontFamilyEdit,
+	hasFontFamilyValue,
+	resetFontFamily,
 	useIsFontFamilyDisabled,
 } from './font-family';
 import {
 	FONT_SIZE_SUPPORT_KEY,
 	FontSizeEdit,
+	hasFontSizeValue,
+	resetFontSize,
 	useIsFontSizeDisabled,
 } from './font-size';
 import {
 	TEXT_DECORATION_SUPPORT_KEY,
+	TextDecorationEdit,
+	hasTextDecorationValue,
+	resetTextDecoration,
 	useIsTextDecorationDisabled,
 } from './text-decoration';
 import {
 	TEXT_TRANSFORM_SUPPORT_KEY,
+	TextTransformEdit,
+	hasTextTransformValue,
+	resetTextTransform,
 	useIsTextTransformDisabled,
 } from './text-transform';
 import {
 	LETTER_SPACING_SUPPORT_KEY,
 	LetterSpacingEdit,
+	hasLetterSpacingValue,
+	resetLetterSpacing,
 	useIsLetterSpacingDisabled,
 } from './letter-spacing';
 
@@ -62,21 +77,156 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 ];
 
 export function TypographyPanel( props ) {
+	const { clientId } = props;
+	const isFontFamilyDisabled = useIsFontFamilyDisabled( props );
+	const isFontSizeDisabled = useIsFontSizeDisabled( props );
+	const isFontAppearanceDisabled = useIsFontAppearanceDisabled( props );
+	const isLineHeightDisabled = useIsLineHeightDisabled( props );
+	const isTextDecorationDisabled = useIsTextDecorationDisabled( props );
+	const isTextTransformDisabled = useIsTextTransformDisabled( props );
+	const isLetterSpacingDisabled = useIsLetterSpacingDisabled( props );
+
+	const hasFontStyles = ! useIsFontStyleDisabled( props );
+	const hasFontWeights = ! useIsFontWeightDisabled( props );
+
 	const isDisabled = useIsTypographyDisabled( props );
 	const isSupported = hasTypographySupport( props.name );
 
 	if ( isDisabled || ! isSupported ) return null;
 
+	const defaultControls = getBlockSupport( props.name, [
+		TYPOGRAPHY_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
+	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
+		...newAttributes,
+		style: {
+			...newAttributes.style,
+			typography: {
+				...newAttributes.style?.typography,
+				[ attribute ]: undefined,
+			},
+		},
+	} );
+
 	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Typography' ) }>
-				<FontFamilyEdit { ...props } />
-				<FontSizeEdit { ...props } />
-				<FontAppearanceEdit { ...props } />
-				<LineHeightEdit { ...props } />
-				<TextDecorationAndTransformEdit { ...props } />
-				<LetterSpacingEdit { ...props } />
-			</PanelBody>
+		<InspectorControls __experimentalGroup="typography">
+			{ ! isFontFamilyDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasFontFamilyValue( props ) }
+					label={ __( 'Font family' ) }
+					onDeselect={ () => resetFontFamily( props ) }
+					isShownByDefault={ defaultControls?.fontFamily }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						fontFamily: undefined,
+					} ) }
+					panelId={ clientId }
+				>
+					<FontFamilyEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isFontSizeDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasFontSizeValue( props ) }
+					label={ __( 'Font size' ) }
+					onDeselect={ () => resetFontSize( props ) }
+					isShownByDefault={ defaultControls?.fontSize }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						fontSize: undefined,
+						style: {
+							...newAttributes.style,
+							typography: {
+								...newAttributes.style?.typography,
+								fontSize: undefined,
+							},
+						},
+					} ) }
+					panelId={ clientId }
+				>
+					<FontSizeEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isFontAppearanceDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasFontAppearanceValue( props ) }
+					label={ getFontAppearanceLabel(
+						hasFontStyles,
+						hasFontWeights
+					) }
+					onDeselect={ () => resetFontAppearance( props ) }
+					isShownByDefault={ defaultControls?.fontAppearance }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						style: {
+							...newAttributes.style,
+							typography: {
+								...newAttributes.style?.typography,
+								fontStyle: undefined,
+								fontWeight: undefined,
+							},
+						},
+					} ) }
+					panelId={ clientId }
+				>
+					<FontAppearanceEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isLineHeightDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasLineHeightValue( props ) }
+					label={ __( 'Line height' ) }
+					onDeselect={ () => resetLineHeight( props ) }
+					isShownByDefault={ defaultControls?.lineHeight }
+					resetAllFilter={ createResetAllFilter( 'lineHeight' ) }
+					panelId={ clientId }
+				>
+					<LineHeightEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isTextDecorationDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasTextDecorationValue( props ) }
+					label={ __( 'Decoration' ) }
+					onDeselect={ () => resetTextDecoration( props ) }
+					isShownByDefault={ defaultControls?.textDecoration }
+					resetAllFilter={ createResetAllFilter( 'textDecoration' ) }
+					panelId={ clientId }
+				>
+					<TextDecorationEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isTextTransformDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasTextTransformValue( props ) }
+					label={ __( 'Letter case' ) }
+					onDeselect={ () => resetTextTransform( props ) }
+					isShownByDefault={ defaultControls?.textTransform }
+					resetAllFilter={ createResetAllFilter( 'textTransform' ) }
+					panelId={ clientId }
+				>
+					<TextTransformEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isLetterSpacingDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasLetterSpacingValue( props ) }
+					label={ __( 'Letter-spacing' ) }
+					onDeselect={ () => resetLetterSpacing( props ) }
+					isShownByDefault={ defaultControls?.letterSpacing }
+					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
+					panelId={ clientId }
+				>
+					<LetterSpacingEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 }

package/src/hooks/typography.scss

@@ -0,0 +1,16 @@
+.typography-block-support-panel {
+	.components-font-appearance-control,
+	.components-font-size-picker__controls,
+	.block-editor-text-decoration-control__buttons,
+	.block-editor-text-transform-control__buttons {
+		margin-bottom: 0;
+	}
+
+	.block-editor-line-height-control input {
+		max-width: 100%;
+	}
+
+	.single-column {
+		grid-column: span 1;
+	}
+}

package/src/hooks/use-cached-truthy.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Keeps an up-to-date copy of the passed value and returns it. If value becomes falsy, it will return the last truthy copy.
+ *
+ * @param {any} value
+ * @return {any} value
+ */
+export function useCachedTruthy( value ) {
+	const [ cachedValue, setCachedValue ] = useState( value );
+	useEffect( () => {
+		if ( value ) {
+			setCachedValue( value );
+		}
+	}, [ value ] );
+	return cachedValue;
+}

package/src/index.js

@@ -9,6 +9,7 @@ export {
 	useColorProps as __experimentalUseColorProps,
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
+	useCachedTruthy,
 } from './hooks';
 export * from './components';
 export * from './utils';

package/src/layouts/flex.js

@@ -1,11 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
+	justifyLeft,
+	justifyCenter,
+	justifyRight,
+	justifySpaceBetween,
+	arrowRight,
+	arrowDown,
+} from '@wordpress/icons';
+import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,6 +19,7 @@ import { appendSelectors } from './utils';
 import useSetting from '../components/use-setting';
 import { BlockControls, JustifyContentControl } from '../components';
 
+// Used with the default, horizontal flex orientation.
 const justifyContentMap = {
 	left: 'flex-start',
 	right: 'flex-end',
@@ -21,6 +27,15 @@ const justifyContentMap = {
 	'space-between': 'space-between',
 };
 
+// Used with the vertical (column) flex orientation.
+const alignItemsMap = {
+	left: 'flex-start',
+	right: 'flex-end',
+	center: 'center',
+};
+
+const flexWrapOptions = [ 'wrap', 'nowrap' ];
+
 export default {
 	name: 'flex',
 	label: __( 'Flex' ),
@@ -28,11 +43,27 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
+		const { allowOrientation = true } = layout;
 		return (
-			<FlexLayoutJustifyContentControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+			<>
+				<Flex>
+					<FlexItem>
+						<FlexLayoutJustifyContentControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</FlexItem>
+					<FlexItem>
+						{ allowOrientation && (
+							<OrientationControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						) }
+					</FlexItem>
+				</Flex>
+				<FlexWrapControl layout={ layout } onChange={ onChange } />
+			</>
 		);
 	},
 	toolBarControls: function FlexLayoutToolbarControls( {
@@ -44,7 +75,7 @@ export default {
 			return null;
 		}
 		return (
-			<BlockControls group="block" __experimentalExposeToChildren>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
 				<FlexLayoutJustifyContentControl
 					layout={ layout }
 					onChange={ onChange }
@@ -54,10 +85,48 @@ export default {
 		);
 	},
 	save: function FlexLayoutStyle( { selector, layout } ) {
+		const {
+			orientation = 'horizontal',
+			setCascadingProperties = false,
+		} = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const justifyContent =
-			justifyContentMap[ layout.justifyContent ] || 'flex-start';
+			justifyContentMap[ layout.justifyContent ] ||
+			justifyContentMap.left;
+		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
+			? layout.flexWrap
+			: 'wrap';
+		let rowOrientation = `
+		flex-direction: row;
+		align-items: center;
+		justify-content: ${ justifyContent };
+		`;
+		if ( setCascadingProperties ) {
+			// --layout-justification-setting allows children to inherit the value
+			// regardless or row or column direction.
+			rowOrientation += `
+			--layout-justification-setting: ${ justifyContent };
+			--layout-direction: row;
+			--layout-wrap: ${ flexWrap };
+			--layout-justify: ${ justifyContent };
+			--layout-align: center;
+			`;
+		}
+		const alignItems =
+			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
+		let columnOrientation = `
+		flex-direction: column;
+		align-items: ${ alignItems };
+		`;
+		if ( setCascadingProperties ) {
+			columnOrientation += `
+			--layout-justification-setting: ${ alignItems };
+			--layout-direction: column;
+			--layout-justify: initial;
+			--layout-align: ${ alignItems };
+			`;
+		}
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
@@ -67,10 +136,8 @@ export default {
 							? 'var( --wp--style--block-gap, 0.5em )'
 							: '0.5em'
 					};
-					flex-wrap: wrap;
-					align-items: center;
-					flex-direction: row;
-					justify-content: ${ justifyContent };
+					flex-wrap: ${ flexWrap };
+					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
@@ -79,8 +146,9 @@ export default {
 			` }</style>
 		);
 	},
-	getOrientation() {
-		return 'horizontal';
+	getOrientation( layout ) {
+		const { orientation = 'horizontal' } = layout;
+		return orientation;
 	},
 	getAlignments() {
 		return [];
@@ -92,23 +160,23 @@ function FlexLayoutJustifyContentControl( {
 	onChange,
 	isToolbar = false,
 } ) {
-	const { justifyContent = 'left' } = layout;
+	const { justifyContent = 'left', orientation = 'horizontal' } = layout;
+	const onJustificationChange = ( value ) => {
+		onChange( {
+			...layout,
+			justifyContent: value,
+		} );
+	};
+	const allowedControls = [ 'left', 'center', 'right' ];
+	if ( orientation === 'horizontal' ) {
+		allowedControls.push( 'space-between' );
+	}
 	if ( isToolbar ) {
 		return (
 			<JustifyContentControl
-				allowedControls={ [
-					'left',
-					'center',
-					'right',
-					'space-between',
-				] }
+				allowedControls={ allowedControls }
 				value={ justifyContent }
-				onChange={ ( value ) => {
-					onChange( {
-						...layout,
-						justifyContent: value,
-					} );
-				} }
+				onChange={ onJustificationChange }
 				popoverProps={ {
 					position: 'bottom right',
 					isAlternate: true,
@@ -116,34 +184,95 @@ function FlexLayoutJustifyContentControl( {
 			/>
 		);
 	}
+
+	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' ),
+		},
+	];
+	if ( orientation === 'horizontal' ) {
+		justificationOptions.push( {
+			value: 'space-between',
+			icon: justifySpaceBetween,
+			label: __( 'Space between items' ),
+		} );
+	}
+
 	return (
-		<ToggleGroupControl
-			label={ __( 'Justify content' ) }
-			value={ justifyContent }
+		<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>
+	);
+}
+
+function FlexWrapControl( { layout, onChange } ) {
+	const { flexWrap = 'wrap' } = layout;
+	return (
+		<ToggleControl
+			label={ __( 'Allow to wrap to multiple lines' ) }
 			onChange={ ( value ) => {
 				onChange( {
 					...layout,
-					justifyContent: value,
+					flexWrap: value ? 'wrap' : 'nowrap',
 				} );
 			} }
-			isBlock
-		>
-			<ToggleGroupControlOption
-				value="left"
-				label={ _x( 'Left', 'Justify content option' ) }
-			/>
-			<ToggleGroupControlOption
-				value="center"
-				label={ _x( 'Center', 'Justify content option' ) }
-			/>
-			<ToggleGroupControlOption
-				value="right"
-				label={ _x( 'Right', 'Justify content option' ) }
+			checked={ flexWrap === 'wrap' }
+		/>
+	);
+}
+
+function OrientationControl( { layout, onChange } ) {
+	const { orientation = 'horizontal' } = layout;
+	return (
+		<fieldset className="block-editor-hooks__flex-layout-orientation-controls">
+			<legend>{ __( 'Orientation' ) }</legend>
+			<Button
+				label={ 'horizontal' }
+				icon={ arrowRight }
+				isPressed={ orientation === 'horizontal' }
+				onClick={ () =>
+					onChange( {
+						...layout,
+						orientation: 'horizontal',
+					} )
+				}
 			/>
-			<ToggleGroupControlOption
-				value="space-between"
-				label={ _x( 'Space between', 'Justify content option' ) }
+			<Button
+				label={ 'vertical' }
+				icon={ arrowDown }
+				isPressed={ orientation === 'vertical' }
+				onClick={ () =>
+					onChange( {
+						...layout,
+						orientation: 'vertical',
+					} )
+				}
 			/>
-		</ToggleGroupControl>
+		</fieldset>
 	);
 }