@wordpress/edit-site 5.4.0 → 5.6.0

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

@@ -1,215 +1,40 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-export function useHasBorderPanel( name ) {
-	const controls = [
-		useHasBorderColorControl( name ),
-		useHasBorderRadiusControl( name ),
-		useHasBorderStyleControl( name ),
-		useHasBorderWidthControl( name ),
-	];
-
-	return controls.some( Boolean );
-}
-
-function useHasBorderColorControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.color', name )[ 0 ] &&
-		supports.includes( 'borderColor' )
-	);
-}
-
-function useHasBorderRadiusControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.radius', name )[ 0 ] &&
-		supports.includes( 'borderRadius' )
-	);
-}
-
-function useHasBorderStyleControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.style', name )[ 0 ] &&
-		supports.includes( 'borderStyle' )
-	);
-}
-
-function useHasBorderWidthControl( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		useGlobalSetting( 'border.width', name )[ 0 ] &&
-		supports.includes( 'borderWidth' )
-	);
-}
-
-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 );
-}
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	BorderPanel: StylesBorderPanel,
+} = unlock( blockEditorPrivateApis );
 
 export default function BorderPanel( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useGlobalStyle(
-		`${ prefix }border`,
-		name,
-		'user'
-	);
-	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
-	const colors = useColorsPerOrigin( name );
-
-	const showBorderColor = useHasBorderColorControl( name );
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const showBorderWidth = useHasBorderWidthControl( name );
-
-	// Border radius.
-	const showBorderRadius = useHasBorderRadiusControl( name );
-	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
-		`${ prefix }border.radius`,
-		name
-	);
-	const hasBorderRadius = () => {
-		const borderValues = userBorderStyles?.radius;
-		if ( typeof borderValues === 'object' ) {
-			return Object.entries( borderValues ).some( Boolean );
-		}
-		return !! borderValues;
-	};
-
-	const resetBorder = () => {
-		if ( hasBorderRadius() ) {
-			return setBorder( { radius: userBorderStyles.radius } );
-		}
-
-		setBorder( undefined );
-	};
-
-	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
-	const onBorderChange = useCallback(
-		( 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,
-				  };
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
 
-			// 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 } );
-		},
-		[ setBorder ]
-	);
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 
 	return (
-		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ ( showBorderWidth || showBorderColor ) && (
-				<ToolsPanelItem
-					hasValue={ () => isDefinedBorder( userBorderStyles ) }
-					label={ __( 'Border' ) }
-					onDeselect={ () => resetBorder() }
-					isShownByDefault={ true }
-				>
-					<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={ true }
-				>
-					<BorderRadiusControl
-						values={ borderRadiusValues }
-						onChange={ ( value ) => {
-							setBorderRadius( value || undefined );
-						} }
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesBorderPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
 	);
 }

package/src/components/global-styles/context-menu.js

@@ -12,6 +12,7 @@ import {
 import {
 	typography,
 	border,
+	filter,
 	shadow,
 	color,
 	layout,
@@ -22,40 +23,36 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
+import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
 import { useHasShadowControl } from './shadow-panel';
 import { unlock } from '../../private-apis';
-import { useSupportedStyles } from './hooks';
 
 const {
+	useHasDimensionsPanel,
 	useHasTypographyPanel,
+	useHasBorderPanel,
 	useGlobalSetting,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
-	const supports = useSupportedStyles( name );
-	const settings = useMemo(
-		() => overrideSettingsWithSupports( rawSettings, supports ),
-		[ rawSettings, supports ]
-	);
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( name );
-	const hasBorderPanel = useHasBorderPanel( name );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasEffectsPanel = useHasShadowControl( name );
-	const hasDimensionsPanel = useHasDimensionsPanel( name );
+	const hasFilterPanel = useHasFilterPanel( name );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
 
@@ -117,6 +114,15 @@ function ContextMenu( { name, parentMenu = '' } ) {
 						{ __( 'Shadow' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasFilterPanel && (
+					<NavigationButtonAsItem
+						icon={ filter }
+						path={ parentMenu + '/filters' }
+						aria-label={ __( 'Filters styles' ) }
+					>
+						{ __( 'Filters' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }