@wordpress/edit-site 5.6.0 → 5.7.0

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

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

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-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 }