Nx plugin to generate Wordpress plugin that enrich Elementor with ReactJS widgets. All widget are wrapped in web component that will act as a proxy between elementor and react. all web components uses shadow dom to prevent css overload.
State between component is maintained using Redux.
Plugin | Description |
---|---|
@betrue/react-elementor |
Generate Reactjs Elementor widgets in Wordpress plugin; |
Create a new nx workspace (if doesn't exist)
npx create-nx-workspace@latest my-workspace
Install @betrue/react-elementor
cd my-workspace
npm install -D @betrue/react-elementor
Create a new plugin
nx g @betrue/react-elementor:plugin my-project
this generates starting code base made up of two react components (input from and display title) wrapped into elementor widgets.
if you already have and Wordpress instance with elementor installed, you juste need to build the wordpress plugin
nx pkg my-project
Zip and upload using Wordpress plugin management the content of dist/element/my-project
. that's all you can now try to use theses widgets into elementor :)
You can also serve the app to see the generated web component in action on http://localhost:4200
nx serve my-project
On build is important to pass the release version to make force resources update and reset cache
NX_RELEASE_VERSION=xxxx plugin my-project
If you have already installed docker and docker-compose you can try the elementor plugin in wordpress
nx pkg my-project // to package the plugin into dist/ `
start docker-compose
docker-compose -f apps/my-project/src/docker-compose.yml up -d
- open your browser on
http://localhost:8000
- Login into Wordpress admin and
install and enable elementor
- Enable your custom
elementor plugin
plugin. - Create a
new page
and choose edit with elementor. - Search and add
my-project-title
andmy-project-input
widgets to your page.
nx g @betrue/react-elementor:addWidget --name my-widget --plugin my-plugin --attributes attr1,attr2
Option | Description |
---|---|
name |
(Required) name of the Reactjs elementor widget |
plugin |
(Required) The name of the Wordpress plugin in which the widget will be generated. |
attributes |
List of attribute that are customizable in elementor |
author |
Name of who makes this plugin. |
tags |
Add tags to the project (used for linting). |
widgetDescription |
Widget description that appear in Wordpress plugin view. |
version |
Wordpress plugin version. |