@wordpress/edit-site 5.5.0 → 5.7.0

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

@@ -27,8 +27,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-utils';
 import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
@@ -40,6 +38,8 @@ import { unlock } from '../../private-apis';
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
+	useHasBorderPanel,
+	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -48,8 +48,8 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( name );
-	const hasBorderPanel = useHasBorderPanel( name );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasEffectsPanel = useHasShadowControl( name );
 	const hasFilterPanel = useHasFilterPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );

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

@@ -7,8 +7,6 @@ import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -23,105 +21,6 @@ const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-export function useColorsPerOrigin( name ) {
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom', name );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );
-	const [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );
-	const [ shouldDisplayDefaultColors ] = useGlobalSetting(
-		'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 ] );
-}
-
-export function useGradientsPerOrigin( name ) {
-	const [ customGradients ] = useGlobalSetting(
-		'color.gradients.custom',
-		name
-	);
-	const [ themeGradients ] = useGlobalSetting(
-		'color.gradients.theme',
-		name
-	);
-	const [ defaultGradients ] = useGlobalSetting(
-		'color.gradients.default',
-		name
-	);
-	const [ shouldDisplayDefaultGradients ] = useGlobalSetting(
-		'color.defaultGradients'
-	);
-
-	return useMemo( () => {
-		const result = [];
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				gradients: themeGradients,
-			} );
-		}
-		if (
-			shouldDisplayDefaultGradients &&
-			defaultGradients &&
-			defaultGradients.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				gradients: defaultGradients,
-			} );
-		}
-		if ( customGradients && customGradients.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				gradients: customGradients,
-			} );
-		}
-		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
-}
-
 export function useColorRandomizer( name ) {
 	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',

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

@@ -117,7 +117,6 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 			{ isReady && (
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
-					head={ <EditorStyles styles={ editorStyles } /> }
 					style={ {
 						height: normalizedHeight * ratio,
 					} }
@@ -125,6 +124,7 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 					onMouseLeave={ () => setIsHovered( false ) }
 					tabIndex={ -1 }
 				>
+					<EditorStyles styles={ editorStyles } />
 					<motion.div
 						style={ {
 							height: normalizedHeight * ratio,

package/src/components/global-styles/screen-block-list.js

@@ -20,8 +20,6 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
@@ -30,8 +28,10 @@ import { unlock } from '../../private-apis';
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
+	useHasBorderPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
+	useHasColorPanel,
 } = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
@@ -61,8 +61,8 @@ function BlockMenuItem( { block } ) {
 	const [ rawSettings ] = useGlobalSetting( '', block.name );
 	const settings = useSettingsForBlockElement( rawSettings, block.name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( block.name );
-	const hasBorderPanel = useHasBorderPanel( block.name );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( block.name );

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

@@ -2,17 +2,24 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BorderPanel from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+
+const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenBorder( { name, variation = '' } ) {
-	const hasBorderPanel = useHasBorderPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+	const hasBorderPanel = useHasBorderPanel( settings );
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>

package/src/components/global-styles/screen-colors.js

@@ -2,14 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalZStack as ZStack,
-	FlexItem,
-	ColorIndicator,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -17,205 +10,32 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import { NavigationButtonAsItem } from './navigation-button';
-import { useSupportedStyles } from './hooks';
-import Subtitle from './subtitle';
-import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	ColorPanel: StylesColorPanel,
+} = unlock( blockEditorPrivateApis );
 
-function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport =
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' );
-	const [ backgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/background' }
-			aria-label={ __( 'Colors background styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator
-						colorValue={ gradientValue ?? backgroundColor }
-						data-testid="background-color-indicator"
-					/>
-				</ColorIndicatorWrapper>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Background' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function TextColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/text' }
-			aria-label={ __( 'Colors text styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator
-						colorValue={ color }
-						data-testid="text-color-indicator"
-					/>
-				</ColorIndicatorWrapper>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Text' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function LinkColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'linkColor' );
-	const [ color ] = useGlobalStyle(
-		prefix + 'elements.link.color.text',
-		name
-	);
-	const [ colorHover ] = useGlobalStyle(
-		prefix + 'elements.link.:hover.color.text',
-		name
-	);
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/link' }
-			aria-label={ __( 'Colors link styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ colorHover } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Links' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function HeadingColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useGlobalStyle(
-		prefix + 'elements.heading.color.text',
-		name
-	);
-	const [ bgColor ] = useGlobalStyle(
-		prefix + 'elements.heading.color.background',
-		name
-	);
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/heading' }
-			aria-label={ __( 'Colors heading styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ bgColor } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem>{ __( 'Headings' ) }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function ButtonColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'buttonColor' );
-	const [ color ] = useGlobalStyle(
-		prefix + 'elements.button.color.text',
-		name
-	);
-	const [ bgColor ] = useGlobalStyle(
-		prefix + 'elements.button.color.background',
-		name
-	);
+function ScreenColors( { name, variation = '' } ) {
+	const variationClassName = getVariationClassName( variation );
 
-	if ( ! hasSupport ) {
-		return null;
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
 	}
+	const prefix = prefixParts.join( '.' );
 
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/button' }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ bgColor } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Buttons' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function ScreenColors( { name, variation = '' } ) {
-	const parentMenu =
-		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
-	const variationClassName = getVariationClassName( variation );
+	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 (
 		<>
@@ -232,36 +52,12 @@ function ScreenColors( { name, variation = '' } ) {
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />
 
-					<VStack spacing={ 3 }>
-						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<BackgroundColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<TextColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<LinkColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<HeadingColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<ButtonColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-						</ItemGroup>
-					</VStack>
+					<StylesColorPanel
+						inheritedValue={ inheritedStyle }
+						value={ style }
+						onChange={ setStyle }
+						settings={ settings }
+					/>
 				</VStack>
 			</div>
 		</>

package/src/components/global-styles/screen-root.js

@@ -51,7 +51,7 @@ function ScreenRoot() {
 	}, [] );
 
 	return (
-		<Card size="small">
+		<Card size="small" className="edit-site-global-styles-screen-root">
 			<CardBody>
 				<VStack spacing={ 4 }>
 					<Card>

package/src/components/global-styles/screen-style-variations.js

@@ -172,7 +172,11 @@ function ScreenStyleVariations() {
 				) }
 			/>
 
-			<Card size="small" isBorderless>
+			<Card
+				size="small"
+				isBorderless
+				className="edit-site-global-styles-screen-style-variations"
+			>
 				<CardBody>
 					<Grid columns={ 2 }>
 						{ withEmptyVariation?.map( ( variation, index ) => (

package/src/components/global-styles/screen-typography-element.js

@@ -29,6 +29,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on headings.' ),
 		title: __( 'Headings' ),
 	},
+	caption: {
+		description: __( 'Manage the fonts and typography used on captions.' ),
+		title: __( 'Captions' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),

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

@@ -129,6 +129,12 @@ function ScreenTypography( { name, variation = '' } ) {
 								element="heading"
 								label={ __( 'Headings' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="caption"
+								label={ __( 'Captions' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }