@wordpress/block-editor 11.5.0 → 11.6.0

package/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js

@@ -25,59 +25,69 @@ import { store as blockEditorStore } from '../../store';
  * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
  * should be rendered, to avoid ending up with an empty MenuGroup.
  *
+ * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
+ *                                      from the block editor store are used if this is not provided.
+ *
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
-export default function useConvertToGroupButtonProps() {
+export default function useConvertToGroupButtonProps( selectedClientIds ) {
 	const {
 		clientIds,
 		isGroupable,
 		isUngroupable,
 		blocksSelection,
 		groupingBlockName,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockRootClientId,
-			getBlocksByClientId,
-			canInsertBlockType,
-			getSelectedBlockClientIds,
-		} = select( blockEditorStore );
-		const { getGroupingBlockName } = select( blocksStore );
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlocksByClientId,
+				canInsertBlockType,
+				getSelectedBlockClientIds,
+			} = select( blockEditorStore );
+			const { getGroupingBlockName } = select( blocksStore );
+
+			const _clientIds = selectedClientIds?.length
+				? selectedClientIds
+				: getSelectedBlockClientIds();
+			const _groupingBlockName = getGroupingBlockName();
 
-		const _clientIds = getSelectedBlockClientIds();
-		const _groupingBlockName = getGroupingBlockName();
+			const rootClientId = !! _clientIds?.length
+				? getBlockRootClientId( _clientIds[ 0 ] )
+				: undefined;
 
-		const rootClientId = !! _clientIds?.length
-			? getBlockRootClientId( _clientIds[ 0 ] )
-			: undefined;
+			const groupingBlockAvailable = canInsertBlockType(
+				_groupingBlockName,
+				rootClientId
+			);
 
-		const groupingBlockAvailable = canInsertBlockType(
-			_groupingBlockName,
-			rootClientId
-		);
+			const _blocksSelection = getBlocksByClientId( _clientIds );
 
-		const _blocksSelection = getBlocksByClientId( _clientIds );
+			const isSingleGroupingBlock =
+				_blocksSelection.length === 1 &&
+				_blocksSelection[ 0 ]?.name === _groupingBlockName;
 
-		const isSingleGroupingBlock =
-			_blocksSelection.length === 1 &&
-			_blocksSelection[ 0 ]?.name === _groupingBlockName;
+			// Do we have
+			// 1. Grouping block available to be inserted?
+			// 2. One or more blocks selected
+			const _isGroupable =
+				groupingBlockAvailable && _blocksSelection.length;
 
-		// Do we have
-		// 1. Grouping block available to be inserted?
-		// 2. One or more blocks selected
-		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
+			// Do we have a single Group Block selected and does that group have inner blocks?
+			const _isUngroupable =
+				isSingleGroupingBlock &&
+				!! _blocksSelection[ 0 ].innerBlocks.length;
+			return {
+				clientIds: _clientIds,
+				isGroupable: _isGroupable,
+				isUngroupable: _isUngroupable,
+				blocksSelection: _blocksSelection,
+				groupingBlockName: _groupingBlockName,
+			};
+		},
+		[ selectedClientIds ]
+	);
 
-		// Do we have a single Group Block selected and does that group have inner blocks?
-		const _isUngroupable =
-			isSingleGroupingBlock &&
-			!! _blocksSelection[ 0 ].innerBlocks.length;
-		return {
-			clientIds: _clientIds,
-			isGroupable: _isGroupable,
-			isUngroupable: _isUngroupable,
-			blocksSelection: _blocksSelection,
-			groupingBlockName: _groupingBlockName,
-		};
-	}, [] );
 	return {
 		clientIds,
 		isGroupable,

package/src/components/global-styles/border-panel.js

@@ -0,0 +1,285 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalBorderBoxControl as BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BorderRadiusControl from '../border-radius-control';
+import { useColorsPerOrigin } from './hooks';
+import { getValueFromVariable } from './utils';
+
+export function useHasBorderPanel( settings ) {
+	const controls = [
+		useHasBorderColorControl( settings ),
+		useHasBorderRadiusControl( settings ),
+		useHasBorderStyleControl( settings ),
+		useHasBorderWidthControl( settings ),
+	];
+
+	return controls.some( Boolean );
+}
+
+function useHasBorderColorControl( settings ) {
+	return settings?.border?.color;
+}
+
+function useHasBorderRadiusControl( settings ) {
+	return settings?.border?.radius;
+}
+
+function useHasBorderStyleControl( settings ) {
+	return settings?.border?.style;
+}
+
+function useHasBorderWidthControl( settings ) {
+	return settings?.border?.width;
+}
+
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( ! border.style && ( border.color || border.width ) ) {
+		return { ...border, style: 'solid' };
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
+function BorderToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Border' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	radius: true,
+	color: true,
+	width: true,
+};
+
+export default function BorderPanel( {
+	as: Wrapper = BorderToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const colors = useColorsPerOrigin( settings );
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = ( colorValue ) => {
+		const allColors = colors.flatMap(
+			( { colors: originColors } ) => originColors
+		);
+		const colorObject = allColors.find(
+			( { color } ) => color === colorValue
+		);
+		return colorObject
+			? 'var:preset|color|' + colorObject.slug
+			: colorValue;
+	};
+	const decodeColorValue = useCallback(
+		( colorValue ) => {
+			const allColors = colors.flatMap(
+				( { colors: originColors } ) => originColors
+			);
+			const colorObject = allColors.find(
+				( { slug } ) => colorValue === 'var:preset|color|' + slug
+			);
+			return colorObject ? colorObject.color : colorValue;
+		},
+		[ colors ]
+	);
+	const border = useMemo( () => {
+		if ( hasSplitBorders( inheritedValue?.border ) ) {
+			const borderValue = { ...inheritedValue?.border };
+			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+				borderValue[ side ] = {
+					...borderValue[ side ],
+					color: decodeColorValue( borderValue[ side ]?.color ),
+				};
+			} );
+			return borderValue;
+		}
+		return {
+			...inheritedValue?.border,
+			color: inheritedValue?.border?.color
+				? decodeColorValue( inheritedValue?.border?.color )
+				: undefined,
+		};
+	}, [ inheritedValue?.border, decodeColorValue ] );
+	const setBorder = ( newBorder ) =>
+		onChange( { ...value, border: newBorder } );
+	const showBorderColor = useHasBorderColorControl( settings );
+	const showBorderStyle = useHasBorderStyleControl( settings );
+	const showBorderWidth = useHasBorderWidthControl( settings );
+
+	// Border radius.
+	const showBorderRadius = useHasBorderRadiusControl( settings );
+	const borderRadiusValues = decodeValue( border?.radius );
+	const setBorderRadius = ( newBorderRadius ) =>
+		setBorder( { ...border, radius: newBorderRadius } );
+	const hasBorderRadius = () => {
+		const borderValues = value?.border?.radius;
+		if ( typeof borderValues === 'object' ) {
+			return Object.entries( borderValues ).some( Boolean );
+		}
+		return !! borderValues;
+	};
+
+	const resetBorder = () => {
+		if ( hasBorderRadius() ) {
+			return setBorder( { radius: value?.border?.radius } );
+		}
+
+		setBorder( undefined );
+	};
+
+	const onBorderChange = ( newBorder ) => {
+		// Ensure we have a visible border style when a border width or
+		// color is being selected.
+		const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+
+		// As we can't conditionally generate styles based on if other
+		// style properties have been set we need to force split border
+		// definitions for user set border styles. Border radius is derived
+		// from the same property i.e. `border.radius` if it is a string
+		// that is used. The longhand border radii styles are only generated
+		// if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
+			? {
+					top: newBorderWithStyle,
+					right: newBorderWithStyle,
+					bottom: newBorderWithStyle,
+					left: newBorderWithStyle,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...newBorderWithStyle,
+			  };
+
+		[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+			updatedBorder[ side ] = {
+				...updatedBorder[ side ],
+				color: encodeColorValue( updatedBorder[ side ]?.color ),
+			};
+		} );
+
+		// As radius is maintained separately to color, style, and width
+		// maintain its value. Undefined values here will be cleaned when
+		// global styles are saved.
+		setBorder( { radius: border?.radius, ...updatedBorder } );
+	};
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			border: undefined,
+		};
+	}, [] );
+
+	const showBorderByDefault =
+		defaultControls?.color || defaultControls?.width;
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ ( showBorderWidth || showBorderColor ) && (
+				<ToolsPanelItem
+					hasValue={ () => isDefinedBorder( value?.border ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder() }
+					isShownByDefault={ showBorderByDefault }
+					panelId={ panelId }
+				>
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha={ true }
+						enableStyle={ showBorderStyle }
+						onChange={ onBorderChange }
+						popoverOffset={ 40 }
+						popoverPlacement="left-start"
+						value={ border }
+						__experimentalIsRenderedInSidebar={ true }
+						size={ '__unstable-large' }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ () => setBorderRadius( undefined ) }
+					isShownByDefault={ defaultControls.radius }
+					panelId={ panelId }
+				>
+					<BorderRadiusControl
+						values={ borderRadiusValues }
+						onChange={ ( newValue ) => {
+							setBorderRadius( newValue || undefined );
+						} }
+					/>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}

package/src/components/global-styles/hooks.js

@@ -10,6 +10,7 @@ import { get, set } from 'lodash';
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,6 +65,7 @@ const VALID_SETTINGS = [
 	'typography.fontWeight',
 	'typography.letterSpacing',
 	'typography.lineHeight',
+	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
 ];
@@ -177,7 +179,7 @@ export function useGlobalStyle(
 	switch ( source ) {
 		case 'all':
 			rawResult =
-				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
 				finalPath === 'styles.css'
 					? get( userConfig, finalPath )
 					: get( mergedConfig, finalPath );
@@ -265,6 +267,16 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		// The column-count style is named text column to reduce confusion with
+		// the columns block and manage expectations from the support.
+		// See: https://github.com/WordPress/gutenberg/pull/33587
+		if ( ! supportedStyles.includes( 'columnCount' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				textColumns: false,
+			};
+		}
+
 		[ 'contentSize', 'wideSize' ].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.layout = {
@@ -303,6 +315,67 @@ export function useSettingsForBlockElement(
 			};
 		}
 
+		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
+			if (
+				! supportedStyles.includes(
+					'border' + key.charAt( 0 ).toUpperCase() + key.slice( 1 )
+				)
+			) {
+				updatedSettings.border = {
+					...updatedSettings.border,
+					[ key ]: false,
+				};
+			}
+		} );
+
 		return updatedSettings;
 	}, [ parentSettings, supportedStyles, supports ] );
 }
+
+export function useColorsPerOrigin( settings ) {
+	const customColors = settings?.color?.palette?.custom;
+	const themeColors = settings?.color?.palette?.theme;
+	const defaultColors = settings?.color?.palette?.default;
+	const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
+			} );
+		}
+		return result;
+	}, [
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+	] );
+}

package/src/components/global-styles/index.js

@@ -3,6 +3,7 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
+	useColorsPerOrigin,
 } from './hooks';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
@@ -14,3 +15,4 @@ export {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
+export { default as BorderPanel, useHasBorderPanel } from './border-panel';

package/src/components/global-styles/test/use-global-styles-output.js

@@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group.is-layout-flex { gap: 12px; }'
+				'.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex.wp-block-group-is-layout-flex { gap: 12px; }'
 			);
 		} );
 

package/src/components/global-styles/typography-panel.js

@@ -3,6 +3,7 @@
  */
 import {
 	FontSizePicker,
+	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -20,6 +21,9 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
 
+const MIN_TEXT_COLUMNS = 1;
+const MAX_TEXT_COLUMNS = 6;
+
 export function useHasTypographyPanel( settings ) {
 	const hasFontFamily = useHasFontFamilyControl( settings );
 	const hasLineHeight = useHasLineHeightControl( settings );
@@ -27,6 +31,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasLetterSpacing = useHasLetterSpacingControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
 
 	return (
@@ -36,7 +41,8 @@ export function useHasTypographyPanel( settings ) {
 		hasLetterSpacing ||
 		hasTextTransform ||
 		hasFontSize ||
-		hasTextDecoration
+		hasTextDecoration ||
+		hasTextColumns
 	);
 }
 
@@ -93,6 +99,10 @@ function useHasTextDecorationControl( settings ) {
 	return settings?.typography?.textDecoration;
 }
 
+function useHasTextColumnsControl( settings ) {
+	return settings?.typography?.textColumns;
+}
+
 function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -124,6 +134,7 @@ const DEFAULT_CONTROLS = {
 	letterSpacing: true,
 	textTransform: true,
 	textDecoration: true,
+	textColumns: true,
 };
 
 export default function TypographyPanel( {
@@ -246,6 +257,21 @@ export default function TypographyPanel( {
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
+	// Text Columns
+	const hasTextColumnsControl = useHasTextColumnsControl( settings );
+	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
+	const setTextColumns = ( newValue ) => {
+		onChange( {
+			...value,
+			typography: {
+				...value?.typography,
+				textColumns: newValue,
+			},
+		} );
+	};
+	const hasTextColumns = () => !! value?.typography?.textColumns;
+	const resetTextColumns = () => setTextColumns( undefined );
+
 	// Text Transform
 	const hasTextTransformControl = useHasTextTransformControl( settings );
 	const textTransform = decodeValue(
@@ -388,6 +414,27 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextColumnsControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text columns' ) }
+					hasValue={ hasTextColumns }
+					onDeselect={ resetTextColumns }
+					isShownByDefault={ defaultControls.textColumns }
+					panelId={ panelId }
+				>
+					<NumberControl
+						label={ __( 'Text columns' ) }
+						max={ MAX_TEXT_COLUMNS }
+						min={ MIN_TEXT_COLUMNS }
+						onChange={ setTextColumns }
+						size="__unstable-large"
+						spinControls="custom"
+						value={ textColumns }
+						initialPosition={ 1 }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextDecorationControl && (
 				<ToolsPanelItem
 					className="single-column"