@wordpress/block-editor 7.0.2 → 8.0.1

package/src/hooks/font-appearance.js

@@ -36,10 +36,6 @@ export function FontAppearanceEdit( props ) {
 	const hasFontStyles = ! useIsFontStyleDisabled( props );
 	const hasFontWeights = ! useIsFontWeightDisabled( props );
 
-	if ( ! hasFontStyles && ! hasFontWeights ) {
-		return null;
-	}
-
 	const onChange = ( newStyles ) => {
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -54,7 +50,6 @@ export function FontAppearanceEdit( props ) {
 	};
 
 	const fontStyle = style?.typography?.fontStyle;
-
 	const fontWeight = style?.typography?.fontWeight;
 
 	return (
@@ -78,7 +73,7 @@ export function FontAppearanceEdit( props ) {
  */
 export function useIsFontStyleDisabled( { name: blockName } = {} ) {
 	const styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY );
-	const hasFontStyles = useSetting( 'typography.customFontStyle' );
+	const hasFontStyles = useSetting( 'typography.fontStyle' );
 
 	return ! styleSupport || ! hasFontStyles;
 }
@@ -94,7 +89,7 @@ export function useIsFontStyleDisabled( { name: blockName } = {} ) {
  */
 export function useIsFontWeightDisabled( { name: blockName } = {} ) {
 	const weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY );
-	const hasFontWeights = useSetting( 'typography.customFontWeight' );
+	const hasFontWeights = useSetting( 'typography.fontWeight' );
 
 	return ! weightSupport || ! hasFontWeights;
 }
@@ -112,3 +107,39 @@ export function useIsFontAppearanceDisabled( props ) {
 
 	return stylesDisabled && weightsDisabled;
 }
+
+/**
+ * Checks if there is either a font style or weight value set within the
+ * typography styles.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a font style or weight.
+ */
+export function hasFontAppearanceValue( props ) {
+	const { fontStyle, fontWeight } = props.attributes.style?.typography || {};
+	return !! fontStyle || !! fontWeight;
+}
+
+/**
+ * Resets the font style and weight block support attributes. This can be used
+ * when disabling the font appearance 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 resetFontAppearance( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				fontStyle: undefined,
+				fontWeight: undefined,
+			},
+		} ),
+	} );
+}

package/src/hooks/font-family.js

@@ -1,67 +1,123 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
+import TokenList from '@wordpress/token-list';
 
 /**
  * Internal dependencies
  */
-import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 import FontFamilyControl from '../components/font-family';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
-const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {
-	const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value );
-	if ( attributeParsed && attributeParsed[ 1 ] ) {
-		const fontFamilyObject = find( fontFamilies, ( { slug } ) => {
-			return slug === attributeParsed[ 1 ];
+/**
+ * Filters registered block settings, extending attributes to include
+ * the `fontFamily` attribute.
+ *
+ * @param {Object} settings Original block settings
+ * @return {Object}         Filtered block settings
+ */
+function addAttributes( settings ) {
+	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
+		return settings;
+	}
+
+	// Allow blocks to specify a default value if needed.
+	if ( ! settings.attributes.fontFamily ) {
+		Object.assign( settings.attributes, {
+			fontFamily: {
+				type: 'string',
+			},
 		} );
-		if ( fontFamilyObject ) {
-			return fontFamilyObject.fontFamily;
-		}
 	}
-	return value;
-};
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject font family.
+ *
+ * @param {Object} props      Additional props applied to save element
+ * @param {Object} blockType  Block type
+ * @param {Object} attributes Block attributes
+ * @return {Object}           Filtered props applied to save element
+ */
+function addSaveProps( props, blockType, attributes ) {
+	if ( ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) ) {
+		return props;
+	}
+
+	if (
+		hasBlockSupport(
+			blockType,
+			'typography.__experimentalSkipSerialization'
+		)
+	) {
+		return props;
+	}
+
+	if ( ! attributes?.fontFamily ) {
+		return props;
+	}
+
+	// Use TokenList to dedupe classes.
+	const classes = new TokenList( props.className );
+	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
+	const newClassName = classes.value;
+	props.className = newClassName ? newClassName : undefined;
+
+	return props;
+}
+
+/**
+ * Filters registered block settings to expand the block edit wrapper
+ * by applying the desired styles and classnames.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+function addEditProps( settings ) {
+	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
+		return settings;
+	}
+
+	const existingGetEditWrapperProps = settings.getEditWrapperProps;
+	settings.getEditWrapperProps = ( attributes ) => {
+		let props = {};
+		if ( existingGetEditWrapperProps ) {
+			props = existingGetEditWrapperProps( attributes );
+		}
+		return addSaveProps( props, settings, attributes );
+	};
+
+	return settings;
+}
 
 export function FontFamilyEdit( {
-	name,
 	setAttributes,
-	attributes: { style = {} },
+	attributes: { fontFamily },
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	const isDisable = useIsFontFamilyDisabled( { name } );
-
-	if ( isDisable ) {
-		return null;
-	}
 
-	const value = getFontFamilyFromAttributeValue(
-		fontFamilies,
-		style.typography?.fontFamily
-	);
+	const value = find( fontFamilies, ( { slug } ) => fontFamily === slug )
+		?.fontFamily;
 
 	function onChange( newValue ) {
 		const predefinedFontFamily = find(
 			fontFamilies,
-			( { fontFamily } ) => fontFamily === newValue
+			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				typography: {
-					...( style.typography || {} ),
-					fontFamily: predefinedFontFamily
-						? `var:preset|font-family|${ predefinedFontFamily.slug }`
-						: newValue || undefined,
-				},
-			} ),
+			fontFamily: predefinedFontFamily?.slug,
 		} );
 	}
 
@@ -89,3 +145,43 @@ export function useIsFontFamilyDisabled( { name } ) {
 		! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )
 	);
 }
+
+/**
+ * Checks if there is a current value set for the font family block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a font family value set.
+ */
+export function hasFontFamilyValue( props ) {
+	return !! props.attributes.fontFamily;
+}
+
+/**
+ * Resets the font family block support attribute. This can be used when
+ * disabling the font family support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetFontFamily( { setAttributes } ) {
+	setAttributes( { fontFamily: undefined } );
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/fontFamily/addAttribute',
+	addAttributes
+);
+
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/fontFamily/addSaveProps',
+	addSaveProps
+);
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/fontFamily/addEditProps',
+	addEditProps
+);

package/src/hooks/font-size.js

@@ -114,7 +114,6 @@ export function FontSizeEdit( props ) {
 		attributes: { fontSize, style },
 		setAttributes,
 	} = props;
-	const isDisabled = useIsFontSizeDisabled( props );
 	const fontSizes = useSetting( 'typography.fontSizes' );
 
 	const onChange = ( value ) => {
@@ -132,10 +131,6 @@ export function FontSizeEdit( props ) {
 		} );
 	};
 
-	if ( isDisabled ) {
-		return null;
-	}
-
 	const fontSizeObject = getFontSize(
 		fontSizes,
 		fontSize,
@@ -145,7 +140,48 @@ export function FontSizeEdit( props ) {
 	const fontSizeValue =
 		fontSizeObject?.size || style?.typography?.fontSize || fontSize;
 
-	return <FontSizePicker onChange={ onChange } value={ fontSizeValue } />;
+	return (
+		<FontSizePicker
+			onChange={ onChange }
+			value={ fontSizeValue }
+			withReset={ false }
+		/>
+	);
+}
+
+/**
+ * Checks if there is a current value set for the font size block support.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a font size value set.
+ */
+export function hasFontSizeValue( props ) {
+	const { fontSize, style } = props.attributes;
+	return !! fontSize || !! style?.typography?.fontSize;
+}
+
+/**
+ * Resets the font size block support attribute. This can be used when
+ * disabling the font size 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 resetFontSize( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		fontSize: undefined,
+		style: cleanEmptyObject( {
+			...style,
+			typography: {
+				...style?.typography,
+				fontSize: undefined,
+			},
+		} ),
+	} );
 }
 
 /**

package/src/hooks/gap.js

@@ -132,7 +132,8 @@ export function GapEdit( props ) {
 		web: (
 			<>
 				<UnitControl
-					label={ __( 'Block gap' ) }
+					label={ __( 'Block spacing' ) }
+					__unstableInputWidth="80px"
 					min={ 0 }
 					onChange={ onChange }
 					units={ units }

package/src/hooks/index.js

@@ -3,6 +3,7 @@
  */
 import './compat';
 import './align';
+import './lock';
 import './anchor';
 import './custom-class-name';
 import './generated-class-name';
@@ -17,3 +18,4 @@ export { useCustomSides } from './dimensions';
 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/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

@@ -21,3 +21,11 @@
 .block-editor-hooks__layout-controls-helptext {
 	font-size: $helptext-font-size;
 }
+
+.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/lock.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { has } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Filters registered block settings, extending attributes to include `lock`.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	// allow blocks to specify their own attribute definition with default values if needed.
+	if ( has( settings.attributes, [ 'lock', 'type' ] ) ) {
+		return settings;
+	}
+	// Gracefully handle if settings.attributes is undefined.
+	settings.attributes = {
+		...settings.attributes,
+		lock: {
+			type: 'object',
+		},
+	};
+
+	return settings;
+}
+
+addFilter( 'blocks.registerBlockType', 'core/lock/addAttribute', addAttribute );

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/style.js

@@ -18,6 +18,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useContext, createPortal } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -30,6 +31,7 @@ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import BlockList from '../components/block-list';
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
@@ -109,9 +111,7 @@ function compileElementsStyles( selector, elements = {} ) {
 				...map(
 					elementStyles,
 					( value, property ) =>
-						`\t${ kebabCase( property ) }: ${ value }${
-							element === 'link' ? '!important' : ''
-						};`
+						`\t${ kebabCase( property ) }: ${ value };`
 				),
 				'}',
 			].join( '\n' );
@@ -264,9 +264,9 @@ export const withBlockControls = createHigherOrderComponent(
 			<>
 				{ shouldDisplayControls && (
 					<>
+						<ColorEdit { ...props } />
 						<TypographyPanel { ...props } />
 						<BorderPanel { ...props } />
-						<ColorEdit { ...props } />
 						<DimensionsPanel { ...props } />
 					</>
 				) }
@@ -294,16 +294,20 @@ const withElementsStyles = createHigherOrderComponent(
 			blockElementsContainerIdentifier,
 			props.attributes.style?.elements
 		);
+		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>
-				{ elements && (
-					<style
-						dangerouslySetInnerHTML={ {
-							__html: styles,
-						} }
-					/>
-				) }
+				{ elements &&
+					element &&
+					createPortal(
+						<style
+							dangerouslySetInnerHTML={ {
+								__html: styles,
+							} }
+						/>,
+						element
+					) }
 
 				<BlockListBlock
 					{ ...props }

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