@wordpress/edit-site 5.2.0 → 5.3.0

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

@@ -10,6 +10,7 @@ import {
 	FlexItem,
 	ColorIndicator,
 } from '@wordpress/components';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -17,33 +18,27 @@ import {
 import ScreenHeader from './header';
 import Palette from './palette';
 import { NavigationButtonAsItem } from './navigation-button';
-import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
+import { unlock } from '../../experiments';
 
-function variationPathToURL( variationPath ) {
-	if ( ! variationPath ) {
-		return '';
-	}
-	// Replace the dots with slashes, add slash at the beginning and remove the last slash.
-	return '/' + variationPath.replace( /\./g, '/' ).slice( 0, -1 );
-}
+const { useGlobalStyle } = unlock( blockEditorExperiments );
 
-function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
+function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport =
 		supports.includes( 'backgroundColor' ) ||
 		supports.includes( 'background' );
-	const [ backgroundColor ] = useStyle(
-		variationPath + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useStyle(
-		variationPath + 'color.gradient',
+	const [ backgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
 		name
 	);
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -51,11 +46,7 @@ function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/background'
-			}
+			path={ parentMenu + urlPrefix + '/colors/background' }
 			aria-label={ __( 'Colors background styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -73,10 +64,12 @@ function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function TextColorItem( { name, parentMenu, variationPath = '' } ) {
+function TextColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( variationPath + 'color.text', name );
+	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -84,11 +77,7 @@ function TextColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/text'
-			}
+			path={ parentMenu + urlPrefix + '/colors/text' }
 			aria-label={ __( 'Colors text styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -106,15 +95,17 @@ function TextColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
+function LinkColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
-	const [ color ] = useStyle(
-		variationPath + 'elements.link.color.text',
+	const [ color ] = useGlobalStyle(
+		prefix + 'elements.link.color.text',
 		name
 	);
-	const [ colorHover ] = useStyle(
-		variationPath + 'elements.link.:hover.color.text',
+	const [ colorHover ] = useGlobalStyle(
+		prefix + 'elements.link.:hover.color.text',
 		name
 	);
 
@@ -124,11 +115,7 @@ function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/link'
-			}
+			path={ parentMenu + urlPrefix + '/colors/link' }
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -148,15 +135,17 @@ function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
+function HeadingColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle(
-		variationPath + 'elements.heading.color.text',
+	const [ color ] = useGlobalStyle(
+		prefix + 'elements.heading.color.text',
 		name
 	);
-	const [ bgColor ] = useStyle(
-		variationPath + 'elements.heading.color.background',
+	const [ bgColor ] = useGlobalStyle(
+		prefix + 'elements.heading.color.background',
 		name
 	);
 
@@ -166,11 +155,7 @@ function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/heading'
-			}
+			path={ parentMenu + urlPrefix + '/colors/heading' }
 			aria-label={ __( 'Colors heading styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -188,15 +173,17 @@ function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
+function ButtonColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'buttonColor' );
-	const [ color ] = useStyle(
-		variationPath + 'elements.button.color.text',
+	const [ color ] = useGlobalStyle(
+		prefix + 'elements.button.color.text',
 		name
 	);
-	const [ bgColor ] = useStyle(
-		variationPath + 'elements.button.color.background',
+	const [ bgColor ] = useGlobalStyle(
+		prefix + 'elements.button.color.background',
 		name
 	);
 
@@ -206,11 +193,7 @@ function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/button'
-			}
+			path={ parentMenu + urlPrefix + '/colors/button' }
 		>
 			<HStack justify="flex-start">
 				<ZStack isLayered={ false } offset={ -8 }>
@@ -229,10 +212,10 @@ function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function ScreenColors( { name, variationPath = '' } ) {
+function ScreenColors( { name, variation = '' } ) {
 	const parentMenu =
 		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 
 	return (
 		<>
@@ -255,27 +238,27 @@ function ScreenColors( { name, variationPath = '' } ) {
 							<BackgroundColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<TextColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<LinkColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 						</ItemGroup>
 					</VStack>

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

@@ -1,30 +1,46 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import Subtitle from './subtitle';
 import CustomCSSControl from './custom-css';
 
-function ScreenCSS() {
+function ScreenCSS( { name } ) {
+	// If name is defined, we are customizing CSS at the block level.
+	// Display the block title in the description.
+	const blockType = getBlockType( name );
+	const title = blockType?.title;
+
+	const description =
+		title !== undefined
+			? sprintf(
+					// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+					__(
+						'Add your own CSS to customize the appearance of the %s block.'
+					),
+					title
+			  )
+			: __(
+					'Add your own CSS to customize the appearance and layout of your site.'
+			  );
+
 	return (
 		<>
-			<ScreenHeader
-				title={ __( 'CSS' ) }
-				description={ __(
-					'Add your own CSS to customize the appearance and layout of your site.'
-				) }
-			/>
+			<ScreenHeader title={ __( 'CSS' ) } description={ description } />
+			<ExternalLink
+				href="https://wordpress.org/support/article/css/"
+				className="edit-site-global-styles-screen-css-help-link"
+			>
+				{ __( 'Learn more about CSS' ) }
+			</ExternalLink>
 			<div className="edit-site-global-styles-screen-css">
-				<VStack spacing={ 3 }>
-					<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
-					<CustomCSSControl />
-				</VStack>
+				<CustomCSSControl blockName={ name } />
 			</div>
 		</>
 	);

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

@@ -6,7 +6,10 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 
 /**
@@ -15,67 +18,68 @@ import { useState } from '@wordpress/element';
 import ScreenHeader from './header';
 import {
 	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
 } from './hooks';
+import { unlock } from '../../experiments';
 
-function ScreenHeadingColor( { name, variationPath = '' } ) {
-	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+function ScreenHeadingColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ gradients ] = useSetting( 'color.gradients', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useSetting(
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
 		name
 	);
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
+	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
+	const [ isBackgroundEnabled ] = useGlobalSetting(
+		'color.background',
+		name
+	);
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const gradientsPerOrigin = useGradientsPerOrigin( name );
 
 	const hasTextColor =
 		supports.includes( 'color' ) &&
 		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
 	const hasBackgroundColor =
 		supports.includes( 'backgroundColor' ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 	const hasGradientColor =
 		supports.includes( 'background' ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
+		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
 
-	const [ color, setColor ] = useStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.text',
+	const [ color, setColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.text',
 		name
 	);
-	const [ userColor ] = useStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.text',
+	const [ userColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.text',
 		name,
 		'user'
 	);
 
-	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.background',
+	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.background',
 		name
 	);
-	const [ userBackgroundColor ] = useStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.background',
+	const [ userBackgroundColor ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.background',
 		name,
 		'user'
 	);
-	const [ gradient, setGradient ] = useStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.gradient',
+	const [ gradient, setGradient ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.gradient',
 		name
 	);
-	const [ userGradient ] = useStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.gradient',
+	const [ userGradient ] = useGlobalStyle(
+		prefix + 'elements.' + selectedLevel + '.color.gradient',
 		name,
 		'user'
 	);
@@ -124,6 +128,7 @@ function ScreenHeadingColor( { name, variationPath = '' } ) {
 				<h4>{ __( 'Select heading level' ) }</h4>
 
 				<ToggleGroupControl
+					__nextHasNoMarginBottom
 					label={ __( 'Select heading level' ) }
 					hideLabelFromVision={ true }
 					value={ selectedLevel }

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

@@ -9,20 +9,17 @@ import { __ } from '@wordpress/i18n';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
 
-function ScreenLayout( { name, variationPath = '' } ) {
+function ScreenLayout( { name, variation = '' } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasDimensionsPanel && (
-				<DimensionsPanel
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<DimensionsPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);

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

@@ -2,62 +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, variationPath = '' } ) {
-	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(
-				variationPath + 'elements.link.color.text',
+			value: useGlobalStyle(
+				prefix + 'elements.link.color.text',
 				name
 			)[ 0 ],
-			handler: useStyle(
-				variationPath + 'elements.link.color.text',
+			handler: useGlobalStyle(
+				prefix + 'elements.link.color.text',
 				name
 			)[ 1 ],
-			userValue: useStyle(
-				variationPath + 'elements.link.color.text',
+			userValue: useGlobalStyle(
+				prefix + 'elements.link.color.text',
 				name,
 				'user'
 			)[ 0 ],
 		},
 		hover: {
 			label: __( 'Hover' ),
-			value: useStyle(
-				variationPath + 'elements.link.:hover.color.text',
+			value: useGlobalStyle(
+				prefix + 'elements.link.:hover.color.text',
 				name
 			)[ 0 ],
-			handler: useStyle(
-				variationPath + 'elements.link.:hover.color.text',
+			handler: useGlobalStyle(
+				prefix + 'elements.link.:hover.color.text',
 				name
 			)[ 1 ],
-			userValue: useStyle(
-				variationPath + 'elements.link.:hover.color.text',
+			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 (