@elementor/editor-global-classes 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @elementor/editor-global-classes
 
+## 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
+
+- @elementor/editor@0.17.3
+- @elementor/editor-styles-repository@0.4.1
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,10 +1,64 @@
 "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");
 
+// src/components/class-manager/class-manager-button.tsx
+var React2 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+
+// src/components/class-manager/class-manager-panel.tsx
+var React = __toESM(require("react"));
+var import_editor_panels = require("@elementor/editor-panels");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels.__createPanel)({
+  id: "class-manager-panel",
+  component: ClassManagerPanel
+});
+function ClassManagerPanel() {
+  return /* @__PURE__ */ React.createElement(import_ui.ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { p: 1, width: "100%", direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n.__)("CSS Class manager")), /* @__PURE__ */ React.createElement(CloseButton, null))), /* @__PURE__ */ React.createElement(import_editor_panels.PanelBody, null)));
+}
+var CloseButton = () => {
+  const { close } = usePanelActions();
+  return /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "small", color: "secondary", onClick: close }, /* @__PURE__ */ React.createElement(import_icons.XIcon, { fontSize: "small" }));
+};
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React.createElement(import_ui.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React.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__ */ React2.createElement(import_ui2.IconButton, { onClick: open }, /* @__PURE__ */ React2.createElement(import_icons2.AppsIcon, { fontSize: "tiny" }));
+};
+
 // src/components/logic-hooks.tsx
 var import_react = require("react");
 var import_store2 = require("@elementor/store");
@@ -72,7 +126,7 @@ function LogicHooks() {
 
 // src/global-classes-styles-provider.ts
 var import_store4 = require("@elementor/store");
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var globalClassesStylesProvider = {
   key: "global-classes",
   priority: 30,
@@ -105,19 +159,24 @@ var globalClassesStylesProvider = {
   },
   subscribe: (cb) => (0, import_store4.__subscribe)(cb),
   labels: {
-    singular: (0, import_i18n.__)("Global CSS Class", "elementor"),
-    plural: (0, import_i18n.__)("Global CSS Classes", "elementor")
+    singular: (0, import_i18n2.__)("Global CSS Class", "elementor"),
+    plural: (0, import_i18n2.__)("Global CSS Classes", "elementor")
   }
 };
 
 // src/init.ts
 function init() {
   (0, import_store6.__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/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 { 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 { AppsIcon } from '@elementor/icons';\nimport { IconButton } from '@elementor/ui';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<IconButton onClick={ open }>\n\t\t\t<AppsIcon fontSize=\"tiny\" />\n\t\t</IconButton>\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 { XIcon } from '@elementor/icons';\nimport { Alert, Box, ErrorBoundary, IconButton, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\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\" justifyContent=\"space-between\" alignItems=\"center\">\n\t\t\t\t\t\t<PanelHeaderTitle>{ __( 'CSS Class manager' ) }</PanelHeaderTitle>\n\t\t\t\t\t\t<CloseButton />\n\t\t\t\t\t</Stack>\n\t\t\t\t</PanelHeader>\n\t\t\t\t<PanelBody></PanelBody>\n\t\t\t</Panel>\n\t\t</ErrorBoundary>\n\t);\n}\n\nconst CloseButton = () => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close }>\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 { 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_editor_panels","import_store","React","import_icons","import_ui","createPanel","import_store","createSlice","createSelector","dispatch","useDispatch","import_store","import_i18n","getState","dispatch","subscribe","registerSlice","registerPanel"]}

package/dist/index.mjs

@@ -1,8 +1,46 @@
 // 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/class-manager/class-manager-button.tsx
+import * as React2 from "react";
+import { AppsIcon } from "@elementor/icons";
+import { IconButton as IconButton2 } from "@elementor/ui";
+
+// src/components/class-manager/class-manager-panel.tsx
+import * as React from "react";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { XIcon } from "@elementor/icons";
+import { Alert, Box, ErrorBoundary, IconButton, Stack } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var { panel, usePanelActions, usePanelStatus } = createPanel({
+  id: "class-manager-panel",
+  component: ClassManagerPanel
+});
+function ClassManagerPanel() {
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React.createElement(Panel, null, /* @__PURE__ */ React.createElement(PanelHeader, null, /* @__PURE__ */ React.createElement(Stack, { p: 1, width: "100%", direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React.createElement(PanelHeaderTitle, null, __("CSS Class manager")), /* @__PURE__ */ React.createElement(CloseButton, null))), /* @__PURE__ */ React.createElement(PanelBody, null)));
+}
+var CloseButton = () => {
+  const { close } = usePanelActions();
+  return /* @__PURE__ */ React.createElement(IconButton, { size: "small", color: "secondary", onClick: close }, /* @__PURE__ */ React.createElement(XIcon, { fontSize: "small" }));
+};
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React.createElement("strong", null, __("Something went wrong", "elementor"))));
+
+// src/components/class-manager/class-manager-button.tsx
+var ClassManagerButton = () => {
+  const { open } = usePanelActions();
+  return /* @__PURE__ */ React2.createElement(IconButton2, { onClick: open }, /* @__PURE__ */ React2.createElement(AppsIcon, { fontSize: "tiny" }));
+};
+
 // src/components/logic-hooks.tsx
 import { useEffect } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
@@ -73,7 +111,7 @@ 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 { __ as __2 } from "@wordpress/i18n";
 var globalClassesStylesProvider = {
   key: "global-classes",
   priority: 30,
@@ -106,19 +144,24 @@ var globalClassesStylesProvider = {
   },
   subscribe: (cb) => subscribe(cb),
   labels: {
-    singular: __("Global CSS Class", "elementor"),
-    plural: __("Global CSS Classes", "elementor")
+    singular: __2("Global CSS Class", "elementor"),
+    plural: __2("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/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 { 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 { AppsIcon } from '@elementor/icons';\nimport { IconButton } from '@elementor/ui';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<IconButton onClick={ open }>\n\t\t\t<AppsIcon fontSize=\"tiny\" />\n\t\t</IconButton>\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 { XIcon } from '@elementor/icons';\nimport { Alert, Box, ErrorBoundary, IconButton, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\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\" justifyContent=\"space-between\" alignItems=\"center\">\n\t\t\t\t\t\t<PanelHeaderTitle>{ __( 'CSS Class manager' ) }</PanelHeaderTitle>\n\t\t\t\t\t\t<CloseButton />\n\t\t\t\t\t</Stack>\n\t\t\t\t</PanelHeader>\n\t\t\t\t<PanelBody></PanelBody>\n\t\t\t</Panel>\n\t\t</ErrorBoundary>\n\t);\n}\n\nconst CloseButton = () => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close }>\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 { 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":["React","IconButton","IconButton","dispatch","__","__"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,10 +39,14 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.2",
-    "@elementor/editor-styles-repository": "0.4.0",
+    "@elementor/editor": "0.17.4",
+    "@elementor/editor-editing-panel": "1.9.0",
+    "@elementor/editor-panels": "0.10.4",
+    "@elementor/editor-styles-repository": "0.5.0",
     "@elementor/http": "0.1.3",
+    "@elementor/icons": "1.24.0",
     "@elementor/store": "0.8.6",
+    "@elementor/ui": "1.23.3",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AppsIcon } from '@elementor/icons';
+import { IconButton } from '@elementor/ui';
+
+import { usePanelActions } from './class-manager-panel';
+
+export const ClassManagerButton = () => {
+	const { open } = usePanelActions();
+
+	return (
+		<IconButton onClick={ open }>
+			<AppsIcon fontSize="tiny" />
+		</IconButton>
+	);
+};

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {
+	__createPanel as createPanel,
+	Panel,
+	PanelBody,
+	PanelHeader,
+	PanelHeaderTitle,
+} from '@elementor/editor-panels';
+import { XIcon } from '@elementor/icons';
+import { Alert, Box, ErrorBoundary, IconButton, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+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" justifyContent="space-between" alignItems="center">
+						<PanelHeaderTitle>{ __( 'CSS Class manager' ) }</PanelHeaderTitle>
+						<CloseButton />
+					</Stack>
+				</PanelHeader>
+				<PanelBody></PanelBody>
+			</Panel>
+		</ErrorBoundary>
+	);
+}
+
+const CloseButton = () => {
+	const { close } = usePanelActions();
+
+	return (
+		<IconButton size="small" color="secondary" onClick={ close }>
+			<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/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,
+	} );
 }