@elementor/editor-global-classes 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @elementor/editor-global-classes
 
+## 0.4.0
+
+### Minor Changes
+
+- c042725: Create `@elementor/editor-ui` package.
+- 2b3f888: Show list of global classes in manager panel.
+- 4fbe12c: Update `@elementor/icons` version.
+- 19b0381: Change styles repository API
+- 68efdb1: Show long classes with ellipsis and tooltip.
+
+### Patch Changes
+
+- 6c4d4a7: refactored CSS class menu and fix it's keyboard navigation
+- b34f498: Fix global class styles not updating
+- 1a9c943: Subscribe only to the global classes slice
+- Updated dependencies [65d6ac7]
+- Updated dependencies [d61b1bc]
+- Updated dependencies [c042725]
+- Updated dependencies [2b3f888]
+- Updated dependencies [6c4d4a7]
+- Updated dependencies [4fbe12c]
+- Updated dependencies [b34f498]
+- Updated dependencies [19b0381]
+- Updated dependencies [68efdb1]
+- Updated dependencies [1a9c943]
+  - @elementor/editor-editing-panel@1.10.0
+  - @elementor/editor-styles-repository@0.6.0
+  - @elementor/editor-ui@0.1.0
+  - @elementor/editor-panels@0.10.5
+  - @elementor/editor@0.17.5
+  - @elementor/editor-styles@0.5.4
+  - @elementor/store@0.9.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 005d737: Register new css class manager panel.
+
+### Patch Changes
+
+- Updated dependencies [b8b2053]
+- Updated dependencies [e3c4a37]
+- Updated dependencies [f691712]
+- Updated dependencies [cfbd198]
+- Updated dependencies [a13a209]
+- Updated dependencies [99fccc1]
+- Updated dependencies [c9de3e2]
+- Updated dependencies [005d737]
+- Updated dependencies [7b499aa]
+  - @elementor/editor-styles-repository@0.5.0
+  - @elementor/editor-editing-panel@1.9.0
+  - @elementor/editor-panels@0.10.4
+  - @elementor/editor@0.17.4
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/index.js

@@ -1,31 +1,65 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store6 = require("@elementor/store");
+var import_store7 = require("@elementor/store");
 
-// src/components/logic-hooks.tsx
-var import_react = require("react");
-var import_store2 = require("@elementor/store");
+// src/components/class-manager/class-manager-button.tsx
+var React3 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
 
-// src/api.ts
-var import_http = require("@elementor/http");
-var RESOURCE_URL = "/global-classes";
-var apiClient = {
-  all: async () => {
-    return (0, import_http.httpService)().get(RESOURCE_URL);
-  },
-  post: async (data) => {
-    return (0, import_http.httpService)().post(RESOURCE_URL, data);
-  },
-  put: async (id, data) => {
-    return (0, import_http.httpService)().put(`${RESOURCE_URL}/${id}`, data);
-  }
-};
+// src/components/class-manager/class-manager-panel.tsx
+var React2 = __toESM(require("react"));
+var import_editor_panels = require("@elementor/editor-panels");
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+
+// src/components/class-manager/global-classes-list.tsx
+var React = __toESM(require("react"));
+var import_editor_ui = require("@elementor/editor-ui");
+var import_ui = require("@elementor/ui");
 
 // src/store.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_editor_styles = require("@elementor/editor-styles");
 var import_store = require("@elementor/store");
+
+// src/errors.ts
+var import_utils = require("@elementor/utils");
+var GlobalClassNotFoundError = (0, import_utils.createError)({
+  code: "global_class_not_found",
+  message: "Global class not found."
+});
+
+// src/store.ts
 var initialState = {
   items: {},
   order: []
@@ -46,6 +80,20 @@ var slice = (0, import_store.__createSlice)({
     update(state, { payload }) {
       state.items[payload.style.id] = payload.style;
       state.order = payload.order;
+    },
+    updateProps(state, {
+      payload
+    }) {
+      const style = state.items[payload.id];
+      if (!style) {
+        throw new GlobalClassNotFoundError({ context: { styleId: payload.id } });
+      }
+      const variant = (0, import_editor_styles.getVariantByMeta)(style, payload.meta);
+      if (variant) {
+        variant.props = (0, import_editor_props.mergeProps)(variant.props, payload.props);
+      } else {
+        style.variants.push({ meta: payload.meta, props: payload.props });
+      }
     }
   }
 });
@@ -56,11 +104,62 @@ var selectOrderedGlobalClasses = (0, import_store.__createSelector)(
   selectOrder,
   (items, order) => order.map((id) => items[id])
 );
-var selectClass = (state, id) => state[SLICE_NAME].items[id];
+var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
+var useOrderedGlobalClasses = () => {
+  const items = (0, import_store.__useSelector)(selectOrderedGlobalClasses);
+  return items;
+};
+
+// src/components/class-manager/global-classes-list.tsx
+var GlobalClassesList = () => {
+  const cssClasses = useOrderedGlobalClasses();
+  return /* @__PURE__ */ React.createElement(import_ui.Stack, null, /* @__PURE__ */ React.createElement(import_ui.List, { role: "list" }, cssClasses?.map(({ id, label }) => {
+    return /* @__PURE__ */ React.createElement(import_ui.Stack, { key: id, direction: "row", alignItems: "center", gap: 1, role: "listitem" }, /* @__PURE__ */ React.createElement(import_ui.ListItemButton, { sx: { borderRadius: 1 } }, /* @__PURE__ */ React.createElement(import_editor_ui.EllipsisWithTooltip, { title: label, as: import_ui.Typography, variant: "caption" })));
+  })));
+};
+
+// src/components/class-manager/class-manager-panel.tsx
+var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels.__createPanel)({
+  id: "class-manager-panel",
+  component: ClassManagerPanel
+});
+function ClassManagerPanel() {
+  return /* @__PURE__ */ React2.createElement(import_ui2.ErrorBoundary, { fallback: /* @__PURE__ */ React2.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React2.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { p: 1, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n.__)("CSS Class manager")), /* @__PURE__ */ React2.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React2.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React2.createElement(GlobalClassesList, null))));
+}
+var CloseButton = (props) => {
+  const { close } = usePanelActions();
+  return /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React2.createElement(import_icons.XIcon, { fontSize: "small" }));
+};
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React2.createElement(import_ui2.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React2.createElement(import_ui2.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n.__)("Something went wrong", "elementor"))));
+
+// src/components/class-manager/class-manager-button.tsx
+var ClassManagerButton = () => {
+  const { open } = usePanelActions();
+  return /* @__PURE__ */ React3.createElement(import_ui3.Tooltip, { title: (0, import_i18n2.__)("Class manager"), placement: "top" }, /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { onClick: open }, /* @__PURE__ */ React3.createElement(import_icons2.ColorSwatchIcon, { fontSize: "tiny" })));
+};
+
+// src/components/logic-hooks.tsx
+var import_react = require("react");
+var import_store3 = require("@elementor/store");
+
+// src/api.ts
+var import_http = require("@elementor/http");
+var RESOURCE_URL = "/global-classes";
+var apiClient = {
+  all: async () => {
+    return (0, import_http.httpService)().get(RESOURCE_URL);
+  },
+  post: async (data) => {
+    return (0, import_http.httpService)().post(RESOURCE_URL, data);
+  },
+  put: async (id, data) => {
+    return (0, import_http.httpService)().put(`${RESOURCE_URL}/${id}`, data);
+  }
+};
 
 // src/components/logic-hooks.tsx
 function LogicHooks() {
-  const dispatch2 = (0, import_store2.__useDispatch)();
+  const dispatch2 = (0, import_store3.__useDispatch)();
   (0, import_react.useEffect)(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
@@ -71,17 +170,18 @@ function LogicHooks() {
 }
 
 // src/global-classes-styles-provider.ts
-var import_store4 = require("@elementor/store");
-var import_i18n = require("@wordpress/i18n");
+var import_store5 = require("@elementor/store");
+var import_i18n3 = require("@wordpress/i18n");
 var globalClassesStylesProvider = {
   key: "global-classes",
   priority: 30,
   actions: {
-    get: () => selectOrderedGlobalClasses((0, import_store4.__getState)()),
+    get: () => selectOrderedGlobalClasses((0, import_store5.__getState)()),
+    getById: (id) => selectClass((0, import_store5.__getState)(), id),
     create: async (style) => {
       const res = await apiClient.post(style);
       const { data, meta } = res.data;
-      (0, import_store4.__dispatch)(
+      (0, import_store5.__dispatch)(
         slice.actions.add({
           style: data,
           order: meta.order
@@ -90,34 +190,48 @@ var globalClassesStylesProvider = {
       return data;
     },
     update: async (payload) => {
-      const style = selectClass((0, import_store4.__getState)(), payload.id);
+      const style = selectClass((0, import_store5.__getState)(), payload.id);
       const mergedData = { ...style, ...payload };
       const res = await apiClient.put(payload.id, mergedData);
       const { data, meta } = res.data;
-      (0, import_store4.__dispatch)(
+      (0, import_store5.__dispatch)(
         slice.actions.update({
           style: data,
           order: meta.order
         })
       );
       return data;
+    },
+    updateProps: (args) => {
+      (0, import_store5.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
     }
   },
-  subscribe: (cb) => (0, import_store4.__subscribe)(cb),
+  subscribe: (cb) => (0, import_store5.__subscribeWithSelector)((state) => state.globalClasses, cb),
   labels: {
-    singular: (0, import_i18n.__)("Global CSS Class", "elementor"),
-    plural: (0, import_i18n.__)("Global CSS Classes", "elementor")
+    singular: (0, import_i18n3.__)("Global CSS Class", "elementor"),
+    plural: (0, import_i18n3.__)("Global CSS Classes", "elementor")
   }
 };
 
 // src/init.ts
 function init() {
-  (0, import_store6.__registerSlice)(slice);
+  (0, import_store7.__registerSlice)(slice);
+  (0, import_editor_panels2.__registerPanel)(panel);
   import_editor_styles_repository.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-hooks",
     component: LogicHooks
   });
+  (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
+    id: "global-classes",
+    component: ClassManagerButton
+  });
 }
 
 // src/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/store.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n}\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );\n\t},\n\tput: async ( id: string, data: UpdateActionPayload ) => {\n\t\treturn httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );\n\t},\n};\n","import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ];\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { apiClient } from './api';\nimport { selectClass, selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider: StylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t\tupdate: async ( payload ) => {\n\t\t\tconst style = selectClass( getState(), payload.id );\n\t\t\tconst mergedData = { ...style, ...payload };\n\n\t\t\tconst res = await apiClient.put( payload.id, mergedData );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribe( cb ),\n\tlabels: {\n\t\tsingular: __( 'Global CSS Class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n};\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["import_store","import_store","createSlice","createSelector","dispatch","useDispatch","import_store","getState","dispatch","subscribe","registerSlice"]}
+{"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/components/class-manager/global-classes-list.tsx","../src/store.ts","../src/errors.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes',\n\t\tcomponent: ClassManagerButton,\n\t} );\n}\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<Tooltip title={ __( 'Class manager' ) } placement=\"top\">\n\t\t\t<IconButton onClick={ open }>\n\t\t\t\t<ColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n};\n","import * as React from 'react';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ColorSwatchIcon, XIcon } from '@elementor/icons';\nimport { Alert, Box, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassesList } from './global-classes-list';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'class-manager-panel',\n\tcomponent: ClassManagerPanel,\n} );\n\nfunction ClassManagerPanel() {\n\treturn (\n\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t<Panel>\n\t\t\t\t<PanelHeader>\n\t\t\t\t\t<Stack p={ 1 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t<ColorSwatchIcon fontSize=\"inherit\" sx={ { transform: 'rotate(90deg)' } } />\n\t\t\t\t\t\t\t{ __( 'CSS Class manager' ) }\n\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t<CloseButton sx={ { marginLeft: 'auto' } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t</PanelHeader>\n\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t<GlobalClassesList />\n\t\t\t\t</PanelBody>\n\t\t\t</Panel>\n\t\t</ErrorBoundary>\n\t);\n}\n\nconst CloseButton = ( props: IconButtonProps ) => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close } { ...props }>\n\t\t\t<XIcon fontSize=\"small\" />\n\t\t</IconButton>\n\t);\n};\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n","import * as React from 'react';\nimport { EllipsisWithTooltip } from '@elementor/editor-ui';\nimport { List, ListItemButton, Stack, Typography } from '@elementor/ui';\n\nimport { useOrderedGlobalClasses } from '../../store';\n\nexport const GlobalClassesList = () => {\n\tconst cssClasses = useOrderedGlobalClasses();\n\n\treturn (\n\t\t<Stack>\n\t\t\t<List role=\"list\">\n\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Stack key={ id } direction=\"row\" alignItems=\"center\" gap={ 1 } role=\"listitem\">\n\t\t\t\t\t\t\t<ListItemButton sx={ { borderRadius: 1 } }>\n\t\t\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t\t\t</ListItemButton>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</List>\n\t\t</Stack>\n\t);\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\t__useSelector as useSelector,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\nexport type GlobalClassesState = SliceState< typeof slice >;\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const useOrderedGlobalClasses = () => {\n\tconst items = useSelector( selectOrderedGlobalClasses );\n\n\treturn items;\n};\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );\n\t},\n\tput: async ( id: string, data: UpdateActionPayload ) => {\n\t\treturn httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );\n\t},\n};\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { apiClient } from './api';\nimport { type GlobalClassesState, selectClass, selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t\tupdate: async ( payload ) => {\n\t\t\tconst style = selectClass( getState(), payload.id );\n\t\t\tconst mergedData = { ...style, ...payload };\n\n\t\t\tconst res = await apiClient.put( payload.id, mergedData );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: GlobalClassesState ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global CSS Class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","import_store","React","import_icons","import_ui","import_i18n","React","import_ui","createSlice","createSelector","useSelector","createPanel","import_store","dispatch","useDispatch","import_store","import_i18n","getState","dispatch","subscribeWithSelector","registerSlice","registerPanel"]}

package/dist/index.mjs

@@ -1,32 +1,53 @@
 // src/init.ts
 import { injectIntoLogic } from "@elementor/editor";
+import { injectIntoClassSelectorActions } from "@elementor/editor-editing-panel";
+import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
-// src/components/logic-hooks.tsx
-import { useEffect } from "react";
-import { __useDispatch as useDispatch } from "@elementor/store";
+// src/components/class-manager/class-manager-button.tsx
+import * as React3 from "react";
+import { ColorSwatchIcon as ColorSwatchIcon2 } from "@elementor/icons";
+import { IconButton as IconButton2, Tooltip } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
 
-// src/api.ts
-import { httpService } from "@elementor/http";
-var RESOURCE_URL = "/global-classes";
-var apiClient = {
-  all: async () => {
-    return httpService().get(RESOURCE_URL);
-  },
-  post: async (data) => {
-    return httpService().post(RESOURCE_URL, data);
-  },
-  put: async (id, data) => {
-    return httpService().put(`${RESOURCE_URL}/${id}`, data);
-  }
-};
+// src/components/class-manager/class-manager-panel.tsx
+import * as React2 from "react";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ColorSwatchIcon, XIcon } from "@elementor/icons";
+import { Alert, Box, ErrorBoundary, IconButton, Stack as Stack2 } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+
+// src/components/class-manager/global-classes-list.tsx
+import * as React from "react";
+import { EllipsisWithTooltip } from "@elementor/editor-ui";
+import { List, ListItemButton, Stack, Typography } from "@elementor/ui";
 
 // src/store.ts
+import { mergeProps } from "@elementor/editor-props";
+import {
+  getVariantByMeta
+} from "@elementor/editor-styles";
 import {
   __createSelector as createSelector,
-  __createSlice as createSlice
+  __createSlice as createSlice,
+  __useSelector as useSelector
 } from "@elementor/store";
+
+// src/errors.ts
+import { createError } from "@elementor/utils";
+var GlobalClassNotFoundError = createError({
+  code: "global_class_not_found",
+  message: "Global class not found."
+});
+
+// src/store.ts
 var initialState = {
   items: {},
   order: []
@@ -47,6 +68,20 @@ var slice = createSlice({
     update(state, { payload }) {
       state.items[payload.style.id] = payload.style;
       state.order = payload.order;
+    },
+    updateProps(state, {
+      payload
+    }) {
+      const style = state.items[payload.id];
+      if (!style) {
+        throw new GlobalClassNotFoundError({ context: { styleId: payload.id } });
+      }
+      const variant = getVariantByMeta(style, payload.meta);
+      if (variant) {
+        variant.props = mergeProps(variant.props, payload.props);
+      } else {
+        style.variants.push({ meta: payload.meta, props: payload.props });
+      }
     }
   }
 });
@@ -57,7 +92,58 @@ var selectOrderedGlobalClasses = createSelector(
   selectOrder,
   (items, order) => order.map((id) => items[id])
 );
-var selectClass = (state, id) => state[SLICE_NAME].items[id];
+var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
+var useOrderedGlobalClasses = () => {
+  const items = useSelector(selectOrderedGlobalClasses);
+  return items;
+};
+
+// src/components/class-manager/global-classes-list.tsx
+var GlobalClassesList = () => {
+  const cssClasses = useOrderedGlobalClasses();
+  return /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(List, { role: "list" }, cssClasses?.map(({ id, label }) => {
+    return /* @__PURE__ */ React.createElement(Stack, { key: id, direction: "row", alignItems: "center", gap: 1, role: "listitem" }, /* @__PURE__ */ React.createElement(ListItemButton, { sx: { borderRadius: 1 } }, /* @__PURE__ */ React.createElement(EllipsisWithTooltip, { title: label, as: Typography, variant: "caption" })));
+  })));
+};
+
+// src/components/class-manager/class-manager-panel.tsx
+var { panel, usePanelActions, usePanelStatus } = createPanel({
+  id: "class-manager-panel",
+  component: ClassManagerPanel
+});
+function ClassManagerPanel() {
+  return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React2.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React2.createElement(Panel, null, /* @__PURE__ */ React2.createElement(PanelHeader, null, /* @__PURE__ */ React2.createElement(Stack2, { p: 1, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React2.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __("CSS Class manager")), /* @__PURE__ */ React2.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React2.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React2.createElement(GlobalClassesList, null))));
+}
+var CloseButton = (props) => {
+  const { close } = usePanelActions();
+  return /* @__PURE__ */ React2.createElement(IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React2.createElement(XIcon, { fontSize: "small" }));
+};
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React2.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React2.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React2.createElement("strong", null, __("Something went wrong", "elementor"))));
+
+// src/components/class-manager/class-manager-button.tsx
+var ClassManagerButton = () => {
+  const { open } = usePanelActions();
+  return /* @__PURE__ */ React3.createElement(Tooltip, { title: __2("Class manager"), placement: "top" }, /* @__PURE__ */ React3.createElement(IconButton2, { onClick: open }, /* @__PURE__ */ React3.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
+};
+
+// src/components/logic-hooks.tsx
+import { useEffect } from "react";
+import { __useDispatch as useDispatch } from "@elementor/store";
+
+// src/api.ts
+import { httpService } from "@elementor/http";
+var RESOURCE_URL = "/global-classes";
+var apiClient = {
+  all: async () => {
+    return httpService().get(RESOURCE_URL);
+  },
+  post: async (data) => {
+    return httpService().post(RESOURCE_URL, data);
+  },
+  put: async (id, data) => {
+    return httpService().put(`${RESOURCE_URL}/${id}`, data);
+  }
+};
 
 // src/components/logic-hooks.tsx
 function LogicHooks() {
@@ -72,13 +158,18 @@ function LogicHooks() {
 }
 
 // src/global-classes-styles-provider.ts
-import { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from "@elementor/store";
-import { __ } from "@wordpress/i18n";
+import {
+  __dispatch as dispatch,
+  __getState as getState,
+  __subscribeWithSelector as subscribeWithSelector
+} from "@elementor/store";
+import { __ as __3 } from "@wordpress/i18n";
 var globalClassesStylesProvider = {
   key: "global-classes",
   priority: 30,
   actions: {
     get: () => selectOrderedGlobalClasses(getState()),
+    getById: (id) => selectClass(getState(), id),
     create: async (style) => {
       const res = await apiClient.post(style);
       const { data, meta } = res.data;
@@ -102,23 +193,37 @@ var globalClassesStylesProvider = {
         })
       );
       return data;
+    },
+    updateProps: (args) => {
+      dispatch(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
     }
   },
-  subscribe: (cb) => subscribe(cb),
+  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
   labels: {
-    singular: __("Global CSS Class", "elementor"),
-    plural: __("Global CSS Classes", "elementor")
+    singular: __3("Global CSS Class", "elementor"),
+    plural: __3("Global CSS Classes", "elementor")
   }
 };
 
 // src/init.ts
 function init() {
   registerSlice(slice);
+  registerPanel(panel);
   stylesRepository.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-hooks",
     component: LogicHooks
   });
+  injectIntoClassSelectorActions({
+    id: "global-classes",
+    component: ClassManagerButton
+  });
 }
 
 // src/index.ts

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/store.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n}\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );\n\t},\n\tput: async ( id: string, data: UpdateActionPayload ) => {\n\t\treturn httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );\n\t},\n};\n","import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ];\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { apiClient } from './api';\nimport { selectClass, selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider: StylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t\tupdate: async ( payload ) => {\n\t\t\tconst style = selectClass( getState(), payload.id );\n\t\t\tconst mergedData = { ...style, ...payload };\n\n\t\t\tconst res = await apiClient.put( payload.id, mergedData );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribe( cb ),\n\tlabels: {\n\t\tsingular: __( 'Global CSS Class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n};\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["dispatch"]}
+{"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/components/class-manager/global-classes-list.tsx","../src/store.ts","../src/errors.ts","../src/components/logic-hooks.tsx","../src/api.ts","../src/global-classes-styles-provider.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { LogicHooks } from './components/logic-hooks';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-hooks',\n\t\tcomponent: LogicHooks,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes',\n\t\tcomponent: ClassManagerButton,\n\t} );\n}\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<Tooltip title={ __( 'Class manager' ) } placement=\"top\">\n\t\t\t<IconButton onClick={ open }>\n\t\t\t\t<ColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n};\n","import * as React from 'react';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ColorSwatchIcon, XIcon } from '@elementor/icons';\nimport { Alert, Box, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassesList } from './global-classes-list';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'class-manager-panel',\n\tcomponent: ClassManagerPanel,\n} );\n\nfunction ClassManagerPanel() {\n\treturn (\n\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t<Panel>\n\t\t\t\t<PanelHeader>\n\t\t\t\t\t<Stack p={ 1 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t<ColorSwatchIcon fontSize=\"inherit\" sx={ { transform: 'rotate(90deg)' } } />\n\t\t\t\t\t\t\t{ __( 'CSS Class manager' ) }\n\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t<CloseButton sx={ { marginLeft: 'auto' } } />\n\t\t\t\t\t</Stack>\n\t\t\t\t</PanelHeader>\n\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t<GlobalClassesList />\n\t\t\t\t</PanelBody>\n\t\t\t</Panel>\n\t\t</ErrorBoundary>\n\t);\n}\n\nconst CloseButton = ( props: IconButtonProps ) => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close } { ...props }>\n\t\t\t<XIcon fontSize=\"small\" />\n\t\t</IconButton>\n\t);\n};\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n","import * as React from 'react';\nimport { EllipsisWithTooltip } from '@elementor/editor-ui';\nimport { List, ListItemButton, Stack, Typography } from '@elementor/ui';\n\nimport { useOrderedGlobalClasses } from '../../store';\n\nexport const GlobalClassesList = () => {\n\tconst cssClasses = useOrderedGlobalClasses();\n\n\treturn (\n\t\t<Stack>\n\t\t\t<List role=\"list\">\n\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Stack key={ id } direction=\"row\" alignItems=\"center\" gap={ 1 } role=\"listitem\">\n\t\t\t\t\t\t\t<ListItemButton sx={ { borderRadius: 1 } }>\n\t\t\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t\t\t</ListItemButton>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</List>\n\t\t</Stack>\n\t);\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\t__useSelector as useSelector,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type State = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n};\n\nconst initialState: State = {\n\titems: {},\n\torder: [],\n};\n\nexport type GlobalClassesState = SliceState< typeof slice >;\n\n// Slice\nexport const SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< State > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {\n\t\t\tstate.items[ payload.style.id ] = payload.style;\n\t\t\tstate.order = payload.order;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\t\t},\n\t},\n} );\n\n// Selectors\nconst selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\nconst selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const useOrderedGlobalClasses = () => {\n\tconst items = useSelector( selectOrderedGlobalClasses );\n\n\treturn items;\n};\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\nexport type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;\n\nexport const apiClient = {\n\tall: async () => {\n\t\treturn httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );\n\t},\n\tpost: async ( data: CreateActionPayload ) => {\n\t\treturn httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );\n\t},\n\tput: async ( id: string, data: UpdateActionPayload ) => {\n\t\treturn httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );\n\t},\n};\n","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { apiClient } from './api';\nimport { type GlobalClassesState, selectClass, selectOrderedGlobalClasses, slice } from './store';\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedGlobalClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: async ( style ) => {\n\t\t\tconst res = await apiClient.post( style );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\t\tupdate: async ( payload ) => {\n\t\t\tconst style = selectClass( getState(), payload.id );\n\t\t\tconst mergedData = { ...style, ...payload };\n\n\t\t\tconst res = await apiClient.put( payload.id, mergedData );\n\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: data,\n\t\t\t\t\torder: meta.order,\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn data;\n\t\t},\n\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: GlobalClassesState ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global CSS Class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["React","ColorSwatchIcon","IconButton","__","React","Stack","Stack","__","IconButton","ColorSwatchIcon","dispatch","__","__"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,10 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.3",
-    "@elementor/editor-styles-repository": "0.4.1",
+    "@elementor/editor": "0.17.5",
+    "@elementor/editor-editing-panel": "1.10.0",
+    "@elementor/editor-panels": "0.10.5",
+    "@elementor/editor-props": "0.8.0",
+    "@elementor/editor-styles": "0.5.4",
+    "@elementor/editor-styles-repository": "0.6.0",
+    "@elementor/editor-ui": "0.1.0",
     "@elementor/http": "0.1.3",
-    "@elementor/store": "0.8.6",
+    "@elementor/icons": "1.26.0",
+    "@elementor/store": "0.9.0",
+    "@elementor/ui": "1.24.1",
+    "@elementor/utils": "0.3.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/class-manager/class-manager-button.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ColorSwatchIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { usePanelActions } from './class-manager-panel';
+
+export const ClassManagerButton = () => {
+	const { open } = usePanelActions();
+
+	return (
+		<Tooltip title={ __( 'Class manager' ) } placement="top">
+			<IconButton onClick={ open }>
+				<ColorSwatchIcon fontSize="tiny" />
+			</IconButton>
+		</Tooltip>
+	);
+};

package/src/components/class-manager/class-manager-panel.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+	__createPanel as createPanel,
+	Panel,
+	PanelBody,
+	PanelHeader,
+	PanelHeaderTitle,
+} from '@elementor/editor-panels';
+import { ColorSwatchIcon, XIcon } from '@elementor/icons';
+import { Alert, Box, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { GlobalClassesList } from './global-classes-list';
+
+export const { panel, usePanelActions, usePanelStatus } = createPanel( {
+	id: 'class-manager-panel',
+	component: ClassManagerPanel,
+} );
+
+function ClassManagerPanel() {
+	return (
+		<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
+			<Panel>
+				<PanelHeader>
+					<Stack p={ 1 } width="100%" direction="row" alignItems="center">
+						<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+							<ColorSwatchIcon fontSize="inherit" sx={ { transform: 'rotate(90deg)' } } />
+							{ __( 'CSS Class manager' ) }
+						</PanelHeaderTitle>
+						<CloseButton sx={ { marginLeft: 'auto' } } />
+					</Stack>
+				</PanelHeader>
+				<PanelBody px={ 2 }>
+					<GlobalClassesList />
+				</PanelBody>
+			</Panel>
+		</ErrorBoundary>
+	);
+}
+
+const CloseButton = ( props: IconButtonProps ) => {
+	const { close } = usePanelActions();
+
+	return (
+		<IconButton size="small" color="secondary" onClick={ close } { ...props }>
+			<XIcon fontSize="small" />
+		</IconButton>
+	);
+};
+
+const ErrorBoundaryFallback = () => (
+	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
+		<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>
+			<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>
+		</Alert>
+	</Box>
+);

package/src/components/class-manager/global-classes-list.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
+import { List, ListItemButton, Stack, Typography } from '@elementor/ui';
+
+import { useOrderedGlobalClasses } from '../../store';
+
+export const GlobalClassesList = () => {
+	const cssClasses = useOrderedGlobalClasses();
+
+	return (
+		<Stack>
+			<List role="list">
+				{ cssClasses?.map( ( { id, label } ) => {
+					return (
+						<Stack key={ id } direction="row" alignItems="center" gap={ 1 } role="listitem">
+							<ListItemButton sx={ { borderRadius: 1 } }>
+								<EllipsisWithTooltip title={ label } as={ Typography } variant="caption" />
+							</ListItemButton>
+						</Stack>
+					);
+				} ) }
+			</List>
+		</Stack>
+	);
+};

package/src/errors.ts

@@ -0,0 +1,6 @@
+import { createError } from '@elementor/utils';
+
+export const GlobalClassNotFoundError = createError< { styleId: string } >( {
+	code: 'global_class_not_found',
+	message: 'Global class not found.',
+} );

package/src/global-classes-styles-provider.ts

@@ -1,15 +1,20 @@
 import type { StylesProvider } from '@elementor/editor-styles-repository';
-import { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';
+import {
+	__dispatch as dispatch,
+	__getState as getState,
+	__subscribeWithSelector as subscribeWithSelector,
+} from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
-import { selectClass, selectOrderedGlobalClasses, slice } from './store';
+import { type GlobalClassesState, selectClass, selectOrderedGlobalClasses, slice } from './store';
 
-export const globalClassesStylesProvider: StylesProvider = {
+export const globalClassesStylesProvider = {
 	key: 'global-classes',
 	priority: 30,
 	actions: {
 		get: () => selectOrderedGlobalClasses( getState() ),
+		getById: ( id ) => selectClass( getState(), id ),
 		create: async ( style ) => {
 			const res = await apiClient.post( style );
 
@@ -41,10 +46,20 @@ export const globalClassesStylesProvider: StylesProvider = {
 
 			return data;
 		},
+
+		updateProps: ( args ) => {
+			dispatch(
+				slice.actions.updateProps( {
+					id: args.id,
+					meta: args.meta,
+					props: args.props,
+				} )
+			);
+		},
 	},
-	subscribe: ( cb ) => subscribe( cb ),
+	subscribe: ( cb ) => subscribeWithSelector( ( state: GlobalClassesState ) => state.globalClasses, cb ),
 	labels: {
 		singular: __( 'Global CSS Class', 'elementor' ),
 		plural: __( 'Global CSS Classes', 'elementor' ),
 	},
-};
+} satisfies StylesProvider;

package/src/init.ts

@@ -1,13 +1,18 @@
 import { injectIntoLogic } from '@elementor/editor';
+import { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';
+import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { __registerSlice as registerSlice } from '@elementor/store';
 
+import { ClassManagerButton } from './components/class-manager/class-manager-button';
+import { panel } from './components/class-manager/class-manager-panel';
 import { LogicHooks } from './components/logic-hooks';
 import { globalClassesStylesProvider } from './global-classes-styles-provider';
 import { slice } from './store';
 
 export function init() {
 	registerSlice( slice );
+	registerPanel( panel );
 
 	stylesRepository.register( globalClassesStylesProvider );
 
@@ -15,4 +20,9 @@ export function init() {
 		id: 'global-classes-hooks',
 		component: LogicHooks,
 	} );
+
+	injectIntoClassSelectorActions( {
+		id: 'global-classes',
+		component: ClassManagerButton,
+	} );
 }

package/src/store.ts

@@ -1,11 +1,20 @@
-import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+import { mergeProps, type Props } from '@elementor/editor-props';
+import {
+	getVariantByMeta,
+	type StyleDefinition,
+	type StyleDefinitionID,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
 import {
 	__createSelector as createSelector,
 	__createSlice as createSlice,
+	__useSelector as useSelector,
 	type PayloadAction,
 	type SliceState,
 } from '@elementor/store';
 
+import { GlobalClassNotFoundError } from './errors';
+
 export type State = {
 	items: Record< StyleDefinitionID, StyleDefinition >;
 	order: StyleDefinitionID[];
@@ -16,6 +25,8 @@ const initialState: State = {
 	order: [],
 };
 
+export type GlobalClassesState = SliceState< typeof slice >;
+
 // Slice
 export const SLICE_NAME = 'globalClasses';
 
@@ -35,6 +46,26 @@ export const slice = createSlice( {
 			state.items[ payload.style.id ] = payload.style;
 			state.order = payload.order;
 		},
+		updateProps(
+			state,
+			{
+				payload,
+			}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >
+		) {
+			const style = state.items[ payload.id ];
+
+			if ( ! style ) {
+				throw new GlobalClassNotFoundError( { context: { styleId: payload.id } } );
+			}
+
+			const variant = getVariantByMeta( style, payload.meta );
+
+			if ( variant ) {
+				variant.props = mergeProps( variant.props, payload.props );
+			} else {
+				style.variants.push( { meta: payload.meta, props: payload.props } );
+			}
+		},
 	},
 } );
 
@@ -47,4 +78,10 @@ export const selectOrderedGlobalClasses = createSelector( selectItems, selectOrd
 );
 
 export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
-	state[ SLICE_NAME ].items[ id ];
+	state[ SLICE_NAME ].items[ id ] ?? null;
+
+export const useOrderedGlobalClasses = () => {
+	const items = useSelector( selectOrderedGlobalClasses );
+
+	return items;
+};