@wordpress/edit-site 5.6.0 → 5.8.0

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';
 
@@ -18,86 +16,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useColorsPerOrigin: useColorsPerOriginFromSettings } =
-	unlock( blockEditorPrivateApis );
+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 useColorsPerOriginFromSettings( {
-		color: {
-			palette: {
-				custom: customColors,
-				theme: themeColors,
-				default: defaultColors,
-			},
-			defaultPalette: shouldDisplayDefaultColors,
-		},
-	} );
-}
-
-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,12 +124,13 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 					onMouseLeave={ () => setIsHovered( false ) }
 					tabIndex={ -1 }
 				>
+					<EditorStyles styles={ editorStyles } />
 					<motion.div
 						style={ {
 							height: normalizedHeight * ratio,
 							width: '100%',
 							background: gradientValue ?? backgroundColor,
-							cursor: 'pointer',
+							cursor: withHoverView ? 'pointer' : undefined,
 						} }
 						initial="start"
 						animate={

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() {
@@ -57,21 +57,25 @@ function useSortedBlockTypes() {
 	return [ ...coreItems, ...nonCoreItems ];
 }
 
-function BlockMenuItem( { block } ) {
-	const [ rawSettings ] = useGlobalSetting( '', block.name );
-	const settings = useSettingsForBlockElement( rawSettings, block.name );
+export function useBlockHasGlobalStyles( blockName ) {
+	const [ rawSettings ] = useGlobalSetting( '', blockName );
+	const settings = useSettingsForBlockElement( rawSettings, blockName );
 	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;
-	const hasVariationsPanel = useHasVariationsPanel( block.name );
-	const hasBlockMenuItem =
+	const hasVariationsPanel = useHasVariationsPanel( blockName );
+	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||
 		hasLayoutPanel ||
 		hasVariationsPanel;
+	return hasGlobalStyles;
+}
 
+function BlockMenuItem( { block } ) {
+	const hasBlockMenuItem = useBlockHasGlobalStyles( block.name );
 	if ( ! hasBlockMenuItem ) {
 		return null;
 	}

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-css.js

@@ -38,7 +38,7 @@ function ScreenCSS( { name } ) {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://wordpress.org/support/article/css/"
+							href="https://wordpress.org/documentation/article/css/"
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -9,17 +10,23 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
-import ShadowPanel, { useHasShadowControl } from './shadow-panel';
+import { unlock } from '../../private-apis';
+import EffectsPanel from './effects-panel';
+
+const { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenEffects( { name, variation = '' } ) {
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const variationClassName = getVariationClassName( variation );
-	const hasShadowPanel = useHasShadowControl( name );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Shadow' ) } />
+			<ScreenHeader title={ __( 'Effects' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasShadowPanel && (
-				<ShadowPanel name={ name } variation={ variation } />
+			{ hasEffectsPanel && (
+				<EffectsPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);

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

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import DuotonePanel from './duotone-panel';
+import FiltersPanel from './filters-panel';
 import BlockPreviewPanel from './block-preview-panel';
 
 /**
@@ -19,7 +19,7 @@ function ScreenFilters( { name } ) {
 		<>
 			<ScreenHeader title={ __( 'Filters' ) } />
 			<BlockPreviewPanel name={ name } />
-			<DuotonePanel name={ name } />
+			<FiltersPanel name={ name } />
 		</>
 	);
 }

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

@@ -1,143 +1,25 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useMemo,
-	useContext,
-	useState,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import {
-	__experimentalGrid as Grid,
-	Card,
-	CardBody,
-} from '@wordpress/components';
+import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
 import ScreenHeader from './header';
-import { unlock } from '../../private-apis';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-function compareVariations( a, b ) {
-	return (
-		fastDeepEqual( a.styles, b.styles ) &&
-		fastDeepEqual( a.settings, b.settings )
-	);
-}
-
-function Variation( { variation } ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			},
-			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
-			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
-
-	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
-	};
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo( () => {
-		return compareVariations( user, variation );
-	}, [ user, variation ] );
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ variation?.title }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
-			>
-				<div className="edit-site-global-styles-variations_item-preview">
-					<StylesPreview
-						label={ variation?.title }
-						isFocused={ isFocused }
-						withHoverView
-					/>
-				</div>
-			</div>
-		</GlobalStylesContext.Provider>
-	);
-}
+import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { variations, mode } = useSelect( ( select ) => {
+	const { mode } = useSelect( ( select ) => {
 		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations(),
-
 			mode: select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
 
-	const withEmptyVariation = useMemo( () => {
-		return [
-			{
-				title: __( 'Default' ),
-				settings: {},
-				styles: {},
-			},
-			...variations.map( ( variation ) => ( {
-				...variation,
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			} ) ),
-		];
-	}, [ variations ] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const shouldRevertInitialMode = useRef( null );
 	useEffect( () => {
 		// ignore changes to zoom-out mode as we explictily change to it on mount.
@@ -160,8 +42,11 @@ function ScreenStyleVariations() {
 				}
 			};
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
 	return (
 		<>
 			<ScreenHeader
@@ -178,11 +63,7 @@ function ScreenStyleVariations() {
 				className="edit-site-global-styles-screen-style-variations"
 			>
 				<CardBody>
-					<Grid columns={ 2 }>
-						{ withEmptyVariation?.map( ( variation, index ) => (
-							<Variation key={ index } variation={ variation } />
-						) ) }
-					</Grid>
+					<StyleVariationsContainer />
 				</CardBody>
 			</Card>
 		</>