Feature - Divi builder compatibility

dist/divibuilder.min.js.LICENSE.txt

@@ -0,0 +1,19 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

includes/class-everest-forms.php

@@ -180,6 +180,7 @@ private function init_hooks() {
 		add_action( 'init', array( $this, 'form_fields' ), 0 );
 		add_action( 'init', array( 'EVF_Shortcodes', 'init' ), 0 );
 		add_action( 'switch_blog', array( $this, 'wpdb_table_fix' ), 0 );
+		add_action( 'et_builder_ready', array( $this, 'everest_form_register_divi_builder' ) );
 	}
 
 	/**
@@ -486,4 +487,17 @@ public function wpdb_table_fix() {
 	public function form_fields() {
 		return EVF_Fields::instance();
 	}
+
+	/**
+	 * Function to check whether the divi module is loaded or not.
+	 *
+	 * @since xx.xx.xx
+	 */
+	public function everest_form_register_divi_builder() {
+		if ( ! class_exists( 'ET_Builder_Module' ) ) {
+			return;
+		}
+
+		include_once EVF_ABSPATH . 'includes/divibuilder/class-evf-divi-builder.php';
+	}
 }

includes/divibuilder/class-evf-divi-builder.php

@@ -0,0 +1,164 @@
+<?php
+/**
+ * Everest Forms Divi Module File.
+ *
+ * @package EverestForms\Divi
+ *
+ * @since xx.xx.xx
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Everest Forms Divi module class.
+ *
+ * @since xx.xx.xx
+ */
+class EVF_Divi_Builder extends \ET_Builder_Module {
+	/**
+	 * Module slug.
+	 *
+	 * @since xx.xx.xx
+	 * @var string
+	 */
+	public $slug = 'everest_forms_divi_builder';
+
+	/**
+	 * Whether module support visual builder. e.g `on` or `off`.
+	 *
+	 * @since xx.xx.xx
+	 * @var string
+	 */
+	public $vb_support = 'on';
+
+	/**
+	 * Divi builder init function
+	 *
+	 * @since xx.xx.xx
+	 */
+	public function init() {
+		$this->name = esc_html__( 'Everest Forms', 'everest-forms' );
+
+		$this->settings_modal_toggles = array(
+			'general' => array(
+				'toggles' => array(
+					'main_content' => esc_html__( 'Forms', 'everest-forms' ),
+				),
+			),
+		);
+
+		add_action( 'wp_enqueue_scripts', array( $this, 'load_divi_builder_scripts' ) );
+	}
+
+	/**
+	 * Displays the Module setting fields.
+	 *
+	 * @since xx.xx.xx
+	 *
+	 * @return array $fields Array of settings fields.
+	 */
+	public function get_fields() {
+
+		$forms        = evf_get_all_forms();
+		$default_form = array( esc_html__( 'Select Form', 'everest-forms' ) );
+		$forms        = $default_form + $forms;
+
+		$fields = array(
+			'form_id'    => array(
+				'label'           => esc_html__( 'Select Form', 'everest-forms' ),
+				'type'            => 'select',
+				'option_category' => 'basic_option',
+				'toggle_slug'     => 'main_content',
+				'options'         => $forms,
+				'default'         => '5',
+			),
+			'show_title' => array(
+				'label'           => esc_html__( 'Show Title', 'everest-forms' ),
+				'type'            => 'yes_no_button',
+				'option_category' => 'basic_option',
+				'toggle_slug'     => 'main_content',
+				'options'         => array(
+					'off' => esc_html__( 'Off', 'everest-forms' ),
+					'on'  => esc_html__( 'On', 'everest-forms' ),
+				),
+			),
+			'show_desc'  => array(
+				'label'           => esc_html__( 'Show Description', 'everest-forms' ),
+				'option_category' => 'basic_option',
+				'type'            => 'yes_no_button',
+				'toggle_slug'     => 'main_content',
+				'options'         => array(
+					'off' => esc_html__( 'Off', 'everest-forms' ),
+					'on'  => esc_html__( 'On', 'everest-forms' ),
+				),
+			),
+		);
+		return $fields;
+	}
+
+	/**
+	 * Advanced Fields Settings.
+	 *
+	 * @since xx.xx.xx
+	 */
+	public function get_advanced_fields_config() {
+		$advanced_fields = array(
+			'link_options' => false,
+			'text'         => false,
+			'borders'      => false,
+			'box_shadow'   => false,
+			'button'       => false,
+			'filters'      => false,
+			'fonts'        => false,
+		);
+
+		return $advanced_fields;
+	}
+
+	/**
+	 * Render the module on frontend.
+	 *
+	 * @since xx.xx.xx
+	 *
+	 * @param  array  $unprocessed_props Array of unprocessed Properties.
+	 * @param  string $content Contents being processed from the prop.
+	 * @param  string $render_slug The slug of rendering module for rendering output.
+	 *
+	 * @return string HTMl content for rendering.
+	 */
+	public function render( $unprocessed_props, $content, $render_slug ) {
+		$form_id = isset( $this->props['form_id'] ) ? $this->props['form_id'] : '0';
+
+		if ( '0' === $form_id ) {
+			$empty_output  = sprintf( "<div class='everest-forms-divi-empty-form' style='text-align:center'>" );
+			$empty_output .= sprintf( "<img src='%s'/>", plugin_dir_url( EVF_PLUGIN_FILE ) . 'assets/images/icons/Everest-forms-Logo.png' );
+			$empty_output .= sprintf( '</div>' );
+			return $empty_output;
+		}
+
+		$divi_shortcode = sprintf( "[everest_form id='%s']", $form_id );
+		$output         = sprintf( "<div class = '%s'>", 'everest-forms-divi-builder' );
+		$output        .= do_shortcode( $divi_shortcode );
+		$output        .= sprintf( '</div>' );
+
+		return $output;
+	}
+
+	/**
+	 * Function to enqueue the divi builder JS.
+	 *
+	 * @since xx.xx.xx
+	 */
+	public function load_divi_builder_scripts() {
+		wp_enqueue_script( 'everest-forms-divi-builder' );
+		$enqueue_script = array( 'wp-element', 'react', 'react-dom' );
+		wp_register_script(
+			'everest-forms-divi-builder',
+			evf()->plugin_url() . '/dist/divibuilder.min.js',
+			$enqueue_script,
+			evf()->version,
+			true
+		);
+	}
+}
+new EVF_Divi_Builder();

src/divibuilder/App.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import DiviBuilder from "./DiviBuilder";
+
+const App = () => {
+	return (
+		<DiviBuilder />
+	);
+};
+
+export default App;

src/divibuilder/DiviBuilder.jsx

@@ -0,0 +1,14 @@
+// External Dependencies
+import React, { Component} from 'react';
+
+class DiviBuilder extends Component {
+
+  static slug = 'everest_forms_divi_builder';
+  render() {
+    return (
+		<div className='everest-forms-divi-builder'></div>
+    );
+  }
+}
+
+export default DiviBuilder;

src/divibuilder/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+(function () {
+	const container = document.getElementById("everest-forms-divi-builder");
+	if (!container) return;
+
+	const root = ReactDOM.createRoot(container);
+	if (root) {
+		root.render(<App />);
+	}
+})();

webpack.config.js

@@ -17,6 +17,10 @@ const webpackConfig = {
 			process.cwd(),
 			'./src/blocks/index.js',
 		),
+		"divibuilder": resolve(
+			process.cwd(),
+			'./src/divibuilder/index.jsx',
+		),
 	},
 	output: {
 		path: resolve(process.cwd(), 'dist'),
@@ -27,7 +31,7 @@ const webpackConfig = {
 	module: {
 		rules: [
 			{
-				test: /.js$/,
+				test: /\.(js|jsx|ts|tsx)$/,
 				loader: "babel-loader",
 				exclude: /node_modules/
 			},
@@ -65,6 +69,9 @@ const webpackConfig = {
 		"@wordpress/server-side-render": ["wp", "serverSideRender"],
 		react: ["React"],
 	},
+	resolve: {
+		extensions: ['.js', '.jsx', '.ts', '.tsx'],
+	},
 };
 
 if (webpackConfig.mode !== "production") {