@wordpress/global-styles-ui 1.11.0 → 1.11.1-next.v.202604201441.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.cjs +1 -0
- package/build/dimensions-panel.cjs.map +2 -2
- package/build/palette.cjs.map +2 -2
- package/build/preview-wrapper.cjs +15 -3
- package/build/preview-wrapper.cjs.map +3 -3
- package/build-module/dimensions-panel.mjs +1 -0
- package/build-module/dimensions-panel.mjs.map +2 -2
- package/build-module/palette.mjs.map +2 -2
- package/build-module/preview-wrapper.mjs +5 -3
- package/build-module/preview-wrapper.mjs.map +2 -2
- package/build-style/style-rtl.css +5 -10
- package/build-style/style.css +5 -10
- package/build-types/dimensions-panel.d.ts.map +1 -1
- package/build-types/palette.d.ts.map +1 -1
- package/build-types/preview-wrapper.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/dimensions-panel.tsx +1 -0
- package/src/palette.tsx +0 -2
- package/src/preview-wrapper.tsx +8 -2
- package/src/screen-revisions/style.scss +1 -1
- package/src/style.scss +4 -8
- package/src/variations/style.scss +1 -1
|
@@ -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\theight: 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;
|
|
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\theight: true,\n\tminHeight: true,\n\tminWidth: 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;AAmErB;AAjEF,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,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,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
|
}
|
package/build/palette.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/palette.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS: Color[] = [];\n\ninterface PaletteProps {\n\tname?: string;\n}\n\nfunction Palette( { name }: PaletteProps ) {\n\tconst [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst safeCustomColors = customColors || EMPTY_COLORS;\n\tconst safeThemeColors = themeColors || EMPTY_COLORS;\n\tconst safeDefaultColors = defaultColors || EMPTY_COLORS;\n\tconst safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...safeCustomColors,\n\t\t\t...safeThemeColors,\n\t\t\t...( safeDefaultColors && safeDefaultPaletteEnabled\n\t\t\t\t? safeDefaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[\n\t\t\tsafeCustomColors,\n\t\t\tsafeThemeColors,\n\t\t\tsafeDefaultColors,\n\t\t\tsafeDefaultPaletteEnabled,\n\t\t]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length > 0 ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t{ __( 'Edit palette' ) }\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAOO;AACP,kBAA0B;AAC1B,mBAAgD;AAChD,qBAAwB;AAMxB,sBAAyB;AACzB,+BAAuC;AACvC,qCAAkC;AAClC,mBAA2B;AA4CxB;AA1CH,IAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,QAAI,yBAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,QAAI,yBAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,QAAI,yBAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,QAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,aAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAK,qBAAqB,4BACvB,oBACA;AAAA,IACJ;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,OAClB,oBACA,aAAa,mBAAoB,IAAK,IAAI;AAE7C,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,4BAAS,OAAQ,GAAM,8BAAI,SAAU,GAAG;AAAA,IACzC,4CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAChC,sDAAC,mDAAuB,MAAO,YAC9B,uDAAC,kBAAAC,sBAAA,EAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,4EACC;AAAA,oDAAC,kBAAAC,sBAAA,EAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC,+BAAAC;AAAA,UAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,4CAAC,8BAAS,SAAO,MACd,8BAAI,cAAe,GACtB;AAAA,SACD,IAEA,4CAAC,8BAAW,8BAAI,YAAa,GAAG;AAAA,MAEjC,4CAAC,qBAAK,UAAO,mBAAM,IAAI,2BAAc,2BAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
|
|
6
6
|
"names": ["VStack", "ItemGroup", "HStack", "ZStack", "ColorIndicatorWrapper"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// packages/global-styles-ui/src/preview-wrapper.tsx
|
|
@@ -23,6 +33,7 @@ __export(preview_wrapper_exports, {
|
|
|
23
33
|
default: () => preview_wrapper_default
|
|
24
34
|
});
|
|
25
35
|
module.exports = __toCommonJS(preview_wrapper_exports);
|
|
36
|
+
var import_clsx = __toESM(require("clsx"));
|
|
26
37
|
var import_components = require("@wordpress/components");
|
|
27
38
|
var import_compose = require("@wordpress/compose");
|
|
28
39
|
var import_element = require("@wordpress/element");
|
|
@@ -73,7 +84,9 @@ function PreviewWrapper({
|
|
|
73
84
|
isReady && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
85
|
"div",
|
|
75
86
|
{
|
|
76
|
-
className: "global-styles-ui-preview__wrapper",
|
|
87
|
+
className: (0, import_clsx.default)("global-styles-ui-preview__wrapper", {
|
|
88
|
+
"is-hoverable": withHoverView
|
|
89
|
+
}),
|
|
77
90
|
style: {
|
|
78
91
|
height: normalizedHeight * ratio
|
|
79
92
|
},
|
|
@@ -86,8 +99,7 @@ function PreviewWrapper({
|
|
|
86
99
|
style: {
|
|
87
100
|
height: normalizedHeight * ratio,
|
|
88
101
|
width: "100%",
|
|
89
|
-
background: gradientValue ?? backgroundColor
|
|
90
|
-
cursor: withHoverView ? "pointer" : void 0
|
|
102
|
+
background: gradientValue ?? backgroundColor
|
|
91
103
|
},
|
|
92
104
|
initial: "start",
|
|
93
105
|
animate: (isHovered || isFocused) && !disableMotion && label ? "hover" : "start",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-wrapper.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["motion"]
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'global-styles-ui-preview__wrapper', {\n\t\t\t\t\t\t'is-hoverable': withHoverView,\n\t\t\t\t\t} ) }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA2C;AAC3C,qBAIO;AACP,qBAA0C;AAK1C,mBAAyB;AAgFvB;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,QACjC,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,QAAI,uBAAoB,gBAAiB;AAC/D,QAAM,oBAAgB,iCAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,QAAI,kCAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,QAAI,yBAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,QAAI,yBAA+B;AAErE,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,sCAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,sCAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,4EACC;AAAA,gDAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,eAAY,YAAAA,SAAM,qCAAqC;AAAA,UACtD,gBAAgB;AAAA,QACjB,CAAE;AAAA,QACF,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,kBAAAC,iBAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,YAC9B;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
|
|
6
|
+
"names": ["clsx", "motion"]
|
|
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\theight: 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;
|
|
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\theight: true,\n\tminHeight: true,\n\tminWidth: 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;AAmErB;AAjEF,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,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/palette.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC,2BAA2B;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS: Color[] = [];\n\ninterface PaletteProps {\n\tname?: string;\n}\n\nfunction Palette( { name }: PaletteProps ) {\n\tconst [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst safeCustomColors = customColors || EMPTY_COLORS;\n\tconst safeThemeColors = themeColors || EMPTY_COLORS;\n\tconst safeDefaultColors = defaultColors || EMPTY_COLORS;\n\tconst safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...safeCustomColors,\n\t\t\t...safeThemeColors,\n\t\t\t...( safeDefaultColors && safeDefaultPaletteEnabled\n\t\t\t\t? safeDefaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[\n\t\t\tsafeCustomColors,\n\t\t\tsafeThemeColors,\n\t\t\tsafeDefaultColors,\n\t\t\tsafeDefaultPaletteEnabled,\n\t\t]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length > 0 ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t{ __( 'Edit palette' ) }\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,2BAA2B;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,MAAM,aAAa,oBAAoB;AAChD,SAAS,eAAe;AAMxB,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,OAAO,2BAA2B;AAClC,SAAS,kBAAkB;AA4CxB,SAKI,UALJ,KAKI,YALJ;AA1CH,IAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,IAAI,WAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,IAAI,WAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,IAAI,WAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,SAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAK,qBAAqB,4BACvB,oBACA;AAAA,IACJ;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,OAClB,oBACA,aAAa,mBAAoB,IAAK,IAAI;AAE7C,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,SAAU,GAAG;AAAA,IACzC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAChC,8BAAC,0BAAuB,MAAO,YAC9B,+BAAC,UAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,iCACC;AAAA,4BAAC,UAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC;AAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,oBAAC,YAAS,SAAO,MACd,aAAI,cAAe,GACtB;AAAA,SACD,IAEA,oBAAC,YAAW,aAAI,YAAa,GAAG;AAAA,MAEjC,oBAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// packages/global-styles-ui/src/preview-wrapper.tsx
|
|
2
|
+
import clsx from "clsx";
|
|
2
3
|
import { __unstableMotion as motion } from "@wordpress/components";
|
|
3
4
|
import {
|
|
4
5
|
useThrottle,
|
|
@@ -53,7 +54,9 @@ function PreviewWrapper({
|
|
|
53
54
|
isReady && /* @__PURE__ */ jsx(
|
|
54
55
|
"div",
|
|
55
56
|
{
|
|
56
|
-
className: "global-styles-ui-preview__wrapper",
|
|
57
|
+
className: clsx("global-styles-ui-preview__wrapper", {
|
|
58
|
+
"is-hoverable": withHoverView
|
|
59
|
+
}),
|
|
57
60
|
style: {
|
|
58
61
|
height: normalizedHeight * ratio
|
|
59
62
|
},
|
|
@@ -66,8 +69,7 @@ function PreviewWrapper({
|
|
|
66
69
|
style: {
|
|
67
70
|
height: normalizedHeight * ratio,
|
|
68
71
|
width: "100%",
|
|
69
|
-
background: gradientValue ?? backgroundColor
|
|
70
|
-
cursor: withHoverView ? "pointer" : void 0
|
|
72
|
+
background: gradientValue ?? backgroundColor
|
|
71
73
|
},
|
|
72
74
|
initial: "start",
|
|
73
75
|
animate: (isHovered || isFocused) && !disableMotion && label ? "hover" : "start",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-wrapper.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName
|
|
5
|
-
"mappings": ";AAGA,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,gBAAgB;AAgFvB,mBACC,KADD;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,gBAAiB;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAA+B;AAErE,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'global-styles-ui-preview__wrapper', {\n\t\t\t\t\t\t'is-hoverable': withHoverView,\n\t\t\t\t\t} ) }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,gBAAgB;AAgFvB,mBACC,KADD;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,gBAAiB;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAA+B;AAErE,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM,qCAAqC;AAAA,UACtD,gBAAgB;AAAA,QACjB,CAAE;AAAA,QACF,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,YAC9B;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -287,7 +287,7 @@ button.font-library__upload-area {
|
|
|
287
287
|
|
|
288
288
|
.global-styles-ui-screen-revisions__revision-item {
|
|
289
289
|
position: relative;
|
|
290
|
-
cursor: pointer;
|
|
290
|
+
cursor: var(--wpds-cursor-control, pointer);
|
|
291
291
|
display: flex;
|
|
292
292
|
flex-direction: column;
|
|
293
293
|
}
|
|
@@ -445,7 +445,7 @@ button.font-library__upload-area {
|
|
|
445
445
|
|
|
446
446
|
.global-styles-ui-variations_item {
|
|
447
447
|
box-sizing: border-box;
|
|
448
|
-
cursor: pointer;
|
|
448
|
+
cursor: var(--wpds-cursor-control, pointer);
|
|
449
449
|
}
|
|
450
450
|
.global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
|
|
451
451
|
border-radius: 2px;
|
|
@@ -477,19 +477,14 @@ button.font-library__upload-area {
|
|
|
477
477
|
outline-color: var(--wp-admin-theme-color);
|
|
478
478
|
}
|
|
479
479
|
|
|
480
|
-
.global-styles-ui-preview {
|
|
481
|
-
display: flex;
|
|
482
|
-
align-items: center;
|
|
483
|
-
justify-content: center;
|
|
484
|
-
line-height: 1;
|
|
485
|
-
cursor: pointer;
|
|
486
|
-
}
|
|
487
|
-
|
|
488
480
|
.global-styles-ui-preview__wrapper {
|
|
489
481
|
max-width: 100%;
|
|
490
482
|
display: block;
|
|
491
483
|
width: 100%;
|
|
492
484
|
}
|
|
485
|
+
.global-styles-ui-preview__wrapper.is-hoverable {
|
|
486
|
+
cursor: var(--wpds-cursor-control, pointer);
|
|
487
|
+
}
|
|
493
488
|
|
|
494
489
|
.global-styles-ui-typography-preview {
|
|
495
490
|
display: flex;
|
package/build-style/style.css
CHANGED
|
@@ -287,7 +287,7 @@ button.font-library__upload-area {
|
|
|
287
287
|
|
|
288
288
|
.global-styles-ui-screen-revisions__revision-item {
|
|
289
289
|
position: relative;
|
|
290
|
-
cursor: pointer;
|
|
290
|
+
cursor: var(--wpds-cursor-control, pointer);
|
|
291
291
|
display: flex;
|
|
292
292
|
flex-direction: column;
|
|
293
293
|
}
|
|
@@ -445,7 +445,7 @@ button.font-library__upload-area {
|
|
|
445
445
|
|
|
446
446
|
.global-styles-ui-variations_item {
|
|
447
447
|
box-sizing: border-box;
|
|
448
|
-
cursor: pointer;
|
|
448
|
+
cursor: var(--wpds-cursor-control, pointer);
|
|
449
449
|
}
|
|
450
450
|
.global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
|
|
451
451
|
border-radius: 2px;
|
|
@@ -477,19 +477,14 @@ button.font-library__upload-area {
|
|
|
477
477
|
outline-color: var(--wp-admin-theme-color);
|
|
478
478
|
}
|
|
479
479
|
|
|
480
|
-
.global-styles-ui-preview {
|
|
481
|
-
display: flex;
|
|
482
|
-
align-items: center;
|
|
483
|
-
justify-content: center;
|
|
484
|
-
line-height: 1;
|
|
485
|
-
cursor: pointer;
|
|
486
|
-
}
|
|
487
|
-
|
|
488
480
|
.global-styles-ui-preview__wrapper {
|
|
489
481
|
max-width: 100%;
|
|
490
482
|
display: block;
|
|
491
483
|
width: 100%;
|
|
492
484
|
}
|
|
485
|
+
.global-styles-ui-preview__wrapper.is-hoverable {
|
|
486
|
+
cursor: var(--wpds-cursor-control, pointer);
|
|
487
|
+
}
|
|
493
488
|
|
|
494
489
|
.global-styles-ui-typography-preview {
|
|
495
490
|
display: flex;
|
|
@@ -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":"AA6BA,MAAM,CAAC,OAAO,UAAU,eAAe,gCA0DtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.tsx"],"names":[],"mappings":"AA0BA,UAAU,YAAY;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,iBAAS,OAAO,CAAE,EAAE,IAAI,EAAE,EAAE,YAAY,+BAoEvC;AAED,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview-wrapper.d.ts","sourceRoot":"","sources":["../src/preview-wrapper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"preview-wrapper.d.ts","sourceRoot":"","sources":["../src/preview-wrapper.tsx"],"names":[],"mappings":"AA+BA,UAAU,mBAAmB;IAC5B,QAAQ,EACL,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,GAC/D,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,EAAE,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,cAAc,CAAE,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,GACb,EAAE,mBAAmB,+BA+FrB;AAED,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/global-styles-ui",
|
|
3
|
-
"version": "1.11.0",
|
|
3
|
+
"version": "1.11.1-next.v.202604201441.0+dab6d8c07",
|
|
4
4
|
"description": "Global Styles UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -44,22 +44,22 @@
|
|
|
44
44
|
},
|
|
45
45
|
"react-native": "src/index",
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@wordpress/a11y": "^4.44.0",
|
|
48
|
-
"@wordpress/api-fetch": "^7.44.0",
|
|
49
|
-
"@wordpress/base-styles": "^6.20.0",
|
|
50
|
-
"@wordpress/block-editor": "^15.
|
|
51
|
-
"@wordpress/blocks": "^15.17.0",
|
|
52
|
-
"@wordpress/components": "^
|
|
53
|
-
"@wordpress/compose": "^7.44.0",
|
|
54
|
-
"@wordpress/core-data": "^7.44.0",
|
|
55
|
-
"@wordpress/data": "^10.
|
|
56
|
-
"@wordpress/date": "^5.44.0",
|
|
57
|
-
"@wordpress/element": "^6.44.0",
|
|
58
|
-
"@wordpress/global-styles-engine": "^1.11.0",
|
|
59
|
-
"@wordpress/i18n": "^6.17.0",
|
|
60
|
-
"@wordpress/icons": "^12.2.0",
|
|
61
|
-
"@wordpress/keycodes": "^4.44.0",
|
|
62
|
-
"@wordpress/private-apis": "^1.44.0",
|
|
47
|
+
"@wordpress/a11y": "^4.44.1-next.v.202604201441.0+dab6d8c07",
|
|
48
|
+
"@wordpress/api-fetch": "^7.44.1-next.v.202604201441.0+dab6d8c07",
|
|
49
|
+
"@wordpress/base-styles": "^6.20.1-next.v.202604201441.0+dab6d8c07",
|
|
50
|
+
"@wordpress/block-editor": "^15.18.1-next.v.202604201441.0+dab6d8c07",
|
|
51
|
+
"@wordpress/blocks": "^15.17.2-next.v.202604201441.0+dab6d8c07",
|
|
52
|
+
"@wordpress/components": "^33.0.1-next.v.202604201441.0+dab6d8c07",
|
|
53
|
+
"@wordpress/compose": "^7.44.1-next.v.202604201441.0+dab6d8c07",
|
|
54
|
+
"@wordpress/core-data": "^7.44.1-next.v.202604201441.0+dab6d8c07",
|
|
55
|
+
"@wordpress/data": "^10.45.1-next.v.202604201441.0+dab6d8c07",
|
|
56
|
+
"@wordpress/date": "^5.44.1-next.v.202604201441.0+dab6d8c07",
|
|
57
|
+
"@wordpress/element": "^6.44.1-next.v.202604201441.0+dab6d8c07",
|
|
58
|
+
"@wordpress/global-styles-engine": "^1.11.1-next.v.202604201441.0+dab6d8c07",
|
|
59
|
+
"@wordpress/i18n": "^6.17.1-next.v.202604201441.0+dab6d8c07",
|
|
60
|
+
"@wordpress/icons": "^12.2.1-next.v.202604201441.0+dab6d8c07",
|
|
61
|
+
"@wordpress/keycodes": "^4.44.1-next.v.202604201441.0+dab6d8c07",
|
|
62
|
+
"@wordpress/private-apis": "^1.44.1-next.v.202604201441.0+dab6d8c07",
|
|
63
63
|
"change-case": "^4.1.2",
|
|
64
64
|
"clsx": "^2.1.0",
|
|
65
65
|
"colord": "^2.7.0"
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "c788005ba4ee2a34851c1217c51602656aa7c3a6"
|
|
75
75
|
}
|
package/src/dimensions-panel.tsx
CHANGED
package/src/palette.tsx
CHANGED
|
@@ -5,8 +5,6 @@ import {
|
|
|
5
5
|
__experimentalItemGroup as ItemGroup,
|
|
6
6
|
FlexItem,
|
|
7
7
|
__experimentalHStack as HStack,
|
|
8
|
-
// TODO: Replace this ZStack with ad hoc CSS.
|
|
9
|
-
// eslint-disable-next-line @wordpress/use-recommended-components
|
|
10
8
|
__experimentalZStack as ZStack,
|
|
11
9
|
__experimentalVStack as VStack,
|
|
12
10
|
ColorIndicator,
|
package/src/preview-wrapper.tsx
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
|
|
1
6
|
/**
|
|
2
7
|
* WordPress dependencies
|
|
3
8
|
*/
|
|
@@ -98,7 +103,9 @@ function PreviewWrapper( {
|
|
|
98
103
|
</div>
|
|
99
104
|
{ isReady && (
|
|
100
105
|
<div
|
|
101
|
-
className=
|
|
106
|
+
className={ clsx( 'global-styles-ui-preview__wrapper', {
|
|
107
|
+
'is-hoverable': withHoverView,
|
|
108
|
+
} ) }
|
|
102
109
|
style={ {
|
|
103
110
|
height: normalizedHeight * ratio,
|
|
104
111
|
} }
|
|
@@ -111,7 +118,6 @@ function PreviewWrapper( {
|
|
|
111
118
|
height: normalizedHeight * ratio,
|
|
112
119
|
width: '100%',
|
|
113
120
|
background: gradientValue ?? backgroundColor,
|
|
114
|
-
cursor: withHoverView ? 'pointer' : undefined,
|
|
115
121
|
} }
|
|
116
122
|
initial="start"
|
|
117
123
|
animate={
|
package/src/style.scss
CHANGED
|
@@ -7,18 +7,14 @@
|
|
|
7
7
|
@use "./size-control/style.scss" as *;
|
|
8
8
|
@use "./variations/style.scss" as *;
|
|
9
9
|
|
|
10
|
-
.global-styles-ui-preview {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
line-height: 1;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
10
|
.global-styles-ui-preview__wrapper {
|
|
19
11
|
max-width: 100%;
|
|
20
12
|
display: block;
|
|
21
13
|
width: 100%;
|
|
14
|
+
|
|
15
|
+
&.is-hoverable {
|
|
16
|
+
cursor: var(--wpds-cursor-control);
|
|
17
|
+
}
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
.global-styles-ui-typography-preview {
|