From f359c14a1b1ac634d88787e7d55ae197cfa3c977 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Thu, 13 Jul 2023 17:00:52 +0300 Subject: [PATCH 1/4] Editor Panels --- src/.vuepress/config.js | 2 + src/.vuepress/sidebars/editor-panels.js | 37 ++++++ src/editor-panels/add-new-panel.md | 29 ++++ src/editor-panels/advanced-example.md | 36 +++++ src/editor-panels/index.md | 26 ++++ src/editor-panels/panel-settings.md | 3 + src/editor-panels/panel-structure.md | 3 + src/editor-panels/panels-list.md | 14 ++ src/editor-panels/register-panel.md | 3 + src/editor-panels/simple-example.md | 169 ++++++++++++++++++++++++ 10 files changed, 322 insertions(+) create mode 100644 src/.vuepress/sidebars/editor-panels.js create mode 100644 src/editor-panels/add-new-panel.md create mode 100644 src/editor-panels/advanced-example.md create mode 100644 src/editor-panels/index.md create mode 100644 src/editor-panels/panel-settings.md create mode 100644 src/editor-panels/panel-structure.md create mode 100644 src/editor-panels/panels-list.md create mode 100644 src/editor-panels/register-panel.md create mode 100644 src/editor-panels/simple-example.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index efd02c72..a44bf80a 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -9,6 +9,7 @@ const deprecationsSidebar = require('./sidebars/deprecations'); const dynamicTagsSidebar = require('./sidebars/dynamic-tags'); const editorSidebar = require('./sidebars/editor'); const editorControlsSidebar = require('./sidebars/editor-controls'); +const editorPanelsSidebar = require('./sidebars/editor-panels'); const finderSidebar = require('./sidebars/finder'); const formActionsSidebar = require('./sidebars/form-actions'); const formFieldsSidebar = require('./sidebars/form-fields'); @@ -201,6 +202,7 @@ module.exports = { '/dynamic-tags/': dynamicTagsSidebar, '/editor/': editorSidebar, '/editor-controls/': editorControlsSidebar, + '/editor-panels/': editorPanelsSidebar, '/getting-started/': gettingStartedSidebar, '/hello-elementor-theme/': helloElementorTheme, '/finder/': finderSidebar, diff --git a/src/.vuepress/sidebars/editor-panels.js b/src/.vuepress/sidebars/editor-panels.js new file mode 100644 index 00000000..cd78988d --- /dev/null +++ b/src/.vuepress/sidebars/editor-panels.js @@ -0,0 +1,37 @@ +module.exports = [ + { + title: 'Editor Panels', + collapsable: false, + sidebarDepth: -1, + children: [ + ['', 'Introduction'], + ] + }, + { + title: 'Managing Panels', + collapsable: false, + sidebarDepth: -1, + children: [ + 'add-new-panel', + ] + }, + { + title: 'Creating Panels', + collapsable: false, + sidebarDepth: -1, + children: [ + 'panel-structure', + 'panel-settings', + 'register-panel', + ] + }, + { + title: 'Examples', + collapsable: false, + sidebarDepth: -1, + children: [ + 'simple-example', + 'advanced-example', + ] + }, +]; diff --git a/src/editor-panels/add-new-panel.md b/src/editor-panels/add-new-panel.md new file mode 100644 index 00000000..67b3c568 --- /dev/null +++ b/src/editor-panels/add-new-panel.md @@ -0,0 +1,29 @@ +# Add New Panel + + + +Elementor offers many built-in panels out of the box, but it also allows external developers to register new panels. + +## Hooks + +The editor is a JS framework. To register new panels we need to register & enqueue the JS files that handle the panels registration prosses. + +The `elementor/editor/v2/scripts/register` and `elementor/editor/v2/scripts/enqueue` action hooks register and enqueues the scripts that handle the Elementor Editor compenents. + +It's important to note that the `elementor-packages-editor-panels` is a dependency script for panel components. + +## Registering Panels + +To register new panel use the following code: + +```php +function register_new_editor_panels() { + wp_register_script( 'my-plugin', plugins_url( 'assets/js/editor-panel.js', __FILE__ ), [ 'elementor-packages-editor-panels' ], null, true ); +} +add_action( 'elementor/editor/v2/scripts/register', 'register_new_editor_panels' ); +​ +function enqueue_new_editor_panels() { + wp_enqueue_script( 'my-plugin' ); +} +add_action( 'elementor/editor/v2/scripts/enqueue', 'enqueue_new_editor_panels' ); +``` diff --git a/src/editor-panels/advanced-example.md b/src/editor-panels/advanced-example.md new file mode 100644 index 00000000..f6dc3a5a --- /dev/null +++ b/src/editor-panels/advanced-example.md @@ -0,0 +1,36 @@ +# Advanced Example + + + +[intro] (No webpack) + +## Folder Structure + +The addon will have the following folder structure: + +``` +elementor-editor-panel/ +| +├─ assets/ +| └─ js/ +| ├─ components/ +| | ├─ panel-button.jsx +| | └─ panel.jsx +| | +| ├─ init.js +| └─ panel.js +| +└─ elementor-editor-panel.php +``` + +## Plugin Files + +**elementor-editor-panel.php** + +```php +``` + +**assets/js/editor-panel.php** + +```js +``` diff --git a/src/editor-panels/index.md b/src/editor-panels/index.md new file mode 100644 index 00000000..da541c4c --- /dev/null +++ b/src/editor-panels/index.md @@ -0,0 +1,26 @@ +# Elementor Editor Panels + + + +The editor panels are part of the [Elementor Editor](./../editor/). The panel is an interface that allows the user to change certain settings. The editor panels are extendable and 3rd party developers can create new custom panels in the editor. + +## Managing Panels + +External developers can register new panels. Learn more how to do that: + +* [Add New Panel](./add-new-panel/) + +## Creating Panels + +* [Panel Structure](./panel-structure/) +* [Panel Actions](./panel-actions/) +* [Panel Status](./panel-status/) +* [Panel Create](./panel-settings/) +* [Panel Registration](./panel-settings/) + +## Code Examples + +Check out how easy it is to create Elementor editor panels: + +* [Simple Example](./simple-example/) +* [Advanced Example](./advanced-example/) diff --git a/src/editor-panels/panel-settings.md b/src/editor-panels/panel-settings.md new file mode 100644 index 00000000..3cd8d3f6 --- /dev/null +++ b/src/editor-panels/panel-settings.md @@ -0,0 +1,3 @@ +# Panel Settings + + diff --git a/src/editor-panels/panel-structure.md b/src/editor-panels/panel-structure.md new file mode 100644 index 00000000..e893cc94 --- /dev/null +++ b/src/editor-panels/panel-structure.md @@ -0,0 +1,3 @@ +# Panel Structure + + diff --git a/src/editor-panels/panels-list.md b/src/editor-panels/panels-list.md new file mode 100644 index 00000000..4e5502fa --- /dev/null +++ b/src/editor-panels/panels-list.md @@ -0,0 +1,14 @@ +# Existing Editor Panels + + + + + + + +* [Menu Panel](./menu-panel/) +* [Site Settings Panel](./site-settings-panel/) +* [User Preferences Panel](./user-preferences-panel/) +* [Page Settings Panel](./page-settings-panel/) +* [History Panel](./history-panel/) +* [Widget Panel](./widgets-panel/) diff --git a/src/editor-panels/register-panel.md b/src/editor-panels/register-panel.md new file mode 100644 index 00000000..cb6ddcb4 --- /dev/null +++ b/src/editor-panels/register-panel.md @@ -0,0 +1,3 @@ +# Register Panel + + diff --git a/src/editor-panels/simple-example.md b/src/editor-panels/simple-example.md new file mode 100644 index 00000000..508a6a2d --- /dev/null +++ b/src/editor-panels/simple-example.md @@ -0,0 +1,169 @@ +# Simple Example + + + +[intro] (with webpack) + +## Folder Structure + +The addon will have the following folder structure: + +``` +elementor-editor-panel/ +| +├─ assets/ +| └─ js/ +| ├─ components/ +| | ├─ my-panel-1.jsx +| | └─ my-panel-2.jsx +| | +| ├─ init.js +| └─ panels.js +| +├─ elementor-editor-panel.php +├─ package.json +└─ webpack.config.js +``` + +## Plugin Files +​ +Install the required packages using your package manager: +​ +```bash +npm install @elementor/editor-panels +``` + +## Plugin Files + +**elementor-editor-panel.php** + +```php + + + + {/* Panel 1 title */} + + + + + {/* Panel 1 content */} + + + ); +} +``` + +**components/my-panel-2.jsx** + +```jsx +import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels'; +​ +export default function MyPanel2() { + return ( + + + + {/* Panel 2 title */} + + + + + {/* Panel 2 content */} + + + ); +} +``` From 8bdc11e32169258747af4d537a44a642c34f3251 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev <92088692+rami-elementor@users.noreply.github.com> Date: Thu, 13 Jul 2023 17:05:50 +0300 Subject: [PATCH 2/4] Typo --- src/getting-started/first-addon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/getting-started/first-addon.md b/src/getting-started/first-addon.md index 145b0196..4d41c958 100644 --- a/src/getting-started/first-addon.md +++ b/src/getting-started/first-addon.md @@ -197,4 +197,4 @@ class Elementor_Hello_World_Widget_2 extends \Elementor\Widget_Base { Now that you’ve seen how easy it is to create your first Elementor addon, it’s time to take advantage of the growing Elementor market and start working on your own cool ideas. -Continue reading more about [Building Advanced Addons](./../addons/) with best practices, codeing standards and even more [code examples](./../addons/addon-example/). +Continue reading more about [Building Advanced Addons](./../addons/) with best practices, coding standards and even more [code examples](./../addons/addon-example/). From 383ed2a750cbf0848c0e1a26ff54d996fdf0b9fc Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Thu, 13 Jul 2023 17:17:21 +0300 Subject: [PATCH 3/4] update --- src/.vuepress/sidebars/editor-panels.js | 6 ++-- src/editor-panels/advanced-example.md | 29 ++++++++++++++----- src/editor-panels/index.md | 4 +-- .../{panel-settings.md => panel-actions.md} | 2 +- .../{register-panel.md => panel-create.md} | 2 +- src/editor-panels/panel-register.md | 3 ++ src/editor-panels/panel-status.md | 3 ++ src/editor-panels/panels-list.md | 14 --------- src/editor-panels/simple-example.md | 24 +++++++-------- 9 files changed, 48 insertions(+), 39 deletions(-) rename src/editor-panels/{panel-settings.md => panel-actions.md} (87%) rename src/editor-panels/{register-panel.md => panel-create.md} (87%) create mode 100644 src/editor-panels/panel-register.md create mode 100644 src/editor-panels/panel-status.md delete mode 100644 src/editor-panels/panels-list.md diff --git a/src/.vuepress/sidebars/editor-panels.js b/src/.vuepress/sidebars/editor-panels.js index cd78988d..3d631b24 100644 --- a/src/.vuepress/sidebars/editor-panels.js +++ b/src/.vuepress/sidebars/editor-panels.js @@ -21,8 +21,10 @@ module.exports = [ sidebarDepth: -1, children: [ 'panel-structure', - 'panel-settings', - 'register-panel', + 'panel-actions', + 'panel-status', + 'panel-create', + 'panel-register', ] }, { diff --git a/src/editor-panels/advanced-example.md b/src/editor-panels/advanced-example.md index f6dc3a5a..7c47ca48 100644 --- a/src/editor-panels/advanced-example.md +++ b/src/editor-panels/advanced-example.md @@ -9,28 +9,43 @@ The addon will have the following folder structure: ``` -elementor-editor-panel/ +elementor-editor-panels/ | ├─ assets/ | └─ js/ | ├─ components/ -| | ├─ panel-button.jsx -| | └─ panel.jsx +| | ├─ my-panel-1.jsx +| | └─ my-panel-2.jsx | | | ├─ init.js -| └─ panel.js +| └─ panels.js | -└─ elementor-editor-panel.php +└─ elementor-editor-panels.php ``` ## Plugin Files -**elementor-editor-panel.php** +**elementor-editor-panels.php** ```php ``` -**assets/js/editor-panel.php** +**assets/js/init.php** ```js ``` + +**assets/js/panels.php** + +```js +``` + +**assets/js/components/my-panel-1.jsx** + +```jsx +``` + +**assets/js/components/my-panel-2.jsx** + +```jsx +``` diff --git a/src/editor-panels/index.md b/src/editor-panels/index.md index da541c4c..c913fa88 100644 --- a/src/editor-panels/index.md +++ b/src/editor-panels/index.md @@ -15,8 +15,8 @@ External developers can register new panels. Learn more how to do that: * [Panel Structure](./panel-structure/) * [Panel Actions](./panel-actions/) * [Panel Status](./panel-status/) -* [Panel Create](./panel-settings/) -* [Panel Registration](./panel-settings/) +* [Panel Create](./panel-create/) +* [Panel Register](./panel-register/) ## Code Examples diff --git a/src/editor-panels/panel-settings.md b/src/editor-panels/panel-actions.md similarity index 87% rename from src/editor-panels/panel-settings.md rename to src/editor-panels/panel-actions.md index 3cd8d3f6..2910e247 100644 --- a/src/editor-panels/panel-settings.md +++ b/src/editor-panels/panel-actions.md @@ -1,3 +1,3 @@ -# Panel Settings +# Panel Actions diff --git a/src/editor-panels/register-panel.md b/src/editor-panels/panel-create.md similarity index 87% rename from src/editor-panels/register-panel.md rename to src/editor-panels/panel-create.md index cb6ddcb4..e9b98729 100644 --- a/src/editor-panels/register-panel.md +++ b/src/editor-panels/panel-create.md @@ -1,3 +1,3 @@ -# Register Panel +# Panel Create diff --git a/src/editor-panels/panel-register.md b/src/editor-panels/panel-register.md new file mode 100644 index 00000000..cc3511c1 --- /dev/null +++ b/src/editor-panels/panel-register.md @@ -0,0 +1,3 @@ +# Panel Register + + diff --git a/src/editor-panels/panel-status.md b/src/editor-panels/panel-status.md new file mode 100644 index 00000000..537bfef2 --- /dev/null +++ b/src/editor-panels/panel-status.md @@ -0,0 +1,3 @@ +# Panel Status + + diff --git a/src/editor-panels/panels-list.md b/src/editor-panels/panels-list.md deleted file mode 100644 index 4e5502fa..00000000 --- a/src/editor-panels/panels-list.md +++ /dev/null @@ -1,14 +0,0 @@ -# Existing Editor Panels - - - - - - - -* [Menu Panel](./menu-panel/) -* [Site Settings Panel](./site-settings-panel/) -* [User Preferences Panel](./user-preferences-panel/) -* [Page Settings Panel](./page-settings-panel/) -* [History Panel](./history-panel/) -* [Widget Panel](./widgets-panel/) diff --git a/src/editor-panels/simple-example.md b/src/editor-panels/simple-example.md index 508a6a2d..9e512325 100644 --- a/src/editor-panels/simple-example.md +++ b/src/editor-panels/simple-example.md @@ -9,7 +9,7 @@ The addon will have the following folder structure: ``` -elementor-editor-panel/ +elementor-editor-panels/ | ├─ assets/ | └─ js/ @@ -20,14 +20,14 @@ elementor-editor-panel/ | ├─ init.js | └─ panels.js | -├─ elementor-editor-panel.php +├─ elementor-editor-panels.php ├─ package.json └─ webpack.config.js ``` -## Plugin Files +## Install Dependencies ​ -Install the required packages using your package manager: +Install the required dependencies using your package manager: ​ ```bash npm install @elementor/editor-panels @@ -35,7 +35,7 @@ npm install @elementor/editor-panels ## Plugin Files -**elementor-editor-panel.php** +**elementor-editor-panels.php** ```php Date: Tue, 18 Jul 2023 16:00:50 +0300 Subject: [PATCH 4/4] Update Editor Panels --- src/editor-panels/add-new-panel.md | 29 +++++++------ src/editor-panels/advanced-example.md | 10 ++++- src/editor-panels/index.md | 2 +- src/editor-panels/panel-actions.md | 33 +++++++++++++++ src/editor-panels/panel-status.md | 36 ++++++++++++++++ src/editor-panels/panel-structure.md | 61 +++++++++++++++++++++++++++ src/editor-panels/simple-example.md | 48 ++++++++++++--------- 7 files changed, 182 insertions(+), 37 deletions(-) diff --git a/src/editor-panels/add-new-panel.md b/src/editor-panels/add-new-panel.md index 67b3c568..e27e12bf 100644 --- a/src/editor-panels/add-new-panel.md +++ b/src/editor-panels/add-new-panel.md @@ -2,28 +2,29 @@ -Elementor offers many built-in panels out of the box, but it also allows external developers to register new panels. +Elementor offers many built-in editor panels out of the box, but it also allows external developers to register new editor panels. ## Hooks -The editor is a JS framework. To register new panels we need to register & enqueue the JS files that handle the panels registration prosses. +To add new editor panels we need to enqueue the JS files that handle the panels registration process. The `elementor/editor/v2/scripts/enqueue` action hook enqueues the scripts that handle the Elementor Editor components. Please note that `elementor-packages-editor-panels` is a dependency script for panel components. -The `elementor/editor/v2/scripts/register` and `elementor/editor/v2/scripts/enqueue` action hooks register and enqueues the scripts that handle the Elementor Editor compenents. +## Panels Script -It's important to note that the `elementor-packages-editor-panels` is a dependency script for panel components. - -## Registering Panels - -To register new panel use the following code: +To enqueue the script that adds new editor panels use the following code: ```php -function register_new_editor_panels() { - wp_register_script( 'my-plugin', plugins_url( 'assets/js/editor-panel.js', __FILE__ ), [ 'elementor-packages-editor-panels' ], null, true ); -} -add_action( 'elementor/editor/v2/scripts/register', 'register_new_editor_panels' ); -​ function enqueue_new_editor_panels() { - wp_enqueue_script( 'my-plugin' ); + + wp_enqueue_script( + 'my-plugin', + plugins_url( 'assets/js/my-plugin-editor-panel.js', __FILE__ ), + [ 'elementor-packages-editor-panels' ], + null, + true + ); + } add_action( 'elementor/editor/v2/scripts/enqueue', 'enqueue_new_editor_panels' ); ``` + +For more information about the [panel structure](./panel-structure.md), read about the widget class structure. diff --git a/src/editor-panels/advanced-example.md b/src/editor-panels/advanced-example.md index 7c47ca48..d444afb7 100644 --- a/src/editor-panels/advanced-example.md +++ b/src/editor-panels/advanced-example.md @@ -17,6 +17,7 @@ elementor-editor-panels/ | | ├─ my-panel-1.jsx | | └─ my-panel-2.jsx | | +| ├─ index.js | ├─ init.js | └─ panels.js | @@ -30,12 +31,17 @@ elementor-editor-panels/ ```php ``` -**assets/js/init.php** +**assets/js/index.js** ```js ``` -**assets/js/panels.php** +**assets/js/init.js** + +```js +``` + +**assets/js/panels.js** ```js ``` diff --git a/src/editor-panels/index.md b/src/editor-panels/index.md index c913fa88..b42a2a45 100644 --- a/src/editor-panels/index.md +++ b/src/editor-panels/index.md @@ -6,7 +6,7 @@ The editor panels are part of the [Elementor Editor](./../editor/). The panel is ## Managing Panels -External developers can register new panels. Learn more how to do that: +External developers can enqueue scripts that register new editor panels: * [Add New Panel](./add-new-panel/) diff --git a/src/editor-panels/panel-actions.md b/src/editor-panels/panel-actions.md index 2910e247..60ccc507 100644 --- a/src/editor-panels/panel-actions.md +++ b/src/editor-panels/panel-actions.md @@ -1,3 +1,36 @@ # Panel Actions + +When registering a new panel, you get a React hook for panel-related actions: + +**panel.js** + +```js +import { createPanel, registerPanel } from '@elementor/editor-panels'; +import MyPanel from './components/my-panel'; + +export const { usePanelActions } = createPanel( { + id: 'my-panel', + component: MyPanel, +} ); +``` + +**components/my-app.jsx** + +```jsx +import { usePanelActions } from '../panel'; + +export default function MyApp() { + const { open, close } = usePanelActions(); + + return ( + <> + + + + ); +} +``` + +The above buttons will open and close the specific panel that we created in `panel.js`. diff --git a/src/editor-panels/panel-status.md b/src/editor-panels/panel-status.md index 537bfef2..747130b2 100644 --- a/src/editor-panels/panel-status.md +++ b/src/editor-panels/panel-status.md @@ -1,3 +1,39 @@ # Panel Status + +When registering a new panel, you get a React hook for the panel status: + +**panel.js** + +```js +import { createPanel, registerPanel } from '@elementor/editor-panels'; +import MyPanel from './components/my-panel'; + +export const { usePanelStatus } = createPanel( { + id: 'my-panel', + component: MyPanel, +} ); +``` + +**components/my-app.jsx** + +```jsx +import { usePanelStatus } from '../panel'; + +export default function MyApp() { + const { isOpen, isBlocked } = usePanelStatus(); + + return ( + <> +

Panel is { isOpen ? 'open' : 'closed' }

+

Panel is { isBlocked ? 'blocked' : 'not blocked' }

+ + ); +} +``` + +This hook will return the following values: + +- `isOpen` - `true` if the panel is open, `false` otherwise. +- `isBlocked` - `true` if the panel can be interacted with, `false` otherwise. diff --git a/src/editor-panels/panel-structure.md b/src/editor-panels/panel-structure.md index e893cc94..86a907ab 100644 --- a/src/editor-panels/panel-structure.md +++ b/src/editor-panels/panel-structure.md @@ -1,3 +1,64 @@ # Panel Structure + +Elementor Editor panels are built with components. You can import these panel components from the `@elementor/editor-panels` at build time or use the `window.elementor-v2.editor-panels` global object at run time. + +## Panel Components + +Elementor uses the folowing panel components: + +- `` - wrapper component for editor panels. +- `` - wrapper component for editor panel header. +- `` - wrapper component for the panel header text. +- `` - wrapper component for the pael content. + +::: tip Note +You don't _have_ to use Elementor's components, but we _highly_ recommend using them in order to keep consistency across all the Editor panels and have better UX for the users. +::: + +## Usage + +### Build Time + +```jsx +import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels'; + +export default function MyPanel() { + return ( + + + + {/* Panel title */} + + + + + {/* Panel content */} + + + ); +} +``` + +### Run Time + +```jsx +const { Panel, PanelHeader, PanelHeaderTitle, PanelBody } = window.elementor-v2.editorPanels; + +export default function MyPanel() { + return ( + + + + {/* Panel title */} + + + + + {/* Panel content */} + + + ); +} +``` diff --git a/src/editor-panels/simple-example.md b/src/editor-panels/simple-example.md index 9e512325..b58143bf 100644 --- a/src/editor-panels/simple-example.md +++ b/src/editor-panels/simple-example.md @@ -17,6 +17,7 @@ elementor-editor-panels/ | | ├─ my-panel-1.jsx | | └─ my-panel-2.jsx | | +| ├─ index.js | ├─ init.js | └─ panels.js | @@ -26,9 +27,9 @@ elementor-editor-panels/ ``` ## Install Dependencies -​ + Install the required dependencies using your package manager: -​ + ```bash npm install @elementor/editor-panels ``` @@ -57,28 +58,27 @@ if ( ! defined( 'ABSPATH' ) ) { } /** - * Register oEmbed Widget. + * Register new editor panels. * - * Include widget file and register widget class. + * Enqueue the script that registers new editor panels. * * @since 1.0.0 - * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager. * @return void */ function enqueue_new_editor_panels() { - wp_enqueue_script( 'elementor-editor-panels', plugins_url( 'assets/js/init.js', __FILE__ ), [ 'elementor-packages-editor-panels' ], null, true ); + wp_enqueue_script( 'elementor-editor-panels', plugins_url( 'assets/js/index.js', __FILE__ ), [ 'elementor-packages-editor-panels' ], null, true ); } add_action( 'elementor/editor/v2/scripts/enqueue', 'enqueue_new_editor_panels' ); ``` **package.json** -```js +```json { "name": "elementor-editor-panels", "dependencies": { // ... - "@elementor/editor-panels": "latest", + "@elementor/editor-panels": "latest" } } ``` @@ -94,41 +94,49 @@ module.exports = { }; ``` +**assets/js/index.js** + +```js +import init from './init'; + +init(); +``` + **assets/js/init.js** -​ + ```js import { registerPanel } from '@elementor/editor-panels'; -import { panel1, panel2 } from './panel'; -​ -function init() { +import { panel1, panel2 } from './panels'; + +export default function init() { registerPanel( panel1.panel ); registerPanel( panel2.panel ); } ``` -​ + **assets/js/panels.js** -​ + ```js import { createPanel, registerPanel } from '@elementor/editor-panels'; import MyPanel1 from './components/my-panel-1'; import MyPanel2 from './components/my-panel-2'; -​ + export const panel1 = createPanel( { id: 'my-panel-1', - component: MyPanel1 + component: MyPanel1, } ); export const panel2 = createPanel( { id: 'my-panel-2', - component: MyPanel2 + component: MyPanel2, } ); ``` -​ + **assets/js/components/my-panel-1.jsx** ```jsx import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels'; -​ + export default function MyPanel1() { return ( @@ -150,7 +158,7 @@ export default function MyPanel1() { ```jsx import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels'; -​ + export default function MyPanel2() { return (