@wordpress/edit-site 5.1.0 → 5.3.0

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

@@ -2,50 +2,62 @@
  * 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';
 import { TabPanel } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
+import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../experiments';
 
-function ScreenLinkColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+function ScreenLinkColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isLinkEnabled ] = useSetting( 'color.link', name );
+	const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );
 
 	const hasLinkColor =
 		supports.includes( 'linkColor' ) &&
 		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
 	const pseudoStates = {
 		default: {
 			label: __( 'Default' ),
-			value: useStyle( 'elements.link.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
-			userValue: useStyle(
-				'elements.link.color.text',
+			value: useGlobalStyle(
+				prefix + 'elements.link.color.text',
+				name
+			)[ 0 ],
+			handler: useGlobalStyle(
+				prefix + 'elements.link.color.text',
+				name
+			)[ 1 ],
+			userValue: useGlobalStyle(
+				prefix + 'elements.link.color.text',
 				name,
 				'user'
 			)[ 0 ],
 		},
 		hover: {
 			label: __( 'Hover' ),
-			value: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],
-			userValue: useStyle(
-				'elements.link.:hover.color.text',
+			value: useGlobalStyle(
+				prefix + 'elements.link.:hover.color.text',
+				name
+			)[ 0 ],
+			handler: useGlobalStyle(
+				prefix + 'elements.link.:hover.color.text',
+				name
+			)[ 1 ],
+			userValue: useGlobalStyle(
+				prefix + 'elements.link.:hover.color.text',
 				name,
 				'user'
 			)[ 0 ],

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

@@ -16,6 +16,7 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -24,19 +25,31 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
+import { unlock } from '../../experiments';
 
 function ScreenRoot() {
-	const { variations } = useSelect( ( select ) => {
+	const { useGlobalStyle } = unlock( blockEditorExperiments );
+	const [ customCSS ] = useGlobalStyle( 'css' );
+
+	const { variations, canEditCSS } = useSelect( ( select ) => {
+		const {
+			getEntityRecord,
+			__experimentalGetCurrentGlobalStylesId,
+			__experimentalGetCurrentThemeGlobalStylesVariations,
+		} = select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
 		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations(),
+			variations: __experimentalGetCurrentThemeGlobalStylesVariations(),
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
 	}, [] );
 
-	const __experimentalGlobalStylesCustomCSS =
-		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -102,7 +115,7 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			{ __experimentalGlobalStylesCustomCSS && (
+			{ canEditCSS && !! customCSS && (
 				<>
 					<CardDivider />
 					<CardBody>
@@ -122,7 +135,9 @@ function ScreenRoot() {
 								aria-label={ __( 'Additional CSS' ) }
 							>
 								<HStack justify="space-between">
-									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<FlexItem>
+										{ __( 'Additional CSS' ) }
+									</FlexItem>
 									<IconWithCurrentColor
 										icon={
 											isRTL() ? chevronLeft : chevronRight

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

@@ -23,15 +23,20 @@ import {
 	CardBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import { GlobalStylesContext } from './context';
 import StylesPreview from './preview';
 import ScreenHeader from './header';
+import { unlock } from '../../experiments';
+
+const { GlobalStylesContext } = unlock( blockEditorExperiments );
 
 function compareVariations( a, b ) {
 	return (

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

@@ -2,34 +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 } ) {
-	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( 'color.text', name );
-	const [ userColor ] = useStyle( '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,16 +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 { getVariationClassName } from './utils';
+import { unlock } from '../../experiments';
+
+const { useGlobalStyle } = unlock( blockEditorExperiments );
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -29,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;
@@ -76,9 +92,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name } ) {
+function ScreenTypography( { name, variation = '' } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader
@@ -88,7 +104,7 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
@@ -124,7 +140,13 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && <TypographyPanel name={ name } element="text" /> }
+			{ !! name && (
+				<TypographyPanel
+					name={ name }
+					variation={ variation }
+					element="text"
+				/>
+			) }
 		</>
 	);
 }

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

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import {
+	VariationPanel,
+	VariationsPanel,
+	useHasVariationsPanel,
+} from './variations-panel';
+import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import Subtitle from './subtitle';
+
+export function ScreenVariations( { name, path = '' } ) {
+	const hasVariationsPanel = useHasVariationsPanel( name, path );
+
+	if ( ! hasVariationsPanel ) {
+		return null;
+	}
+	return (
+		<div className="edit-site-global-styles-screen-variations">
+			<VStack spacing={ 3 }>
+				<p>Manage style variations, saved block appearence presets.</p>
+				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+				<VariationsPanel name={ name } />
+			</VStack>
+		</div>
+	);
+}
+
+export function ScreenVariation( { blockName, style } ) {
+	const { name: styleName, label: styleLabel } = style;
+	return (
+		<>
+			<ScreenHeader title={ styleLabel } />
+			<BlockPreviewPanel
+				name={ blockName }
+				variation={ `is-style-${ styleName }` }
+			/>
+			<VariationPanel blockName={ blockName } styleName={ styleName } />
+		</>
+	);
+}

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;
@@ -146,3 +183,59 @@ $block-preview-height: 150px;
 	max-height: 200px;
 	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;
+
+	& > * {
+		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;
+}