@wordpress/block-editor 7.0.1 → 8.0.0

package/src/hooks/duotone.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
@@ -21,10 +22,12 @@ import {
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
-import { Head } from '../components/block-list/head';
+import BlockList from '../components/block-list';
 
 const EMPTY_ARRAY = [];
 
+extend( [ namesPlugin ] );
+
 /**
  * Convert a list of colors to an object of R, G, and B values.
  *
@@ -33,14 +36,14 @@ const EMPTY_ARRAY = [];
  * @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 ) => {
-		// Access values directly to skip extra rounding that tinycolor.toRgb() does.
-		const tcolor = tinycolor( color );
-		values.r.push( tcolor._r / 255 );
-		values.g.push( tcolor._g / 255 );
-		values.b.push( tcolor._b / 255 );
+		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;
@@ -53,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.
  */
 
 /**
@@ -61,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.
  */
@@ -91,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.
@@ -115,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>
@@ -140,7 +156,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
 	}
 
 	return (
-		<BlockControls group="block">
+		<BlockControls group="block" __experimentalShareWithChildBlocks>
 			<DuotoneControl
 				duotonePalette={ duotonePalette }
 				colorPalette={ colorPalette }
@@ -213,6 +229,37 @@ const withDuotoneControls = createHigherOrderComponent(
 	'withDuotoneControls'
 );
 
+/**
+ * Function that scopes a selector with another one. This works a bit like
+ * SCSS nesting except the `&` operator isn't supported.
+ *
+ * @example
+ * ```js
+ * const scope = '.a, .b .c';
+ * const selector = '> .x, .y';
+ * const merged = scopeSelector( scope, selector );
+ * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+ * ```
+ *
+ * @param {string} scope    Selector to scope to.
+ * @param {string} selector Original selector.
+ *
+ * @return {string} Scoped selector.
+ */
+function scopeSelector( scope, selector ) {
+	const scopes = scope.split( ',' );
+	const selectors = selector.split( ',' );
+
+	const selectorsScoped = [];
+	scopes.forEach( ( outer ) => {
+		selectors.forEach( ( inner ) => {
+			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
+		} );
+	} );
+
+	return selectorsScoped.join( ', ' );
+}
+
 /**
  * Override the default block element to include duotone styles.
  *
@@ -232,17 +279,19 @@ const withDuotoneStyles = createHigherOrderComponent(
 			return <BlockListBlock { ...props } />;
 		}
 
-		const id = `wp-duotone-filter-${ useInstanceId( BlockListBlock ) }`;
+		const id = `wp-duotone-${ useInstanceId( BlockListBlock ) }`;
 
-		const selectors = duotoneSupport.split( ',' );
-		const selectorsScoped = selectors.map(
-			( selector ) => `.${ id } ${ selector.trim() }`
+		// Extra .editor-styles-wrapper specificity is needed in the editor
+		// since we're not using inline styles to apply the filter. We need to
+		// override duotone applied by global styles and theme.json.
+		const selectorsGroup = scopeSelector(
+			`.editor-styles-wrapper .${ id }`,
+			duotoneSupport
 		);
-		const selectorsGroup = selectorsScoped.join( ', ' );
 
 		const className = classnames( props?.className, id );
 
-		const element = useContext( Head.context );
+		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>

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

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+import { getBlockSupport } from '@wordpress/blocks';
+import {
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import useSetting from '../components/use-setting';
+import { SPACING_SUPPORT_KEY } from './dimensions';
+import { cleanEmptyObject } from './utils';
+
+/**
+ * Determines if there is gap support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ * @return {boolean}                 Whether there is support.
+ */
+export function hasGapSupport( blockType ) {
+	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
+	return !! ( true === support || support?.blockGap );
+}
+
+/**
+ * Checks if there is a current value in the gap block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}      Whether or not the block has a gap value set.
+ */
+export function hasGapValue( props ) {
+	return props.attributes.style?.spacing?.blockGap !== undefined;
+}
+
+/**
+ * Resets the gap block support attribute. This can be used when disabling
+ * the gap 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 resetGap( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: {
+			...style,
+			spacing: {
+				...style?.spacing,
+				blockGap: undefined,
+			},
+		},
+	} );
+}
+
+/**
+ * Custom hook that checks if gap settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean}     Whether the gap setting is disabled.
+ */
+export function useIsGapDisabled( { name: blockName } = {} ) {
+	const isDisabled = ! useSetting( 'spacing.blockGap' );
+	return ! hasGapSupport( blockName ) || isDisabled;
+}
+
+/**
+ * Inspector control panel containing the gap related configuration
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Gap edit element.
+ */
+export function GapEdit( props ) {
+	const {
+		clientId,
+		attributes: { style },
+		setAttributes,
+	} = props;
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
+	const ref = useBlockRef( clientId );
+
+	if ( useIsGapDisabled( props ) ) {
+		return null;
+	}
+
+	const onChange = ( next ) => {
+		const newStyle = {
+			...style,
+			spacing: {
+				...style?.spacing,
+				blockGap: next,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+
+		// In Safari, changing the `gap` CSS value on its own will not trigger the layout
+		// to be recalculated / re-rendered. To force the updated gap to re-render, here
+		// we replace the block's node with itself.
+		const isSafari =
+			window?.navigator.userAgent &&
+			window.navigator.userAgent.includes( 'Safari' ) &&
+			! window.navigator.userAgent.includes( 'Chrome ' ) &&
+			! window.navigator.userAgent.includes( 'Chromium ' );
+
+		if ( ref.current && isSafari ) {
+			ref.current.parentNode?.replaceChild( ref.current, ref.current );
+		}
+	};
+
+	return Platform.select( {
+		web: (
+			<>
+				<UnitControl
+					label={ __( 'Block spacing' ) }
+					__unstableInputWidth="80px"
+					min={ 0 }
+					onChange={ onChange }
+					units={ units }
+					value={ style?.spacing?.blockGap }
+				/>
+			</>
+		),
+		native: null,
+	} );
+}

package/src/hooks/index.js

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
+import './compat';
 import './align';
+import './lock';
 import './anchor';
 import './custom-class-name';
 import './generated-class-name';
@@ -16,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

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './compat';
 import './align';
 import './anchor';
 import './custom-class-name';
@@ -12,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';