@wordpress/block-editor 7.0.4 → 8.0.3

package/src/hooks/index.native.js

@@ -13,3 +13,4 @@ import './font-size';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/layout.scss

@@ -22,7 +22,9 @@
 	font-size: $helptext-font-size;
 }
 
-.block-editor-hooks__flex-layout-justification-controls {
+.block-editor-hooks__flex-layout-justification-controls,
+.block-editor-hooks__flex-layout-orientation-controls {
+	margin-bottom: $grid-unit-15;
 	legend {
 		margin-bottom: $grid-unit-10;
 	}

package/src/hooks/letter-spacing.js

@@ -29,12 +29,6 @@ export function LetterSpacingEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const isDisabled = useIsLetterSpacingDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
-
 	function onChange( newSpacing ) {
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -51,6 +45,7 @@ export function LetterSpacingEdit( props ) {
 		<LetterSpacingControl
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
+			__unstableInputWidth={ false }
 		/>
 	);
 }
@@ -66,7 +61,40 @@ export function useIsLetterSpacingDisabled( { name: blockName } = {} ) {
 		blockName,
 		LETTER_SPACING_SUPPORT_KEY
 	);
-	const hasLetterSpacing = useSetting( 'typography.customLetterSpacing' );
+	const hasLetterSpacing = useSetting( 'typography.letterSpacing' );
 
 	return notSupported || ! hasLetterSpacing;
 }
+
+/**
+ * Checks if there is a current value set for the letter spacing block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a letter spacing set.
+ */
+export function hasLetterSpacingValue( props ) {
+	return !! props.attributes.style?.typography?.letterSpacing;
+}
+
+/**
+ * Resets the letter spacing block support attribute. This can be used when
+ * disabling the letter spacing 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 resetLetterSpacing( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				letterSpacing: undefined,
+			},
+		} ),
+	} );
+}

package/src/hooks/line-height.js

@@ -22,12 +22,8 @@ export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 export function LineHeightEdit( props ) {
 	const {
 		attributes: { style },
+		setAttributes,
 	} = props;
-	const isDisabled = useIsLineHeightDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
 
 	const onChange = ( newLineHeightValue ) => {
 		const newStyle = {
@@ -37,9 +33,8 @@ export function LineHeightEdit( props ) {
 				lineHeight: newLineHeightValue,
 			},
 		};
-		props.setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
 	};
 	return (
 		<LineHeightControl
@@ -56,9 +51,42 @@ export function LineHeightEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsLineHeightDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'typography.customLineHeight' );
+	const isDisabled = ! useSetting( 'typography.lineHeight' );
 
 	return (
 		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
 	);
 }
+
+/**
+ * Checks if there is a current value set for the line height block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a line height value set.
+ */
+export function hasLineHeightValue( props ) {
+	return !! props.attributes.style?.typography?.lineHeight;
+}
+
+/**
+ * Resets the line height block support attribute. This can be used when
+ * disabling the line height 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 resetLineHeight( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				lineHeight: undefined,
+			},
+		} ),
+	} );
+}

package/src/hooks/margin.js

@@ -73,7 +73,7 @@ export function resetMargin( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether margin setting is disabled.
  */
 export function useIsMarginDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.customMargin' );
+	const isDisabled = ! useSetting( 'spacing.margin' );
 	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' );
 
 	return ! hasMarginSupport( blockName ) || isDisabled || isInvalid;

package/src/hooks/padding.js

@@ -73,7 +73,7 @@ export function resetPadding( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether padding setting is disabled.
  */
 export function useIsPaddingDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.customPadding' );
+	const isDisabled = ! useSetting( 'spacing.padding' );
 	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );
 
 	return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;

package/src/hooks/text-decoration.js

@@ -29,11 +29,6 @@ export function TextDecorationEdit( props ) {
 		attributes: { style },
 		setAttributes,
 	} = props;
-	const isDisabled = useIsTextDecorationDisabled( props );
-
-	if ( isDisabled ) {
-		return null;
-	}
 
 	function onChange( newDecoration ) {
 		setAttributes( {
@@ -67,7 +62,40 @@ export function useIsTextDecorationDisabled( { name: blockName } = {} ) {
 		blockName,
 		TEXT_DECORATION_SUPPORT_KEY
 	);
-	const hasTextDecoration = useSetting( 'typography.customTextDecorations' );
+	const hasTextDecoration = useSetting( 'typography.textDecoration' );
 
 	return notSupported || ! hasTextDecoration;
 }
+
+/**
+ * Checks if there is a current value set for the text decoration block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a text decoration set.
+ */
+export function hasTextDecorationValue( props ) {
+	return !! props.attributes.style?.typography?.textDecoration;
+}
+
+/**
+ * Resets the text decoration block support attribute. This can be used when
+ * disabling the text decoration 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 resetTextDecoration( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				textDecoration: undefined,
+			},
+		} ),
+	} );
+}

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';