@wordpress/edit-site 5.3.3 → 5.4.0

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

@@ -27,7 +27,7 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels } from './hooks';
+import { useSupportedStyles } from './hooks';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -53,42 +53,42 @@ export function useHasDimensionsPanel( name ) {
 }
 
 function useHasContentSize( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'layout.contentSize', name );
 
 	return settings && supports.includes( 'contentSize' );
 }
 
 function useHasWideSize( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'layout.wideSize', name );
 
 	return settings && supports.includes( 'wideSize' );
 }
 
 function useHasPadding( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'spacing.padding', name );
 
 	return settings && supports.includes( 'padding' );
 }
 
 function useHasMargin( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'spacing.margin', name );
 
 	return settings && supports.includes( 'margin' );
 }
 
 function useHasGap( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'spacing.blockGap', name );
 
 	return settings && supports.includes( 'blockGap' );
 }
 
 function useHasMinHeight( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ settings ] = useGlobalSetting( 'dimensions.minHeight', name );
 
 	return settings && supports.includes( 'minHeight' );
@@ -413,7 +413,11 @@ export default function DimensionsPanel( { name, variation = '' } ) {
 	};
 
 	return (
-		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+		<ToolsPanel
+			label={ __( 'Dimensions' ) }
+			resetAll={ resetAll }
+			headingLevel={ 3 }
+		>
 			{ ( showContentSizeControl || showWideSizeControl ) && (
 				<span className="span-columns">
 					{ __( 'Set the width of the main content area.' ) }

package/src/components/global-styles/gradients-palette-panel.js

@@ -75,6 +75,7 @@ export default function GradientPalettePanel( { name } ) {
 					gradients={ themeGradients }
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -86,12 +87,14 @@ export default function GradientPalettePanel( { name } ) {
 						gradients={ defaultGradients }
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				gradients={ customGradients }
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelLevel={ 3 }
 				emptyMessage={ __(
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
@@ -99,7 +102,7 @@ export default function GradientPalettePanel( { name } ) {
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>
-					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }

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

@@ -29,7 +29,13 @@ function ScreenHeader( { title, description } ) {
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<Spacer>
-							<Heading level={ 5 }>{ title }</Heading>
+							<Heading
+								className="edit-site-global-styles-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
 						</Spacer>
 					</HStack>
 				</Spacer>

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
@@ -10,107 +9,20 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { _x } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
-import {
-	getBlockType,
-	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-} from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
+import { useSelect } from '@wordpress/data';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'buttonColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'padding',
-	'contentSize',
-	'wideSize',
-	'blockGap',
-];
-
-export function getSupportedGlobalStylesPanels( name ) {
-	if ( ! name ) {
-		return ROOT_BLOCK_SUPPORTS;
-	}
-
-	const blockType = getBlockType( name );
-
-	if ( ! blockType ) {
-		return [];
-	}
-
-	const supportKeys = [];
-
-	// Check for blockGap support.
-	// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
-	// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
-	if (
-		blockType?.supports?.spacing?.blockGap &&
-		blockType?.supports?.spacing?.__experimentalSkipSerialization !==
-			true &&
-		! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
-			( spacingType ) => spacingType === 'blockGap'
-		)
-	) {
-		supportKeys.push( 'blockGap' );
-	}
-
-	// check for shadow support
-	if ( blockType?.supports?.shadow ) {
-		supportKeys.push( 'shadow' );
-	}
-
-	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
-		if ( ! STYLE_PROPERTY[ styleName ].support ) {
-			return;
-		}
-
-		// Opting out means that, for certain support keys like background color,
-		// blocks have to explicitly set the support value false. If the key is
-		// unset, we still enable it.
-		if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
-			if (
-				STYLE_PROPERTY[ styleName ].support[ 0 ] in
-					blockType.supports &&
-				get(
-					blockType.supports,
-					STYLE_PROPERTY[ styleName ].support
-				) !== false
-			) {
-				return supportKeys.push( styleName );
-			}
-		}
-
-		if (
-			get(
-				blockType.supports,
-				STYLE_PROPERTY[ styleName ].support,
-				false
-			)
-		) {
-			return supportKeys.push( styleName );
-		}
-	} );
-
-	return supportKeys;
-}
-
 export function useColorsPerOrigin( name ) {
 	const [ customColors ] = useGlobalSetting( 'color.palette.custom', name );
 	const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );
@@ -240,3 +152,18 @@ export function useColorRandomizer( name ) {
 		? [ randomizeColors ]
 		: [];
 }
+
+export function useSupportedStyles( name, element ) {
+	const { supportedPanels } = useSelect(
+		( select ) => {
+			return {
+				supportedPanels: unlock(
+					select( blocksStore )
+				).getSupportedStyles( name, element ),
+			};
+		},
+		[ name, element ]
+	);
+
+	return supportedPanels;
+}

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

@@ -65,7 +65,7 @@ function Palette( { name } ) {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle>{ __( 'Palette' ) }</Subtitle>
+			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }

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

@@ -17,7 +17,7 @@ import {
  */
 import ScreenHeader from './header';
 import {
-	getSupportedGlobalStylesPanels,
+	useSupportedStyles,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
 } from './hooks';
@@ -27,7 +27,7 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenBackgroundColor( { name, variation = '' } ) {
 	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
@@ -122,6 +122,7 @@ function ScreenBackgroundColor( { name, variation = '' } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				headingLevel={ 3 }
 				{ ...controlProps }
 			/>
 		</>

package/src/components/global-styles/screen-block-list.js

@@ -10,7 +10,10 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
-import { BlockIcon } from '@wordpress/block-editor';
+import {
+	BlockIcon,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
@@ -20,10 +23,17 @@ import { speak } from '@wordpress/a11y';
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasTypographyPanel } from './typography-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../private-apis';
+import { useSupportedStyles } from './hooks';
+
+const {
+	useHasTypographyPanel,
+	useGlobalSetting,
+	overrideSettingsWithSupports,
+} = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
 	const blockItems = useSelect(
@@ -49,7 +59,13 @@ function useSortedBlockTypes() {
 }
 
 function BlockMenuItem( { block } ) {
-	const hasTypographyPanel = useHasTypographyPanel( block.name );
+	const [ rawSettings ] = useGlobalSetting( '', block.name );
+	const supports = useSupportedStyles( block.name );
+	const settings = useMemo(
+		() => overrideSettingsWithSupports( rawSettings, supports ),
+		[ rawSettings, supports ]
+	);
+	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( block.name );
 	const hasBorderPanel = useHasBorderPanel( block.name );
 	const hasDimensionsPanel = useHasDimensionsPanel( block.name );

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-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-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>
 	);