@betrue/react-elementor

Nx ReactJS elementor widgets

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.

Plugins

Plugin	Description
@betrue/react-elementor	Generate Reactjs Elementor widgets in Wordpress plugin;

Install

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
 

Usage

Create a new plugin

npx nx g @betrue/react-elementor:plugin my-project
## choose styled component
npm install

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

 npx 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

npx 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 npx nx pkg my-project

Try it using docker

If you have already installed docker and docker-compose you can try the elementor plugin in wordpress

npx 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 and my-project-input widgets to your page.

Add a new widget to an existing plugin:

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.

Maintainer

• https://betrue.fr/