@elementor/editor-global-classes 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/index.js +28 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
- package/src/api.ts +6 -2
- package/src/global-classes-styles-provider.ts +23 -1
- package/src/store.ts +7 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @elementor/editor-global-classes
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 534bfbf: Add editable field to CSS class selector.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [534bfbf]
|
|
12
|
+
- @elementor/editor-styles-repository@0.4.0
|
|
13
|
+
|
|
14
|
+
## 0.1.3
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- fbde10d: Add UX flow for creating new global class
|
|
19
|
+
- Updated dependencies [fbde10d]
|
|
20
|
+
- @elementor/editor-styles-repository@0.3.3
|
|
21
|
+
|
|
3
22
|
## 0.1.2
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/dist/index.js
CHANGED
|
@@ -17,7 +17,10 @@ var apiClient = {
|
|
|
17
17
|
return (0, import_http.httpService)().get(RESOURCE_URL);
|
|
18
18
|
},
|
|
19
19
|
post: async (data) => {
|
|
20
|
-
return (0, import_http.httpService)().post(RESOURCE_URL,
|
|
20
|
+
return (0, import_http.httpService)().post(RESOURCE_URL, data);
|
|
21
|
+
},
|
|
22
|
+
put: async (id, data) => {
|
|
23
|
+
return (0, import_http.httpService)().put(`${RESOURCE_URL}/${id}`, data);
|
|
21
24
|
}
|
|
22
25
|
};
|
|
23
26
|
|
|
@@ -39,6 +42,10 @@ var slice = (0, import_store.__createSlice)({
|
|
|
39
42
|
add(state, { payload }) {
|
|
40
43
|
state.items[payload.style.id] = payload.style;
|
|
41
44
|
state.order = payload.order;
|
|
45
|
+
},
|
|
46
|
+
update(state, { payload }) {
|
|
47
|
+
state.items[payload.style.id] = payload.style;
|
|
48
|
+
state.order = payload.order;
|
|
42
49
|
}
|
|
43
50
|
}
|
|
44
51
|
});
|
|
@@ -49,6 +56,7 @@ var selectOrderedGlobalClasses = (0, import_store.__createSelector)(
|
|
|
49
56
|
selectOrder,
|
|
50
57
|
(items, order) => order.map((id) => items[id])
|
|
51
58
|
);
|
|
59
|
+
var selectClass = (state, id) => state[SLICE_NAME].items[id];
|
|
52
60
|
|
|
53
61
|
// src/components/logic-hooks.tsx
|
|
54
62
|
function LogicHooks() {
|
|
@@ -64,6 +72,7 @@ function LogicHooks() {
|
|
|
64
72
|
|
|
65
73
|
// src/global-classes-styles-provider.ts
|
|
66
74
|
var import_store4 = require("@elementor/store");
|
|
75
|
+
var import_i18n = require("@wordpress/i18n");
|
|
67
76
|
var globalClassesStylesProvider = {
|
|
68
77
|
key: "global-classes",
|
|
69
78
|
priority: 30,
|
|
@@ -79,9 +88,26 @@ var globalClassesStylesProvider = {
|
|
|
79
88
|
})
|
|
80
89
|
);
|
|
81
90
|
return data;
|
|
91
|
+
},
|
|
92
|
+
update: async (payload) => {
|
|
93
|
+
const style = selectClass((0, import_store4.__getState)(), payload.id);
|
|
94
|
+
const mergedData = { ...style, ...payload };
|
|
95
|
+
const res = await apiClient.put(payload.id, mergedData);
|
|
96
|
+
const { data, meta } = res.data;
|
|
97
|
+
(0, import_store4.__dispatch)(
|
|
98
|
+
slice.actions.update({
|
|
99
|
+
style: data,
|
|
100
|
+
order: meta.order
|
|
101
|
+
})
|
|
102
|
+
);
|
|
103
|
+
return data;
|
|
82
104
|
}
|
|
83
105
|
},
|
|
84
|
-
subscribe: (cb) => (0, import_store4.__subscribe)(cb)
|
|
106
|
+
subscribe: (cb) => (0, import_store4.__subscribe)(cb),
|
|
107
|
+
labels: {
|
|
108
|
+
singular: (0, import_i18n.__)("Global CSS Class", "elementor"),
|
|
109
|
+
plural: (0, import_i18n.__)("Global CSS Classes", "elementor")
|
|
110
|
+
}
|
|
85
111
|
};
|
|
86
112
|
|
|
87
113
|
// src/init.ts
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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 } 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' ][] } >;\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,
|
|
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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -15,7 +15,10 @@ var apiClient = {
|
|
|
15
15
|
return httpService().get(RESOURCE_URL);
|
|
16
16
|
},
|
|
17
17
|
post: async (data) => {
|
|
18
|
-
return httpService().post(RESOURCE_URL,
|
|
18
|
+
return httpService().post(RESOURCE_URL, data);
|
|
19
|
+
},
|
|
20
|
+
put: async (id, data) => {
|
|
21
|
+
return httpService().put(`${RESOURCE_URL}/${id}`, data);
|
|
19
22
|
}
|
|
20
23
|
};
|
|
21
24
|
|
|
@@ -40,6 +43,10 @@ var slice = createSlice({
|
|
|
40
43
|
add(state, { payload }) {
|
|
41
44
|
state.items[payload.style.id] = payload.style;
|
|
42
45
|
state.order = payload.order;
|
|
46
|
+
},
|
|
47
|
+
update(state, { payload }) {
|
|
48
|
+
state.items[payload.style.id] = payload.style;
|
|
49
|
+
state.order = payload.order;
|
|
43
50
|
}
|
|
44
51
|
}
|
|
45
52
|
});
|
|
@@ -50,6 +57,7 @@ var selectOrderedGlobalClasses = createSelector(
|
|
|
50
57
|
selectOrder,
|
|
51
58
|
(items, order) => order.map((id) => items[id])
|
|
52
59
|
);
|
|
60
|
+
var selectClass = (state, id) => state[SLICE_NAME].items[id];
|
|
53
61
|
|
|
54
62
|
// src/components/logic-hooks.tsx
|
|
55
63
|
function LogicHooks() {
|
|
@@ -65,6 +73,7 @@ function LogicHooks() {
|
|
|
65
73
|
|
|
66
74
|
// src/global-classes-styles-provider.ts
|
|
67
75
|
import { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from "@elementor/store";
|
|
76
|
+
import { __ } from "@wordpress/i18n";
|
|
68
77
|
var globalClassesStylesProvider = {
|
|
69
78
|
key: "global-classes",
|
|
70
79
|
priority: 30,
|
|
@@ -80,9 +89,26 @@ var globalClassesStylesProvider = {
|
|
|
80
89
|
})
|
|
81
90
|
);
|
|
82
91
|
return data;
|
|
92
|
+
},
|
|
93
|
+
update: async (payload) => {
|
|
94
|
+
const style = selectClass(getState(), payload.id);
|
|
95
|
+
const mergedData = { ...style, ...payload };
|
|
96
|
+
const res = await apiClient.put(payload.id, mergedData);
|
|
97
|
+
const { data, meta } = res.data;
|
|
98
|
+
dispatch(
|
|
99
|
+
slice.actions.update({
|
|
100
|
+
style: data,
|
|
101
|
+
order: meta.order
|
|
102
|
+
})
|
|
103
|
+
);
|
|
104
|
+
return data;
|
|
83
105
|
}
|
|
84
106
|
},
|
|
85
|
-
subscribe: (cb) => subscribe(cb)
|
|
107
|
+
subscribe: (cb) => subscribe(cb),
|
|
108
|
+
labels: {
|
|
109
|
+
singular: __("Global CSS Class", "elementor"),
|
|
110
|
+
plural: __("Global CSS Classes", "elementor")
|
|
111
|
+
}
|
|
86
112
|
};
|
|
87
113
|
|
|
88
114
|
// src/init.ts
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +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 } 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' ][] } >;\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,
|
|
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":";AAAA,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB,qBAAqB;;;ACFjD,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,mBAAmB;;;ACC7C,SAA4B,mBAAmB;AAE/C,IAAM,eAAe;AAMd,IAAM,YAAY;AAAA,EACxB,KAAK,YAAY;AAChB,WAAO,YAAY,EAAE,IAAoC,YAAa;AAAA,EACvE;AAAA,EACA,MAAM,OAAQ,SAA+B;AAC5C,WAAO,YAAY,EAAE,KAAmC,cAAc,IAAK;AAAA,EAC5E;AAAA,EACA,KAAK,OAAQ,IAAY,SAA+B;AACvD,WAAO,YAAY,EAAE,IAAiC,GAAI,YAAa,IAAK,EAAG,IAAI,IAAK;AAAA,EACzF;AACD;;;ACnBA;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,IACA,IAAK,OAAO,EAAE,QAAQ,GAA0E;AAC/F,YAAM,MAAO,QAAQ,MAAM,EAAG,IAAI,QAAQ;AAC1C,YAAM,QAAQ,QAAQ;AAAA,IACvB;AAAA,IACA,OAAQ,OAAO,EAAE,QAAQ,GAA0E;AAClG,YAAM,MAAO,QAAQ,MAAM,EAAG,IAAI,QAAQ;AAC1C,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;AAEO,IAAM,cAAc,CAAE,OAAmC,OAC/D,MAAO,UAAW,EAAE,MAAO,EAAG;;;AF3CxB,SAAS,aAAa;AAC5B,QAAMA,YAAW,YAAY;AAE7B,YAAW,MAAM;AAChB,cAAU,IAAI,EAAE,KAAM,CAAE,QAAS;AAChC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B,MAAAA,UAAU,MAAM,QAAQ,KAAM,EAAE,OAAO,MAAM,OAAO,KAAK,MAAM,CAAE,CAAE;AAAA,IACpE,CAAE;AAAA,EACH,GAAG,CAAEA,SAAS,CAAE;AAEhB,SAAO;AACR;;;AGjBA,SAAS,cAAc,UAAU,cAAc,UAAU,eAAe,iBAAiB;AACzF,SAAS,UAAU;AAKZ,IAAM,8BAA8C;AAAA,EAC1D,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,MAAM,2BAA4B,SAAS,CAAE;AAAA,IAClD,QAAQ,OAAQ,UAAW;AAC1B,YAAM,MAAM,MAAM,UAAU,KAAM,KAAM;AAExC,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B;AAAA,QACC,MAAM,QAAQ,IAAK;AAAA,UAClB,OAAO;AAAA,UACP,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAEA,aAAO;AAAA,IACR;AAAA,IACA,QAAQ,OAAQ,YAAa;AAC5B,YAAM,QAAQ,YAAa,SAAS,GAAG,QAAQ,EAAG;AAClD,YAAM,aAAa,EAAE,GAAG,OAAO,GAAG,QAAQ;AAE1C,YAAM,MAAM,MAAM,UAAU,IAAK,QAAQ,IAAI,UAAW;AAExD,YAAM,EAAE,MAAM,KAAK,IAAI,IAAI;AAE3B;AAAA,QACC,MAAM,QAAQ,OAAQ;AAAA,UACrB,OAAO;AAAA,UACP,OAAO,KAAK;AAAA,QACb,CAAE;AAAA,MACH;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AAAA,EACA,WAAW,CAAE,OAAQ,UAAW,EAAG;AAAA,EACnC,QAAQ;AAAA,IACP,UAAU,GAAI,oBAAoB,WAAY;AAAA,IAC9C,QAAQ,GAAI,sBAAsB,WAAY;AAAA,EAC/C;AACD;;;AJzCO,SAAS,OAAO;AACtB,gBAAe,KAAM;AAErB,mBAAiB,SAAU,2BAA4B;AAEvD,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AKfA,KAAK;","names":["dispatch"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-global-classes",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -40,9 +40,10 @@
|
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@elementor/editor": "0.17.2",
|
|
43
|
-
"@elementor/editor-styles-repository": "0.
|
|
43
|
+
"@elementor/editor-styles-repository": "0.4.0",
|
|
44
44
|
"@elementor/http": "0.1.3",
|
|
45
|
-
"@elementor/store": "0.8.6"
|
|
45
|
+
"@elementor/store": "0.8.6",
|
|
46
|
+
"@wordpress/i18n": "^5.13.0"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
49
|
"react": "^18.3.1"
|
package/src/api.ts
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';
|
|
2
|
-
import { type CreateActionPayload } from '@elementor/editor-styles-repository';
|
|
2
|
+
import { type CreateActionPayload, type UpdateActionPayload } from '@elementor/editor-styles-repository';
|
|
3
3
|
import { type HttpResponse, httpService } from '@elementor/http';
|
|
4
4
|
|
|
5
5
|
const RESOURCE_URL = '/global-classes';
|
|
6
6
|
|
|
7
7
|
export type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;
|
|
8
8
|
export type GlobalClassesPostResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;
|
|
9
|
+
export type GlobalClassesPutResponse = HttpResponse< StyleDefinition, { order: StyleDefinition[ 'id' ][] } >;
|
|
9
10
|
|
|
10
11
|
export const apiClient = {
|
|
11
12
|
all: async () => {
|
|
12
13
|
return httpService().get< GlobalClassesGetAllResponse >( RESOURCE_URL );
|
|
13
14
|
},
|
|
14
15
|
post: async ( data: CreateActionPayload ) => {
|
|
15
|
-
return httpService().post< GlobalClassesPostResponse >( RESOURCE_URL,
|
|
16
|
+
return httpService().post< GlobalClassesPostResponse >( RESOURCE_URL, data );
|
|
17
|
+
},
|
|
18
|
+
put: async ( id: string, data: UpdateActionPayload ) => {
|
|
19
|
+
return httpService().put< GlobalClassesPutResponse >( `${ RESOURCE_URL }/${ id }`, data );
|
|
16
20
|
},
|
|
17
21
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { StylesProvider } from '@elementor/editor-styles-repository';
|
|
2
2
|
import { __dispatch as dispatch, __getState as getState, __subscribe as subscribe } from '@elementor/store';
|
|
3
|
+
import { __ } from '@wordpress/i18n';
|
|
3
4
|
|
|
4
5
|
import { apiClient } from './api';
|
|
5
|
-
import { selectOrderedGlobalClasses, slice } from './store';
|
|
6
|
+
import { selectClass, selectOrderedGlobalClasses, slice } from './store';
|
|
6
7
|
|
|
7
8
|
export const globalClassesStylesProvider: StylesProvider = {
|
|
8
9
|
key: 'global-classes',
|
|
@@ -21,8 +22,29 @@ export const globalClassesStylesProvider: StylesProvider = {
|
|
|
21
22
|
} )
|
|
22
23
|
);
|
|
23
24
|
|
|
25
|
+
return data;
|
|
26
|
+
},
|
|
27
|
+
update: async ( payload ) => {
|
|
28
|
+
const style = selectClass( getState(), payload.id );
|
|
29
|
+
const mergedData = { ...style, ...payload };
|
|
30
|
+
|
|
31
|
+
const res = await apiClient.put( payload.id, mergedData );
|
|
32
|
+
|
|
33
|
+
const { data, meta } = res.data;
|
|
34
|
+
|
|
35
|
+
dispatch(
|
|
36
|
+
slice.actions.update( {
|
|
37
|
+
style: data,
|
|
38
|
+
order: meta.order,
|
|
39
|
+
} )
|
|
40
|
+
);
|
|
41
|
+
|
|
24
42
|
return data;
|
|
25
43
|
},
|
|
26
44
|
},
|
|
27
45
|
subscribe: ( cb ) => subscribe( cb ),
|
|
46
|
+
labels: {
|
|
47
|
+
singular: __( 'Global CSS Class', 'elementor' ),
|
|
48
|
+
plural: __( 'Global CSS Classes', 'elementor' ),
|
|
49
|
+
},
|
|
28
50
|
};
|
package/src/store.ts
CHANGED
|
@@ -31,6 +31,10 @@ export const slice = createSlice( {
|
|
|
31
31
|
state.items[ payload.style.id ] = payload.style;
|
|
32
32
|
state.order = payload.order;
|
|
33
33
|
},
|
|
34
|
+
update( state, { payload }: PayloadAction< { style: StyleDefinition; order: State[ 'order' ] } > ) {
|
|
35
|
+
state.items[ payload.style.id ] = payload.style;
|
|
36
|
+
state.order = payload.order;
|
|
37
|
+
},
|
|
34
38
|
},
|
|
35
39
|
} );
|
|
36
40
|
|
|
@@ -41,3 +45,6 @@ const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ]
|
|
|
41
45
|
export const selectOrderedGlobalClasses = createSelector( selectItems, selectOrder, ( items, order ) =>
|
|
42
46
|
order.map( ( id ) => items[ id ] )
|
|
43
47
|
);
|
|
48
|
+
|
|
49
|
+
export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
|
|
50
|
+
state[ SLICE_NAME ].items[ id ];
|