@wordpress/global-styles-ui 1.2.1-next.dc3f6d3c1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/dimensions-panel.js +1 -0
- package/build/dimensions-panel.js.map +2 -2
- package/build/global-styles-ui.js +7 -1
- package/build/global-styles-ui.js.map +2 -2
- package/build/variations/variations-panel.js +1 -1
- package/build/variations/variations-panel.js.map +2 -2
- package/build-module/dimensions-panel.js +1 -0
- package/build-module/dimensions-panel.js.map +2 -2
- package/build-module/global-styles-ui.js +7 -1
- package/build-module/global-styles-ui.js.map +2 -2
- package/build-module/variations/variations-panel.js +2 -2
- package/build-module/variations/variations-panel.js.map +2 -2
- package/build-style/style-rtl.css +1 -0
- package/build-style/style.css +1 -0
- package/build-types/dimensions-panel.d.ts.map +1 -1
- package/build-types/global-styles-ui.d.ts.map +1 -1
- package/build-types/stories/index.story.d.ts.map +1 -1
- package/build-types/variations/test/variations-panel.spec.d.ts +2 -0
- package/build-types/variations/test/variations-panel.spec.d.ts.map +1 -0
- package/package.json +17 -17
- package/src/dimensions-panel.tsx +1 -0
- package/src/global-styles-ui.tsx +7 -2
- package/src/style.scss +1 -0
- package/src/variations/test/variations-panel.spec.js +204 -0
- package/src/variations/variations-panel.tsx +2 -2
- package/tsconfig.tsbuildinfo +1 -1
- /package/src/stories/{index.story.js → index.story.jsx} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/dimensions-panel.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', undefined, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\n\tconst onChange = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tconst updatedSettings = {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t};\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAAsD;AACtD,qBAAwB;AAKxB,mBAAqC;AACrC,yBAAuB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\twidth: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', undefined, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\n\tconst onChange = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tconst updatedSettings = {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t};\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAAsD;AACtD,qBAAwB;AAKxB,mBAAqC;AACrC,yBAAuB;AAiErB;AA/DF,IAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,QAC1E,2BAAQ,oBAAAA,WAAuB;AAEhC,IAAM,mBAAmB;AAAA,EACxB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACd;AAEe,SAAR,kBAAmC;AACzC,QAAM,CAAE,KAAM,QAAI,uBAAU,IAAI,QAAW,QAAQ,KAAM;AACzD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,YAAa,QAAI,yBAAY,IAAI,QAAW,MAAO;AAC3D,QAAM,CAAE,aAAa,WAAY,QAAI,yBAAY,EAAG;AACpD,QAAM,WAAW,2BAA4B,WAAY;AAIzD,QAAM,+BAA2B,wBAAS,MAAM;AAC/C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,SAAS;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,gBAAgB,SAAS,MAAO,CAAE;AAEvC,QAAM,sBAAkB,wBAAS,MAAM;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,aAAa;AAAA,IACtB;AAAA,EACD,GAAG,CAAE,OAAO,aAAa,MAAO,CAAE;AAElC,QAAM,WAAW,CAAE,aAAmB;AACrC,UAAM,eAAe,EAAE,GAAG,SAAS;AACnC,WAAO,aAAa;AACpB,aAAU,YAAa;AAEvB,QAAK,SAAS,WAAW,aAAa,QAAS;AAC9C,YAAM,kBAAkB;AAAA,QACvB,GAAG;AAAA,QACH,QAAQ,SAAS;AAAA,MAClB;AAGA,UAAK,gBAAgB,QAAQ,aAAc;AAC1C,eAAO,gBAAgB,OAAO;AAAA,MAC/B;AAEA,kBAAa,eAAgB;AAAA,IAC9B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,uBAAqB;AAAA,MACrB,iBAAkB;AAAA;AAAA,EACnB;AAEF;",
|
|
6
6
|
"names": ["blockEditorPrivateApis"]
|
|
7
7
|
}
|
|
@@ -114,7 +114,13 @@ function GlobalStylesUI({
|
|
|
114
114
|
const mergedValue = (0, import_element.useMemo)(() => {
|
|
115
115
|
return (0, import_global_styles_engine.mergeGlobalStyles)(baseValue, value);
|
|
116
116
|
}, [baseValue, value]);
|
|
117
|
-
const [globalStylesCSS, globalSettings] = (0, import_global_styles_engine.generateGlobalStyles)(
|
|
117
|
+
const [globalStylesCSS, globalSettings] = (0, import_global_styles_engine.generateGlobalStyles)(
|
|
118
|
+
mergedValue,
|
|
119
|
+
[],
|
|
120
|
+
{
|
|
121
|
+
styleOptions: { variationStyles: true }
|
|
122
|
+
}
|
|
123
|
+
);
|
|
118
124
|
const styles = (0, import_element.useMemo)(
|
|
119
125
|
() => [...serverCSS ?? [], ...globalStylesCSS ?? []],
|
|
120
126
|
[serverCSS, globalStylesCSS]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/global-styles-ui.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Navigator, useNavigator } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n// @ts-expect-error: Not typed yet.\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tgenerateGlobalStyles,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type {\n\tGlobalStylesConfig,\n\tBlockType,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackground from './screen-background';\nimport { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport FontSizes from './font-sizes/font-sizes';\nimport FontSize from './font-sizes/font-size';\ninterface BlockStylesNavigationScreensProps {\n\tparentMenu: string;\n\tblockStyles: any[];\n\tblockName: string;\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n}: BlockStylesNavigationScreensProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ blockStyles.map( ( style, index ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\ninterface ContextScreensProps {\n\tname?: string;\n\tparentMenu?: string;\n}\n\ninterface GlobalStylesNavigationScreenProps {\n\tpath: string;\n\tchildren: React.ReactNode;\n}\n\nfunction ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! name ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name || '' }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface GlobalStylesUIProps {\n\t/** User global styles object (what gets edited) */\n\tvalue: GlobalStylesConfig;\n\t/** Base global styles object (theme default) */\n\tbaseValue: GlobalStylesConfig;\n\t/** Callback when global styles change */\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\t/** Current navigation path (optional) */\n\tpath?: string;\n\t/** Callback when navigation path changes (optional) */\n\tonPathChange?: ( path: string ) => void;\n\t/** Whether font library is enabled (optional) */\n\tfontLibraryEnabled?: boolean;\n\t/** Server CSS styles for BlockEditorProvider (optional) */\n\tserverCSS?: { isGlobalStyles?: boolean }[];\n\t/** Server settings for BlockEditorProvider (optional) */\n\tserverSettings?: { __unstableResolvedAssets: Record< string, unknown > };\n}\n\nexport function GlobalStylesUI( {\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tpath,\n\tonPathChange,\n\tfontLibraryEnabled = false,\n\tserverCSS,\n\tserverSettings,\n}: GlobalStylesUIProps ) {\n\tconst blocks = getBlockTypes();\n\n\t// Compute merged value for CSS generation\n\tconst mergedValue = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst [ globalStylesCSS, globalSettings ] =\n\t\tgenerateGlobalStyles( mergedValue );\n\tconst styles = useMemo(\n\t\t() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],\n\t\t[ serverCSS, globalStylesCSS ]\n\t);\n\n\tconst settings = useMemo( () => {\n\t\treturn {\n\t\t\t...serverSettings,\n\t\t\t__experimentalFeatures: globalSettings,\n\t\t\tstyles,\n\t\t};\n\t}, [ globalSettings, serverSettings, styles ] );\n\n\treturn (\n\t\t<GlobalStylesProvider\n\t\t\tvalue={ value }\n\t\t\tbaseValue={ baseValue }\n\t\t\tonChange={ onChange }\n\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t>\n\t\t\t<BlockEditorProvider settings={ settings }>\n\t\t\t\t<Navigator\n\t\t\t\t\tclassName=\"global-styles-ui-sidebar__navigator-provider\"\n\t\t\t\t\tinitialPath={ path || '/' }\n\t\t\t\t>\n\t\t\t\t\t{ ( path || onPathChange ) && (\n\t\t\t\t\t\t<PathSynchronizer\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t\t\t<ScreenRoot />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t\t\t<ScreenColors />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t\t\t<ScreenTypography />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes\">\n\t\t\t\t\t\t<FontSizes />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes/:origin/:slug\">\n\t\t\t\t\t\t<FontSize />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t\t\t<ScreenLayout />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors/palette\">\n\t\t\t\t\t\t<ScreenColorPalette />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t\t\t<ScreenStyleVariations />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t\t\t<ScreenCSS />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/revisions/:revisionId?\">\n\t\t\t\t\t\t<ScreenRevisions />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows\">\n\t\t\t\t\t\t<ScreenShadows />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows/edit/:category/:slug\">\n\t\t\t\t\t\t<ScreenShadowsEdit />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/background\">\n\t\t\t\t\t\t<ScreenBackground />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t\t\t<ScreenBlockList />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<ContextScreens />\n\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<ContextScreens\n\t\t\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t\t\tparentMenu={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Navigator>\n\t\t\t</BlockEditorProvider>\n\t\t</GlobalStylesProvider>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( {\n\tpath,\n\tchildren,\n}: GlobalStylesNavigationScreenProps ) {\n\treturn (\n\t\t<Navigator.Screen\n\t\t\tclassName=\"global-styles-ui-sidebar__navigator-screen\"\n\t\t\tpath={ path }\n\t\t>\n\t\t\t{ children }\n\t\t</Navigator.Screen>\n\t);\n}\n\n/*\n * Component that handles path synchronization between external path prop and Navigator's internal path.\n */\nfunction PathSynchronizer( {\n\tpath,\n\tonPathChange,\n}: {\n\tpath?: string;\n\tonPathChange?: ( path: string ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\tconst { path: childPath } = navigator.location;\n\tconst previousParentPath = usePrevious( path );\n\tconst previousChildPath = usePrevious( childPath );\n\n\tuseEffect( () => {\n\t\t// Only sync when parent and child paths are out of sync\n\t\tif ( path && path !== childPath ) {\n\t\t\t// If parent path changed, update the Navigator\n\t\t\tif ( path !== previousParentPath ) {\n\t\t\t\tnavigator.goTo( path );\n\t\t\t}\n\t\t\t// If child path changed, notify parent via onPathChange\n\t\t\telse if ( childPath !== previousChildPath && onPathChange ) {\n\t\t\t\tonPathChange( childPath ?? '/' );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tonPathChange,\n\t\tpath,\n\t\tpreviousChildPath,\n\t\tpreviousParentPath,\n\t\tchildPath,\n\t\tnavigator,\n\t] );\n\n\t// This component only handles synchronization logic. It doesn't render anything.\n\t// We use it to run the effect inside the Navigator context.\n\treturn null;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwC;AAExC,oBAAoD;AACpD,kBAA0B;AAE1B,0BAAoC;AACpC,qBAAmC;AACnC,qBAA4B;AAC5B,kCAGO;AASP,sBAAqC;AACrC,yBAAuB;AACvB,+BAA4B;AAC5B,0BAAwB;AACxB,+BAA6B;AAC7B,uCAAoC;AACpC,2BAAyB;AACzB,kCAA+B;AAC/B,+BAA6B;AAC7B,4BAAiD;AACjD,2BAAyB;AACzB,qCAAkC;AAClC,wBAAsB;AACtB,8BAA4B;AAC5B,wBAAsB;AACtB,uBAAqB;AAanB;AANF,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACD,GAAuC;AACtC,SACC,2EACG,sBAAY,IAAK,CAAE,OAAO,UAC3B;AAAA,IAAC,4BAAU;AAAA,IAAV;AAAA,MAEA,MAAO,aAAa,iBAAiB,MAAM;AAAA,MAE3C,sDAAC,oBAAAA,SAAA,EAAY,MAAO,WAAY,WAAY,MAAM,MAAO;AAAA;AAAA,IAHnD;AAAA,EAIP,CACC,GACH;AAEF;AAYA,SAAS,eAAgB,EAAE,MAAM,aAAa,GAAG,GAAyB;AACzE,QAAM,2BAAuB;AAAA,IAC5B,CAAE,WAAY;AACb,UAAK,CAAE,MAAO;AACb,eAAO,CAAC;AAAA,MACT;AACA,YAAM,EAAE,eAAe,IAAI,OAAQ,cAAAC,KAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,aAAa;AAAA,QAEpB,sDAAC,4BAAAC,SAAA,EAAmB,MAAc;AAAA;AAAA,IACnC;AAAA,IAEE,CAAC,CAAE,sBAAsB,UAC1B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,aAAc;AAAA,QACd,WAAY,QAAQ;AAAA;AAAA,IACrB;AAAA,KAEF;AAEF;AAqBO,SAAS,eAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,aAAS,6BAAc;AAG7B,QAAM,kBAAc,wBAAS,MAAM;AAClC,eAAO,+CAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,CAAE,iBAAiB,cAAe,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Navigator, useNavigator } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n// @ts-expect-error: Not typed yet.\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tgenerateGlobalStyles,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type {\n\tGlobalStylesConfig,\n\tBlockType,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackground from './screen-background';\nimport { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport FontSizes from './font-sizes/font-sizes';\nimport FontSize from './font-sizes/font-size';\ninterface BlockStylesNavigationScreensProps {\n\tparentMenu: string;\n\tblockStyles: any[];\n\tblockName: string;\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n}: BlockStylesNavigationScreensProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ blockStyles.map( ( style, index ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\ninterface ContextScreensProps {\n\tname?: string;\n\tparentMenu?: string;\n}\n\ninterface GlobalStylesNavigationScreenProps {\n\tpath: string;\n\tchildren: React.ReactNode;\n}\n\nfunction ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! name ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name || '' }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface GlobalStylesUIProps {\n\t/** User global styles object (what gets edited) */\n\tvalue: GlobalStylesConfig;\n\t/** Base global styles object (theme default) */\n\tbaseValue: GlobalStylesConfig;\n\t/** Callback when global styles change */\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\t/** Current navigation path (optional) */\n\tpath?: string;\n\t/** Callback when navigation path changes (optional) */\n\tonPathChange?: ( path: string ) => void;\n\t/** Whether font library is enabled (optional) */\n\tfontLibraryEnabled?: boolean;\n\t/** Server CSS styles for BlockEditorProvider (optional) */\n\tserverCSS?: { isGlobalStyles?: boolean }[];\n\t/** Server settings for BlockEditorProvider (optional) */\n\tserverSettings?: { __unstableResolvedAssets: Record< string, unknown > };\n}\n\nexport function GlobalStylesUI( {\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tpath,\n\tonPathChange,\n\tfontLibraryEnabled = false,\n\tserverCSS,\n\tserverSettings,\n}: GlobalStylesUIProps ) {\n\tconst blocks = getBlockTypes();\n\n\t// Compute merged value for CSS generation\n\tconst mergedValue = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst [ globalStylesCSS, globalSettings ] = generateGlobalStyles(\n\t\tmergedValue,\n\t\t[],\n\t\t{\n\t\t\tstyleOptions: { variationStyles: true },\n\t\t}\n\t);\n\tconst styles = useMemo(\n\t\t() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],\n\t\t[ serverCSS, globalStylesCSS ]\n\t);\n\n\tconst settings = useMemo( () => {\n\t\treturn {\n\t\t\t...serverSettings,\n\t\t\t__experimentalFeatures: globalSettings,\n\t\t\tstyles,\n\t\t};\n\t}, [ globalSettings, serverSettings, styles ] );\n\n\treturn (\n\t\t<GlobalStylesProvider\n\t\t\tvalue={ value }\n\t\t\tbaseValue={ baseValue }\n\t\t\tonChange={ onChange }\n\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t>\n\t\t\t<BlockEditorProvider settings={ settings }>\n\t\t\t\t<Navigator\n\t\t\t\t\tclassName=\"global-styles-ui-sidebar__navigator-provider\"\n\t\t\t\t\tinitialPath={ path || '/' }\n\t\t\t\t>\n\t\t\t\t\t{ ( path || onPathChange ) && (\n\t\t\t\t\t\t<PathSynchronizer\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t\t\t<ScreenRoot />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t\t\t<ScreenColors />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t\t\t<ScreenTypography />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes\">\n\t\t\t\t\t\t<FontSizes />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes/:origin/:slug\">\n\t\t\t\t\t\t<FontSize />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t\t\t<ScreenLayout />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors/palette\">\n\t\t\t\t\t\t<ScreenColorPalette />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t\t\t<ScreenStyleVariations />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t\t\t<ScreenCSS />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/revisions/:revisionId?\">\n\t\t\t\t\t\t<ScreenRevisions />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows\">\n\t\t\t\t\t\t<ScreenShadows />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows/edit/:category/:slug\">\n\t\t\t\t\t\t<ScreenShadowsEdit />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/background\">\n\t\t\t\t\t\t<ScreenBackground />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t\t\t<ScreenBlockList />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<ContextScreens />\n\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<ContextScreens\n\t\t\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t\t\tparentMenu={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Navigator>\n\t\t\t</BlockEditorProvider>\n\t\t</GlobalStylesProvider>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( {\n\tpath,\n\tchildren,\n}: GlobalStylesNavigationScreenProps ) {\n\treturn (\n\t\t<Navigator.Screen\n\t\t\tclassName=\"global-styles-ui-sidebar__navigator-screen\"\n\t\t\tpath={ path }\n\t\t>\n\t\t\t{ children }\n\t\t</Navigator.Screen>\n\t);\n}\n\n/*\n * Component that handles path synchronization between external path prop and Navigator's internal path.\n */\nfunction PathSynchronizer( {\n\tpath,\n\tonPathChange,\n}: {\n\tpath?: string;\n\tonPathChange?: ( path: string ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\tconst { path: childPath } = navigator.location;\n\tconst previousParentPath = usePrevious( path );\n\tconst previousChildPath = usePrevious( childPath );\n\n\tuseEffect( () => {\n\t\t// Only sync when parent and child paths are out of sync\n\t\tif ( path && path !== childPath ) {\n\t\t\t// If parent path changed, update the Navigator\n\t\t\tif ( path !== previousParentPath ) {\n\t\t\t\tnavigator.goTo( path );\n\t\t\t}\n\t\t\t// If child path changed, notify parent via onPathChange\n\t\t\telse if ( childPath !== previousChildPath && onPathChange ) {\n\t\t\t\tonPathChange( childPath ?? '/' );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tonPathChange,\n\t\tpath,\n\t\tpreviousChildPath,\n\t\tpreviousParentPath,\n\t\tchildPath,\n\t\tnavigator,\n\t] );\n\n\t// This component only handles synchronization logic. It doesn't render anything.\n\t// We use it to run the effect inside the Navigator context.\n\treturn null;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ScreenBlock", "blocksStore", "ScreenColorPalette", "ScreenRoot", "ScreenColors", "ScreenTypography", "FontSizes", "FontSize", "ScreenLayout", "ScreenStyleVariations", "ScreenCSS", "ScreenRevisions", "ScreenBackground", "ScreenTypographyElement", "ScreenBlockList"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ function useBlockVariations(name) {
|
|
|
43
43
|
},
|
|
44
44
|
[name]
|
|
45
45
|
);
|
|
46
|
-
const [variations] = (0, import_hooks.
|
|
46
|
+
const [variations] = (0, import_hooks.useStyle)("variations", name);
|
|
47
47
|
const variationNames = Object.keys(variations ?? {});
|
|
48
48
|
return getFilteredBlockStyles(blockStyles, variationNames);
|
|
49
49
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variations/variations-panel.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,oBAAqC;AACrC,kBAA0B;AAC1B,wBAAqD;AAKrD,+BAAuC;AACvC,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { useStyle } from '../hooks';\n\ninterface BlockStyle {\n\tname: string;\n\tlabel: string;\n\tsource?: string;\n\tisDefault?: boolean;\n}\n\ninterface VariationsPanelProps {\n\tname: string;\n}\n\n// Only core block styles (source === block) or block styles with a matching\n// theme.json style variation will be configurable via Global Styles.\nfunction getFilteredBlockStyles(\n\tblockStyles: BlockStyle[],\n\tvariations: string[]\n): BlockStyle[] {\n\treturn (\n\t\tblockStyles?.filter(\n\t\t\t( style ) =>\n\t\t\t\tstyle.source === 'block' || variations.includes( style.name )\n\t\t) || []\n\t);\n}\n\nexport function useBlockVariations( name: string ): BlockStyle[] {\n\tconst blockStyles = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\tconst [ variations ] = useStyle( 'variations', name );\n\tconst variationNames = Object.keys( variations ?? {} );\n\n\treturn getFilteredBlockStyles( blockStyles, variationNames );\n}\n\nexport function VariationsPanel( { name }: VariationsPanelProps ) {\n\tconst coreBlockStyles = useBlockVariations( name );\n\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ coreBlockStyles.map( ( style, index ) => {\n\t\t\t\tif ( style?.isDefault ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t'/blocks/' +\n\t\t\t\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t\t\t\t'/variations/' +\n\t\t\t\t\t\t\tencodeURIComponent( style.name )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ style.label }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,oBAAqC;AACrC,kBAA0B;AAC1B,wBAAqD;AAKrD,+BAAuC;AACvC,mBAAyB;AAmDpB;AApCL,SAAS,uBACR,aACA,YACe;AACf,SACC,aAAa;AAAA,IACZ,CAAE,UACD,MAAM,WAAW,WAAW,WAAW,SAAU,MAAM,IAAK;AAAA,EAC9D,KAAK,CAAC;AAER;AAEO,SAAS,mBAAoB,MAA6B;AAChE,QAAM,kBAAc;AAAA,IACnB,CAAE,WAAY;AACb,YAAM,EAAE,eAAe,IAAI,OAAQ,cAAAA,KAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACA,QAAM,CAAE,UAAW,QAAI,uBAAU,cAAc,IAAK;AACpD,QAAM,iBAAiB,OAAO,KAAM,cAAc,CAAC,CAAE;AAErD,SAAO,uBAAwB,aAAa,cAAe;AAC5D;AAEO,SAAS,gBAAiB,EAAE,KAAK,GAA0B;AACjE,QAAM,kBAAkB,mBAAoB,IAAK;AAEjD,SACC,4CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAC9B,0BAAgB,IAAK,CAAE,OAAO,UAAW;AAC1C,QAAK,OAAO,WAAY;AACvB,aAAO;AAAA,IACR;AACA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MACC,aACA,mBAAoB,IAAK,IACzB,iBACA,mBAAoB,MAAM,IAAK;AAAA,QAG9B,gBAAM;AAAA;AAAA,MARF;AAAA,IASP;AAAA,EAEF,CAAE,GACH;AAEF;",
|
|
6
6
|
"names": ["blocksStore", "ItemGroup"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/dimensions-panel.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', undefined, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\n\tconst onChange = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tconst updatedSettings = {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t};\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAIA,SAAS,eAAe,8BAA8B;AACtD,SAAS,eAAe;AAKxB,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, DimensionsPanel: StylesDimensionsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nconst DEFAULT_CONTROLS = {\n\tcontentSize: true,\n\twideSize: true,\n\tpadding: true,\n\tmargin: true,\n\tblockGap: true,\n\tminHeight: true,\n\twidth: true,\n\tchildLayout: false,\n};\n\nexport default function DimensionsPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', undefined, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\n\tconst onChange = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tconst updatedSettings = {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t};\n\n\t\t\t// Ensure any changes to layout definitions are not persisted.\n\t\t\tif ( updatedSettings.layout?.definitions ) {\n\t\t\t\tdelete updatedSettings.layout.definitions;\n\t\t\t}\n\n\t\t\tsetSettings( updatedSettings );\n\t\t}\n\t};\n\n\treturn (\n\t\t<StylesDimensionsPanel\n\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\tvalue={ styleWithLayout }\n\t\t\tonChange={ onChange }\n\t\t\tsettings={ settings }\n\t\t\tincludeLayoutControls\n\t\t\tdefaultControls={ DEFAULT_CONTROLS }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAIA,SAAS,eAAe,8BAA8B;AACtD,SAAS,eAAe;AAKxB,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AAiErB;AA/DF,IAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,IAC1E,OAAQ,sBAAuB;AAEhC,IAAM,mBAAmB;AAAA,EACxB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACd;AAEe,SAAR,kBAAmC;AACzC,QAAM,CAAE,KAAM,IAAI,SAAU,IAAI,QAAW,QAAQ,KAAM;AACzD,QAAM,CAAE,gBAAgB,QAAS,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,YAAa,IAAI,WAAY,IAAI,QAAW,MAAO;AAC3D,QAAM,CAAE,aAAa,WAAY,IAAI,WAAY,EAAG;AACpD,QAAM,WAAW,2BAA4B,WAAY;AAIzD,QAAM,2BAA2B,QAAS,MAAM;AAC/C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,SAAS;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,gBAAgB,SAAS,MAAO,CAAE;AAEvC,QAAM,kBAAkB,QAAS,MAAM;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,aAAa;AAAA,IACtB;AAAA,EACD,GAAG,CAAE,OAAO,aAAa,MAAO,CAAE;AAElC,QAAM,WAAW,CAAE,aAAmB;AACrC,UAAM,eAAe,EAAE,GAAG,SAAS;AACnC,WAAO,aAAa;AACpB,aAAU,YAAa;AAEvB,QAAK,SAAS,WAAW,aAAa,QAAS;AAC9C,YAAM,kBAAkB;AAAA,QACvB,GAAG;AAAA,QACH,QAAQ,SAAS;AAAA,MAClB;AAGA,UAAK,gBAAgB,QAAQ,aAAc;AAC1C,eAAO,gBAAgB,OAAO;AAAA,MAC/B;AAEA,kBAAa,eAAgB;AAAA,IAC9B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,uBAAqB;AAAA,MACrB,iBAAkB;AAAA;AAAA,EACnB;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -83,7 +83,13 @@ function GlobalStylesUI({
|
|
|
83
83
|
const mergedValue = useMemo(() => {
|
|
84
84
|
return mergeGlobalStyles(baseValue, value);
|
|
85
85
|
}, [baseValue, value]);
|
|
86
|
-
const [globalStylesCSS, globalSettings] = generateGlobalStyles(
|
|
86
|
+
const [globalStylesCSS, globalSettings] = generateGlobalStyles(
|
|
87
|
+
mergedValue,
|
|
88
|
+
[],
|
|
89
|
+
{
|
|
90
|
+
styleOptions: { variationStyles: true }
|
|
91
|
+
}
|
|
92
|
+
);
|
|
87
93
|
const styles = useMemo(
|
|
88
94
|
() => [...serverCSS ?? [], ...globalStylesCSS ?? []],
|
|
89
95
|
[serverCSS, globalStylesCSS]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/global-styles-ui.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Navigator, useNavigator } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n// @ts-expect-error: Not typed yet.\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tgenerateGlobalStyles,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type {\n\tGlobalStylesConfig,\n\tBlockType,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackground from './screen-background';\nimport { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport FontSizes from './font-sizes/font-sizes';\nimport FontSize from './font-sizes/font-size';\ninterface BlockStylesNavigationScreensProps {\n\tparentMenu: string;\n\tblockStyles: any[];\n\tblockName: string;\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n}: BlockStylesNavigationScreensProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ blockStyles.map( ( style, index ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\ninterface ContextScreensProps {\n\tname?: string;\n\tparentMenu?: string;\n}\n\ninterface GlobalStylesNavigationScreenProps {\n\tpath: string;\n\tchildren: React.ReactNode;\n}\n\nfunction ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! name ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name || '' }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface GlobalStylesUIProps {\n\t/** User global styles object (what gets edited) */\n\tvalue: GlobalStylesConfig;\n\t/** Base global styles object (theme default) */\n\tbaseValue: GlobalStylesConfig;\n\t/** Callback when global styles change */\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\t/** Current navigation path (optional) */\n\tpath?: string;\n\t/** Callback when navigation path changes (optional) */\n\tonPathChange?: ( path: string ) => void;\n\t/** Whether font library is enabled (optional) */\n\tfontLibraryEnabled?: boolean;\n\t/** Server CSS styles for BlockEditorProvider (optional) */\n\tserverCSS?: { isGlobalStyles?: boolean }[];\n\t/** Server settings for BlockEditorProvider (optional) */\n\tserverSettings?: { __unstableResolvedAssets: Record< string, unknown > };\n}\n\nexport function GlobalStylesUI( {\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tpath,\n\tonPathChange,\n\tfontLibraryEnabled = false,\n\tserverCSS,\n\tserverSettings,\n}: GlobalStylesUIProps ) {\n\tconst blocks = getBlockTypes();\n\n\t// Compute merged value for CSS generation\n\tconst mergedValue = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst [ globalStylesCSS, globalSettings ] =\n\t\tgenerateGlobalStyles( mergedValue );\n\tconst styles = useMemo(\n\t\t() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],\n\t\t[ serverCSS, globalStylesCSS ]\n\t);\n\n\tconst settings = useMemo( () => {\n\t\treturn {\n\t\t\t...serverSettings,\n\t\t\t__experimentalFeatures: globalSettings,\n\t\t\tstyles,\n\t\t};\n\t}, [ globalSettings, serverSettings, styles ] );\n\n\treturn (\n\t\t<GlobalStylesProvider\n\t\t\tvalue={ value }\n\t\t\tbaseValue={ baseValue }\n\t\t\tonChange={ onChange }\n\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t>\n\t\t\t<BlockEditorProvider settings={ settings }>\n\t\t\t\t<Navigator\n\t\t\t\t\tclassName=\"global-styles-ui-sidebar__navigator-provider\"\n\t\t\t\t\tinitialPath={ path || '/' }\n\t\t\t\t>\n\t\t\t\t\t{ ( path || onPathChange ) && (\n\t\t\t\t\t\t<PathSynchronizer\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t\t\t<ScreenRoot />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t\t\t<ScreenColors />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t\t\t<ScreenTypography />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes\">\n\t\t\t\t\t\t<FontSizes />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes/:origin/:slug\">\n\t\t\t\t\t\t<FontSize />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t\t\t<ScreenLayout />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors/palette\">\n\t\t\t\t\t\t<ScreenColorPalette />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t\t\t<ScreenStyleVariations />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t\t\t<ScreenCSS />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/revisions/:revisionId?\">\n\t\t\t\t\t\t<ScreenRevisions />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows\">\n\t\t\t\t\t\t<ScreenShadows />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows/edit/:category/:slug\">\n\t\t\t\t\t\t<ScreenShadowsEdit />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/background\">\n\t\t\t\t\t\t<ScreenBackground />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t\t\t<ScreenBlockList />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<ContextScreens />\n\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<ContextScreens\n\t\t\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t\t\tparentMenu={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Navigator>\n\t\t\t</BlockEditorProvider>\n\t\t</GlobalStylesProvider>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( {\n\tpath,\n\tchildren,\n}: GlobalStylesNavigationScreenProps ) {\n\treturn (\n\t\t<Navigator.Screen\n\t\t\tclassName=\"global-styles-ui-sidebar__navigator-screen\"\n\t\t\tpath={ path }\n\t\t>\n\t\t\t{ children }\n\t\t</Navigator.Screen>\n\t);\n}\n\n/*\n * Component that handles path synchronization between external path prop and Navigator's internal path.\n */\nfunction PathSynchronizer( {\n\tpath,\n\tonPathChange,\n}: {\n\tpath?: string;\n\tonPathChange?: ( path: string ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\tconst { path: childPath } = navigator.location;\n\tconst previousParentPath = usePrevious( path );\n\tconst previousChildPath = usePrevious( childPath );\n\n\tuseEffect( () => {\n\t\t// Only sync when parent and child paths are out of sync\n\t\tif ( path && path !== childPath ) {\n\t\t\t// If parent path changed, update the Navigator\n\t\t\tif ( path !== previousParentPath ) {\n\t\t\t\tnavigator.goTo( path );\n\t\t\t}\n\t\t\t// If child path changed, notify parent via onPathChange\n\t\t\telse if ( childPath !== previousChildPath && onPathChange ) {\n\t\t\t\tonPathChange( childPath ?? '/' );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tonPathChange,\n\t\tpath,\n\t\tpreviousChildPath,\n\t\tpreviousParentPath,\n\t\tchildPath,\n\t\tnavigator,\n\t] );\n\n\t// This component only handles synchronization logic. It doesn't render anything.\n\t// We use it to run the effect inside the Navigator context.\n\treturn null;\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,WAAW,oBAAoB;AAExC,SAAS,eAAe,SAAS,mBAAmB;AACpD,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AACpC,SAAS,SAAS,iBAAiB;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AASP,SAAS,4BAA4B;AACrC,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,OAAO,iBAAiB;AACxB,OAAO,sBAAsB;AAC7B,OAAO,6BAA6B;AACpC,OAAO,kBAAkB;AACzB,OAAO,wBAAwB;AAC/B,OAAO,sBAAsB;AAC7B,SAAS,eAAe,yBAAyB;AACjD,OAAO,kBAAkB;AACzB,OAAO,2BAA2B;AAClC,OAAO,eAAe;AACtB,OAAO,qBAAqB;AAC5B,OAAO,eAAe;AACtB,OAAO,cAAc;AAanB,mBAMG,KA8BH,YApCA;AANF,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACD,GAAuC;AACtC,SACC,gCACG,sBAAY,IAAK,CAAE,OAAO,UAC3B;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MAEA,MAAO,aAAa,iBAAiB,MAAM;AAAA,MAE3C,8BAAC,eAAY,MAAO,WAAY,WAAY,MAAM,MAAO;AAAA;AAAA,IAHnD;AAAA,EAIP,CACC,GACH;AAEF;AAYA,SAAS,eAAgB,EAAE,MAAM,aAAa,GAAG,GAAyB;AACzE,QAAM,uBAAuB;AAAA,IAC5B,CAAE,WAAY;AACb,UAAK,CAAE,MAAO;AACb,eAAO,CAAC;AAAA,MACT;AACA,YAAM,EAAE,eAAe,IAAI,OAAQ,WAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,aAAa;AAAA,QAEpB,8BAAC,sBAAmB,MAAc;AAAA;AAAA,IACnC;AAAA,IAEE,CAAC,CAAE,sBAAsB,UAC1B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,aAAc;AAAA,QACd,WAAY,QAAQ;AAAA;AAAA,IACrB;AAAA,KAEF;AAEF;AAqBO,SAAS,eAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,SAAS,cAAc;AAG7B,QAAM,cAAc,QAAS,MAAM;AAClC,WAAO,kBAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,CAAE,iBAAiB,cAAe,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Navigator, useNavigator } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n// @ts-expect-error: Not typed yet.\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tgenerateGlobalStyles,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type {\n\tGlobalStylesConfig,\n\tBlockType,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackground from './screen-background';\nimport { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport FontSizes from './font-sizes/font-sizes';\nimport FontSize from './font-sizes/font-size';\ninterface BlockStylesNavigationScreensProps {\n\tparentMenu: string;\n\tblockStyles: any[];\n\tblockName: string;\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n}: BlockStylesNavigationScreensProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ blockStyles.map( ( style, index ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\ninterface ContextScreensProps {\n\tname?: string;\n\tparentMenu?: string;\n}\n\ninterface GlobalStylesNavigationScreenProps {\n\tpath: string;\n\tchildren: React.ReactNode;\n}\n\nfunction ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! name ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name || '' }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface GlobalStylesUIProps {\n\t/** User global styles object (what gets edited) */\n\tvalue: GlobalStylesConfig;\n\t/** Base global styles object (theme default) */\n\tbaseValue: GlobalStylesConfig;\n\t/** Callback when global styles change */\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\t/** Current navigation path (optional) */\n\tpath?: string;\n\t/** Callback when navigation path changes (optional) */\n\tonPathChange?: ( path: string ) => void;\n\t/** Whether font library is enabled (optional) */\n\tfontLibraryEnabled?: boolean;\n\t/** Server CSS styles for BlockEditorProvider (optional) */\n\tserverCSS?: { isGlobalStyles?: boolean }[];\n\t/** Server settings for BlockEditorProvider (optional) */\n\tserverSettings?: { __unstableResolvedAssets: Record< string, unknown > };\n}\n\nexport function GlobalStylesUI( {\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tpath,\n\tonPathChange,\n\tfontLibraryEnabled = false,\n\tserverCSS,\n\tserverSettings,\n}: GlobalStylesUIProps ) {\n\tconst blocks = getBlockTypes();\n\n\t// Compute merged value for CSS generation\n\tconst mergedValue = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst [ globalStylesCSS, globalSettings ] = generateGlobalStyles(\n\t\tmergedValue,\n\t\t[],\n\t\t{\n\t\t\tstyleOptions: { variationStyles: true },\n\t\t}\n\t);\n\tconst styles = useMemo(\n\t\t() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],\n\t\t[ serverCSS, globalStylesCSS ]\n\t);\n\n\tconst settings = useMemo( () => {\n\t\treturn {\n\t\t\t...serverSettings,\n\t\t\t__experimentalFeatures: globalSettings,\n\t\t\tstyles,\n\t\t};\n\t}, [ globalSettings, serverSettings, styles ] );\n\n\treturn (\n\t\t<GlobalStylesProvider\n\t\t\tvalue={ value }\n\t\t\tbaseValue={ baseValue }\n\t\t\tonChange={ onChange }\n\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t>\n\t\t\t<BlockEditorProvider settings={ settings }>\n\t\t\t\t<Navigator\n\t\t\t\t\tclassName=\"global-styles-ui-sidebar__navigator-provider\"\n\t\t\t\t\tinitialPath={ path || '/' }\n\t\t\t\t>\n\t\t\t\t\t{ ( path || onPathChange ) && (\n\t\t\t\t\t\t<PathSynchronizer\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t\t\t<ScreenRoot />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t\t\t<ScreenColors />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t\t\t<ScreenTypography />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes\">\n\t\t\t\t\t\t<FontSizes />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/font-sizes/:origin/:slug\">\n\t\t\t\t\t\t<FontSize />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t\t\t<ScreenLayout />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/colors/palette\">\n\t\t\t\t\t\t<ScreenColorPalette />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t\t\t<ScreenStyleVariations />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t\t\t<ScreenCSS />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/revisions/:revisionId?\">\n\t\t\t\t\t\t<ScreenRevisions />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows\">\n\t\t\t\t\t\t<ScreenShadows />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/shadows/edit/:category/:slug\">\n\t\t\t\t\t\t<ScreenShadowsEdit />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/background\">\n\t\t\t\t\t\t<ScreenBackground />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t\t\t<ScreenBlockList />\n\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<ContextScreens />\n\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<ContextScreens\n\t\t\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t\t\tparentMenu={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Navigator>\n\t\t\t</BlockEditorProvider>\n\t\t</GlobalStylesProvider>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( {\n\tpath,\n\tchildren,\n}: GlobalStylesNavigationScreenProps ) {\n\treturn (\n\t\t<Navigator.Screen\n\t\t\tclassName=\"global-styles-ui-sidebar__navigator-screen\"\n\t\t\tpath={ path }\n\t\t>\n\t\t\t{ children }\n\t\t</Navigator.Screen>\n\t);\n}\n\n/*\n * Component that handles path synchronization between external path prop and Navigator's internal path.\n */\nfunction PathSynchronizer( {\n\tpath,\n\tonPathChange,\n}: {\n\tpath?: string;\n\tonPathChange?: ( path: string ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\tconst { path: childPath } = navigator.location;\n\tconst previousParentPath = usePrevious( path );\n\tconst previousChildPath = usePrevious( childPath );\n\n\tuseEffect( () => {\n\t\t// Only sync when parent and child paths are out of sync\n\t\tif ( path && path !== childPath ) {\n\t\t\t// If parent path changed, update the Navigator\n\t\t\tif ( path !== previousParentPath ) {\n\t\t\t\tnavigator.goTo( path );\n\t\t\t}\n\t\t\t// If child path changed, notify parent via onPathChange\n\t\t\telse if ( childPath !== previousChildPath && onPathChange ) {\n\t\t\t\tonPathChange( childPath ?? '/' );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tonPathChange,\n\t\tpath,\n\t\tpreviousChildPath,\n\t\tpreviousParentPath,\n\t\tchildPath,\n\t\tnavigator,\n\t] );\n\n\t// This component only handles synchronization logic. It doesn't render anything.\n\t// We use it to run the effect inside the Navigator context.\n\treturn null;\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,WAAW,oBAAoB;AAExC,SAAS,eAAe,SAAS,mBAAmB;AACpD,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AACpC,SAAS,SAAS,iBAAiB;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AASP,SAAS,4BAA4B;AACrC,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,OAAO,iBAAiB;AACxB,OAAO,sBAAsB;AAC7B,OAAO,6BAA6B;AACpC,OAAO,kBAAkB;AACzB,OAAO,wBAAwB;AAC/B,OAAO,sBAAsB;AAC7B,SAAS,eAAe,yBAAyB;AACjD,OAAO,kBAAkB;AACzB,OAAO,2BAA2B;AAClC,OAAO,eAAe;AACtB,OAAO,qBAAqB;AAC5B,OAAO,eAAe;AACtB,OAAO,cAAc;AAanB,mBAMG,KA8BH,YApCA;AANF,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACD,GAAuC;AACtC,SACC,gCACG,sBAAY,IAAK,CAAE,OAAO,UAC3B;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MAEA,MAAO,aAAa,iBAAiB,MAAM;AAAA,MAE3C,8BAAC,eAAY,MAAO,WAAY,WAAY,MAAM,MAAO;AAAA;AAAA,IAHnD;AAAA,EAIP,CACC,GACH;AAEF;AAYA,SAAS,eAAgB,EAAE,MAAM,aAAa,GAAG,GAAyB;AACzE,QAAM,uBAAuB;AAAA,IAC5B,CAAE,WAAY;AACb,UAAK,CAAE,MAAO;AACb,eAAO,CAAC;AAAA,MACT;AACA,YAAM,EAAE,eAAe,IAAI,OAAQ,WAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,aAAa;AAAA,QAEpB,8BAAC,sBAAmB,MAAc;AAAA;AAAA,IACnC;AAAA,IAEE,CAAC,CAAE,sBAAsB,UAC1B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,aAAc;AAAA,QACd,WAAY,QAAQ;AAAA;AAAA,IACrB;AAAA,KAEF;AAEF;AAqBO,SAAS,eAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,SAAS,cAAc;AAG7B,QAAM,cAAc,QAAS,MAAM;AAClC,WAAO,kBAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,CAAE,iBAAiB,cAAe,IAAI;AAAA,IAC3C;AAAA,IACA,CAAC;AAAA,IACD;AAAA,MACC,cAAc,EAAE,iBAAiB,KAAK;AAAA,IACvC;AAAA,EACD;AACA,QAAM,SAAS;AAAA,IACd,MAAM,CAAE,GAAK,aAAa,CAAC,GAAK,GAAK,mBAAmB,CAAC,CAAI;AAAA,IAC7D,CAAE,WAAW,eAAgB;AAAA,EAC9B;AAEA,QAAM,WAAW,QAAS,MAAM;AAC/B,WAAO;AAAA,MACN,GAAG;AAAA,MACH,wBAAwB;AAAA,MACxB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,gBAAgB,gBAAgB,MAAO,CAAE;AAE9C,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,uBAAoB,UACpB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,aAAc,QAAQ;AAAA,UAElB;AAAA,qBAAQ,iBACX;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACD;AAAA,YAED,oBAAC,gCAA6B,MAAK,KAClC,8BAAC,cAAW,GACb;AAAA,YACA,oBAAC,gCAA6B,MAAK,WAClC,8BAAC,gBAAa,GACf;AAAA,YACA,oBAAC,gCAA6B,MAAK,eAClC,8BAAC,oBAAiB,GACnB;AAAA,YACA,oBAAC,gCAA6B,MAAK,0BAClC,8BAAC,aAAU,GACZ;AAAA,YACA,oBAAC,gCAA6B,MAAK,wCAClC,8BAAC,YAAS,GACX;AAAA,YACA,oBAAC,gCAA6B,MAAK,WAClC,8BAAC,gBAAa,GACf;AAAA,YACA,oBAAC,gCAA6B,MAAK,mBAClC,8BAAC,sBAAmB,GACrB;AAAA,YACA,oBAAC,gCAA6B,MAAK,eAClC,8BAAC,yBAAsB,GACxB;AAAA,YACA,oBAAC,gCAA6B,MAAK,QAClC,8BAAC,aAAU,GACZ;AAAA,YACA,oBAAC,gCAA6B,MAAK,2BAClC,8BAAC,mBAAgB,GAClB;AAAA,YACA,oBAAC,gCAA6B,MAAK,YAClC,8BAAC,iBAAc,GAChB;AAAA,YACA,oBAAC,gCAA6B,MAAK,iCAClC,8BAAC,qBAAkB,GACpB;AAAA,YACA,oBAAC,gCAA6B,MAAK,eAClC,8BAAC,oBAAiB,GACnB;AAAA,YACA,oBAAC,gCAA6B,MAAK,oBAClC,8BAAC,2BAAwB,SAAQ,QAAO,GACzC;AAAA,YACA,oBAAC,gCAA6B,MAAK,oBAClC,8BAAC,2BAAwB,SAAQ,QAAO,GACzC;AAAA,YACA,oBAAC,gCAA6B,MAAK,uBAClC,8BAAC,2BAAwB,SAAQ,WAAU,GAC5C;AAAA,YACA,oBAAC,gCAA6B,MAAK,uBAClC,8BAAC,2BAAwB,SAAQ,WAAU,GAC5C;AAAA,YACA,oBAAC,gCAA6B,MAAK,sBAClC,8BAAC,2BAAwB,SAAQ,UAAS,GAC3C;AAAA,YACA,oBAAC,gCAA6B,MAAK,WAClC,8BAAC,mBAAgB,GAClB;AAAA,YACE,OAAO,IAAK,CAAE,UACf;AAAA,cAAC;AAAA;AAAA,gBAEA,MACC,aAAa,mBAAoB,MAAM,IAAK;AAAA,gBAG7C,8BAAC,eAAY,MAAO,MAAM,MAAO;AAAA;AAAA,cAL3B,gBAAgB,MAAM;AAAA,YAM7B,CACC;AAAA,YAEF,oBAAC,kBAAe;AAAA,YAEd,OAAO,IAAK,CAAE,UACf;AAAA,cAAC;AAAA;AAAA,gBAEA,MAAO,MAAM;AAAA,gBACb,YACC,aAAa,mBAAoB,MAAM,IAAK;AAAA;AAAA,cAHvC,mBAAmB,MAAM;AAAA,YAKhC,CACC;AAAA;AAAA;AAAA,MACH,GACD;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AACD,GAAuC;AACtC,SACC;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;AAKA,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AACD,GAGI;AACH,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,MAAM,UAAU,IAAI,UAAU;AACtC,QAAM,qBAAqB,YAAa,IAAK;AAC7C,QAAM,oBAAoB,YAAa,SAAU;AAEjD,YAAW,MAAM;AAEhB,QAAK,QAAQ,SAAS,WAAY;AAEjC,UAAK,SAAS,oBAAqB;AAClC,kBAAU,KAAM,IAAK;AAAA,MACtB,WAEU,cAAc,qBAAqB,cAAe;AAC3D,qBAAc,aAAa,GAAI;AAAA,MAChC;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAIF,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { store as blocksStore } from "@wordpress/blocks";
|
|
|
3
3
|
import { useSelect } from "@wordpress/data";
|
|
4
4
|
import { __experimentalItemGroup as ItemGroup } from "@wordpress/components";
|
|
5
5
|
import { NavigationButtonAsItem } from "../navigation-button";
|
|
6
|
-
import {
|
|
6
|
+
import { useStyle } from "../hooks";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
function getFilteredBlockStyles(blockStyles, variations) {
|
|
9
9
|
return blockStyles?.filter(
|
|
@@ -18,7 +18,7 @@ function useBlockVariations(name) {
|
|
|
18
18
|
},
|
|
19
19
|
[name]
|
|
20
20
|
);
|
|
21
|
-
const [variations] =
|
|
21
|
+
const [variations] = useStyle("variations", name);
|
|
22
22
|
const variationNames = Object.keys(variations ?? {});
|
|
23
23
|
return getFilteredBlockStyles(blockStyles, variationNames);
|
|
24
24
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variations/variations-panel.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport {
|
|
5
|
-
"mappings": ";AAIA,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B,iBAAiB;AAKrD,SAAS,8BAA8B;AACvC,SAAS,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { useStyle } from '../hooks';\n\ninterface BlockStyle {\n\tname: string;\n\tlabel: string;\n\tsource?: string;\n\tisDefault?: boolean;\n}\n\ninterface VariationsPanelProps {\n\tname: string;\n}\n\n// Only core block styles (source === block) or block styles with a matching\n// theme.json style variation will be configurable via Global Styles.\nfunction getFilteredBlockStyles(\n\tblockStyles: BlockStyle[],\n\tvariations: string[]\n): BlockStyle[] {\n\treturn (\n\t\tblockStyles?.filter(\n\t\t\t( style ) =>\n\t\t\t\tstyle.source === 'block' || variations.includes( style.name )\n\t\t) || []\n\t);\n}\n\nexport function useBlockVariations( name: string ): BlockStyle[] {\n\tconst blockStyles = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\tconst [ variations ] = useStyle( 'variations', name );\n\tconst variationNames = Object.keys( variations ?? {} );\n\n\treturn getFilteredBlockStyles( blockStyles, variationNames );\n}\n\nexport function VariationsPanel( { name }: VariationsPanelProps ) {\n\tconst coreBlockStyles = useBlockVariations( name );\n\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ coreBlockStyles.map( ( style, index ) => {\n\t\t\t\tif ( style?.isDefault ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t'/blocks/' +\n\t\t\t\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t\t\t\t'/variations/' +\n\t\t\t\t\t\t\tencodeURIComponent( style.name )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ style.label }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAIA,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B,iBAAiB;AAKrD,SAAS,8BAA8B;AACvC,SAAS,gBAAgB;AAmDpB;AApCL,SAAS,uBACR,aACA,YACe;AACf,SACC,aAAa;AAAA,IACZ,CAAE,UACD,MAAM,WAAW,WAAW,WAAW,SAAU,MAAM,IAAK;AAAA,EAC9D,KAAK,CAAC;AAER;AAEO,SAAS,mBAAoB,MAA6B;AAChE,QAAM,cAAc;AAAA,IACnB,CAAE,WAAY;AACb,YAAM,EAAE,eAAe,IAAI,OAAQ,WAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACA,QAAM,CAAE,UAAW,IAAI,SAAU,cAAc,IAAK;AACpD,QAAM,iBAAiB,OAAO,KAAM,cAAc,CAAC,CAAE;AAErD,SAAO,uBAAwB,aAAa,cAAe;AAC5D;AAEO,SAAS,gBAAiB,EAAE,KAAK,GAA0B;AACjE,QAAM,kBAAkB,mBAAoB,IAAK;AAEjD,SACC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAC9B,0BAAgB,IAAK,CAAE,OAAO,UAAW;AAC1C,QAAK,OAAO,WAAY;AACvB,aAAO;AAAA,IACR;AACA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MACC,aACA,mBAAoB,IAAK,IACzB,iBACA,mBAAoB,MAAM,IAAK;AAAA,QAG9B,gBAAM;AAAA;AAAA,MARF;AAAA,IASP;AAAA,EAEF,CAAE,GACH;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-style/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dimensions-panel.d.ts","sourceRoot":"","sources":["../src/dimensions-panel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dimensions-panel.d.ts","sourceRoot":"","sources":["../src/dimensions-panel.tsx"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,eAAe,gCA0DtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global-styles-ui.d.ts","sourceRoot":"","sources":["../src/global-styles-ui.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACX,kBAAkB,EAElB,MAAM,iCAAiC,CAAC;AAuFzC,UAAU,mBAAmB;IAC5B,mDAAmD;IACnD,KAAK,EAAE,kBAAkB,CAAC;IAC1B,gDAAgD;IAChD,SAAS,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAE,QAAQ,EAAE,kBAAkB,KAAM,IAAI,CAAC;IACnD,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2DAA2D;IAC3D,SAAS,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC3C,yDAAyD;IACzD,cAAc,CAAC,EAAE;QAAE,wBAAwB,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAA;KAAE,CAAC;CACzE;AAED,wBAAgB,cAAc,CAAE,EAC/B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,kBAA0B,EAC1B,SAAS,EACT,cAAc,GACd,EAAE,mBAAmB,+
|
|
1
|
+
{"version":3,"file":"global-styles-ui.d.ts","sourceRoot":"","sources":["../src/global-styles-ui.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACX,kBAAkB,EAElB,MAAM,iCAAiC,CAAC;AAuFzC,UAAU,mBAAmB;IAC5B,mDAAmD;IACnD,KAAK,EAAE,kBAAkB,CAAC;IAC1B,gDAAgD;IAChD,SAAS,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAE,QAAQ,EAAE,kBAAkB,KAAM,IAAI,CAAC;IACnD,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2DAA2D;IAC3D,SAAS,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC3C,yDAAyD;IACzD,cAAc,CAAC,EAAE;QAAE,wBAAwB,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAA;KAAE,CAAC;CACzE;AAED,wBAAgB,cAAc,CAAE,EAC/B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,kBAA0B,EAC1B,SAAS,EACT,cAAc,GACd,EAAE,mBAAmB,+BAiIrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.jsx"],"names":[],"mappings":";;;;AAqYO,8DAoBN"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variations-panel.spec.d.ts","sourceRoot":"","sources":["../../../src/variations/test/variations-panel.spec.js"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/global-styles-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Global Styles UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
},
|
|
37
37
|
"react-native": "src/index",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@wordpress/a11y": "^4.
|
|
40
|
-
"@wordpress/api-fetch": "^7.
|
|
41
|
-
"@wordpress/block-editor": "^15.
|
|
42
|
-
"@wordpress/blocks": "^15.
|
|
43
|
-
"@wordpress/components": "^30.
|
|
44
|
-
"@wordpress/compose": "^7.
|
|
45
|
-
"@wordpress/core-data": "^7.
|
|
46
|
-
"@wordpress/data": "^10.
|
|
47
|
-
"@wordpress/date": "^5.
|
|
48
|
-
"@wordpress/element": "^6.
|
|
49
|
-
"@wordpress/global-styles-engine": "^1.
|
|
50
|
-
"@wordpress/i18n": "^6.
|
|
51
|
-
"@wordpress/icons": "^11.
|
|
52
|
-
"@wordpress/keycodes": "^4.
|
|
53
|
-
"@wordpress/private-apis": "^1.
|
|
39
|
+
"@wordpress/a11y": "^4.36.0",
|
|
40
|
+
"@wordpress/api-fetch": "^7.36.0",
|
|
41
|
+
"@wordpress/block-editor": "^15.9.0",
|
|
42
|
+
"@wordpress/blocks": "^15.9.0",
|
|
43
|
+
"@wordpress/components": "^30.9.0",
|
|
44
|
+
"@wordpress/compose": "^7.36.0",
|
|
45
|
+
"@wordpress/core-data": "^7.36.0",
|
|
46
|
+
"@wordpress/data": "^10.36.0",
|
|
47
|
+
"@wordpress/date": "^5.36.0",
|
|
48
|
+
"@wordpress/element": "^6.36.0",
|
|
49
|
+
"@wordpress/global-styles-engine": "^1.3.0",
|
|
50
|
+
"@wordpress/i18n": "^6.9.0",
|
|
51
|
+
"@wordpress/icons": "^11.3.0",
|
|
52
|
+
"@wordpress/keycodes": "^4.36.0",
|
|
53
|
+
"@wordpress/private-apis": "^1.36.0",
|
|
54
54
|
"change-case": "^4.1.2",
|
|
55
55
|
"classnames": "^2.3.2",
|
|
56
56
|
"clsx": "^2.1.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
|
|
67
67
|
}
|
package/src/dimensions-panel.tsx
CHANGED
package/src/global-styles-ui.tsx
CHANGED
|
@@ -139,8 +139,13 @@ export function GlobalStylesUI( {
|
|
|
139
139
|
return mergeGlobalStyles( baseValue, value );
|
|
140
140
|
}, [ baseValue, value ] );
|
|
141
141
|
|
|
142
|
-
const [ globalStylesCSS, globalSettings ] =
|
|
143
|
-
|
|
142
|
+
const [ globalStylesCSS, globalSettings ] = generateGlobalStyles(
|
|
143
|
+
mergedValue,
|
|
144
|
+
[],
|
|
145
|
+
{
|
|
146
|
+
styleOptions: { variationStyles: true },
|
|
147
|
+
}
|
|
148
|
+
);
|
|
144
149
|
const styles = useMemo(
|
|
145
150
|
() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],
|
|
146
151
|
[ serverCSS, globalStylesCSS ]
|