@elementor/editor-global-classes 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @elementor/editor-global-classes
+
+## 0.1.0
+
+### Minor Changes
+
+- ed4260a: Introduce global classes styles provider and store
+
+### Patch Changes
+
+- Updated dependencies [ed4260a]
+  - @elementor/editor-styles-repository@0.3.0

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_store6 = require("@elementor/store");
+
+// src/components/logic-hooks.tsx
+var import_react = require("react");
+var import_store2 = require("@elementor/store");
+
+// src/store.ts
+var import_store = require("@elementor/store");
+var initialState = {
+  items: {},
+  order: []
+};
+var SLICE_NAME = "globalClasses";
+var slice = (0, import_store.__createSlice)({
+  name: SLICE_NAME,
+  initialState,
+  reducers: {
+    init(state, { payload }) {
+      state.items = payload.items;
+      state.order = payload.order;
+    }
+  }
+});
+var selectItems = (state) => state[SLICE_NAME].items;
+var selectOrder = (state) => state[SLICE_NAME].order;
+var selectOrderedGlobalClasses = (0, import_store.__createSelector)(
+  selectItems,
+  selectOrder,
+  (items, order) => order.map((id) => items[id])
+);
+
+// src/components/logic-hooks.tsx
+function LogicHooks() {
+  const dispatch = (0, import_store2.__useDispatch)();
+  (0, import_react.useEffect)(() => {
+    dispatch(
+      slice.actions.init({
+        items: {
+          "global-class-1": {
+            id: "global-class-1",
+            label: "Global Class 1",
+            type: "class",
+            variants: [
+              {
+                meta: {
+                  state: null,
+                  breakpoint: null
+                },
+                props: {
+                  color: {
+                    $$type: "color",
+                    value: "#aaaaaa"
+                  }
+                }
+              }
+            ]
+          },
+          "global-class-2": {
+            id: "global-class-2",
+            label: "Global Class 2",
+            type: "class",
+            variants: []
+          }
+        },
+        order: ["global-class-1", "global-class-2"]
+      })
+    );
+  }, [dispatch]);
+  return null;
+}
+
+// src/global-classes-styles-provider.ts
+var import_store4 = require("@elementor/store");
+var globalClassesStylesProvider = {
+  key: "global-classes",
+  priority: 30,
+  get: () => selectOrderedGlobalClasses((0, import_store4.__getState)()),
+  subscribe: (cb) => (0, import_store4.__subscribe)(cb)
+};
+
+// src/init.ts
+function init() {
+  (0, import_store6.__registerSlice)(slice);
+  import_editor_styles_repository.stylesRepository.register(globalClassesStylesProvider);
+  (0, import_editor.injectIntoLogic)({
+    id: "global-classes-hooks",
+    component: LogicHooks
+  });
+}
+
+// src/index.ts
+init();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../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 { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\t// TODO: Replace with loading from the server.\n\t\tdispatch(\n\t\t\tslice.actions.init( {\n\t\t\t\titems: {\n\t\t\t\t\t'global-class-1': {\n\t\t\t\t\t\tid: 'global-class-1',\n\t\t\t\t\t\tlabel: 'Global Class 1',\n\t\t\t\t\t\ttype: 'class',\n\t\t\t\t\t\tvariants: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tmeta: {\n\t\t\t\t\t\t\t\t\tstate: null,\n\t\t\t\t\t\t\t\t\tbreakpoint: null,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t\t\t$$type: 'color',\n\t\t\t\t\t\t\t\t\t\tvalue: '#aaaaaa',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t\t'global-class-2': {\n\t\t\t\t\t\tid: 'global-class-2',\n\t\t\t\t\t\tlabel: 'Global Class 2',\n\t\t\t\t\t\ttype: 'class',\n\t\t\t\t\t\tvariants: [],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\torder: [ 'global-class-1', 'global-class-2' ],\n\t\t\t} )\n\t\t);\n\t}, [ dispatch ] );\n\n\treturn null;\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\ntype 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},\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","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport { __getState as getState, __subscribe as subscribe } from '@elementor/store';\n\nimport { selectOrderedGlobalClasses } from './store';\n\nexport const globalClassesStylesProvider: StylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tget: () => selectOrderedGlobalClasses( getState() ),\n\tsubscribe: ( cb ) => subscribe( cb ),\n};\n","import { init } from './init';\n\ninit();\n"],"mappings":";;;AAAA,oBAAgC;AAChC,sCAAiC;AACjC,IAAAA,gBAAiD;;;ACFjD,mBAA0B;AAC1B,IAAAC,gBAA6C;;;ACA7C,mBAKO;AAOP,IAAM,eAAsB;AAAA,EAC3B,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AACT;AAGO,IAAM,aAAa;AAEnB,IAAM,YAAQ,aAAAC,eAAa;AAAA,EACjC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,EAAE,QAAQ,GAA4B;AAClD,YAAM,QAAQ,QAAQ;AACtB,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,EACD;AACD,CAAE;AAGF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AACjF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AAE1E,IAAM,iCAA6B,aAAAC;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAa,CAAE,OAAO,UAC5F,MAAM,IAAK,CAAE,OAAQ,MAAO,EAAG,CAAE;AAClC;;;ADjCO,SAAS,aAAa;AAC5B,QAAM,eAAW,cAAAC,eAAY;AAE7B,8BAAW,MAAM;AAEhB;AAAA,MACC,MAAM,QAAQ,KAAM;AAAA,QACnB,OAAO;AAAA,UACN,kBAAkB;AAAA,YACjB,IAAI;AAAA,YACJ,OAAO;AAAA,YACP,MAAM;AAAA,YACN,UAAU;AAAA,cACT;AAAA,gBACC,MAAM;AAAA,kBACL,OAAO;AAAA,kBACP,YAAY;AAAA,gBACb;AAAA,gBACA,OAAO;AAAA,kBACN,OAAO;AAAA,oBACN,QAAQ;AAAA,oBACR,OAAO;AAAA,kBACR;AAAA,gBACD;AAAA,cACD;AAAA,YACD;AAAA,UACD;AAAA,UACA,kBAAkB;AAAA,YACjB,IAAI;AAAA,YACJ,OAAO;AAAA,YACP,MAAM;AAAA,YACN,UAAU,CAAC;AAAA,UACZ;AAAA,QACD;AAAA,QACA,OAAO,CAAE,kBAAkB,gBAAiB;AAAA,MAC7C,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAE,QAAS,CAAE;AAEhB,SAAO;AACR;;;AE5CA,IAAAC,gBAAiE;AAI1D,IAAM,8BAA8C;AAAA,EAC1D,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,MAAM,+BAA4B,cAAAC,YAAS,CAAE;AAAA,EAClD,WAAW,CAAE,WAAQ,cAAAC,aAAW,EAAG;AACpC;;;AHFO,SAAS,OAAO;AACtB,oBAAAC,iBAAe,KAAM;AAErB,mDAAiB,SAAU,2BAA4B;AAEvD,qCAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AIfA,KAAK;","names":["import_store","import_store","createSlice","createSelector","useDispatch","import_store","getState","subscribe","registerSlice"]}

package/dist/index.mjs

@@ -0,0 +1,99 @@
+// src/init.ts
+import { injectIntoLogic } from "@elementor/editor";
+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/store.ts
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice
+} from "@elementor/store";
+var initialState = {
+  items: {},
+  order: []
+};
+var SLICE_NAME = "globalClasses";
+var slice = createSlice({
+  name: SLICE_NAME,
+  initialState,
+  reducers: {
+    init(state, { payload }) {
+      state.items = payload.items;
+      state.order = payload.order;
+    }
+  }
+});
+var selectItems = (state) => state[SLICE_NAME].items;
+var selectOrder = (state) => state[SLICE_NAME].order;
+var selectOrderedGlobalClasses = createSelector(
+  selectItems,
+  selectOrder,
+  (items, order) => order.map((id) => items[id])
+);
+
+// src/components/logic-hooks.tsx
+function LogicHooks() {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      slice.actions.init({
+        items: {
+          "global-class-1": {
+            id: "global-class-1",
+            label: "Global Class 1",
+            type: "class",
+            variants: [
+              {
+                meta: {
+                  state: null,
+                  breakpoint: null
+                },
+                props: {
+                  color: {
+                    $$type: "color",
+                    value: "#aaaaaa"
+                  }
+                }
+              }
+            ]
+          },
+          "global-class-2": {
+            id: "global-class-2",
+            label: "Global Class 2",
+            type: "class",
+            variants: []
+          }
+        },
+        order: ["global-class-1", "global-class-2"]
+      })
+    );
+  }, [dispatch]);
+  return null;
+}
+
+// src/global-classes-styles-provider.ts
+import { __getState as getState, __subscribe as subscribe } from "@elementor/store";
+var globalClassesStylesProvider = {
+  key: "global-classes",
+  priority: 30,
+  get: () => selectOrderedGlobalClasses(getState()),
+  subscribe: (cb) => subscribe(cb)
+};
+
+// src/init.ts
+function init() {
+  registerSlice(slice);
+  stylesRepository.register(globalClassesStylesProvider);
+  injectIntoLogic({
+    id: "global-classes-hooks",
+    component: LogicHooks
+  });
+}
+
+// src/index.ts
+init();
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts","../src/components/logic-hooks.tsx","../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 { slice } from '../store';\n\nexport function LogicHooks() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\t// TODO: Replace with loading from the server.\n\t\tdispatch(\n\t\t\tslice.actions.init( {\n\t\t\t\titems: {\n\t\t\t\t\t'global-class-1': {\n\t\t\t\t\t\tid: 'global-class-1',\n\t\t\t\t\t\tlabel: 'Global Class 1',\n\t\t\t\t\t\ttype: 'class',\n\t\t\t\t\t\tvariants: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tmeta: {\n\t\t\t\t\t\t\t\t\tstate: null,\n\t\t\t\t\t\t\t\t\tbreakpoint: null,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t\t\t$$type: 'color',\n\t\t\t\t\t\t\t\t\t\tvalue: '#aaaaaa',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t\t'global-class-2': {\n\t\t\t\t\t\tid: 'global-class-2',\n\t\t\t\t\t\tlabel: 'Global Class 2',\n\t\t\t\t\t\ttype: 'class',\n\t\t\t\t\t\tvariants: [],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\torder: [ 'global-class-1', 'global-class-2' ],\n\t\t\t} )\n\t\t);\n\t}, [ dispatch ] );\n\n\treturn null;\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\ntype 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},\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","import type { StylesProvider } from '@elementor/editor-styles-repository';\nimport { __getState as getState, __subscribe as subscribe } from '@elementor/store';\n\nimport { selectOrderedGlobalClasses } from './store';\n\nexport const globalClassesStylesProvider: StylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tget: () => selectOrderedGlobalClasses( getState() ),\n\tsubscribe: ( cb ) => subscribe( cb ),\n};\n","import { init } from './init';\n\ninit();\n"],"mappings":";AAAA,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB,qBAAqB;;;ACFjD,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,mBAAmB;;;ACA7C;AAAA,EACC,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,OAGX;AAOP,IAAM,eAAsB;AAAA,EAC3B,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AACT;AAGO,IAAM,aAAa;AAEnB,IAAM,QAAQ,YAAa;AAAA,EACjC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,EAAE,QAAQ,GAA4B;AAClD,YAAM,QAAQ,QAAQ;AACtB,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,EACD;AACD,CAAE;AAGF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AACjF,IAAM,cAAc,CAAE,UAAuC,MAAO,UAAW,EAAE;AAE1E,IAAM,6BAA6B;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAa,CAAE,OAAO,UAC5F,MAAM,IAAK,CAAE,OAAQ,MAAO,EAAG,CAAE;AAClC;;;ADjCO,SAAS,aAAa;AAC5B,QAAM,WAAW,YAAY;AAE7B,YAAW,MAAM;AAEhB;AAAA,MACC,MAAM,QAAQ,KAAM;AAAA,QACnB,OAAO;AAAA,UACN,kBAAkB;AAAA,YACjB,IAAI;AAAA,YACJ,OAAO;AAAA,YACP,MAAM;AAAA,YACN,UAAU;AAAA,cACT;AAAA,gBACC,MAAM;AAAA,kBACL,OAAO;AAAA,kBACP,YAAY;AAAA,gBACb;AAAA,gBACA,OAAO;AAAA,kBACN,OAAO;AAAA,oBACN,QAAQ;AAAA,oBACR,OAAO;AAAA,kBACR;AAAA,gBACD;AAAA,cACD;AAAA,YACD;AAAA,UACD;AAAA,UACA,kBAAkB;AAAA,YACjB,IAAI;AAAA,YACJ,OAAO;AAAA,YACP,MAAM;AAAA,YACN,UAAU,CAAC;AAAA,UACZ;AAAA,QACD;AAAA,QACA,OAAO,CAAE,kBAAkB,gBAAiB;AAAA,MAC7C,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAE,QAAS,CAAE;AAEhB,SAAO;AACR;;;AE5CA,SAAS,cAAc,UAAU,eAAe,iBAAiB;AAI1D,IAAM,8BAA8C;AAAA,EAC1D,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,MAAM,2BAA4B,SAAS,CAAE;AAAA,EAClD,WAAW,CAAE,OAAQ,UAAW,EAAG;AACpC;;;AHFO,SAAS,OAAO;AACtB,gBAAe,KAAM;AAErB,mBAAiB,SAAU,2BAA4B;AAEvD,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AIfA,KAAK;","names":[]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@elementor/editor-global-classes",
+  "version": "0.1.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-global-classes"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/store": "0.8.6",
+    "@elementor/editor-styles-repository": "0.3.0",
+    "@elementor/editor": "0.17.2"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  }
+}

package/src/components/logic-hooks.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { __useDispatch as useDispatch } from '@elementor/store';
+
+import { slice } from '../store';
+
+export function LogicHooks() {
+	const dispatch = useDispatch();
+
+	useEffect( () => {
+		// TODO: Replace with loading from the server.
+		dispatch(
+			slice.actions.init( {
+				items: {
+					'global-class-1': {
+						id: 'global-class-1',
+						label: 'Global Class 1',
+						type: 'class',
+						variants: [
+							{
+								meta: {
+									state: null,
+									breakpoint: null,
+								},
+								props: {
+									color: {
+										$$type: 'color',
+										value: '#aaaaaa',
+									},
+								},
+							},
+						],
+					},
+					'global-class-2': {
+						id: 'global-class-2',
+						label: 'Global Class 2',
+						type: 'class',
+						variants: [],
+					},
+				},
+				order: [ 'global-class-1', 'global-class-2' ],
+			} )
+		);
+	}, [ dispatch ] );
+
+	return null;
+}

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

@@ -0,0 +1,11 @@
+import type { StylesProvider } from '@elementor/editor-styles-repository';
+import { __getState as getState, __subscribe as subscribe } from '@elementor/store';
+
+import { selectOrderedGlobalClasses } from './store';
+
+export const globalClassesStylesProvider: StylesProvider = {
+	key: 'global-classes',
+	priority: 30,
+	get: () => selectOrderedGlobalClasses( getState() ),
+	subscribe: ( cb ) => subscribe( cb ),
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+import { init } from './init';
+
+init();

package/src/init.ts

@@ -0,0 +1,18 @@
+import { injectIntoLogic } from '@elementor/editor';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { __registerSlice as registerSlice } from '@elementor/store';
+
+import { LogicHooks } from './components/logic-hooks';
+import { globalClassesStylesProvider } from './global-classes-styles-provider';
+import { slice } from './store';
+
+export function init() {
+	registerSlice( slice );
+
+	stylesRepository.register( globalClassesStylesProvider );
+
+	injectIntoLogic( {
+		id: 'global-classes-hooks',
+		component: LogicHooks,
+	} );
+}

package/src/store.ts

@@ -0,0 +1,39 @@
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+import {
+	__createSelector as createSelector,
+	__createSlice as createSlice,
+	type PayloadAction,
+	type SliceState,
+} from '@elementor/store';
+
+type State = {
+	items: Record< StyleDefinitionID, StyleDefinition >;
+	order: StyleDefinitionID[];
+};
+
+const initialState: State = {
+	items: {},
+	order: [],
+};
+
+// Slice
+export const SLICE_NAME = 'globalClasses';
+
+export const slice = createSlice( {
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		init( state, { payload }: PayloadAction< State > ) {
+			state.items = payload.items;
+			state.order = payload.order;
+		},
+	},
+} );
+
+// Selectors
+const selectItems = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;
+const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;
+
+export const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>
+	order.map( ( id ) => items[ id ] )
+);