@wordpress/block-editor 7.0.2 → 8.0.1

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/components/writing-flow/use-multi-selection.js

@@ -122,6 +122,12 @@ export default function useMultiSelection() {
 				return;
 			}
 
+			// The block refs might not be immediately available
+			// when dragging blocks into another block.
+			if ( ! startRef.current || ! endRef.current ) {
+				return;
+			}
+
 			// For some browsers, like Safari, it is important that focus happens
 			// BEFORE selection.
 			node.focus();

package/src/components/writing-flow/use-tab-nav.js

@@ -27,9 +27,11 @@ export default function useTabNav() {
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 	const lastFocus = useRef();
-	const { hasMultiSelection, getSelectedBlockClientId } = useSelect(
-		blockEditorStore
-	);
+	const {
+		hasMultiSelection,
+		getSelectedBlockClientId,
+		getBlockCount,
+	} = useSelect( blockEditorStore );
 	const { setNavigationMode } = useDispatch( blockEditorStore );
 	const isNavigationMode = useSelect(
 		( select ) => select( blockEditorStore ).isNavigationMode(),
@@ -143,6 +145,18 @@ export default function useTabNav() {
 
 		function onFocusOut( event ) {
 			lastFocus.current = event.target;
+
+			const { ownerDocument } = node;
+
+			// If focus disappears due to there being no blocks, move focus to
+			// the writing flow wrapper.
+			if (
+				! event.relatedTarget &&
+				ownerDocument.activeElement === ownerDocument.body &&
+				getBlockCount() === 0
+			) {
+				node.focus();
+			}
 		}
 
 		// When tabbing back to an element in block list, this event handler prevents scrolling if the

package/src/hooks/align.js

@@ -63,7 +63,7 @@ export function getValidAlignments(
 		);
 	} else if ( blockAlign === true ) {
 		// `true` includes all alignments...
-		validAlignments = ALL_ALIGNMENTS;
+		validAlignments = [ ...ALL_ALIGNMENTS ];
 	} else {
 		validAlignments = [];
 	}
@@ -117,19 +117,23 @@ export function addAttribute( settings ) {
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		// Compute the block allowed alignments without taking into account,
-		// if the theme supports wide alignments or not
-		// and without checking the layout for availble alignments.
-		// BlockAlignmentToolbar takes both of these into account.
+		// Compute the block valid alignments by taking into account,
+		// if the theme supports wide alignments or not and the layout's
+		// availble alignments. We do that for conditionally rendering
+		// Slot.
 		const blockAllowedAlignments = getValidAlignments(
 			getBlockSupport( blockName, 'align' ),
 			hasBlockSupport( blockName, 'alignWide', true )
 		);
 
+		const validAlignments = useAvailableAlignments(
+			blockAllowedAlignments
+		).map( ( { name } ) => name );
+
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
 				const blockType = getBlockType( props.name );
-				const blockDefaultAlign = blockType.attributes?.align?.default;
+				const blockDefaultAlign = blockType?.attributes?.align?.default;
 				if ( blockDefaultAlign ) {
 					nextAlign = '';
 				}
@@ -139,12 +143,15 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return (
 			<>
-				{ blockAllowedAlignments.length > 0 && (
-					<BlockControls group="block" __experimentalExposeToChildren>
+				{ !! validAlignments.length && (
+					<BlockControls
+						group="block"
+						__experimentalShareWithChildBlocks
+					>
 						<BlockAlignmentControl
 							value={ props.attributes.align }
 							onChange={ updateAlignment }
-							controls={ blockAllowedAlignments }
+							controls={ validAlignments }
 						/>
 					</BlockControls>
 				) }
@@ -181,7 +188,9 @@ export const withDataAlign = createHigherOrderComponent(
 		}
 
 		let wrapperProps = props.wrapperProps;
-		if ( validAlignments.includes( align ) ) {
+		if (
+			validAlignments.some( ( alignment ) => alignment.name === align )
+		) {
 			wrapperProps = { ...wrapperProps, 'data-align': align };
 		}
 

package/src/hooks/anchor.js

@@ -81,9 +81,9 @@ export const withInspectorControl = createHigherOrderComponent(
 
 								{ isWeb && (
 									<ExternalLink
-										href={
+										href={ __(
 											'https://wordpress.org/support/article/page-jumps/'
-										}
+										) }
 									>
 										{ __( 'Learn more about anchors' ) }
 									</ExternalLink>

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

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,6 +20,7 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
+	showTitle = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
@@ -58,6 +59,8 @@ export default function ColorPanel( {
 				title={ __( 'Color' ) }
 				initialOpen={ false }
 				settings={ settings }
+				showTitle={ showTitle }
+				__experimentalHasMultipleOrigins
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

package/src/hooks/color.js

@@ -335,10 +335,13 @@ export function ColorEdit( props ) {
 		const newLinkColorValue = colorObject?.slug
 			? `var:preset|color|${ colorObject.slug }`
 			: value;
-		const newStyle = immutableSet(
-			style,
-			[ 'elements', 'link', 'color', 'text' ],
-			newLinkColorValue
+
+		const newStyle = cleanEmptyObject(
+			immutableSet(
+				style,
+				[ 'elements', 'link', 'color', 'text' ],
+				newLinkColorValue
+			)
 		);
 		props.setAttributes( { style: newStyle } );
 	};

package/src/hooks/dimensions.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -34,7 +31,6 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
-import { cleanEmptyObject } from './utils';
 
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
@@ -63,62 +59,55 @@ export function DimensionsPanel( props ) {
 		'__experimentalDefaultControls',
 	] );
 
-	// Callback to reset all block support attributes controlled via this panel.
-	const resetAll = () => {
-		const { style } = props.attributes;
-
-		props.setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				spacing: {
-					...style?.spacing,
-					blockGap: undefined,
-					margin: undefined,
-					padding: undefined,
-				},
-			} ),
-		} );
-	};
+	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
+		...newAttributes,
+		style: {
+			...newAttributes.style,
+			spacing: {
+				...newAttributes.style?.spacing,
+				[ attribute ]: undefined,
+			},
+		},
+	} );
 
 	return (
-		<InspectorControls key="dimensions">
-			<ToolsPanel
-				label={ __( 'Dimensions options' ) }
-				header={ __( 'Dimensions' ) }
-				resetAll={ resetAll }
-			>
-				{ ! isPaddingDisabled && (
-					<ToolsPanelItem
-						hasValue={ () => hasPaddingValue( props ) }
-						label={ __( 'Padding' ) }
-						onDeselect={ () => resetPadding( props ) }
-						isShownByDefault={ defaultSpacingControls?.padding }
-					>
-						<PaddingEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-				{ ! isMarginDisabled && (
-					<ToolsPanelItem
-						hasValue={ () => hasMarginValue( props ) }
-						label={ __( 'Margin' ) }
-						onDeselect={ () => resetMargin( props ) }
-						isShownByDefault={ defaultSpacingControls?.margin }
-					>
-						<MarginEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-				{ ! isGapDisabled && (
-					<ToolsPanelItem
-						className="single-column"
-						hasValue={ () => hasGapValue( props ) }
-						label={ __( 'Block gap' ) }
-						onDeselect={ () => resetGap( props ) }
-						isShownByDefault={ defaultSpacingControls?.blockGap }
-					>
-						<GapEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-			</ToolsPanel>
+		<InspectorControls __experimentalGroup="dimensions">
+			{ ! isPaddingDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasPaddingValue( props ) }
+					label={ __( 'Padding' ) }
+					onDeselect={ () => resetPadding( props ) }
+					resetAllFilter={ createResetAllFilter( 'padding' ) }
+					isShownByDefault={ defaultSpacingControls?.padding }
+					panelId={ props.clientId }
+				>
+					<PaddingEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isMarginDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasMarginValue( props ) }
+					label={ __( 'Margin' ) }
+					onDeselect={ () => resetMargin( props ) }
+					resetAllFilter={ createResetAllFilter( 'margin' ) }
+					isShownByDefault={ defaultSpacingControls?.margin }
+					panelId={ props.clientId }
+				>
+					<MarginEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isGapDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasGapValue( props ) }
+					label={ __( 'Block spacing' ) }
+					onDeselect={ () => resetGap( props ) }
+					resetAllFilter={ createResetAllFilter( 'blockGap' ) }
+					isShownByDefault={ defaultSpacingControls?.blockGap }
+					panelId={ props.clientId }
+				>
+					<GapEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 }

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
@@ -25,6 +26,8 @@ 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" __experimentalExposeToChildren>
+		<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,13 +279,15 @@ 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 );