@elementor/editor-editing-panel 0.2.0 → 0.3.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 +11 -0
- package/dist/index.js +15 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
- package/src/components/editing-panel.tsx +15 -2
- package/src/contexts/settings-controls.tsx +32 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.3.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.2.0...@elementor/editor-editing-panel@0.3.0) (2024-07-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **editor-editing-panel:** element context [EDS-255] ([#200](https://github.com/elementor/elementor-packages/issues/200)) ([cff677e](https://github.com/elementor/elementor-packages/commit/cff677eec3690fe8b9569d5fd27c2512a981334c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [0.2.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.1.0...@elementor/editor-editing-panel@0.2.0) (2024-07-11)
|
|
7
18
|
|
|
8
19
|
|
package/dist/index.js
CHANGED
|
@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
27
27
|
|
|
28
28
|
// src/components/editing-panel.tsx
|
|
29
|
-
var
|
|
29
|
+
var React2 = __toESM(require("react"));
|
|
30
30
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
31
31
|
var import_i18n = require("@wordpress/i18n");
|
|
32
32
|
|
|
@@ -92,15 +92,25 @@ function useElementType(type) {
|
|
|
92
92
|
);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
// src/contexts/settings-controls.tsx
|
|
96
|
+
var React = __toESM(require("react"));
|
|
97
|
+
var import_react = require("react");
|
|
98
|
+
var Context = (0, import_react.createContext)(null);
|
|
99
|
+
function ElementContext({ children, element }) {
|
|
100
|
+
return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
|
|
101
|
+
}
|
|
102
|
+
|
|
95
103
|
// src/components/editing-panel.tsx
|
|
104
|
+
var import_ui = require("@elementor/ui");
|
|
96
105
|
var EditingPanel = () => {
|
|
97
106
|
const elements = useSelectedElements();
|
|
98
|
-
const
|
|
107
|
+
const selectedElement = elements[0];
|
|
108
|
+
const elementType = useElementType(selectedElement?.type);
|
|
99
109
|
if (elements.length !== 1 || !elementType) {
|
|
100
110
|
return null;
|
|
101
111
|
}
|
|
102
112
|
const panelTitle = (0, import_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
103
|
-
return /* @__PURE__ */
|
|
113
|
+
return /* @__PURE__ */ React2.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React2.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React2.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React2.createElement(import_ui.Box, { padding: 2 }, /* @__PURE__ */ React2.createElement(import_ui.Typography, null, "Here should be the controls.")))));
|
|
104
114
|
};
|
|
105
115
|
|
|
106
116
|
// src/panel.ts
|
|
@@ -127,11 +137,11 @@ var shouldUseV2Panel = () => {
|
|
|
127
137
|
};
|
|
128
138
|
|
|
129
139
|
// src/hooks/use-open-editor-panel.ts
|
|
130
|
-
var
|
|
140
|
+
var import_react2 = require("react");
|
|
131
141
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
132
142
|
var useOpenEditorPanel = () => {
|
|
133
143
|
const { open } = usePanelActions();
|
|
134
|
-
(0,
|
|
144
|
+
(0, import_react2.useEffect)(() => {
|
|
135
145
|
return (0, import_editor_v1_adapters3.__privateListenTo)(
|
|
136
146
|
(0, import_editor_v1_adapters3.commandStartEvent)("panel/editor/open"),
|
|
137
147
|
() => {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport {\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\tconst
|
|
1
|
+
{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport {\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { ElementContext } from '../contexts/settings-controls';\nimport { Box, Typography } from '@elementor/ui';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Box padding={ 2 }>\n\t\t\t\t\t\t<Typography>\n\t\t\t\t\t\t\tHere should be the controls.\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce<Element[]>( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n}\n\nconst Context = createContext<ContextValue | null>( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n}\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","useListenTo","import_editor_v1_adapters","useListenTo","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
|
package/dist/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { __createPanel as createPanel } from "@elementor/editor-panels";
|
|
3
3
|
|
|
4
4
|
// src/components/editing-panel.tsx
|
|
5
|
-
import * as
|
|
5
|
+
import * as React2 from "react";
|
|
6
6
|
import {
|
|
7
7
|
Panel,
|
|
8
8
|
PanelBody,
|
|
@@ -73,15 +73,25 @@ function useElementType(type) {
|
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
+
// src/contexts/settings-controls.tsx
|
|
77
|
+
import * as React from "react";
|
|
78
|
+
import { createContext, useContext } from "react";
|
|
79
|
+
var Context = createContext(null);
|
|
80
|
+
function ElementContext({ children, element }) {
|
|
81
|
+
return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
|
|
82
|
+
}
|
|
83
|
+
|
|
76
84
|
// src/components/editing-panel.tsx
|
|
85
|
+
import { Box, Typography } from "@elementor/ui";
|
|
77
86
|
var EditingPanel = () => {
|
|
78
87
|
const elements = useSelectedElements();
|
|
79
|
-
const
|
|
88
|
+
const selectedElement = elements[0];
|
|
89
|
+
const elementType = useElementType(selectedElement?.type);
|
|
80
90
|
if (elements.length !== 1 || !elementType) {
|
|
81
91
|
return null;
|
|
82
92
|
}
|
|
83
93
|
const panelTitle = __("Edit %s", "elementor").replace("%s", elementType.title);
|
|
84
|
-
return /* @__PURE__ */
|
|
94
|
+
return /* @__PURE__ */ React2.createElement(Panel, null, /* @__PURE__ */ React2.createElement(PanelHeader, null, /* @__PURE__ */ React2.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React2.createElement(PanelBody, null, /* @__PURE__ */ React2.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React2.createElement(Box, { padding: 2 }, /* @__PURE__ */ React2.createElement(Typography, null, "Here should be the controls.")))));
|
|
85
95
|
};
|
|
86
96
|
|
|
87
97
|
// src/panel.ts
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport {\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\tconst
|
|
1
|
+
{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport {\n\tPanel,\n\tPanelBody,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { ElementContext } from '../contexts/settings-controls';\nimport { Box, Typography } from '@elementor/ui';\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Box padding={ 2 }>\n\t\t\t\t\t\t<Typography>\n\t\t\t\t\t\t\tHere should be the controls.\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce<Element[]>( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n}\n\nconst Context = createContext<ContextValue | null>( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n}\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["React","useListenTo","commandEndEvent","useListenTo","commandEndEvent"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-editing-panel",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -35,10 +35,11 @@
|
|
|
35
35
|
"@elementor/editor": "^0.11.0",
|
|
36
36
|
"@elementor/editor-panels": "^0.4.15",
|
|
37
37
|
"@elementor/editor-v1-adapters": "^0.7.0",
|
|
38
|
+
"@elementor/ui": "^1.4.61",
|
|
38
39
|
"@wordpress/i18n": "^4.45.0"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": "^18.3.1"
|
|
42
43
|
},
|
|
43
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "24e239cdbfb5a4ec3776a7694d6800a5a79c08e8"
|
|
44
45
|
}
|
|
@@ -8,10 +8,15 @@ import {
|
|
|
8
8
|
import { __ } from '@wordpress/i18n';
|
|
9
9
|
import useSelectedElements from '../hooks/use-selected-elements';
|
|
10
10
|
import useElementType from '../hooks/use-element-type';
|
|
11
|
+
import { ElementContext } from '../contexts/settings-controls';
|
|
12
|
+
import { Box, Typography } from '@elementor/ui';
|
|
11
13
|
|
|
12
14
|
export const EditingPanel = () => {
|
|
13
15
|
const elements = useSelectedElements();
|
|
14
|
-
|
|
16
|
+
|
|
17
|
+
const selectedElement = elements[ 0 ];
|
|
18
|
+
|
|
19
|
+
const elementType = useElementType( selectedElement?.type );
|
|
15
20
|
|
|
16
21
|
if ( elements.length !== 1 || ! elementType ) {
|
|
17
22
|
return null;
|
|
@@ -25,7 +30,15 @@ export const EditingPanel = () => {
|
|
|
25
30
|
<PanelHeader>
|
|
26
31
|
<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
|
|
27
32
|
</PanelHeader>
|
|
28
|
-
<PanelBody
|
|
33
|
+
<PanelBody>
|
|
34
|
+
<ElementContext element={ selectedElement }>
|
|
35
|
+
<Box padding={ 2 }>
|
|
36
|
+
<Typography>
|
|
37
|
+
Here should be the controls.
|
|
38
|
+
</Typography>
|
|
39
|
+
</Box>
|
|
40
|
+
</ElementContext>
|
|
41
|
+
</PanelBody>
|
|
29
42
|
</Panel>
|
|
30
43
|
);
|
|
31
44
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createContext, ReactNode, useContext } from 'react';
|
|
3
|
+
import { Element } from '../types';
|
|
4
|
+
|
|
5
|
+
type ContextValue = {
|
|
6
|
+
element: Element;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Context = createContext<ContextValue | null>( null );
|
|
10
|
+
|
|
11
|
+
type Props = {
|
|
12
|
+
element: Element;
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function ElementContext( { children, element }: Props ) {
|
|
17
|
+
return (
|
|
18
|
+
<Context.Provider value={ { element } }>
|
|
19
|
+
{ children }
|
|
20
|
+
</Context.Provider>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export function useElementContext() {
|
|
25
|
+
const context = useContext( Context );
|
|
26
|
+
|
|
27
|
+
if ( ! context ) {
|
|
28
|
+
throw new Error( 'useElementContext must be used within a ElementContextProvider' );
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return context;
|
|
32
|
+
}
|