@elementor/editor-editing-panel 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* **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))
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* **editor-editing-panel:** api for selecting and widget type [EDS-244] ([#199](https://github.com/elementor/elementor-packages/issues/199)) ([3e3da8a](https://github.com/elementor/elementor-packages/commit/3e3da8ac1dc37e502991f0905cbe8054422b3b71))
+
+
+
+
+
 # 0.1.0 (2024-07-08)
 
 

package/dist/index.js

@@ -26,11 +26,91 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/editing-panel.tsx
-var React = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
 var import_i18n = require("@wordpress/i18n");
+
+// src/hooks/use-selected-elements.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-selected-elements.ts
+function getSelectedElements() {
+  const extendedWindow = window;
+  const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
+  return selectedElements.reduce((acc, el) => {
+    const type = el.model.get("widgetType") || el.model.get("elType");
+    if (type) {
+      acc.push({
+        id: el.model.get("id"),
+        type
+      });
+    }
+    return acc;
+  }, []);
+}
+
+// src/hooks/use-selected-elements.ts
+function useSelectedElements() {
+  return (0, import_editor_v1_adapters.__privateUseListenTo)(
+    [
+      (0, import_editor_v1_adapters.commandEndEvent)("document/elements/select"),
+      (0, import_editor_v1_adapters.commandEndEvent)("document/elements/deselect")
+    ],
+    () => getSelectedElements()
+  );
+}
+
+// src/hooks/use-element-type.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-widgets-cache.ts
+function getWidgetsCache() {
+  const extendedWindow = window;
+  return extendedWindow?.elementor?.widgetsCache || null;
+}
+
+// src/hooks/use-element-type.ts
+function useElementType(type) {
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)(
+    (0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/load"),
+    () => {
+      if (!type) {
+        return null;
+      }
+      const widgetsCache = getWidgetsCache();
+      const elementType = widgetsCache?.[type];
+      if (!elementType?.atomic_controls) {
+        return null;
+      }
+      return {
+        key: type,
+        controls: elementType.atomic_controls,
+        title: elementType.title
+      };
+    },
+    [type]
+  );
+}
+
+// src/contexts/settings-controls.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var Context = (0, import_react.createContext)(null);
+function ElementContext({ children, element }) {
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
+}
+
+// src/components/editing-panel.tsx
+var import_ui = require("@elementor/ui");
 var EditingPanel = () => {
-  return /* @__PURE__ */ React.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n.__)("Editing Panel", "elementor"))), /* @__PURE__ */ React.createElement(import_editor_panels.PanelBody, null));
+  const elements = useSelectedElements();
+  const selectedElement = elements[0];
+  const elementType = useElementType(selectedElement?.type);
+  if (elements.length !== 1 || !elementType) {
+    return null;
+  }
+  const panelTitle = (0, import_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title);
+  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.")))));
 };
 
 // src/panel.ts
@@ -48,33 +128,22 @@ var import_editor = require("@elementor/editor");
 
 // src/sync/should-use-v2-panel.ts
 var shouldUseV2Panel = () => {
-  const selectedElements = getSelectedElements() ?? [];
+  const selectedElements = getSelectedElements();
+  const widgetCache = getWidgetsCache();
   if (selectedElements.length !== 1) {
     return false;
   }
-  return !!selectedElements[0].atomicControls;
+  return !!widgetCache?.[selectedElements[0].type]?.atomic_controls;
 };
-function getSelectedElements() {
-  const extendedWindow = window;
-  const elements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
-  return elements.map((element) => {
-    const type = element.model.get("widgetType") || element.model.get("elType") || "";
-    const widgetSettings = extendedWindow.elementor?.widgetsCache[type];
-    return {
-      type,
-      atomicControls: widgetSettings?.atomic_controls || null
-    };
-  });
-}
 
 // src/hooks/use-open-editor-panel.ts
-var import_react = require("react");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_react2 = require("react");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react.useEffect)(() => {
-    return (0, import_editor_v1_adapters.__privateListenTo)(
-      (0, import_editor_v1_adapters.commandStartEvent)("panel/editor/open"),
+  (0, import_react2.useEffect)(() => {
+    return (0, import_editor_v1_adapters3.__privateListenTo)(
+      (0, import_editor_v1_adapters3.commandStartEvent)("panel/editor/open"),
       () => {
         if (shouldUseV2Panel()) {
           open();
@@ -92,7 +161,7 @@ var EditingPanelHooks = () => {
 
 // src/init.ts
 var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function init() {
   (0, import_editor_panels3.__registerPanel)(panel);
   blockV1Panel();
@@ -102,7 +171,7 @@ function init() {
   });
 }
 var blockV1Panel = () => {
-  (0, import_editor_v1_adapters2.__privateBlockDataCommand)({
+  (0, import_editor_v1_adapters4.__privateBlockDataCommand)({
     command: "panel/editor/open",
     condition: shouldUseV2Panel
   });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.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';\n\nexport const EditingPanel = () => {\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ __( 'Editing Panel', 'elementor' ) }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody></PanelBody>\n\t\t</Panel>\n\t);\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 { ExtendedWindow } from '../types';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements() ?? [ ];\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 !! selectedElements[ 0 ].atomicControls;\n};\n\nfunction getSelectedElements() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst elements = extendedWindow.elementor?.selection?.getElements?.() ?? [ ];\n\n\treturn elements.map( ( element ) => {\n\t\tconst type = element.model.get( 'widgetType' ) || element.model.get( 'elType' ) || '';\n\t\tconst widgetSettings = extendedWindow.elementor?.widgetsCache[ type ];\n\n\t\treturn {\n\t\t\ttype,\n\t\t\tatomicControls: widgetSettings?.atomic_controls || null,\n\t\t};\n\t} );\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,wBAA6C;;;ACA7C,YAAuB;AACvB,2BAKO;AACP,kBAAmB;AAEZ,IAAM,eAAe,MAAM;AACjC,SACC,oCAAC,kCACA,oCAAC,wCACA,oCAAC,iDAAmB,gBAAI,iBAAiB,WAAY,CAAG,CACzD,GACA,oCAAC,oCAAU,CACZ;AAEF;;;ADfO,IAAM;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACD,QAAI,sBAAAC,eAAa;AAAA,EAChB,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;;;AETF,oBAAgC;;;ACCzB,IAAM,mBAAmB,MAAM;AACrC,QAAM,mBAAmB,oBAAoB,KAAK,CAAE;AAEpD,MAAK,iBAAiB,WAAW,GAAI;AACpC,WAAO;AAAA,EACR;AAGA,SAAO,CAAC,CAAE,iBAAkB,CAAE,EAAE;AACjC;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,QAAM,WAAW,eAAe,WAAW,WAAW,cAAc,KAAK,CAAE;AAE3E,SAAO,SAAS,IAAK,CAAE,YAAa;AACnC,UAAM,OAAO,QAAQ,MAAM,IAAK,YAAa,KAAK,QAAQ,MAAM,IAAK,QAAS,KAAK;AACnF,UAAM,iBAAiB,eAAe,WAAW,aAAc,IAAK;AAEpE,WAAO;AAAA,MACN;AAAA,MACA,gBAAgB,gBAAgB,mBAAmB;AAAA,IACpD;AAAA,EACD,CAAE;AACH;;;AC3BA,mBAA0B;AAC1B,gCAAiE;AAI1D,IAAM,qBAAqB,MAAM;AACvC,QAAM,EAAE,KAAK,IAAI,gBAAgB;AAEjC,8BAAW,MAAM;AAChB,eAAO,0BAAAC;AAAA,UACN,6CAAmB,mBAAoB;AAAA,MACvC,MAAM;AACL,YAAK,iBAAiB,GAAI;AACzB,eAAK;AAAA,QACN;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;;;AChBO,IAAM,oBAAoB,MAAM;AACtC,qBAAmB;AAEnB,SAAO;AACR;;;AHFA,IAAAC,wBAAiD;AACjD,IAAAC,6BAA8D;AAE/C,SAAR,OAAwB;AAC9B,4BAAAC,iBAAe,KAAM;AACrB,eAAa;AAEb,qCAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;AAEA,IAAM,eAAe,MAAM;AAC1B,iCAAAC,2BAAkB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,EACZ,CAAE;AACH;;;AIpBA,KAAK;","names":["import_editor_panels","createPanel","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
+{"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

@@ -2,7 +2,7 @@
 import { __createPanel as createPanel } from "@elementor/editor-panels";
 
 // src/components/editing-panel.tsx
-import * as React from "react";
+import * as React2 from "react";
 import {
   Panel,
   PanelBody,
@@ -10,8 +10,88 @@ import {
   PanelHeaderTitle
 } from "@elementor/editor-panels";
 import { __ } from "@wordpress/i18n";
+
+// src/hooks/use-selected-elements.ts
+import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-selected-elements.ts
+function getSelectedElements() {
+  const extendedWindow = window;
+  const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
+  return selectedElements.reduce((acc, el) => {
+    const type = el.model.get("widgetType") || el.model.get("elType");
+    if (type) {
+      acc.push({
+        id: el.model.get("id"),
+        type
+      });
+    }
+    return acc;
+  }, []);
+}
+
+// src/hooks/use-selected-elements.ts
+function useSelectedElements() {
+  return useListenTo(
+    [
+      commandEndEvent("document/elements/select"),
+      commandEndEvent("document/elements/deselect")
+    ],
+    () => getSelectedElements()
+  );
+}
+
+// src/hooks/use-element-type.ts
+import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-widgets-cache.ts
+function getWidgetsCache() {
+  const extendedWindow = window;
+  return extendedWindow?.elementor?.widgetsCache || null;
+}
+
+// src/hooks/use-element-type.ts
+function useElementType(type) {
+  return useListenTo2(
+    commandEndEvent2("editor/documents/load"),
+    () => {
+      if (!type) {
+        return null;
+      }
+      const widgetsCache = getWidgetsCache();
+      const elementType = widgetsCache?.[type];
+      if (!elementType?.atomic_controls) {
+        return null;
+      }
+      return {
+        key: type,
+        controls: elementType.atomic_controls,
+        title: elementType.title
+      };
+    },
+    [type]
+  );
+}
+
+// src/contexts/settings-controls.tsx
+import * as React from "react";
+import { createContext, useContext } from "react";
+var Context = createContext(null);
+function ElementContext({ children, element }) {
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
+}
+
+// src/components/editing-panel.tsx
+import { Box, Typography } from "@elementor/ui";
 var EditingPanel = () => {
-  return /* @__PURE__ */ React.createElement(Panel, null, /* @__PURE__ */ React.createElement(PanelHeader, null, /* @__PURE__ */ React.createElement(PanelHeaderTitle, null, __("Editing Panel", "elementor"))), /* @__PURE__ */ React.createElement(PanelBody, null));
+  const elements = useSelectedElements();
+  const selectedElement = elements[0];
+  const elementType = useElementType(selectedElement?.type);
+  if (elements.length !== 1 || !elementType) {
+    return null;
+  }
+  const panelTitle = __("Edit %s", "elementor").replace("%s", elementType.title);
+  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.")))));
 };
 
 // src/panel.ts
@@ -29,24 +109,13 @@ import { injectIntoLogic } from "@elementor/editor";
 
 // src/sync/should-use-v2-panel.ts
 var shouldUseV2Panel = () => {
-  const selectedElements = getSelectedElements() ?? [];
+  const selectedElements = getSelectedElements();
+  const widgetCache = getWidgetsCache();
   if (selectedElements.length !== 1) {
     return false;
   }
-  return !!selectedElements[0].atomicControls;
+  return !!widgetCache?.[selectedElements[0].type]?.atomic_controls;
 };
-function getSelectedElements() {
-  const extendedWindow = window;
-  const elements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
-  return elements.map((element) => {
-    const type = element.model.get("widgetType") || element.model.get("elType") || "";
-    const widgetSettings = extendedWindow.elementor?.widgetsCache[type];
-    return {
-      type,
-      atomicControls: widgetSettings?.atomic_controls || null
-    };
-  });
-}
 
 // src/hooks/use-open-editor-panel.ts
 import { useEffect } from "react";

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.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';\n\nexport const EditingPanel = () => {\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ __( 'Editing Panel', 'elementor' ) }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody></PanelBody>\n\t\t</Panel>\n\t);\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 { ExtendedWindow } from '../types';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements() ?? [ ];\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 !! selectedElements[ 0 ].atomicControls;\n};\n\nfunction getSelectedElements() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst elements = extendedWindow.elementor?.selection?.getElements?.() ?? [ ];\n\n\treturn elements.map( ( element ) => {\n\t\tconst type = element.model.get( 'widgetType' ) || element.model.get( 'elType' ) || '';\n\t\tconst widgetSettings = extendedWindow.elementor?.widgetsCache[ type ];\n\n\t\treturn {\n\t\t\ttype,\n\t\t\tatomicControls: widgetSettings?.atomic_controls || null,\n\t\t};\n\t} );\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":";AAAA,SAAS,iBAAiB,mBAAmB;;;ACA7C,YAAY,WAAW;AACvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AAEZ,IAAM,eAAe,MAAM;AACjC,SACC,oCAAC,aACA,oCAAC,mBACA,oCAAC,wBAAmB,GAAI,iBAAiB,WAAY,CAAG,CACzD,GACA,oCAAC,eAAU,CACZ;AAEF;;;ADfO,IAAM;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACD,IAAI,YAAa;AAAA,EAChB,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;;;AETF,SAAS,uBAAuB;;;ACCzB,IAAM,mBAAmB,MAAM;AACrC,QAAM,mBAAmB,oBAAoB,KAAK,CAAE;AAEpD,MAAK,iBAAiB,WAAW,GAAI;AACpC,WAAO;AAAA,EACR;AAGA,SAAO,CAAC,CAAE,iBAAkB,CAAE,EAAE;AACjC;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,QAAM,WAAW,eAAe,WAAW,WAAW,cAAc,KAAK,CAAE;AAE3E,SAAO,SAAS,IAAK,CAAE,YAAa;AACnC,UAAM,OAAO,QAAQ,MAAM,IAAK,YAAa,KAAK,QAAQ,MAAM,IAAK,QAAS,KAAK;AACnF,UAAM,iBAAiB,eAAe,WAAW,aAAc,IAAK;AAEpE,WAAO;AAAA,MACN;AAAA,MACA,gBAAgB,gBAAgB,mBAAmB;AAAA,IACpD;AAAA,EACD,CAAE;AACH;;;AC3BA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,qBAAqB,gBAAgB;AAI1D,IAAM,qBAAqB,MAAM;AACvC,QAAM,EAAE,KAAK,IAAI,gBAAgB;AAEjC,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,kBAAmB,mBAAoB;AAAA,MACvC,MAAM;AACL,YAAK,iBAAiB,GAAI;AACzB,eAAK;AAAA,QACN;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;;;AChBO,IAAM,oBAAoB,MAAM;AACtC,qBAAmB;AAEnB,SAAO;AACR;;;AHFA,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,6BAA6B,wBAAwB;AAE/C,SAAR,OAAwB;AAC9B,gBAAe,KAAM;AACrB,eAAa;AAEb,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;AAEA,IAAM,eAAe,MAAM;AAC1B,mBAAkB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,EACZ,CAAE;AACH;;;AIpBA,KAAK;","names":[]}
+{"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

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-editing-panel",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -35,10 +35,11 @@
 		"@elementor/editor": "^0.11.0",
 		"@elementor/editor-panels": "^0.4.15",
 		"@elementor/editor-v1-adapters": "^0.7.0",
+		"@elementor/ui": "^1.4.61",
 		"@wordpress/i18n": "^4.45.0"
 	},
 	"peerDependencies": {
 		"react": "^18.3.1"
 	},
-	"gitHead": "33d28e27101a9bf272b11d19d7092830e8cb69d0"
+	"gitHead": "24e239cdbfb5a4ec3776a7694d6800a5a79c08e8"
 }

package/src/__tests__/utils.ts

@@ -0,0 +1,17 @@
+import { V1Element, V1ElementModelProps } from '../sync/types';
+
+export function mockV1Element( partialSettings: Partial<V1ElementModelProps> ): V1Element {
+	const settings = {
+		elType: 'widget',
+		id: '1',
+		...partialSettings,
+	};
+
+	return {
+		model: {
+			get: ( key ) => {
+				return settings[ key ];
+			},
+		},
+	};
+}

package/src/components/__tests__/editing-panel.test.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { EditingPanel } from '../editing-panel';
+import { V1Element, ExtendedWindow } from '../../sync/types';
+import { mockV1Element } from '../../__tests__/utils';
+import { dispatchCommandAfter } from 'test-utils';
+
+describe( '<EditingPanel />', () => {
+	const getElements = jest.fn();
+
+	function selectElements( elements: V1Element[] ) {
+		act( () => {
+			getElements.mockReturnValue( elements );
+			dispatchCommandAfter( 'document/elements/select' );
+		} );
+	}
+
+	function deselectElements() {
+		act( () => {
+			getElements.mockReturnValue( [] );
+			dispatchCommandAfter( 'document/elements/deselect' );
+		} );
+	}
+
+	beforeEach( () => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			selection: {
+				getElements,
+			},
+			widgetsCache: {
+				'atomic-heading': {
+					controls: {},
+					atomic_controls: [],
+					title: 'Atomic Heading',
+				},
+				heading: {
+					controls: {},
+					title: 'Heading',
+				},
+			},
+		};
+	} );
+
+	it( 'should render the selected element editing panel', () => {
+		// Arrange + Act.
+		render( <EditingPanel /> );
+
+		// Assert.
+		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
+
+		// Act.
+		selectElements( [ mockV1Element( { widgetType: 'atomic-heading' } ) ] );
+
+		// Assert.
+		expect( screen.getByText( 'Edit Atomic Heading' ) ).toBeInTheDocument();
+
+		// Act.
+		deselectElements();
+
+		// Assert.
+		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
+	} );
+
+	it.each( [
+		{
+			title: 'multiple elements are selected',
+			selected: [
+				mockV1Element( { widgetType: 'atomic-heading' } ),
+				mockV1Element( { widgetType: 'atomic-heading' } ),
+			],
+		},
+		{
+			title: 'the element type does not exist',
+			selected: [
+				mockV1Element( { widgetType: 'atomic-button' } ),
+			],
+		},
+		{
+			title: 'the element does not have atomic controls',
+			selected: [
+				mockV1Element( { widgetType: 'heading' } ),
+			],
+		},
+	] )( 'should not render panel when $title', ( { selected } ) => {
+		// Arrange.
+		selectElements( selected );
+
+		// Act.
+		render( <EditingPanel /> );
+
+		// Assert.
+		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/components/editing-panel.tsx

@@ -6,14 +6,39 @@ import {
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
 import { __ } from '@wordpress/i18n';
+import useSelectedElements from '../hooks/use-selected-elements';
+import useElementType from '../hooks/use-element-type';
+import { ElementContext } from '../contexts/settings-controls';
+import { Box, Typography } from '@elementor/ui';
 
 export const EditingPanel = () => {
+	const elements = useSelectedElements();
+
+	const selectedElement = elements[ 0 ];
+
+	const elementType = useElementType( selectedElement?.type );
+
+	if ( elements.length !== 1 || ! elementType ) {
+		return null;
+	}
+
+	/* translators: %s: Element type title. */
+	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );
+
 	return (
 		<Panel>
 			<PanelHeader>
-				<PanelHeaderTitle>{ __( 'Editing Panel', 'elementor' ) }</PanelHeaderTitle>
+				<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
 			</PanelHeader>
-			<PanelBody></PanelBody>
+			<PanelBody>
+				<ElementContext element={ selectedElement }>
+					<Box padding={ 2 }>
+						<Typography>
+							Here should be the controls.
+						</Typography>
+					</Box>
+				</ElementContext>
+			</PanelBody>
 		</Panel>
 	);
 };

package/src/contexts/settings-controls.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createContext, ReactNode, useContext } from 'react';
+import { Element } from '../types';
+
+type ContextValue = {
+	element: Element;
+}
+
+const Context = createContext<ContextValue | null>( null );
+
+type Props = {
+	element: Element;
+	children?: ReactNode;
+}
+
+export function ElementContext( { children, element }: Props ) {
+	return (
+		<Context.Provider value={ { element } }>
+			{ children }
+		</Context.Provider>
+	);
+}
+
+export function useElementContext() {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useElementContext must be used within a ElementContextProvider' );
+	}
+
+	return context;
+}

package/src/hooks/use-element-type.ts

@@ -0,0 +1,28 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import getWidgetsCache from '../sync/get-widgets-cache';
+import { ElementType } from '../types';
+
+export default function useElementType( type?: string ) {
+	return useListenTo(
+		commandEndEvent( 'editor/documents/load' ),
+		(): ElementType | null => {
+			if ( ! type ) {
+				return null;
+			}
+
+			const widgetsCache = getWidgetsCache();
+			const elementType = widgetsCache?.[ type ];
+
+			if ( ! elementType?.atomic_controls ) {
+				return null;
+			}
+
+			return {
+				key: type,
+				controls: elementType.atomic_controls,
+				title: elementType.title,
+			};
+		},
+		[ type ]
+	);
+}

package/src/hooks/use-selected-elements.ts

@@ -0,0 +1,12 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import getSelectedElements from '../sync/get-selected-elements';
+
+export default function useSelectedElements() {
+	return useListenTo(
+		[
+			commandEndEvent( 'document/elements/select' ),
+			commandEndEvent( 'document/elements/deselect' ),
+		],
+		() => getSelectedElements()
+	);
+}

package/src/sync/__tests__/should-use-v2-panel.test.ts

@@ -1,5 +1,6 @@
-import { ExtendedWindow } from '../../types';
+import { ExtendedWindow } from '../types';
 import { shouldUseV2Panel } from '../should-use-v2-panel';
+import { mockV1Element } from '../../__tests__/utils';
 
 describe( 'shouldUseV2Panel', () => {
 	const getElements = jest.fn();
@@ -13,15 +14,18 @@ describe( 'shouldUseV2Panel', () => {
 			},
 			widgetsCache: {
 				'v1-heading': {
-					controls: [],
+					controls: {},
+					title: 'V1 Heading',
 				},
 				'v2-heading': {
-					controls: [],
+					controls: {},
 					atomic_controls: [],
+					title: 'V2 Heading',
 				},
 				'v2-container': {
-					controls: [],
+					controls: {},
 					atomic_controls: [],
+					title: 'V2 Container',
 				},
 			},
 		};
@@ -35,9 +39,9 @@ describe( 'shouldUseV2Panel', () => {
 		expect( shouldUseV2Panel() ).toBe( false );
 	} );
 
-	it( 'should return true for v2 widget', () => {
+	it( 'should return true for v2 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockElement( { widgetType: 'v2-heading' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'v2-heading' } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( true );
@@ -45,23 +49,23 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return true for v2 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockElement( { elType: 'v2-container' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { elType: 'v2-container' } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( true );
 	} );
 
-	it( 'should return false for v1 widget', () => {
+	it( 'should return false for v1 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockElement( { widgetType: 'v1-heading' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'v1-heading' } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
 	} );
 
-	it( 'should return false for non-existing widget', () => {
+	it( 'should return false for non-existing element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockElement( { widgetType: 'non-existing' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'non-existing' } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
@@ -70,8 +74,8 @@ describe( 'shouldUseV2Panel', () => {
 	it( 'should return false if there is more than 1 selected element with mixed versions', () => {
 		// Arrange.
 		getElements.mockReturnValue( [
-			mockElement( { widgetType: 'v2-heading' } ),
-			mockElement( { widgetType: 'v1-heading' } ),
+			mockV1Element( { widgetType: 'v2-heading' } ),
+			mockV1Element( { widgetType: 'v1-heading' } ),
 		] );
 
 		// Assert.
@@ -81,23 +85,11 @@ describe( 'shouldUseV2Panel', () => {
 	it( 'should return false if there is more than 1 selected element with same version', () => {
 		// Arrange.
 		getElements.mockReturnValue( [
-			mockElement( { widgetType: 'v2-heading' } ),
-			mockElement( { widgetType: 'v2-container' } ),
+			mockV1Element( { widgetType: 'v2-heading' } ),
+			mockV1Element( { widgetType: 'v2-container' } ),
 		] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
 	} );
 } );
-
-function mockElement<T extends Record<string, unknown>>( settings: T ) {
-	return { model: mockModel( settings ) };
-}
-
-function mockModel<T extends Record<string, unknown>>( settings: T ) {
-	return {
-		get: <K extends keyof T>( key: K ): T[K] => {
-			return settings[ key ];
-		},
-	};
-}

package/src/sync/get-selected-elements.ts

@@ -0,0 +1,21 @@
+import { ExtendedWindow } from './types';
+import { Element } from '../types';
+
+export default function getSelectedElements(): Element[] {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
+
+	return selectedElements.reduce<Element[]>( ( acc, el ) => {
+		const type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );
+
+		if ( type ) {
+			acc.push( {
+				id: el.model.get( 'id' ),
+				type,
+			} );
+		}
+
+		return acc;
+	}, [] );
+}

package/src/sync/get-widgets-cache.ts

@@ -0,0 +1,7 @@
+import { ExtendedWindow } from './types';
+
+export default function getWidgetsCache() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow?.elementor?.widgetsCache || null;
+}

package/src/sync/should-use-v2-panel.ts

@@ -1,28 +1,14 @@
-import { ExtendedWindow } from '../types';
+import getSelectedElements from './get-selected-elements';
+import getWidgetsCache from './get-widgets-cache';
 
 export const shouldUseV2Panel = () => {
-	const selectedElements = getSelectedElements() ?? [ ];
+	const selectedElements = getSelectedElements();
+	const widgetCache = getWidgetsCache();
 
 	if ( selectedElements.length !== 1 ) {
 		return false;
 	}
 
 	// Check if the selected element has atomic controls, meaning it's a V2 element.
-	return !! selectedElements[ 0 ].atomicControls;
+	return !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;
 };
-
-function getSelectedElements() {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	const elements = extendedWindow.elementor?.selection?.getElements?.() ?? [ ];
-
-	return elements.map( ( element ) => {
-		const type = element.model.get( 'widgetType' ) || element.model.get( 'elType' ) || '';
-		const widgetSettings = extendedWindow.elementor?.widgetsCache[ type ];
-
-		return {
-			type,
-			atomicControls: widgetSettings?.atomic_controls || null,
-		};
-	} );
-}

package/src/sync/types.ts

@@ -0,0 +1,26 @@
+export type ExtendedWindow = Window & {
+	elementor?: {
+		selection?: {
+			getElements: () => V1Element[];
+		},
+		widgetsCache?: Record<string, {
+			atomic_controls?: unknown[],
+			controls: object,
+			title: string,
+		}>
+	}
+}
+
+export type V1Element = {
+	model: V1ElementModel<V1ElementModelProps>
+}
+
+export type V1ElementModelProps = {
+	widgetType?: string;
+	elType: string;
+	id: string;
+}
+
+type V1ElementModel<T> = {
+	get: <K extends keyof T>( key: K ) => T[K],
+}

package/src/types.ts

@@ -1,16 +1,10 @@
-export type ExtendedWindow = Window & {
-	elementor: {
-		selection?: {
-			getElements: () => ExtendedElement[];
-		},
-		widgetsCache: Record<string, { atomic_controls?: unknown[], controls: unknown[] }>
-	}
+export type Element = {
+	id: string;
+	type: string;
 }
 
-export type ExtendedElement = {
-	model: ElementModel<{ widgetType?: string, elType?: string }>
-}
-
-type ElementModel<T> = {
-	get: <K extends keyof T>( key: K ) => T[K],
+export type ElementType = {
+	key: string;
+	controls: unknown[];
+	title: string;
 }