@wordpress/block-editor 7.0.1 → 8.0.0

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,52 +1,66 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
-/**
- * External dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
+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';
 
@@ -63,31 +77,163 @@ 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>
 	);
 }
 
 const hasTypographySupport = ( blockName ) => {
-	return (
-		Platform.OS === 'web' &&
-		TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
-			hasBlockSupport( blockName, key )
-		)
+	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
 	);
 };
 

package/src/hooks/typography.native.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+/**
+ * External dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+
+import {
+	LINE_HEIGHT_SUPPORT_KEY,
+	LineHeightEdit,
+	useIsLineHeightDisabled,
+} from './line-height';
+import {
+	FONT_SIZE_SUPPORT_KEY,
+	FontSizeEdit,
+	useIsFontSizeDisabled,
+} from './font-size';
+
+export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
+export const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+];
+
+export function TypographyPanel( props ) {
+	const isDisabled = useIsTypographyDisabled( props );
+	const isSupported = hasTypographySupport( props.name );
+
+	// only enable TypographyPanel for development
+	// eslint-disable-next-line no-undef
+	if ( isDisabled || ! isSupported || ! __DEV__ ) return null;
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Typography' ) }>
+				<FontSizeEdit { ...props } />
+				<LineHeightEdit { ...props } />
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+const hasTypographySupport = ( blockName ) => {
+	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
+	);
+};
+
+function useIsTypographyDisabled( props = {} ) {
+	const configs = [
+		useIsFontSizeDisabled( props ),
+		useIsLineHeightDisabled( props ),
+	];
+
+	return configs.filter( Boolean ).length === configs.length;
+}

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

@@ -2,36 +2,259 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	justifyLeft,
+	justifyCenter,
+	justifyRight,
+	justifySpaceBetween,
+	arrowRight,
+	arrowDown,
+} from '@wordpress/icons';
+import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 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',
+	center: 'center',
+	'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' ),
-
-	edit() {
-		return null;
+	inspectorControls: function FlexLayoutInspectorControls( {
+		layout = {},
+		onChange,
+	} ) {
+		const { allowOrientation = true } = layout;
+		return (
+			<>
+				<Flex>
+					<FlexItem>
+						<FlexLayoutJustifyContentControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</FlexItem>
+					<FlexItem>
+						{ allowOrientation && (
+							<OrientationControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						) }
+					</FlexItem>
+				</Flex>
+				<FlexWrapControl layout={ layout } onChange={ onChange } />
+			</>
+		);
 	},
-
-	save: function FlexLayoutStyle( { selector } ) {
+	toolBarControls: function FlexLayoutToolbarControls( {
+		layout = {},
+		onChange,
+		layoutBlockSupport,
+	} ) {
+		if ( layoutBlockSupport?.allowSwitching ) {
+			return null;
+		}
 		return (
-			<style>{ `${ appendSelectors( selector ) } {
-            display: flex;
-            column-gap: 0.5em;
-            align-items: center;
-        }` }</style>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<FlexLayoutJustifyContentControl
+					layout={ layout }
+					onChange={ onChange }
+					isToolbar
+				/>
+			</BlockControls>
 		);
 	},
+	save: function FlexLayoutStyle( { selector, layout } ) {
+		const { orientation = 'horizontal' } = layout;
+		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const justifyContent =
+			justifyContentMap[ layout.justifyContent ] ||
+			justifyContentMap.left;
+		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
+			? layout.flexWrap
+			: 'wrap';
+		// --justification-setting allows children to inherit the value
+		// regardless or row or column direction.
+		const rowOrientation = `
+		flex-direction: row;
+		align-items: center;
+		justify-content: ${ justifyContent };
+		--justification-setting: ${ justifyContent };
+		`;
+		const alignItems =
+			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
+		const columnOrientation = `
+		flex-direction: column;
+		align-items: ${ alignItems };
+		--justification-setting: ${ alignItems };
+		`;
+		return (
+			<style>{ `
+				${ appendSelectors( selector ) } {
+					display: flex;
+					gap: ${
+						hasBlockGapStylesSupport
+							? 'var( --wp--style--block-gap, 0.5em )'
+							: '0.5em'
+					};
+					flex-wrap: ${ flexWrap };
+					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
+				}
 
-	getOrientation() {
-		return 'horizontal';
+				${ appendSelectors( selector, '> *' ) } {
+					margin: 0;
+				}
+			` }</style>
+		);
+	},
+	getOrientation( layout ) {
+		const { orientation = 'horizontal' } = layout;
+		return orientation;
 	},
-
 	getAlignments() {
 		return [];
 	},
 };
+
+function FlexLayoutJustifyContentControl( {
+	layout,
+	onChange,
+	isToolbar = false,
+} ) {
+	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={ allowedControls }
+				value={ justifyContent }
+				onChange={ onJustificationChange }
+				popoverProps={ {
+					position: 'bottom right',
+					isAlternate: true,
+				} }
+			/>
+		);
+	}
+
+	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 (
+		<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,
+					flexWrap: value ? 'wrap' : 'nowrap',
+				} );
+			} }
+			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',
+					} )
+				}
+			/>
+			<Button
+				label={ 'vertical' }
+				icon={ arrowDown }
+				isPressed={ orientation === 'vertical' }
+				onClick={ () =>
+					onChange( {
+						...layout,
+						orientation: 'vertical',
+					} )
+				}
+			/>
+		</fieldset>
+	);
+}