@wordpress/block-editor 7.0.1 → 8.0.0

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,22 +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 = '';
 				}
@@ -140,18 +141,23 @@ export const withToolbarControls = createHigherOrderComponent(
 			props.setAttributes( { align: nextAlign } );
 		};
 
-		return [
-			validAlignments.length > 0 && props.isSelected && (
-				<BlockControls key="align-controls" group="block">
-					<BlockAlignmentControl
-						value={ props.attributes.align }
-						onChange={ updateAlignment }
-						controls={ validAlignments }
-					/>
-				</BlockControls>
-			),
-			<BlockEdit key="edit" { ...props } />,
-		];
+		return (
+			<>
+				{ !! validAlignments.length && (
+					<BlockControls
+						group="block"
+						__experimentalShareWithChildBlocks
+					>
+						<BlockAlignmentControl
+							value={ props.attributes.align }
+							onChange={ updateAlignment }
+							controls={ validAlignments }
+						/>
+					</BlockControls>
+				) }
+				<BlockEdit { ...props } />
+			</>
+		);
 	},
 	'withToolbarControls'
 );
@@ -182,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

@@ -16,7 +16,7 @@ import { Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { InspectorControls, InspectorAdvancedControls } from '../components';
+import { InspectorControls } from '../components';
 
 /**
  * Regular expression matching invalid anchor characters for replacement.
@@ -81,9 +81,9 @@ export const withInspectorControl = createHigherOrderComponent(
 
 								{ isWeb && (
 									<ExternalLink
-										href={
+										href={ __(
 											'https://wordpress.org/support/article/page-jumps/'
-										}
+										) }
 									>
 										{ __( 'Learn more about anchors' ) }
 									</ExternalLink>
@@ -107,9 +107,9 @@ export const withInspectorControl = createHigherOrderComponent(
 					<>
 						<BlockEdit { ...props } />
 						{ isWeb && (
-							<InspectorAdvancedControls>
+							<InspectorControls __experimentalGroup="advanced">
 								{ textControl }
-							</InspectorAdvancedControls>
+							</InspectorControls>
 						) }
 						{ /*
 						 * We plan to remove scoping anchors to 'core/heading' to support

package/src/hooks/border-color.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -48,8 +49,18 @@ export function BorderColorEdit( props ) {
 	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const disableCustomColors = ! useSetting( 'color.custom' );
 	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+	const [ colorValue, setColorValue ] = useState(
+		() =>
+			getColorObjectByAttributeValues(
+				colors,
+				borderColor,
+				style?.border?.color
+			)?.color
+	);
 
 	const onChangeColor = ( value ) => {
+		setColorValue( value );
+
 		const colorObject = getColorObjectByColorValue( colors, value );
 		const newStyle = {
 			...style,
@@ -71,7 +82,7 @@ export function BorderColorEdit( props ) {
 	return (
 		<ColorGradientControl
 			label={ __( 'Color' ) }
-			value={ borderColor || style?.border?.color }
+			colorValue={ colorValue }
 			colors={ colors }
 			gradients={ undefined }
 			disableCustomColors={ disableCustomColors }

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

@@ -222,6 +222,8 @@ export function ColorEdit( props ) {
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
 	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
 	const isLinkEnabled = useSetting( 'color.link' );
+	const isTextEnabled = useSetting( 'color.text' );
+	const isBackgroundEnabled = useSetting( 'color.background' );
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
@@ -242,9 +244,11 @@ export function ColorEdit( props ) {
 		( solids.length > 0 || areCustomSolidsEnabled );
 	const hasTextColor =
 		hasTextColorSupport( blockName ) &&
+		isTextEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 	const hasBackgroundColor =
 		hasBackgroundColorSupport( blockName ) &&
+		isBackgroundEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 	const hasGradientColor =
 		hasGradientSupport( blockName ) &&
@@ -331,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/compat.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
+
+function migrateLightBlockWrapper( settings ) {
+	const { apiVersion = 1 } = settings;
+	if (
+		apiVersion < 2 &&
+		hasBlockSupport( settings, 'lightBlockWrapper', false )
+	) {
+		settings.apiVersion = 2;
+	}
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/compat/migrateLightBlockWrapper',
+	migrateLightBlockWrapper
+);

package/src/hooks/custom-class-name.js

@@ -15,7 +15,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { InspectorAdvancedControls } from '../components';
+import { InspectorControls } from '../components';
 
 /**
  * Filters registered block settings, extending attributes with anchor using ID
@@ -59,7 +59,7 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						<InspectorAdvancedControls>
+						<InspectorControls __experimentalGroup="advanced">
 							<TextControl
 								autoComplete="off"
 								label={ __( 'Additional CSS class(es)' ) }
@@ -76,7 +76,7 @@ export const withInspectorControl = createHigherOrderComponent(
 									'Separate multiple classes with spaces.'
 								) }
 							/>
-						</InspectorAdvancedControls>
+						</InspectorControls>
 					</>
 				);
 			}

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';
@@ -13,6 +10,13 @@ import { getBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
+import {
+	GapEdit,
+	hasGapSupport,
+	hasGapValue,
+	resetGap,
+	useIsGapDisabled,
+} from './gap';
 import {
 	MarginEdit,
 	hasMarginSupport,
@@ -27,9 +31,10 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
-import { cleanEmptyObject } from './utils';
 
 export const SPACING_SUPPORT_KEY = 'spacing';
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
 /**
  * Inspector controls for dimensions support.
@@ -39,6 +44,7 @@ export const SPACING_SUPPORT_KEY = 'spacing';
  * @return {WPElement} Inspector controls for spacing support features.
  */
 export function DimensionsPanel( props ) {
+	const isGapDisabled = useIsGapDisabled( props );
 	const isPaddingDisabled = useIsPaddingDisabled( props );
 	const isMarginDisabled = useIsMarginDisabled( props );
 	const isDisabled = useIsDimensionsDisabled( props );
@@ -53,50 +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,
-					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>
-				) }
-			</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>
 	);
 }
@@ -113,7 +124,11 @@ export function hasDimensionsSupport( blockName ) {
 		return false;
 	}
 
-	return hasPaddingSupport( blockName ) || hasMarginSupport( blockName );
+	return (
+		hasGapSupport( blockName ) ||
+		hasPaddingSupport( blockName ) ||
+		hasMarginSupport( blockName )
+	);
 }
 
 /**
@@ -124,10 +139,11 @@ export function hasDimensionsSupport( blockName ) {
  * @return {boolean} If spacing support is completely disabled.
  */
 const useIsDimensionsDisabled = ( props = {} ) => {
+	const gapDisabled = useIsGapDisabled( props );
 	const paddingDisabled = useIsPaddingDisabled( props );
 	const marginDisabled = useIsMarginDisabled( props );
 
-	return paddingDisabled && marginDisabled;
+	return gapDisabled && paddingDisabled && marginDisabled;
 };
 
 /**
@@ -146,9 +162,37 @@ export function useCustomSides( blockName, feature ) {
 	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
 
 	// Skip when setting is boolean as theme isn't setting arbitrary sides.
-	if ( typeof support[ feature ] === 'boolean' ) {
+	if ( ! support || typeof support[ feature ] === 'boolean' ) {
 		return;
 	}
 
 	return support[ feature ];
 }
+
+/**
+ * Custom hook to determine whether the sides configured in the
+ * block support are valid. A dimension property cannot declare
+ * support for a mix of axial and individual sides.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
+ *
+ * @return {boolean} If the feature has a valid configuration of sides.
+ */
+export function useIsDimensionsSupportValid( blockName, feature ) {
+	const sides = useCustomSides( blockName, feature );
+
+	if (
+		sides &&
+		sides.some( ( side ) => ALL_SIDES.includes( side ) ) &&
+		sides.some( ( side ) => AXIAL_SIDES.includes( side ) )
+	) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`The ${ feature } support for the "${ blockName }" block can not be configured to support both axial and arbitrary sides.`
+		);
+		return false;
+	}
+
+	return true;
+}