@wordpress/edit-site 5.3.6 → 5.5.0

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

@@ -11,14 +11,14 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenButtonColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ isBackgroundEnabled ] = useGlobalSetting(
@@ -64,9 +64,9 @@ function ScreenButtonColor( { name, variation = '' } ) {
 				) }
 			/>
 
-			<h4 className="edit-site-global-styles-section-title">
+			<h3 className="edit-site-global-styles-section-title">
 				{ __( 'Text color' ) }
-			</h4>
+			</h3>
 
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
@@ -78,11 +78,12 @@ function ScreenButtonColor( { name, variation = '' } ) {
 				colorValue={ buttonTextColor }
 				onColorChange={ setButtonTextColor }
 				clearable={ buttonTextColor === userButtonTextColor }
+				headingLevel={ 4 }
 			/>
 
-			<h4 className="edit-site-global-styles-section-title">
+			<h3 className="edit-site-global-styles-section-title">
 				{ __( 'Background color' ) }
-			</h4>
+			</h3>
 
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
@@ -94,6 +95,7 @@ function ScreenButtonColor( { name, variation = '' } ) {
 				colorValue={ buttonBgColor }
 				onColorChange={ setButtonBgColor }
 				clearable={ buttonBgColor === userButtonBgColor }
+				headingLevel={ 4 }
 			/>
 		</>
 	);

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

@@ -18,7 +18,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { NavigationButtonAsItem } from './navigation-button';
-import { getSupportedGlobalStylesPanels } from './hooks';
+import { useSupportedStyles } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
@@ -30,7 +30,7 @@ const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const hasSupport =
 		supports.includes( 'backgroundColor' ) ||
 		supports.includes( 'background' );
@@ -67,7 +67,7 @@ function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
 function TextColorItem( { name, parentMenu, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const hasSupport = supports.includes( 'color' );
 	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 
@@ -98,7 +98,7 @@ function TextColorItem( { name, parentMenu, variation = '' } ) {
 function LinkColorItem( { name, parentMenu, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const hasSupport = supports.includes( 'linkColor' );
 	const [ color ] = useGlobalStyle(
 		prefix + 'elements.link.color.text',
@@ -138,7 +138,7 @@ function LinkColorItem( { name, parentMenu, variation = '' } ) {
 function HeadingColorItem( { name, parentMenu, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const hasSupport = supports.includes( 'color' );
 	const [ color ] = useGlobalStyle(
 		prefix + 'elements.heading.color.text',
@@ -176,7 +176,7 @@ function HeadingColorItem( { name, parentMenu, variation = '' } ) {
 function ButtonColorItem( { name, parentMenu, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const hasSupport = supports.includes( 'buttonColor' );
 	const [ color ] = useGlobalStyle(
 		prefix + 'elements.button.color.text',
@@ -233,7 +233,7 @@ function ScreenColors( { name, variation = '' } ) {
 					<Palette name={ name } />
 
 					<VStack spacing={ 3 }>
-						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
 						<ItemGroup isBordered isSeparated>
 							<BackgroundColorItem
 								name={ name }

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import DuotonePanel from './duotone-panel';
+import BlockPreviewPanel from './block-preview-panel';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+
+function ScreenFilters( { name } ) {
+	return (
+		<>
+			<ScreenHeader title={ __( 'Filters' ) } />
+			<BlockPreviewPanel name={ name } />
+			<DuotonePanel name={ name } />
+		</>
+	);
+}
+
+export default ScreenFilters;

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

@@ -17,7 +17,7 @@ import { useState } from '@wordpress/element';
  */
 import ScreenHeader from './header';
 import {
-	getSupportedGlobalStylesPanels,
+	useSupportedStyles,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
 } from './hooks';
@@ -28,7 +28,7 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 function ScreenHeadingColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
@@ -125,7 +125,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-heading-color">
-				<h4>{ __( 'Select heading level' ) }</h4>
+				<h3>{ __( 'Select heading level' ) }</h3>
 
 				<ToggleGroupControl
 					__nextHasNoMarginBottom
@@ -151,7 +151,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 			</div>
 			{ hasTextColor && (
 				<div className="edit-site-global-styles-screen-heading-color">
-					<h4>
+					<h3>
 						{ selectedLevel === 'heading'
 							? __( 'Text color for all heading levels' )
 							: sprintf(
@@ -159,7 +159,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 									__( 'Text color for %s' ),
 									selectedLevel.toUpperCase()
 							  ) }
-					</h4>
+					</h3>
 					<ColorGradientControl
 						className="edit-site-screen-heading-text-color__control"
 						colors={ colorsPerOrigin }
@@ -170,12 +170,13 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 						colorValue={ color }
 						onColorChange={ setColor }
 						clearable={ color === userColor }
+						headingLevel={ 4 }
 					/>
 				</div>
 			) }
 			{ hasBackgroundColor && (
 				<div className="edit-site-global-styles-screen-heading-color">
-					<h4>
+					<h3>
 						{ selectedLevel === 'heading'
 							? __( 'Background color for all heading levels' )
 							: sprintf(
@@ -183,7 +184,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 									__( 'Background color for %s' ),
 									selectedLevel.toUpperCase()
 							  ) }
-					</h4>
+					</h3>
 					<ColorGradientControl
 						className="edit-site-screen-heading-background-color__control"
 						colors={ colorsPerOrigin }
@@ -193,6 +194,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar
+						headingLevel={ 4 }
 						{ ...controlProps }
 					/>
 				</div>

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

@@ -2,17 +2,24 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
+import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+
+const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenLayout( { name, variation = '' } ) {
-	const hasDimensionsPanel = useHasDimensionsPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>

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

@@ -12,14 +12,14 @@ import { TabPanel } from '@wordpress/components';
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenLinkColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );
@@ -111,6 +111,7 @@ function ScreenLinkColor( { name, variation = '' } ) {
 									pseudoSelectorConfig.value ===
 									pseudoSelectorConfig.userValue
 								}
+								headingLevel={ 3 }
 							/>
 						</>
 					);

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

@@ -11,14 +11,14 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenTextColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
@@ -53,6 +53,7 @@ function ScreenTextColor( { name, variation = '' } ) {
 				colorValue={ color }
 				onColorChange={ setColor }
 				clearable={ color === userColor }
+				headingLevel={ 3 }
 			/>
 		</>
 	);

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

@@ -109,7 +109,7 @@ function ScreenTypography( { name, variation = '' } ) {
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>
-						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
 						<ItemGroup isBordered isSeparated>
 							<Item
 								name={ name }

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

@@ -27,14 +27,14 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from './hooks';
+import { useSupportedStyles } from './hooks';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export function useHasShadowControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return supports.includes( 'shadow' );
 }
 
@@ -44,7 +44,10 @@ export default function ShadowPanel( { name, variation = '' } ) {
 	const [ userShadow ] = useGlobalStyle( `${ prefix }shadow`, name, 'user' );
 	const hasShadow = () => !! userShadow;
 
-	const resetShadow = () => setShadow( undefined );
+	const resetShadow = useCallback(
+		() => setShadow( undefined ),
+		[ setShadow ]
+	);
 	const resetAll = useCallback(
 		() => resetShadow( undefined ),
 		[ resetShadow ]

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

@@ -62,6 +62,11 @@
 	padding: 0 $grid-unit-20;
 }
 
+.edit-site-global-styles-header {
+	// Need to override the too specific bottom margin for complementary areas.
+	margin-bottom: 0 !important;
+}
+
 .edit-site-global-styles-subtitle {
 	// Need to override the too specific styles for complementary areas.
 	margin-bottom: 0 !important;

package/src/components/global-styles/subtitle.js

@@ -3,9 +3,12 @@
  */
 import { __experimentalHeading as Heading } from '@wordpress/components';
 
-function Subtitle( { children } ) {
+function Subtitle( { children, level } ) {
 	return (
-		<Heading className="edit-site-global-styles-subtitle" level={ 2 }>
+		<Heading
+			className="edit-site-global-styles-subtitle"
+			level={ level ?? 2 }
+		>
 			{ children }
 		</Heading>
 	);