@wordpress/edit-site 5.2.0 → 5.3.0

package/src/components/global-styles/screen-text-color.js

@@ -2,38 +2,34 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
+import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../experiments';
 
-function ScreenTextColor( { name, variationPath = '' } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+function ScreenTextColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
 
 	const hasTextColor =
 		supports.includes( 'color' ) &&
 		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
-	const [ color, setColor ] = useStyle( variationPath + 'color.text', name );
-	const [ userColor ] = useStyle(
-		variationPath + 'color.text',
-		name,
-		'user'
-	);
+	const [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );
+	const [ userColor ] = useGlobalStyle( prefix + 'color.text', name, 'user' );
 
 	if ( ! hasTextColor ) {
 		return null;

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

@@ -8,17 +8,20 @@ import {
 	__experimentalHStack as HStack,
 	FlexItem,
 } from '@wordpress/components';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
+import { unlock } from '../../experiments';
+
+const { useGlobalStyle } = unlock( blockEditorExperiments );
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -30,16 +33,28 @@ function Item( { name, parentMenu, element, label } ) {
 					textDecoration: 'underline',
 			  }
 			: {};
-	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
-	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
-	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
-	const [ letterSpacing ] = useStyle(
+	const [ fontFamily ] = useGlobalStyle(
+		prefix + 'typography.fontFamily',
+		name
+	);
+	const [ fontStyle ] = useGlobalStyle(
+		prefix + 'typography.fontStyle',
+		name
+	);
+	const [ fontWeight ] = useGlobalStyle(
+		prefix + 'typography.fontWeight',
+		name
+	);
+	const [ letterSpacing ] = useGlobalStyle(
 		prefix + 'typography.letterSpacing',
 		name
 	);
-	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
-	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
-	const [ color ] = useStyle( prefix + 'color.text', name );
+	const [ backgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
+		name
+	);
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
+	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -77,9 +92,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name, variationPath = '' } ) {
+function ScreenTypography( { name, variation = '' } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader
@@ -128,7 +143,7 @@ function ScreenTypography( { name, variationPath = '' } ) {
 			{ !! name && (
 				<TypographyPanel
 					name={ name }
-					variationPath={ variationPath }
+					variation={ variation }
 					element="text"
 				/>
 			) }

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

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalGrid as Grid,
+	__experimentalHeading as Heading,
+	FlexItem,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedGlobalStylesPanels } from './hooks';
+import { IconWithCurrentColor } from './icon-with-current-color';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
+
+export function useHasShadowControl( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	return supports.includes( 'shadow' );
+}
+
+export default function ShadowPanel( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ shadow, setShadow ] = useGlobalStyle( `${ prefix }shadow`, name );
+	const [ userShadow ] = useGlobalStyle( `${ prefix }shadow`, name, 'user' );
+	const hasShadow = () => !! userShadow;
+
+	const resetShadow = () => setShadow( undefined );
+	const resetAll = useCallback(
+		() => resetShadow( undefined ),
+		[ resetShadow ]
+	);
+
+	return (
+		<ToolsPanel label={ __( 'Shadow' ) } resetAll={ resetAll }>
+			<ToolsPanelItem
+				label={ __( 'Shadow' ) }
+				hasValue={ hasShadow }
+				onDeselect={ resetShadow }
+				isShownByDefault
+			>
+				<ItemGroup isBordered isSeparated>
+					<ShadowPopover
+						shadow={ shadow }
+						onShadowChange={ setShadow }
+					/>
+				</ItemGroup>
+			</ToolsPanelItem>
+		</ToolsPanel>
+	);
+}
+
+const ShadowPopover = ( { shadow, onShadowChange } ) => {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="edit-site-global-styles__shadow-dropdown"
+			renderToggle={ renderShadowToggle() }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<ShadowPopoverContainer
+						shadow={ shadow }
+						onShadowChange={ onShadowChange }
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+};
+
+function renderShadowToggle() {
+	return ( { onToggle, isOpen } ) => {
+		const toggleProps = {
+			onClick: onToggle,
+			className: classnames( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+		};
+
+		return (
+			<Button { ...toggleProps }>
+				<HStack justify="flex-start">
+					<IconWithCurrentColor icon={ shadowIcon } size={ 24 } />
+					<FlexItem className="edit-site-global-styles__shadow-label">
+						{ __( 'Shadow' ) }
+					</FlexItem>
+				</HStack>
+			</Button>
+		);
+	};
+}
+
+function ShadowPopoverContainer( { shadow, onShadowChange } ) {
+	const [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' );
+	const [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' );
+	const [ defaultPresetsEnabled ] = useGlobalSetting(
+		'shadow.defaultPresets'
+	);
+
+	const shadows = [
+		...( defaultPresetsEnabled ? defaultShadows : [] ),
+		...( themeShadows || [] ),
+	];
+
+	return (
+		<div className="edit-site-global-styles__shadow-panel">
+			<VStack spacing={ 4 }>
+				<Heading level={ 5 }>{ __( 'Shadows' ) }</Heading>
+				<ShadowPresets
+					presets={ shadows }
+					activeShadow={ shadow }
+					onSelect={ onShadowChange }
+				/>
+			</VStack>
+		</div>
+	);
+}
+
+function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	return ! presets ? null : (
+		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
+			{ presets.map( ( { name, shadow }, i ) => (
+				<ShadowIndicator
+					key={ i }
+					label={ name }
+					isActive={ shadow === activeShadow }
+					onSelect={ () =>
+						onSelect( shadow === activeShadow ? undefined : shadow )
+					}
+					shadow={ shadow }
+				/>
+			) ) }
+		</Grid>
+	);
+}
+
+function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+	return (
+		<div className="edit-site-global-styles__shadow-indicator-wrapper">
+			<Button
+				className="edit-site-global-styles__shadow-indicator"
+				onClick={ onSelect }
+				aria-label={ label }
+				style={ { boxShadow: shadow } }
+			>
+				{ isActive && <Icon icon={ check } /> }
+			</Button>
+		</div>
+	);
+}

package/src/components/global-styles/style.scss

@@ -84,7 +84,8 @@ $block-preview-height: 150px;
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control {
+.edit-site-screen-button-color__control,
+.edit-site-screen-background-color__control.has-no-tabs {
 	padding: $grid-unit-20;
 }
 
@@ -135,10 +136,46 @@ $block-preview-height: 150px;
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles-screen-css {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+
+	.components-v-stack {
+		flex: 1 1 auto;
+
+		.edit-site-global-styles__custom-css-input {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+
+			.components-base-control__field {
+				flex: 1 1 auto;
+				display: flex;
+				flex-direction: column;
+
+				.components-textarea-control__input {
+					flex: 1 1 auto;
+				}
+			}
+		}
+	}
+}
+
 .edit-site-global-styles__custom-css-input textarea {
 	font-family: $editor_html_font;
 }
 
+.edit-site-global-styles__custom-css-validation-wrapper {
+	position: absolute;
+	bottom: $grid-unit-20;
+	right: $grid-unit * 3;
+}
+
+.edit-site-global-styles__custom-css-validation-icon {
+	fill: $alert-red;
+}
+
 .edit-site-global-styles__custom-css-theme-css {
 	width: 100%;
 	line-break: anywhere;
@@ -147,6 +184,9 @@ $block-preview-height: 150px;
 	overflow-y: scroll;
 }
 
+.edit-site-global-styles-screen-css-help-link {
+	padding-left: $grid-unit-20;
+}
 .edit-site-global-styles-screen-variations {
 	margin-top: $grid-unit-20;
 	border-top: 1px solid $gray-300;
@@ -155,3 +195,47 @@ $block-preview-height: 150px;
 		margin: $grid-unit-30 $grid-unit-20;
 	}
 }
+
+.edit-site-global-styles-sidebar__navigator-screen {
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-global-styles__shadow-panel {
+	width: 230px;
+}
+
+.edit-site-global-styles__shadow-dropdown {
+	display: block;
+	padding: 0;
+
+	> button {
+		width: 100%;
+		padding: $grid-unit-10;
+
+		&.is-open {
+			background-color: $gray-100;
+		}
+	}
+}
+
+// wrapper to clip the shadow beyond 6px
+.edit-site-global-styles__shadow-indicator-wrapper {
+	padding: 6px;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+// These styles are similar to the color palette.
+.edit-site-global-styles__shadow-indicator {
+	color: $gray-800;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+	padding: 0;
+
+	height: 24px;
+	width: 24px;
+}

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

@@ -8,6 +8,7 @@ import {
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 	__experimentalTextTransformControl as TextTransformControl,
 	__experimentalTextDecorationControl as TextDecorationControl,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
@@ -19,7 +20,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
 export function useHasTypographyPanel( name ) {
 	const hasFontFamily = useHasFontFamilyControl( name );
@@ -38,14 +42,21 @@ export function useHasTypographyPanel( name ) {
 
 function useHasFontFamilyControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
+	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
+		'typography.fontFamilies',
+		name
+	);
+	const fontFamilies =
+		fontFamiliesPerOrigin?.custom ||
+		fontFamiliesPerOrigin?.theme ||
+		fontFamiliesPerOrigin?.default;
 	return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
 }
 
 function useHasLineHeightControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'typography.lineHeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.lineHeight', name )[ 0 ] &&
 		supports.includes( 'lineHeight' )
 	);
 }
@@ -53,10 +64,10 @@ function useHasLineHeightControl( name ) {
 function useHasAppearanceControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
 	return hasFontStyles || hasFontWeights;
 }
@@ -64,10 +75,10 @@ function useHasAppearanceControl( name ) {
 function useAppearanceControlLabel( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
 	if ( ! hasFontStyles ) {
 		return __( 'Font weight' );
@@ -79,7 +90,7 @@ function useAppearanceControlLabel( name ) {
 }
 
 function useHasLetterSpacingControl( name, element ) {
-	const setting = useSetting( 'typography.letterSpacing', name )[ 0 ];
+	const setting = useGlobalSetting( 'typography.letterSpacing', name )[ 0 ];
 	if ( ! setting ) {
 		return false;
 	}
@@ -91,7 +102,7 @@ function useHasLetterSpacingControl( name, element ) {
 }
 
 function useHasTextTransformControl( name, element ) {
-	const setting = useSetting( 'typography.textTransform', name )[ 0 ];
+	const setting = useGlobalSetting( 'typography.textTransform', name )[ 0 ];
 	if ( ! setting ) {
 		return false;
 	}
@@ -110,16 +121,16 @@ function useHasTextDecorationControl( name, element ) {
 }
 
 function useStyleWithReset( path, blockName ) {
-	const [ style, setStyle ] = useStyle( path, blockName );
-	const [ userStyle ] = useStyle( path, blockName, 'user' );
+	const [ style, setStyle ] = useGlobalStyle( path, blockName );
+	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
 	const hasStyle = () => !! userStyle;
 	const resetStyle = () => setStyle( undefined );
 	return [ style, setStyle, hasStyle, resetStyle ];
 }
 
 function useFontSizeWithReset( path, blockName ) {
-	const [ fontSize, setStyleCallback ] = useStyle( path, blockName );
-	const [ userStyle ] = useStyle( path, blockName, 'user' );
+	const [ fontSize, setStyleCallback ] = useGlobalStyle( path, blockName );
+	const [ userStyle ] = useGlobalStyle( path, blockName, 'user' );
 	const hasFontSize = () => !! userStyle;
 	const resetFontSize = () => setStyleCallback( undefined );
 	const setFontSize = ( newValue, metadata ) => {
@@ -138,20 +149,20 @@ function useFontSizeWithReset( path, blockName ) {
 }
 
 function useFontAppearance( prefix, name ) {
-	const [ fontStyle, setFontStyle ] = useStyle(
+	const [ fontStyle, setFontStyle ] = useGlobalStyle(
 		prefix + 'typography.fontStyle',
 		name
 	);
-	const [ userFontStyle ] = useStyle(
+	const [ userFontStyle ] = useGlobalStyle(
 		prefix + 'typography.fontStyle',
 		name,
 		'user'
 	);
-	const [ fontWeight, setFontWeight ] = useStyle(
+	const [ fontWeight, setFontWeight ] = useGlobalStyle(
 		prefix + 'typography.fontWeight',
 		name
 	);
-	const [ userFontWeight ] = useStyle(
+	const [ userFontWeight ] = useGlobalStyle(
 		prefix + 'typography.fontWeight',
 		name,
 		'user'
@@ -175,7 +186,7 @@ export default function TypographyPanel( {
 	name,
 	element,
 	headingLevel,
-	variationPath = '',
+	variation = '',
 } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
@@ -184,18 +195,37 @@ export default function TypographyPanel( {
 	} else if ( element && element !== 'text' ) {
 		prefix = `elements.${ element }.`;
 	}
-	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
+	if ( variation ) {
+		prefix = prefix
+			? `variations.${ variation }.${ prefix }`
+			: `variations.${ variation }`;
+	}
+	const [ fontSizesPerOrigin ] = useGlobalSetting(
+		'typography.fontSizes',
+		name
+	);
+	const fontSizes =
+		fontSizesPerOrigin?.custom ||
+		fontSizesPerOrigin?.theme ||
+		fontSizesPerOrigin?.default;
 
-	const disableCustomFontSizes = ! useSetting(
+	const disableCustomFontSizes = ! useGlobalSetting(
 		'typography.customFontSize',
 		name
 	)[ 0 ];
-	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
+	const [ fontFamiliesPerOrigin ] = useGlobalSetting(
+		'typography.fontFamilies',
+		name
+	);
+	const fontFamilies =
+		fontFamiliesPerOrigin?.custom ||
+		fontFamiliesPerOrigin?.theme ||
+		fontFamiliesPerOrigin?.default;
 	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontStyle', name )[ 0 ] &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		useGlobalSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
 	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
 	const hasLineHeightEnabled = useHasLineHeightControl( name );
@@ -215,15 +245,9 @@ export default function TypographyPanel( {
 	}
 
 	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset(
-			variationPath + prefix + 'typography.fontFamily',
-			name
-		);
+		useStyleWithReset( prefix + 'typography.fontFamily', name );
 	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset(
-			variationPath + prefix + 'typography.fontSize',
-			name
-		);
+		useFontSizeWithReset( prefix + 'typography.fontSize', name );
 	const {
 		fontStyle,
 		setFontStyle,
@@ -231,39 +255,27 @@ export default function TypographyPanel( {
 		setFontWeight,
 		hasFontAppearance,
 		resetFontAppearance,
-	} = useFontAppearance( variationPath + prefix, name );
+	} = useFontAppearance( prefix, name );
 	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset(
-			variationPath + prefix + 'typography.lineHeight',
-			name
-		);
+		useStyleWithReset( prefix + 'typography.lineHeight', name );
 	const [
 		letterSpacing,
 		setLetterSpacing,
 		hasLetterSpacing,
 		resetLetterSpacing,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.letterSpacing',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
 	const [
 		textTransform,
 		setTextTransform,
 		hasTextTransform,
 		resetTextTransform,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.textTransform',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.textTransform', name );
 	const [
 		textDecoration,
 		setTextDecoration,
 		hasTextDecoration,
 		resetTextDecoration,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.textDecoration',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
 
 	const resetAll = () => {
 		resetFontFamily();