@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 Wordpress plugin that will wrap all elementor widgets nx g @betrue/react-elementor:plugin my-project

You can now serve the app to see the generated web component in action on http://localhost:4200

nx serve my-project

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

nx elementor my-project // to build the plugin 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 elementor plugin

Add a new widget to an existing plugin

@betrue/nx-reactjs-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
directory	A directory where the project is placed (sub-directory in lib).
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.

Maintainers

• Selim Bensenouci