diff --git a/lib/global-styles.php b/lib/global-styles.php index 354ffa39744b1..851fadec257f7 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -349,8 +349,9 @@ function gutenberg_experimental_global_styles_get_block_data() { is_string( $block_type->supports['__experimentalSelector'] ) ) { $block_data[ $block_name ] = array( - 'selector' => $block_type->supports['__experimentalSelector'], - 'supports' => $supports, + 'selector' => $block_type->supports['__experimentalSelector'], + 'supports' => $supports, + 'blockName' => $block_name, ); } elseif ( isset( $block_type->supports['__experimentalSelector'] ) && @@ -358,14 +359,16 @@ function gutenberg_experimental_global_styles_get_block_data() { ) { foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) { $block_data[ $key ] = array( - 'selector' => $selector, - 'supports' => $supports, + 'selector' => $selector, + 'supports' => $supports, + 'blockName' => $block_name, ); } } else { $block_data[ $block_name ] = array( - 'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ), - 'supports' => $supports, + 'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ), + 'supports' => $supports, + 'blockName' => $block_name, ); } } @@ -411,7 +414,7 @@ function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) { * * @return string Stylesheet. */ -function gutenberg_experimental_global_styles_resolver( $tree ) { +function gutenberg_experimental_global_styles_get_stylesheet( $tree ) { $stylesheet = ''; $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( array_keys( $tree ) as $block_name ) { @@ -561,15 +564,14 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { * Takes data from the different origins (core, theme, and user) * and returns the merged result. * - * @return array Merged trees. + * @return array Merged trees */ function gutenberg_experimental_global_styles_get_merged_origins() { - $core = gutenberg_experimental_global_styles_get_core(); - $theme = gutenberg_experimental_global_styles_get_theme(); - $user = gutenberg_experimental_global_styles_get_user(); - $merged = gutenberg_experimental_global_styles_merge_trees( $core, $theme, $user ); + $core = gutenberg_experimental_global_styles_get_core(); + $theme = gutenberg_experimental_global_styles_get_theme(); + $user = gutenberg_experimental_global_styles_get_user(); - return $merged; + return gutenberg_experimental_global_styles_merge_trees( $core, $theme, $user ); } /** @@ -578,7 +580,7 @@ function gutenberg_experimental_global_styles_get_merged_origins() { */ function gutenberg_experimental_global_styles_enqueue_assets() { $merged = gutenberg_experimental_global_styles_get_merged_origins(); - $stylesheet = gutenberg_experimental_global_styles_resolver( $merged ); + $stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $merged ); if ( empty( $stylesheet ) ) { return; } @@ -644,33 +646,44 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) { * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { + $merged = gutenberg_experimental_global_styles_get_merged_origins(); - if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { - $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); - - $global_styles = gutenberg_experimental_global_styles_merge_trees( - gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme() - ); - - $settings['__experimentalGlobalStylesBase'] = $global_styles; - } - - // Add the styles for the editor via the settings - // so they get processed as if they were added via add_editor_styles: - // they will get the editor wrapper class. - $merged = gutenberg_experimental_global_styles_get_merged_origins(); - $stylesheet = gutenberg_experimental_global_styles_resolver( $merged ); - $settings['styles'][] = array( 'css' => $stylesheet ); - + // STEP 1: ADD FEATURES + // These need to be added to settings always. + // We also need to unset the deprecated settings defined by core. $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged ); - - // Unsetting deprecated settings defined by Core. unset( $settings['disableCustomColors'] ); unset( $settings['disableCustomGradients'] ); unset( $settings['disableCustomFontSizes'] ); unset( $settings['enableCustomLineHeight'] ); + // STEP 2 - IF EDIT-SITE, ADD DATA REQUIRED FOR GLOBAL STYLES SIDEBAR + // The client needs some information to be able to access/update the user styles. + // We only do this if the theme has support for theme.json, though, + // as an indicator that the theme will know how to combine this with its stylesheet. + $screen = get_current_screen(); + if ( + ! empty( $screen ) && + function_exists( 'gutenberg_is_edit_site_page' ) && + gutenberg_is_edit_site_page( $screen->id ) && + gutenberg_experimental_global_styles_has_theme_json_support() + ) { + $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); + $settings['__experimentalGlobalStylesContexts'] = gutenberg_experimental_global_styles_get_block_data(); + $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme() + ); + } else { + // STEP 3 - OTHERWISE, ADD STYLES + // + // If we are in a block editor context, but not in edit-site, + // we need to add the styles via the settings. This is because + // we want them processed as if they were added via add_editor_styles, + // which adds the editor wrapper class. + $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $merged ) ); + } + return $settings; } diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js new file mode 100644 index 0000000000000..b5a85074e0c08 --- /dev/null +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -0,0 +1,96 @@ +/** + * External dependencies + */ +import { set, get } from 'lodash'; + +/** + * WordPress dependencies + */ +import { + createContext, + useContext, + useEffect, + useMemo, +} from '@wordpress/element'; +import { useEntityProp } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import getGlobalStyles from './global-styles-renderer'; + +const GlobalStylesContext = createContext( { + /* eslint-disable no-unused-vars */ + getProperty: ( context, path ) => {}, + setProperty: ( context, newValues ) => {}, + globalContext: {}, + /* eslint-enable no-unused-vars */ +} ); + +export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); + +export default ( { children, baseStyles, contexts } ) => { + const [ content, setContent ] = useEntityProp( + 'postType', + 'wp_global_styles', + 'content' + ); + + const userStyles = useMemo( + () => ( content ? JSON.parse( content ) : {} ), + [ content ] + ); + + const nextValue = useMemo( + () => ( { + contexts, + getProperty: ( context, path ) => + get( userStyles?.[ context ]?.styles, path ), + setProperty: ( context, newValues ) => { + const newContent = { ...userStyles }; + Object.keys( newValues ).forEach( ( key ) => { + set( + newContent, + `${ context }.styles.${ key }`, + newValues[ key ] + ); + } ); + setContent( JSON.stringify( newContent ) ); + }, + } ), + [ contexts, content ] + ); + + useEffect( () => { + if ( + typeof contexts !== 'object' || + typeof baseStyles !== 'object' || + typeof userStyles !== 'object' + ) { + return; + } + + const embeddedStylesheetId = 'global-styles-inline-css'; + let styleNode = document.getElementById( embeddedStylesheetId ); + + if ( ! styleNode ) { + styleNode = document.createElement( 'style' ); + styleNode.id = embeddedStylesheetId; + document + .getElementsByTagName( 'head' )[ 0 ] + .appendChild( styleNode ); + } + + styleNode.innerText = getGlobalStyles( + contexts, + baseStyles, + userStyles + ); + }, [ contexts, baseStyles, content ] ); + + return ( + + { children } + + ); +}; diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js new file mode 100644 index 0000000000000..3c2dfc236dd74 --- /dev/null +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -0,0 +1,121 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * Internal dependencies + */ +import { + STYLE_PROPS, + PRESET_CATEGORIES, + LINK_COLOR_DECLARATION, +} from './utils'; + +const mergeTrees = ( baseData, userData ) => { + // Deep clone from base data. + // + // We don't use cloneDeep from lodash here + // because we know the data is JSON compatible, + // see https://github.com/lodash/lodash/issues/1984 + const mergedTree = JSON.parse( JSON.stringify( baseData ) ); + + const styleKeys = [ 'typography', 'color' ]; + Object.keys( userData ).forEach( ( context ) => { + styleKeys.forEach( ( key ) => { + // Normalize object shape: make sure the key exists under styles. + if ( ! mergedTree[ context ].styles?.[ key ] ) { + mergedTree[ context ].styles[ key ] = {}; + } + + // Merge data: base + user. + mergedTree[ context ].styles[ key ] = { + ...mergedTree[ context ].styles[ key ], + ...userData[ context ]?.styles?.[ key ], + }; + } ); + } ); + + return mergedTree; +}; + +export default ( blockData, baseTree, userTree ) => { + const styles = []; + // Can this be converted to a context, as the global context? + // See comment in the server. + styles.push( LINK_COLOR_DECLARATION ); + const tree = mergeTrees( baseTree, userTree ); + + /** + * Transform given style tree into a set of style declarations. + * + * @param {Object} blockSupports What styles the block supports. + * @param {Object} blockStyles Block styles. + * + * @return {Array} An array of style declarations. + */ + const getBlockStylesDeclarations = ( blockSupports, blockStyles ) => { + const declarations = []; + Object.keys( STYLE_PROPS ).forEach( ( key ) => { + if ( + blockSupports.includes( key ) && + get( blockStyles, STYLE_PROPS[ key ], false ) + ) { + declarations.push( + `${ key }: ${ get( blockStyles, STYLE_PROPS[ key ] ) }` + ); + } + } ); + + return declarations; + }; + + /** + * Transform given preset tree into a set of style declarations. + * + * @param {Object} blockPresets + * + * @return {Array} An array of style declarations. + */ + const getBlockPresetsDeclarations = ( blockPresets ) => { + const declarations = []; + PRESET_CATEGORIES.forEach( ( category ) => { + if ( blockPresets?.[ category ] ) { + blockPresets[ category ].forEach( ( { slug, value } ) => + declarations.push( + `--wp--preset--${ category }--${ slug }: ${ value }` + ) + ); + } + } ); + return declarations; + }; + + const getBlockSelector = ( selector ) => { + // Can we hook into the styles generation mechanism + // so we can avoid having to increase the class specificity here + // and remap :root? + if ( ':root' === selector ) { + selector = ''; + } + return `.editor-styles-wrapper.editor-styles-wrapper ${ selector }`; + }; + + Object.keys( blockData ).forEach( ( context ) => { + const blockSelector = getBlockSelector( blockData[ context ].selector ); + const blockDeclarations = [ + ...getBlockStylesDeclarations( + blockData[ context ].supports, + tree[ context ].styles + ), + ...getBlockPresetsDeclarations( tree[ context ].presets ), + ]; + if ( blockDeclarations.length > 0 ) { + styles.push( + `${ blockSelector } { ${ blockDeclarations.join( ';' ) } }` + ); + } + } ); + + return styles.join( '' ); +}; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 4e4f40e6eea86..2ba44ab5345cb 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -38,6 +38,7 @@ import Header from '../header'; import { SidebarComplementaryAreaFills } from '../sidebar'; import BlockEditor from '../block-editor'; import KeyboardShortcuts from '../keyboard-shortcuts'; +import GlobalStylesProvider from './global-styles-provider'; const interfaceLabels = { leftSidebar: __( 'Block Library' ), @@ -168,115 +169,134 @@ function Editor() { type={ templateType } id={ entityId } > - - - - - -
-
-
- { - if ( - isMobile - ) { - setIsInserterOpen( - false - ); - } - } } - /> -
- - ) - } - sidebar={ - sidebarIsOpened && ( - - ) - } - header={ -
+ + + + + + +
+
+
+ { + if ( + isMobile + ) { + setIsInserterOpen( + false + ); + } + } } + /> +
+ + ) } - onToggleInserter={ () => - setIsInserterOpen( - ! isInserterOpen + sidebar={ + sidebarIsOpened && ( + ) } - /> - } - content={ - - - - { template && ( - + setIsInserterOpen( + ! isInserterOpen + ) } /> - ) } - - - } - actions={ - <> - - { ! isEntitiesSavedStatesOpen && ( -
- -
- ) } - - } - footer={ } - /> - - - - + /> + { ! isEntitiesSavedStatesOpen && ( +
+ +
+ ) } + + } + footer={ } + /> + + + + + + diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js new file mode 100644 index 0000000000000..ebb6cd27a8e55 --- /dev/null +++ b/packages/edit-site/src/components/editor/utils.js @@ -0,0 +1,33 @@ +/* CSS properties */ +export const FONT_SIZE = 'font-size'; +export const LINK_COLOR = '--wp--style--color--link'; +export const BACKGROUND_COLOR = 'background-color'; +export const GRADIENT_COLOR = 'background'; +export const TEXT_COLOR = 'color'; +export const LINE_HEIGHT = 'line-height'; + +/* Supporting data */ +export const GLOBAL_CONTEXT = 'global'; +export const PRESET_CATEGORIES = [ 'color', 'font-size', 'gradient' ]; +export const STYLE_PROPS = { + [ FONT_SIZE ]: 'typography.fontSize', + [ LINE_HEIGHT ]: 'typography.lineHeight', + [ TEXT_COLOR ]: 'color.text', + [ BACKGROUND_COLOR ]: 'color.background', + [ GRADIENT_COLOR ]: 'color.gradient', + [ LINK_COLOR ]: 'color.link', +}; +export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; + +/* Helpers for unit processing */ +export const fromPx = ( value ) => { + switch ( typeof value ) { + case 'string': + return +value.replace( 'px', '' ); + case 'number': + default: + return value; + } +}; + +export const toPx = ( value ) => ( value ? value + 'px' : value ); diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js new file mode 100644 index 0000000000000..4a5348f9e027e --- /dev/null +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -0,0 +1,112 @@ +/** + * WordPress dependencies + */ +import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { + BACKGROUND_COLOR, + LINK_COLOR, + TEXT_COLOR, + GRADIENT_COLOR, +} from '../editor/utils'; + +export default ( { + context: { supports, name }, + getProperty, + setProperty, +} ) => { + if ( + ! supports.includes( TEXT_COLOR ) && + ! supports.includes( BACKGROUND_COLOR ) && + ! supports.includes( GRADIENT_COLOR ) && + ! supports.includes( LINK_COLOR ) + ) { + return null; + } + + const settings = []; + + if ( supports.includes( TEXT_COLOR ) ) { + settings.push( { + colorValue: getProperty( name, 'color.text' ), + onColorChange: ( value ) => + setProperty( name, { 'color.text': value } ), + label: __( 'Text color' ), + } ); + } + + /* + * We want to send the entities API both colors + * in a single request. This is to avod race conditions + * that override the previous callback. + */ + let setBackground; + let backgroundSettings; + const backgroundPromise = new Promise( + ( resolve ) => ( setBackground = ( value ) => resolve( value ) ) + ); + let setGradient; + let gradientSettings; + const gradientPromise = new Promise( + ( resolve ) => ( setGradient = ( value ) => resolve( value ) ) + ); + Promise.all( [ backgroundPromise, gradientPromise ] ).then( ( values ) => { + setProperty( name, { ...values[ 0 ], ...values[ 1 ] } ); + } ); + if ( supports.includes( BACKGROUND_COLOR ) ) { + backgroundSettings = { + colorValue: getProperty( name, 'color.background' ), + onColorChange: ( value ) => + setBackground( { 'color.background': value } ), + }; + } else { + backgroundSettings = {}; + // Resolve the background promise, as to fire the setProperty + // callback when the gradient promise is resolved. + setBackground( undefined ); + } + if ( supports.includes( GRADIENT_COLOR ) ) { + gradientSettings = { + gradientValue: getProperty( name, 'color.gradient' ), + onGradientChange: ( value ) => + setGradient( { 'color.gradient': value } ), + disableCustomGradients: true, + }; + } else { + gradientSettings = {}; + // Resolve the gradient promise, as to fire the setProperty + // callback when the background promise is resolved. + setGradient( undefined ); + } + + if ( + supports.includes( GRADIENT_COLOR ) || + supports.includes( BACKGROUND_COLOR ) + ) { + settings.push( { + ...backgroundSettings, + ...gradientSettings, + label: __( 'Background color' ), + } ); + } + + if ( supports.includes( LINK_COLOR ) ) { + settings.push( { + colorValue: getProperty( name, 'color.link' ), + onColorChange: ( value ) => + setProperty( name, { 'color.link': value } ), + label: __( 'Link color' ), + } ); + } + + return ( + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js new file mode 100644 index 0000000000000..75c4e1401c5e8 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/default-sidebar.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { + ComplementaryArea, + ComplementaryAreaMoreMenuItem, +} from '@wordpress/interface'; +import { __ } from '@wordpress/i18n'; + +export default ( { identifier, title, icon, children } ) => { + return ( + <> + + { children } + + + { title } + + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js new file mode 100644 index 0000000000000..c2f0c58de74b1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -0,0 +1,132 @@ +/** + * External dependencies + */ +import { omit } from 'lodash'; + +/** + * WordPress dependencies + */ +import { PanelBody, TabPanel } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { getBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { useGlobalStylesContext } from '../editor/global-styles-provider'; +import DefaultSidebar from './default-sidebar'; +import { GLOBAL_CONTEXT } from '../editor/utils'; +import TypographyPanel from './typography-panel'; +import ColorPanel from './color-panel'; + +export default ( { identifier, title, icon } ) => { + const { contexts, getProperty, setProperty } = useGlobalStylesContext(); + + if ( typeof contexts !== 'object' || ! contexts?.[ GLOBAL_CONTEXT ] ) { + // No sidebar is shown. + return null; + } + + return ( + + + { ( tab ) => { + /* Per Block Context */ + if ( 'block' === tab.name ) { + return Object.keys( + omit( contexts, [ GLOBAL_CONTEXT ] ) + ) + .map( ( name ) => { + const { + supports, + selector, + blockName, + } = contexts[ name ]; + + /* + * We use the block's name as the panel title. + * + * Some blocks (eg: core/heading) can represent different + * contexts (eg: core/heading/h1, core/heading/h2). + * For those, we attach the selector (h1) after the block's name. + * + * The title can't be accessed in the server, + * as it's translatable and the block.json doesn't + * have it yet. + */ + const blockType = getBlockType( blockName ); + let panelTitle = blockType.title; + if ( + 'object' === + typeof blockType?.supports + ?.__experimentalSelector + ) { + panelTitle += ` (${ selector })`; + } + + return ( + + { [ + , + , + ].filter( Boolean ) } + + ); + } ) + .filter( Boolean ); + } + + /* Global Context */ + const { supports, blockName } = contexts[ GLOBAL_CONTEXT ]; + return [ + , + , + ].filter( Boolean ); + } } + + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index f9ede8818f64a..918f858b52ad2 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -2,44 +2,19 @@ * WordPress dependencies */ import { createSlotFill } from '@wordpress/components'; -import { - ComplementaryArea, - ComplementaryAreaMoreMenuItem, -} from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; -import { cog, pencil } from '@wordpress/icons'; -import { Platform } from '@wordpress/element'; +import { cog, typography } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import DefaultSidebar from './default-sidebar'; +import GlobalStylesSidebar from './global-styles-sidebar'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' ); export const SidebarInspectorFill = InspectorFill; -const BLOCK_INSPECTOR_ACTIVE_BY_DEFAULT = Platform.select( { - web: true, - native: false, -} ); - -const DefaultSidebar = ( { identifier, title, icon, children } ) => { - return ( - <> - - { children } - - - { title } - - - ); -}; export function SidebarComplementaryAreaFills() { return ( @@ -48,17 +23,14 @@ export function SidebarComplementaryAreaFills() { identifier="edit-site/block-inspector" title={ __( 'Block Inspector' ) } icon={ cog } - isActiveByDefault={ BLOCK_INSPECTOR_ACTIVE_BY_DEFAULT } > - -

Global Styles area

- + icon={ typography } + /> ); } diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js new file mode 100644 index 0000000000000..b2375a87593eb --- /dev/null +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { + FontSizePicker, + __experimentalLineHeightControl as LineHeightControl, +} from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { FONT_SIZE, LINE_HEIGHT, fromPx, toPx } from '../editor/utils'; + +export default ( { + context: { supports, name }, + getProperty, + setProperty, +} ) => { + if ( + ! supports.includes( FONT_SIZE ) && + ! supports.includes( LINE_HEIGHT ) + ) { + return null; + } + + return ( + + { supports.includes( FONT_SIZE ) && ( + + setProperty( name, { + 'typography.fontSize': toPx( value ), + } ) + } + /> + ) } + { supports.includes( LINE_HEIGHT ) && ( + + setProperty( name, { 'typography.lineHeight': value } ) + } + /> + ) } + + ); +}; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index b89eae25b5a70..717dd0b0e3b7a 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -166,7 +166,8 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditingDemo', '__experimentalFeatures', '__experimentalGlobalStylesUserEntityId', - '__experimentalGlobalStylesBase', + '__experimentalGlobalStylesBaseStyles', + '__experimentalGlobalStylesContexts', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', 'alignWide',