@wordpress/block-editor 7.0.4 → 8.0.0

package/src/components/use-setting/index.js

@@ -34,8 +34,7 @@ const deprecatedFlags = {
 		settings.disableCustomFontSizes === undefined
 			? undefined
 			: ! settings.disableCustomFontSizes,
-	'typography.customLineHeight': ( settings ) =>
-		settings.enableCustomLineHeight,
+	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
 	'spacing.units': ( settings ) => {
 		if ( settings.enableCustomUnits === undefined ) {
 			return;
@@ -47,7 +46,46 @@ const deprecatedFlags = {
 
 		return settings.enableCustomUnits;
 	},
-	'spacing.customPadding': ( settings ) => settings.enableCustomSpacing,
+	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
+};
+
+const prefixedFlags = {
+	/*
+	 * These were only available in the plugin
+	 * and can be removed when the minimum WordPress version
+	 * for the plugin is 5.9.
+	 */
+	'border.customColor': 'border.color',
+	'border.customStyle': 'border.style',
+	'border.customWidth': 'border.width',
+	'typography.customFontStyle': 'typography.fontStyle',
+	'typography.customFontWeight': 'typography.fontWeight',
+	'typography.customLetterSpacing': 'typography.letterSpacing',
+	'typography.customTextDecorations': 'typography.textDecoration',
+	'typography.customTextTransforms': 'typography.textTransform',
+	/*
+	 * These were part of WordPress 5.8 and we need to keep them.
+	 */
+	'border.customRadius': 'border.radius',
+	'spacing.customMargin': 'spacing.margin',
+	'spacing.customPadding': 'spacing.padding',
+	'typography.customLineHeight': 'typography.lineHeight',
+};
+
+/**
+ * Remove `custom` prefixes for flags that did not land in 5.8.
+ *
+ * This provides continued support for `custom` prefixed properties. It will
+ * be removed once third party devs have had sufficient time to update themes,
+ * plugins, etc.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34485
+ *
+ * @param {string} path Path to desired value in settings.
+ * @return {string}     The value for defined setting.
+ */
+const removeCustomPrefixes = ( path ) => {
+	return prefixedFlags[ path ] || path;
 };
 
 /**
@@ -55,9 +93,7 @@ const deprecatedFlags = {
  * It works with nested objects using by finding the value at path.
  *
  * @param {string} path The path to the setting.
- *
  * @return {any} Returns the value defined for the setting.
- *
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );
@@ -72,12 +108,14 @@ export default function useSetting( path ) {
 
 			// 1 - Use __experimental features, if available.
 			// We cascade to the all value if the block one is not available.
-			const defaultsPath = `__experimentalFeatures.${ path }`;
-			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`;
+			const normalizedPath = removeCustomPrefixes( path );
+			const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
+			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
 			const experimentalFeaturesResult =
 				get( settings, blockPath ) ?? get( settings, defaultsPath );
+
 			if ( experimentalFeaturesResult !== undefined ) {
-				if ( PATHS_WITH_MERGE[ path ] ) {
+				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
 					return (
 						experimentalFeaturesResult.user ??
 						experimentalFeaturesResult.theme ??
@@ -88,8 +126,8 @@ export default function useSetting( path ) {
 			}
 
 			// 2 - Use deprecated settings, otherwise.
-			const deprecatedSettingsValue = deprecatedFlags[ path ]
-				? deprecatedFlags[ path ]( settings )
+			const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ]
+				? deprecatedFlags[ normalizedPath ]( settings )
 				: undefined;
 			if ( deprecatedSettingsValue !== undefined ) {
 				return deprecatedSettingsValue;
@@ -99,7 +137,7 @@ export default function useSetting( path ) {
 			// This is only necessary to support typography.dropCap.
 			// when __experimentalFeatures are not present (core without plugin).
 			// To remove when __experimentalFeatures are ported to core.
-			return path === 'typography.dropCap' ? true : undefined;
+			return normalizedPath === 'typography.dropCap' ? true : undefined;
 		},
 		[ blockName, path ]
 	);

package/src/hooks/border.js

@@ -23,20 +23,17 @@ export function BorderPanel( props ) {
 	const isSupported = hasBorderSupport( props.name );
 
 	const isColorSupported =
-		useSetting( 'border.customColor' ) &&
-		hasBorderSupport( props.name, 'color' );
+		useSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );
 
 	const isRadiusSupported =
-		useSetting( 'border.customRadius' ) &&
+		useSetting( 'border.radius' ) &&
 		hasBorderSupport( props.name, 'radius' );
 
 	const isStyleSupported =
-		useSetting( 'border.customStyle' ) &&
-		hasBorderSupport( props.name, 'style' );
+		useSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );
 
 	const isWidthSupported =
-		useSetting( 'border.customWidth' ) &&
-		hasBorderSupport( props.name, 'width' );
+		useSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );
 
 	if ( isDisabled || ! isSupported ) {
 		return null;
@@ -113,10 +110,10 @@ export function shouldSkipSerialization( blockType ) {
  */
 const useIsBorderDisabled = () => {
 	const configs = [
-		! useSetting( 'border.customColor' ),
-		! useSetting( 'border.customRadius' ),
-		! useSetting( 'border.customStyle' ),
-		! useSetting( 'border.customWidth' ),
+		! useSetting( 'border.color' ),
+		! useSetting( 'border.radius' ),
+		! useSetting( 'border.style' ),
+		! useSetting( 'border.width' ),
 	];
 
 	return configs.every( Boolean );

package/src/hooks/color-panel.js

@@ -60,6 +60,7 @@ export default function ColorPanel( {
 				initialOpen={ false }
 				settings={ settings }
 				showTitle={ showTitle }
+				__experimentalHasMultipleOrigins
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

package/src/hooks/duotone.js

@@ -36,13 +36,14 @@ extend( [ namesPlugin ] );
  * @return {Object} R, G, and B values.
  */
 export function getValuesFromColors( colors = [] ) {
-	const values = { r: [], g: [], b: [] };
+	const values = { r: [], g: [], b: [], a: [] };
 
 	colors.forEach( ( color ) => {
 		const rgbColor = colord( color ).toRgb();
 		values.r.push( rgbColor.r / 255 );
 		values.g.push( rgbColor.g / 255 );
 		values.b.push( rgbColor.b / 255 );
+		values.a.push( rgbColor.a );
 	} );
 
 	return values;
@@ -55,6 +56,7 @@ export function getValuesFromColors( colors = [] ) {
  * @property {number[]} r Red values.
  * @property {number[]} g Green values.
  * @property {number[]} b Blue values.
+ * @property {number[]} a Alpha values.
  */
 
 /**
@@ -63,7 +65,7 @@ export function getValuesFromColors( colors = [] ) {
  * @param {Object} props          Duotone props.
  * @param {string} props.selector Selector to apply the filter to.
  * @param {string} props.id       Unique id for this duotone filter.
- * @param {Values} props.values   R, G, and B values to filter with.
+ * @param {Values} props.values   R, G, B, and A values to filter with.
  *
  * @return {WPElement} Duotone element.
  */
@@ -93,13 +95,16 @@ ${ selector } {
 				<defs>
 					<filter id={ id }>
 						<feColorMatrix
+							// Use sRGB instead of linearRGB so transparency looks correct.
+							colorInterpolationFilters="sRGB"
 							type="matrix"
 							// Use perceptual brightness to convert to grayscale.
-							// prettier-ignore
-							values=".299 .587 .114 0 0
-							        .299 .587 .114 0 0
-							        .299 .587 .114 0 0
-							        0 0 0 1 0"
+							values="
+								.299 .587 .114 0 0
+								.299 .587 .114 0 0
+								.299 .587 .114 0 0
+								.299 .587 .114 0 0
+							"
 						/>
 						<feComponentTransfer
 							// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
@@ -117,7 +122,16 @@ ${ selector } {
 								type="table"
 								tableValues={ values.b.join( ' ' ) }
 							/>
+							<feFuncA
+								type="table"
+								tableValues={ values.a.join( ' ' ) }
+							/>
 						</feComponentTransfer>
+						<feComposite
+							// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+							in2="SourceGraphic"
+							operator="in"
+						/>
 					</filter>
 				</defs>
 			</SVG>

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

@@ -22,8 +22,8 @@ export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
  * Filters registered block settings, extending attributes to include
  * the `fontFamily` attribute.
  *
- * @param  {Object} settings Original block settings
- * @return {Object}          Filtered block settings
+ * @param {Object} settings Original block settings
+ * @return {Object}         Filtered block settings
  */
 function addAttributes( settings ) {
 	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
@@ -45,10 +45,10 @@ function addAttributes( 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
+ * @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 ) ) {
@@ -58,7 +58,7 @@ function addSaveProps( props, blockType, attributes ) {
 	if (
 		hasBlockSupport(
 			blockType,
-			'__experimentalSkipTypographySerialization'
+			'typography.__experimentalSkipSerialization'
 		)
 	) {
 		return props;
@@ -103,16 +103,10 @@ function addEditProps( settings ) {
 }
 
 export function FontFamilyEdit( {
-	name,
 	setAttributes,
 	attributes: { fontFamily },
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	const isDisable = useIsFontFamilyDisabled( { name } );
-
-	if ( isDisable ) {
-		return null;
-	}
 
 	const value = find( fontFamilies, ( { slug } ) => fontFamily === slug )
 		?.fontFamily;
@@ -152,6 +146,28 @@ export function useIsFontFamilyDisabled( { name } ) {
 	);
 }
 
+/**
+ * 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',

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

@@ -18,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

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