@wordpress/block-editor 11.5.0 → 11.6.0

package/src/hooks/border.js

@@ -7,66 +7,29 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { Platform } from '@wordpress/element';
+import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import {
-	BorderRadiusEdit,
-	hasBorderRadiusValue,
-	resetBorderRadius,
-} from './border-radius';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import useSetting from '../components/use-setting';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
+import {
+	useHasBorderPanel,
+	BorderPanel as StylesBorderPanel,
+} from '../components/global-styles';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
-const borderSides = [ 'top', 'right', 'bottom', 'left' ];
-
-const hasBorderValue = ( props ) => {
-	const { borderColor, style } = props.attributes;
-	return isDefinedBorder( style?.border ) || !! borderColor;
-};
-
-// The border color, style, and width are omitted so they get undefined. The
-// border radius is separate and must retain its selection.
-const resetBorder = ( { attributes = {}, setAttributes } ) => {
-	const { style } = attributes;
-	setAttributes( {
-		borderColor: undefined,
-		style: {
-			...style,
-			border: cleanEmptyObject( {
-				radius: style?.border?.radius,
-			} ),
-		},
-	} );
-};
-
-const resetBorderFilter = ( newAttributes ) => ( {
-	...newAttributes,
-	borderColor: undefined,
-	style: {
-		...newAttributes.style,
-		border: {
-			radius: newAttributes.style?.border?.radius,
-		},
-	},
-} );
-
 const getColorByProperty = ( colors, property, value ) => {
 	let matchedColor;
 
@@ -103,51 +66,6 @@ export const getMultiOriginColor = ( { colors, namedColor, customColor } ) => {
 	return colorObject ? colorObject : { color: customColor };
 };
 
-const getBorderObject = ( attributes, colors ) => {
-	const { borderColor, style } = attributes;
-	const { border: borderStyles } = style || {};
-
-	// If we have a named color for a flat border. Fetch that color object and
-	// apply that color's value to the color property within the style object.
-	if ( borderColor ) {
-		const { color } = getMultiOriginColor( {
-			colors,
-			namedColor: borderColor,
-		} );
-
-		return color ? { ...borderStyles, color } : borderStyles;
-	}
-
-	// Individual side border color slugs are stored within the border style
-	// object. If we don't have a border styles object we have nothing further
-	// to hydrate.
-	if ( ! borderStyles ) {
-		return borderStyles;
-	}
-
-	// If we have named colors for the individual side borders, retrieve their
-	// related color objects and apply the real color values to the split
-	// border objects.
-	const hydratedBorderStyles = { ...borderStyles };
-	borderSides.forEach( ( side ) => {
-		const colorSlug = getColorSlugFromVariable(
-			hydratedBorderStyles[ side ]?.color
-		);
-		if ( colorSlug ) {
-			const { color } = getMultiOriginColor( {
-				colors,
-				namedColor: colorSlug,
-			} );
-			hydratedBorderStyles[ side ] = {
-				...hydratedBorderStyles[ side ],
-				color,
-			};
-		}
-	} );
-
-	return hydratedBorderStyles;
-};
-
 function getColorSlugFromVariable( value ) {
 	const namedColor = /var:preset\|color\|(.+)/.exec( value );
 	if ( namedColor && namedColor[ 1 ] ) {
@@ -156,150 +74,101 @@ function getColorSlugFromVariable( value ) {
 	return null;
 }
 
-export function BorderPanel( props ) {
-	const { attributes, clientId, setAttributes } = props;
-	const { style } = attributes;
-	const { colors } = useMultipleOriginColorsAndGradients();
-
-	const isSupported = hasBorderSupport( props.name );
-	const isColorSupported =
-		useSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );
-	const isRadiusSupported =
-		useSetting( 'border.radius' ) &&
-		hasBorderSupport( props.name, 'radius' );
-	const isStyleSupported =
-		useSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );
-	const isWidthSupported =
-		useSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );
-
-	const isDisabled = [
-		! isColorSupported,
-		! isRadiusSupported,
-		! isStyleSupported,
-		! isWidthSupported,
-	].every( Boolean );
-
-	if ( isDisabled || ! isSupported ) {
-		return null;
+function styleToAttributes( style ) {
+	if ( hasSplitBorders( style?.border ) ) {
+		return {
+			style,
+			borderColor: undefined,
+		};
 	}
 
-	const defaultBorderControls = getBlockSupport( props.name, [
-		BORDER_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
+	const borderColorValue = style?.border?.color;
+	const borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )
+		? borderColorSlug.substring( 'var:preset|color|'.length )
+		: undefined;
+	const updatedStyle = { ...style };
+	updatedStyle.border = {
+		...updatedStyle.border,
+		color: borderColorSlug ? undefined : borderColorValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		borderColor: borderColorSlug,
+	};
+}
 
-	const showBorderByDefault =
-		defaultBorderControls?.color || defaultBorderControls?.width;
-
-	const onBorderChange = ( newBorder ) => {
-		// Filter out named colors and apply them to appropriate block
-		// attributes so that CSS classes can be used to apply those colors.
-		// e.g. has-primary-border-top-color.
-
-		let newBorderStyles = { ...newBorder };
-		let newBorderColor;
-
-		if ( hasSplitBorders( newBorder ) ) {
-			// For each side check if the side has a color value set
-			// If so, determine if it belongs to a named color, in which case
-			// we update the color property.
-			//
-			// This deliberately overwrites `newBorderStyles` to avoid mutating
-			// the passed object which causes problems otherwise.
-			newBorderStyles = {
-				top: { ...newBorder.top },
-				right: { ...newBorder.right },
-				bottom: { ...newBorder.bottom },
-				left: { ...newBorder.left },
+function attributesToStyle( attributes ) {
+	if ( hasSplitBorders( attributes.style?.border ) ) {
+		return attributes.style;
+	}
+	return {
+		...attributes.style,
+		border: {
+			...attributes.style?.border,
+			color: attributes.borderColor
+				? 'var:preset|color|' + attributes.borderColor
+				: attributes.style?.border?.color,
+		},
+	};
+}
+
+function BordersInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
 			};
+		},
+		[ resetAllFilter ]
+	);
 
-			borderSides.forEach( ( side ) => {
-				if ( newBorder[ side ]?.color ) {
-					const colorObject = getMultiOriginColor( {
-						colors,
-						customColor: newBorder[ side ]?.color,
-					} );
-
-					if ( colorObject.slug ) {
-						newBorderStyles[
-							side
-						].color = `var:preset|color|${ colorObject.slug }`;
-					}
-				}
-			} );
-		} else if ( newBorder?.color ) {
-			// We have a flat border configuration. Apply named color slug to
-			// `borderColor` attribute and clear color style property if found.
-			const customColor = newBorder?.color;
-			const colorObject = getMultiOriginColor( { colors, customColor } );
-
-			if ( colorObject.slug ) {
-				newBorderColor = colorObject.slug;
-				newBorderStyles.color = undefined;
-			}
-		}
+	return (
+		<InspectorControls
+			group="border"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-		// Ensure previous border radius styles are maintained and clean
-		// overall result for empty objects or properties.
-		const newStyle = cleanEmptyObject( {
-			...style,
-			border: { radius: style?.border?.radius, ...newBorderStyles },
+export function BorderPanel( props ) {
+	const { clientId, name, attributes, setAttributes } = props;
+	const settings = useBlockSettings( name );
+	const isEnabled = useHasBorderPanel( settings );
+	const value = useMemo( () => {
+		return attributesToStyle( {
+			style: attributes.style,
+			borderColor: attributes.borderColor,
 		} );
+	}, [ attributes.style, attributes.borderColor ] );
 
-		setAttributes( {
-			style: newStyle,
-			borderColor: newBorderColor,
-		} );
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
-	const hydratedBorder = getBorderObject( attributes, colors );
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const defaultControls = getBlockSupport( props.name, [
+		BORDER_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
 
 	return (
-		<InspectorControls group="border">
-			{ ( isWidthSupported || isColorSupported ) && (
-				<ToolsPanelItem
-					hasValue={ () => hasBorderValue( props ) }
-					label={ __( 'Border' ) }
-					onDeselect={ () => resetBorder( props ) }
-					isShownByDefault={ showBorderByDefault }
-					resetAllFilter={ resetBorderFilter }
-					panelId={ clientId }
-				>
-					<BorderBoxControl
-						colors={ colors }
-						enableAlpha={ true }
-						enableStyle={ isStyleSupported }
-						onChange={ onBorderChange }
-						popoverOffset={ 40 }
-						popoverPlacement="left-start"
-						size="__unstable-large"
-						value={ hydratedBorder }
-						__experimentalIsRenderedInSidebar={ true }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ isRadiusSupported && (
-				<ToolsPanelItem
-					hasValue={ () => hasBorderRadiusValue( props ) }
-					label={ __( 'Radius' ) }
-					onDeselect={ () => resetBorderRadius( props ) }
-					isShownByDefault={ defaultBorderControls?.radius }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						style: {
-							...newAttributes.style,
-							border: {
-								...newAttributes.style?.border,
-								radius: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<BorderRadiusEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-		</InspectorControls>
+		<StylesBorderPanel
+			as={ BordersInspectorControl }
+			panelId={ clientId }
+			name={ name }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+		/>
 	);
 }
 

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

@@ -18,8 +18,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { InspectorControls } from '../components';
 
 /**
- * Filters registered block settings, extending attributes with anchor using ID
- * of the first node.
+ * Filters registered block settings, extending attributes to include `className`.
  *
  * @param {Object} settings Original block settings.
  *
@@ -42,6 +41,7 @@ export function addAttribute( settings ) {
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the custom class name, if block supports custom class name.
+ * The control is displayed within the Advanced panel in the block inspector.
  *
  * @param {WPComponent} BlockEdit Original component.
  *
@@ -89,8 +89,8 @@ export const withInspectorControl = createHigherOrderComponent(
 );
 
 /**
- * Override props assigned to save component to inject anchor ID, if block
- * supports anchor. This is only applied if the block's save result is an
+ * Override props assigned to save component to inject the className, if block
+ * supports customClassName. This is only applied if the block's save result is an
  * element and not a markup string.
  *
  * @param {Object} extraProps Additional props applied to save element.

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

@@ -10,8 +10,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
- * Filters registered block settings, extending attributes with anchor using ID
- * of the first node.
+ * Filters registered block settings, extending attributes to include `className`.
  *
  * @param {Object} settings Original block settings.
  *
@@ -32,8 +31,8 @@ export function addAttribute( settings ) {
 }
 
 /**
- * Override props assigned to save component to inject anchor ID, if block
- * supports anchor. This is only applied if the block's save result is an
+ * Override props assigned to save component to inject the className, if block
+ * supports customClassName. This is only applied if the block's save result is an
  * element and not a markup string.
  *
  * @param {Object} extraProps Additional props applied to save element.

package/src/hooks/layout.js

@@ -35,11 +35,12 @@ const layoutBlockSupportKey = '__experimentalLayout';
 /**
  * Generates the utility classnames for the given block's layout attributes.
  *
- * @param { Object } block Block object.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
  *
  * @return { Array } Array of CSS classname strings.
  */
-export function useLayoutClasses( block = {} ) {
+export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const rootPaddingAlignment = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalFeatures
@@ -47,11 +48,10 @@ export function useLayoutClasses( block = {} ) {
 	}, [] );
 	const globalLayoutSettings = useSetting( 'layout' ) || {};
 
-	const { attributes = {}, name } = block;
-	const { layout } = attributes;
+	const { layout } = blockAttributes;
 
 	const { default: defaultBlockLayout } =
-		getBlockSupport( name, layoutBlockSupportKey ) || {};
+		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
@@ -63,10 +63,13 @@ export function useLayoutClasses( block = {} ) {
 		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
 			?.className
 	) {
-		layoutClassnames.push(
+		const baseClassName =
 			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-				?.className
-		);
+				?.className;
+		const compoundClassName = `wp-block-${ blockName
+			.split( '/' )
+			.pop() }-${ baseClassName }`;
+		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
 	if (
@@ -100,14 +103,14 @@ export function useLayoutClasses( block = {} ) {
 /**
  * Generates a CSS rule with the given block's layout styles.
  *
- * @param { Object } block    Block object.
- * @param { string } selector A selector to use in generating the CSS rule.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
+ * @param { string } selector        A selector to use in generating the CSS rule.
  *
  * @return { string } CSS rule.
  */
-export function useLayoutStyles( block = {}, selector ) {
-	const { attributes = {}, name } = block;
-	const { layout = {}, style = {} } = attributes;
+export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
+	const { layout = {}, style = {} } = blockAttributes;
 	// Update type for blocks using legacy layouts.
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
@@ -118,7 +121,7 @@ export function useLayoutStyles( block = {}, selector ) {
 	const blockGapSupport = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 	const css = fullLayoutType?.getLayoutStyle?.( {
-		blockName: name,
+		blockName,
 		selector,
 		layout,
 		layoutDefinitions: globalLayoutSettings?.definitions,
@@ -351,7 +354,7 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes, block } = props;
+		const { name, attributes } = props;
 		const hasLayoutBlockSupport = hasBlockSupport(
 			name,
 			layoutBlockSupportKey
@@ -373,7 +376,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
 		const layoutClasses = hasLayoutBlockSupport
-			? useLayoutClasses( block )
+			? useLayoutClasses( attributes, name )
 			: null;
 		// Higher specificity to override defaults from theme.json.
 		const selector = `.wp-container-${ id }.wp-container-${ id }`;

package/src/hooks/supports.js

@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * columns e.g. settings found in `block.json`.
+ */
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 /**
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
@@ -42,6 +47,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,

package/src/hooks/test/style.js

@@ -21,7 +21,7 @@ describe( 'getInlineStyles', () => {
 		expect(
 			getInlineStyles( {
 				color: { text: 'red', background: 'black' },
-				typography: { lineHeight: 1.5, fontSize: 10 },
+				typography: { lineHeight: 1.5, fontSize: 10, textColumns: 2 },
 				border: {
 					radius: '10px',
 					width: '1em',
@@ -44,6 +44,7 @@ describe( 'getInlineStyles', () => {
 			borderStyle: 'dotted',
 			borderWidth: '1em',
 			color: 'red',
+			columnCount: 2,
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',

package/src/hooks/test/use-typography-props.js

@@ -12,6 +12,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
@@ -19,6 +20,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
 			className: 'has-tofu-font-family has-large-font-size',
 			style: {
+				columnCount: 3,
 				letterSpacing: '22px',
 				fontSize: '2rem',
 				textTransform: 'uppercase',

package/src/hooks/typography.js

@@ -27,6 +27,7 @@ function omit( object, keys ) {
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
@@ -36,6 +37,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,

package/src/hooks/utils.js

@@ -202,6 +202,7 @@ export function useBlockSettings( name, parentLayout ) {
 	const fontStyle = useSetting( 'typography.fontStyle' );
 	const fontWeight = useSetting( 'typography.fontWeight' );
 	const lineHeight = useSetting( 'typography.lineHeight' );
+	const textColumns = useSetting( 'typography.textColumns' );
 	const textDecoration = useSetting( 'typography.textDecoration' );
 	const textTransform = useSetting( 'typography.textTransform' );
 	const letterSpacing = useSetting( 'typography.letterSpacing' );
@@ -212,9 +213,27 @@ export function useBlockSettings( name, parentLayout ) {
 	const units = useSetting( 'spacing.units' );
 	const minHeight = useSetting( 'dimensions.minHeight' );
 	const layout = useSetting( 'layout' );
+	const borderColor = useSetting( 'border.color' );
+	const borderRadius = useSetting( 'border.radius' );
+	const borderStyle = useSetting( 'border.style' );
+	const borderWidth = useSetting( 'border.width' );
+	const customColorsEnabled = useSetting( 'color.custom' );
+	const customColors = useSetting( 'color.palette.custom' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const defaultPalette = useSetting( 'color.defaultPalette' );
 
 	const rawSettings = useMemo( () => {
 		return {
+			color: {
+				palette: {
+					custom: customColors,
+					theme: themeColors,
+					default: defaultColors,
+				},
+				defaultPalette,
+				custom: customColorsEnabled,
+			},
 			typography: {
 				fontFamilies: {
 					custom: fontFamilies,
@@ -226,6 +245,7 @@ export function useBlockSettings( name, parentLayout ) {
 				fontStyle,
 				fontWeight,
 				lineHeight,
+				textColumns,
 				textDecoration,
 				textTransform,
 				letterSpacing,
@@ -239,6 +259,12 @@ export function useBlockSettings( name, parentLayout ) {
 				blockGap,
 				units,
 			},
+			border: {
+				color: borderColor,
+				radius: borderRadius,
+				style: borderStyle,
+				width: borderWidth,
+			},
 			dimensions: {
 				minHeight,
 			},
@@ -252,6 +278,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textColumns,
 		textDecoration,
 		textTransform,
 		letterSpacing,
@@ -263,6 +290,15 @@ export function useBlockSettings( name, parentLayout ) {
 		minHeight,
 		layout,
 		parentLayout,
+		borderColor,
+		borderRadius,
+		borderStyle,
+		borderWidth,
+		customColorsEnabled,
+		customColors,
+		themeColors,
+		defaultColors,
+		defaultPalette,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );