@wordpress/edit-site 5.6.0 → 5.8.0

package/build-style/style.css

@@ -983,7 +983,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   max-width: 100%;
 }
 
-.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography,
 .edit-site-global-styles-screen-css {
   margin: 16px;
@@ -1002,9 +1001,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles-screen-colors {
   margin: 16px;
 }
-.edit-site-global-styles-screen-colors .component-color-indicator {
-  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-  flex-shrink: 0;
+.edit-site-global-styles-screen-colors .color-block-support-panel {
+  padding-left: 0;
+  padding-right: 0;
+  border-top: none;
 }
 
 .edit-site-global-styles-header__description {
@@ -1036,13 +1036,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 0;
 }
 
-.edit-site-screen-text-color__control,
-.edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control.has-no-tabs {
-  padding: 16px;
-}
-
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
 }
@@ -1070,12 +1063,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   flex-shrink: 0;
 }
 
-.edit-site-global-styles__color-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .edit-site-global-styles__block-preview-panel {
   position: relative;
   width: 100%;
@@ -1146,40 +1133,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   flex-direction: column;
 }
 
-.edit-site-global-styles__shadow-panel {
-  width: 230px;
-}
-
-.edit-site-global-styles__shadow-dropdown {
-  display: block;
-  padding: 0;
-}
-.edit-site-global-styles__shadow-dropdown > button {
-  width: 100%;
-  padding: 8px;
-}
-.edit-site-global-styles__shadow-dropdown > button.is-open {
-  background-color: #f0f0f0;
-}
-
-.edit-site-global-styles__shadow-indicator-wrapper {
-  padding: 6px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.edit-site-global-styles__shadow-indicator {
-  color: #2f2f2f;
-  border: #e0e0e0 1px solid;
-  border-radius: 2px;
-  cursor: pointer;
-  padding: 0;
-  height: 24px;
-  width: 24px;
-}
-
 .edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
 .edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
   background: unset;
@@ -2107,7 +2060,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
   height: 100%;
-  box-shadow: 0 0 0 1px #ddd;
 }
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
   width: 100%;
@@ -2116,12 +2068,8 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
   display: none;
 }
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
-}
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:focus .block-editor-block-preview__container {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__item:not(:focus):not(:hover) .block-editor-block-preview__container {
+  box-shadow: 0 0 0 1px #ddd;
 }
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container {
   position: absolute;
@@ -2514,15 +2462,28 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   margin-bottom: 8px;
   padding-bottom: 8px;
   padding-right: 16px;
+  z-index: 1;
 }
 
 .edit-site-sidebar-navigation-screen__title {
-  font-size: calc(1.56 * 13px);
-  line-height: normal;
-  font-weight: 500;
   flex-grow: 1;
-  color: #fff;
-  margin: 0;
+  padding: 6px 0 0 0;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+  margin-left: 16px;
+}
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
+  border: #1e1e1e 1px solid;
+}
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
+  border: #f0f0f0 1px solid;
+}
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
+  border: var(--wp-admin-theme-color) 1px solid;
+}
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
+  border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 }
 
 .edit-site-sidebar-navigation-screen-template__added-by-description {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.6.0",
+	"version": "5.8.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,35 +27,37 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.29.0",
-		"@wordpress/api-fetch": "^6.26.0",
-		"@wordpress/block-editor": "^11.6.0",
-		"@wordpress/block-library": "^8.6.0",
-		"@wordpress/blocks": "^12.6.0",
-		"@wordpress/components": "^23.6.0",
-		"@wordpress/compose": "^6.6.0",
-		"@wordpress/core-data": "^6.6.0",
-		"@wordpress/data": "^8.6.0",
-		"@wordpress/deprecated": "^3.29.0",
-		"@wordpress/editor": "^13.6.0",
-		"@wordpress/element": "^5.6.0",
-		"@wordpress/hooks": "^3.29.0",
-		"@wordpress/html-entities": "^3.29.0",
-		"@wordpress/i18n": "^4.29.0",
-		"@wordpress/icons": "^9.20.0",
-		"@wordpress/interface": "^5.6.0",
-		"@wordpress/keyboard-shortcuts": "^4.6.0",
-		"@wordpress/keycodes": "^3.29.0",
-		"@wordpress/media-utils": "^4.20.0",
-		"@wordpress/notices": "^3.29.0",
-		"@wordpress/plugins": "^5.6.0",
-		"@wordpress/preferences": "^3.6.0",
-		"@wordpress/private-apis": "^0.11.0",
-		"@wordpress/reusable-blocks": "^4.6.0",
-		"@wordpress/style-engine": "^1.12.0",
-		"@wordpress/url": "^3.30.0",
-		"@wordpress/viewport": "^5.6.0",
-		"@wordpress/widgets": "^3.6.0",
+		"@wordpress/a11y": "^3.31.0",
+		"@wordpress/api-fetch": "^6.28.0",
+		"@wordpress/block-editor": "^11.8.0",
+		"@wordpress/block-library": "^8.8.0",
+		"@wordpress/blocks": "^12.8.0",
+		"@wordpress/commands": "^0.2.0",
+		"@wordpress/components": "^23.8.0",
+		"@wordpress/compose": "^6.8.0",
+		"@wordpress/core-data": "^6.8.0",
+		"@wordpress/data": "^9.1.0",
+		"@wordpress/deprecated": "^3.31.0",
+		"@wordpress/dom": "^3.31.0",
+		"@wordpress/editor": "^13.8.0",
+		"@wordpress/element": "^5.8.0",
+		"@wordpress/hooks": "^3.31.0",
+		"@wordpress/html-entities": "^3.31.0",
+		"@wordpress/i18n": "^4.31.0",
+		"@wordpress/icons": "^9.22.0",
+		"@wordpress/interface": "^5.8.0",
+		"@wordpress/keyboard-shortcuts": "^4.8.0",
+		"@wordpress/keycodes": "^3.31.0",
+		"@wordpress/media-utils": "^4.22.0",
+		"@wordpress/notices": "^3.31.0",
+		"@wordpress/plugins": "^5.8.0",
+		"@wordpress/preferences": "^3.8.0",
+		"@wordpress/private-apis": "^0.13.0",
+		"@wordpress/reusable-blocks": "^4.8.0",
+		"@wordpress/style-engine": "^1.14.0",
+		"@wordpress/url": "^3.32.0",
+		"@wordpress/viewport": "^5.8.0",
+		"@wordpress/widgets": "^3.8.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9534a7b3bbf07c1d40b94fdb7a3d091f297bfb06"
+	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
 }

package/src/components/add-new-template/new-template-part.js

@@ -13,14 +13,12 @@ import { plus } from '@wordpress/icons';
  * Internal dependencies
  */
 import { useHistory } from '../routes';
-import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
-import { unlock } from '../../private-apis';
 
 export default function NewTemplatePart( {
 	postType,
@@ -31,7 +29,6 @@ export default function NewTemplatePart( {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
@@ -63,13 +60,11 @@ export default function NewTemplatePart( {
 
 			setIsModalOpen( false );
 
-			// Switch to edit mode.
-			setCanvasMode( 'edit' );
-
 			// Navigate to the created template part editor.
 			history.push( {
 				postId: templatePart.id,
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
 
 			// TODO: Add a success notice?

package/src/components/add-new-template/new-template.js

@@ -98,9 +98,7 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
+	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
 			return;
@@ -125,20 +123,19 @@ export default function NewTemplate( {
 
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
-			// Switch to edit mode.
-			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,
 				postType: newTemplate.type,
+				canvas: 'edit',
 			} );
 
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					title
+					newTemplate.title?.rendered || title
 				),
 				{
 					type: 'snackbar',

package/src/components/add-new-template/utils.js

@@ -146,7 +146,7 @@ export function usePostTypeArchiveMenuItems() {
 						description: sprintf(
 							// translators: %s: Name of the post type e.g: "Post".
 							__(
-								'Displays an archive with the latests posts of type: %s.'
+								'Displays an archive with the latest posts of type: %s.'
 							),
 							postType.labels.singular_name
 						),

package/src/components/block-editor/editor-canvas.js

@@ -31,33 +31,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
+
 	return (
 		<Iframe
 			expand={ isZoomOutMode }
 			scale={ ( isZoomOutMode && 0.45 ) || undefined }
 			frameSize={ isZoomOutMode ? 100 : undefined }
 			style={ enableResizing ? {} : deviceStyles }
-			head={
-				<>
-					<EditorStyles styles={ settings.styles } />
-					<style>{
-						// Forming a "block formatting context" to prevent margin collapsing.
-						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-						`.is-root-container { display: flow-root; }
-							body { position: relative;
-							${ canvasMode === 'view' ? 'cursor: pointer;' : '' }}}`
-					}</style>
-					{ enableResizing && (
-						<style>
-							{
-								// Some themes will have `min-height: 100vh` for the root container,
-								// which isn't a requirement in auto resize mode.
-								`.is-root-container { min-height: 0 !important; }`
-							}
-						</style>
-					) }
-				</>
-			}
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
@@ -70,8 +50,18 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			}
 			readonly={ canvasMode === 'view' }
 		>
-			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-			{ settings.svgFilters }
+			<EditorStyles styles={ settings.styles } />
+			<style>{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+				`.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}body{position:relative; ${
+					canvasMode === 'view' ? 'cursor: pointer;' : ''
+				}}}`
+			}</style>
 			{ children }
 		</Iframe>
 	);

package/src/components/editor/index.js

@@ -67,6 +67,7 @@ export default function Editor() {
 		isInserterOpen,
 		isListViewOpen,
 		showIconLabels,
+		showBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -94,6 +95,10 @@ export default function Editor() {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			showBlockBreadcrumbs: select( preferencesStore ).get(
+				'core/edit-site',
+				'showBlockBreadcrumbs'
+			),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -101,8 +106,11 @@ export default function Editor() {
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const showBlockBreakcrumb =
-		isEditMode && showVisualEditor && blockEditorMode !== 'zoom-out';
+	const shouldShowBlockBreakcrumbs =
+		showBlockBreadcrumbs &&
+		isEditMode &&
+		showVisualEditor &&
+		blockEditorMode !== 'zoom-out';
 	const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen;
 	const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen;
 	const secondarySidebarLabel = isListViewOpen
@@ -205,7 +213,7 @@ export default function Editor() {
 								)
 							}
 							footer={
-								showBlockBreakcrumb && (
+								shouldShowBlockBreakcrumbs && (
 									<BlockBreadcrumb
 										rootLabelText={ __( 'Template' ) }
 									/>

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -29,11 +30,41 @@ export default function BorderPanel( { name, variation = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 
+	const onChange = ( newStyle ) => {
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { border } = newStyle;
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: updatedBorder } );
+	};
+
 	return (
 		<StylesBorderPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
-			onChange={ setStyle }
+			onChange={ onChange }
 			settings={ settings }
 		/>
 	);

package/src/components/global-styles/context-menu.js

@@ -27,19 +27,19 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { useHasColorPanel } from './color-utils';
-import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
-import { useHasShadowControl } from './shadow-panel';
 import { unlock } from '../../private-apis';
 
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
 	useHasBorderPanel,
+	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -48,10 +48,10 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( name );
+	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
-	const hasEffectsPanel = useHasShadowControl( name );
-	const hasFilterPanel = useHasFilterPanel( name );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFilterPanel = useHasFiltersPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
@@ -109,9 +109,9 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					<NavigationButtonAsItem
 						icon={ shadow }
 						path={ parentMenu + '/effects' }
-						aria-label={ __( 'Shadow' ) }
+						aria-label={ __( 'Effects' ) }
 					>
-						{ __( 'Shadow' ) }
+						{ __( 'Effects' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasFilterPanel && (

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

@@ -16,6 +16,16 @@ const {
 	DimensionsPanel: StylesDimensionsPanel,
 } = unlock( blockEditorPrivateApis );
 
+const DEFAULT_CONTROLS = {
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
+	childLayout: false,
+};
+
 export default function DimensionsPanel( { name, variation = '' } ) {
 	let prefixParts = [];
 	if ( variation ) {
@@ -66,6 +76,7 @@ export default function DimensionsPanel( { name, variation = '' } ) {
 			onChange={ onChange }
 			settings={ settings }
 			includeLayoutControls
+			defaultControls={ DEFAULT_CONTROLS }
 		/>
 	);
 }

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+
+const {
+	useGlobalSetting,
+	useGlobalStyle,
+	EffectsPanel: StylesEffectsPanel,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
+
+export default function EffectsPanel( { name, variation = '' } ) {
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+
+	return (
+		<StylesEffectsPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	FiltersPanel: StylesFiltersPanel,
+} = unlock( blockEditorPrivateApis );
+
+export default function FiltersPanel( { name } ) {
+	const [ style ] = useGlobalStyle( '', name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
+
+	return (
+		<StylesFiltersPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, isEmpty, mapValues } from 'lodash';
+import { mergeWith, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,9 +41,9 @@ const cleanEmptyObject = ( object ) => {
 		return object;
 	}
 	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
+		Object.entries( object )
+			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+			.filter( ( [ , value ] ) => Boolean( value ) )
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };