Added WordPress files generation to build process - really fast and dirty coding.

build.js

@@ -5,9 +5,10 @@ import config from 'config';
 import Generator from "yeoman-generator";
 import yeoman from 'yeoman-environment';
 import {buildHubspot} from "./platforms/hubspot/hubspot-adapter.js";
+import {getConfigs} from "./helpers.js";
+import {buildWordPress} from "./platforms/wordpress/wordpress-adapter.js";
 
-const isDev = process.env.NODE_ENV === 'development' || (config.has('isDev') && config.get('isDev')); // Check README file in case you get "missing files" error.
+const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
-const modulePath = isDev ? '' : 'node_modules/block-dev-tool/';
 
 const blockName = config.has('blockName') ? config.get('blockName') : 'development';
 
@@ -27,11 +28,19 @@ class buildGenerator extends Generator {
   writing() {
     new Promise((resolve => {
       if (['WordPress', 'PHP'].includes(this.data.platform)) {
-        const backPath = modulePath ? modulePath.substr(-1).split('/').map(() => '..').join('/') : '';
+        const backPath = modulesPath ? modulesPath.substr(-1).split('/').map(() => '..').join('/') : '';
-        exec(`cd ${modulePath}platforms/php && composer install && php build.php '${blockName}' '${backPath}'`, function (error, stdout) {
+
-          console.log(stdout);
+        return new Promise((resolve) => {
-          resolve();
+          exec(`cd ${modulesPath}platforms/php && composer install && php build.php '${blockName}' '${backPath}' '${projectPath}'`, function (error, stdout) {
+            console.log(stdout);
+            resolve();
+          });
+        }).then(() => {
+          if (this.data.platform === 'WordPress') {
+            return buildWordPress();
+          }
         });
+
       } else if (this.data.platform === 'Hubspot Email') {
         buildHubspot(blockName)
           .then(() => {

helpers.js

@@ -0,0 +1,94 @@
+import path from 'path';
+import config from 'config';
+import {fileURLToPath} from 'url';
+import memFs from 'mem-fs';
+import editor from 'mem-fs-editor';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export function getConfigs() {
+  const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
+  const developmentBlockName = process.env.BLOCK_NAME;
+
+  return {
+    isDev,
+    developmentBlockName,
+    modulesPath: isDev ? '' : 'node_modules/block-dev-tool',
+    projectPath: isDev ? path.join('blocks', developmentBlockName) : '',
+  };
+}
+
+import fsExtra from "fs-extra";
+
+export async function readJSONFile(jsonFile) {
+  let data = {};
+
+  try {
+    data = await fsExtra.readJson(jsonFile);
+  } catch (e) {
+    return {
+      error: true, errorMessage: getErrorHtml("JSON Syntax error. Please make sure the dataFile is valid.", e),
+    };
+  }
+
+  return data;
+}
+
+function getErrorHtml(message = '', errorMessage = '') {
+  return `<div style="padding: 10px 15px; font-family: Arial, sans-serif">
+    <p>${message}</p>
+    <pre style="padding: 10px 15px; background-color: #ffd0d0; border: 1px solid red;">${errorMessage}</pre>
+  </div>`;
+}
+
+export async function getBlockConfigs(jsonFileName = 'default',
+                                      {includeConfigs, projectPath, modulesPath, dataFiles} = {}) {
+  let data = await readJSONFile(path.join(projectPath, 'data', `${jsonFileName}.json`));
+  if (data.error) {
+    return data;
+  }
+
+  if (includeConfigs) {
+    Object.assign(data, {
+      config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
+        {
+          projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
+            return {
+              name, active: jsonFileName === name,
+            };
+          }), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
+        })
+    });
+  }
+
+  return data;
+}
+
+export function getBlockName(name = '') {
+  if (name.startsWith('@')) {
+    name = name.substring(1);
+  }
+
+  const arr = name.split('/');
+
+  return {
+    project: arr[0],
+    name: arr[1],
+  };
+}
+
+export async function createFiles(data, files = [], {pathDist, generatorsPath}) {
+  generatorsPath = generatorsPath ?? path.join(__dirname, 'generators/block/templates');
+
+  const store = memFs.create();
+  const filesystem = editor.create(store);
+  for (let file of files) {
+    const from = typeof file !== 'string' ? `${generatorsPath}/${file.from}` : `${generatorsPath}/${file}`;
+    const to = typeof file !== 'string' ? `${pathDist}/${file.to}` : `${pathDist}/${file}`;
+
+    await filesystem.copyTplAsync(from, to, data);
+  }
+
+  return filesystem.commit(); // Promise
+}

package.json

@@ -10,7 +10,7 @@
 		"start": "component-dev",
 		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.js",
 		"build": "rollup --config rollup.config.js",
-		"build-platform": "NODE_ENV=development node ./build.js",
+		"build-platform": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node ./build.js",
 		"build-platform-cli": "component-build",
 		"dev-js": "rollup --config rollup.config.js --watch"
 	},
@@ -32,6 +32,8 @@
 		"gulp-sourcemaps": "^3.0.0",
 		"gulp-uglify": "^3.0.2",
 		"lodash-es": "^4.17.21",
+		"mem-fs": "^2.2.1",
+		"mem-fs-editor": "^9.5.0",
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",
 		"sanitize-html": "^2.7.1",

platforms/php/build.php

@@ -54,14 +54,15 @@ class Component_Builder {
   public string $component_name = '';
   private string $module_path = '';
 
-  function __construct( $component_name, $module_path ) {
+  function __construct( $component_name, $module_path, $project_path ) {
     $this->module_path    = $module_path;
+    $this->project_path    = $project_path;
     $this->component_name = $component_name;
     $this->register_default_handlebar_helpers();
   }
 
   function build(): void {
-    $root_path = __DIR__ . '/' . $this->module_path . '/../..';
+    $root_path = __DIR__ . '/' . $this->module_path . '/../../' . $this->project_path;
     $file_name = $this->get_handlebars_template( "$root_path/src/$this->component_name.template.hbs" );
 
     $output_folder = $root_path . '/exports/wordpress/templates';
@@ -122,4 +123,4 @@ class Component_Builder {
   }
 }
 
-( new Component_Builder( $argv[1], $argv[2] ) )->build();
+( new Component_Builder( $argv[1], $argv[2], $argv[3] ) )->build();

platforms/wordpress/templates/Template_Component.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>;
+
+class <%= blockClassModel %>_Component extends \Core\Component {
+
+	public function get_content( $args = [] ): string {
+		$args = array_merge( Helpers\<%= blockClassModel %>_Defaults::default_args(), $args );
+    $args = Helpers\<%= blockClassModel %>_API::prepare_args( $args );
+
+		<% if (templateFormat === 'hbs') { %>return $this->get_component_template( __DIR__ . '/templates/<%= blockFilename %>.template.hbs', $args );<% } %>
+		<% if (templateFormat === 'php') { %>
+				$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
+    		echo apply_filters( 'the_content', wpautop( $output ) );
+		<% } %>
+	}
+
+<% if (!include_acf_block && !include_native_gutenberg_block) { %>
+	public function register_assets() {
+		$this->add_style( __DIR__ . '/templates/styles/<%= blockFilename %>.min.css' );
+        <% if (include_script) { %>$this->add_script( __DIR__ . '/templates/scripts/<%= blockFilename %>.js' );<% } %>
+	}
+
+<% } %><% if (include_elementor_widget) { %>   function register_custom_logic(): void {
+		add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_elementor_widget' ] );
+	}
+
+<% } %><% if (include_elementor_widget) { %>   function register_elementor_widget( $widgets_manager ) {
+		$widgets_manager->register_widget_type( new Helpers\<%= blockClassModel %>_Elementor_Widget() );
+	}
+
+<% } %><% if (include_acf_block) { %>  function register_acf_block() {
+    $this->register_block( __DIR__ . "/<%= blockFilename %>.block.json", [
+      'enqueue_assets'  => function () {
+	      wp_enqueue_style( '<%= blockFilename %>', \Core\Global_Functions::get_file_url( __DIR__ . '/templates/styles/<%= blockFilename %>.min.css', true ), [], get_blocks_version() );<% if (include_script) { %>
+	      wp_enqueue_script( '<%= blockFilename %>', \Core\Global_Functions::get_file_url( __DIR__ . '/templates/scripts/<%= blockFilename %>.js', true ), ['assets-script'], get_blocks_version() );<% } %>
+      },
+      'default'        => Helpers\<%= blockClassModel %>_Defaults::default_args(),
+      'supports' => [
+        //'jsx' => true,
+		'color'   => [
+			'background' => true,
+			'text'       => true,
+		],
+		'spacing' => [
+			'margin'  => [ 'top', 'bottom' ],
+			'padding' => [ 'top', 'bottom' ]
+		],
+      ]
+    ] );
+  }
+
+<% } %><% if (include_native_gutenberg_block) { %>  function register_native_gutenberg_block() {
+    register_block_type( __DIR__ . '/templates/gutenberg-block/block.json' );<% if (include_script) { %>
+
+    add_action( 'wp_enqueue_scripts', function () {
+      $asset_file_front = include( plugin_dir_path( __FILE__ ) . '/templates/gutenberg-block/build/front.asset.php' );
+      wp_enqueue_script(
+        'gutenberg-<%= blockFilename %>-scripts-front',
+        plugins_url( 'templates/gutenberg-block/build/front.js', __FILE__ ),
+        $asset_file_front['dependencies'],
+        $asset_file_front['version'],
+        true
+      );
+    } );<% } %>
+  }<% } %>
+
+}

platforms/wordpress/wordpress-adapter.js

@@ -0,0 +1,47 @@
+import path from "path";
+import {mkdir, copyFile} from "fs/promises";
+import {createFiles, getBlockName, getConfigs, readJSONFile} from "../../helpers.js";
+import {capitalize} from "lodash-es";
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const {projectPath, modulesPath} = getConfigs();
+
+export async function buildWordPress(blockName) {
+  const distPath = path.join(projectPath, 'exports', 'wordpress');
+  await mkdir(distPath, {recursive: true})
+  await copyFile(`${projectPath}/block.json`, `${distPath}/block.json`)
+
+  let data = await readJSONFile(path.join(projectPath, `block.json`));
+
+  Object.assign(data, getBlockName(data.name));
+
+  // let data = await readJSONFile(path.join(projectPath, `block.json`));
+  const title = capitalize(data.name);
+  const owner = capitalize(data.project);
+
+  data = Object.assign(data, {
+    title,
+    blockClassModel: title.replace(/ /ig, '_'),
+    blockFilename: title.toLowerCase().replace(/ /ig, '-'),
+    blockClassName: title.toLowerCase().replace(/ /ig, '_'),
+    owner,
+    ownerClass: owner.replace(/ /ig, '_'),
+    ownerFilename: owner.toLowerCase().replace(/ /ig, '-'),
+    templateFormat: 'php',
+    include_acf_block: false,
+    include_native_gutenberg_block: false,
+    include_script: true,
+    include_elementor_widget: false,
+  });
+
+  await createFiles(data, [{
+    to: `${data.blockClassModel}_Component.php`,
+    from: `templates/Template_Component.php`
+  }], {
+    pathDist: distPath,
+    generatorsPath: path.join(__dirname)
+  });
+}

server.js

@@ -20,18 +20,14 @@ import {sanitizeUrl} from "@braintree/sanitize-url";
 import sanitizeHtml from 'sanitize-html';
 import {escape} from "lodash-es";
 import archiver from 'archiver';
+import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js";
 
 /**
  * Constants
  */
 
-const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
+const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
 const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
-const modulesPath = isDev ? '' : 'node_modules/block-dev-tool';
-
-const developmentBlockName = process.env.BLOCK_NAME;
-const projectPath = isDev ? path.join('blocks', developmentBlockName) : '';
-
 const sass = gulpSass(dartSass);
 
 buildStyleFiles()
@@ -71,7 +67,7 @@ app.set('views', path.join(modulesPath, 'layouts'));
 
 app.get('/', async (req, res) => {
   let jsonFileName = req.query.data ? req.query.data : 'default';
-  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true});
+  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
   if (data.error && data.errorMessage) {
     return res.send(data.errorMessage);
   }
@@ -91,7 +87,7 @@ app.get('/', async (req, res) => {
 
 app.get('/view/:baseView', async (req, res) => {
   let jsonFileName = req.query.data ? req.query.data : 'default';
-  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true});
+  const data = await getBlockConfigs(jsonFileName, {includeConfigs: true, projectPath, modulesPath, dataFiles});
   if (data.error && data.errorMessage) {
     return res.send(data.errorMessage);
   }
@@ -157,9 +153,9 @@ app.get('/publish', async (req, res) => {
 
 app.get('/data', async (req, res) => {
   let jsonDataFileName = req.query.name ? req.query.name : 'default';
-  const data = await getBlockConfigs(jsonDataFileName);
 
   const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
+  const data = await getBlockConfigs(jsonDataFileName, {projectPath, modulesPath, dataFiles});
   const designPreviewFiles = getListOfDesignPreviewFiles(jsonDataFileName, await fs.readdir(path.join(projectPath, 'design', 'preview')));
 
   return res.json({
@@ -301,48 +297,6 @@ function prepareListOfDataFiles(dataFiles) {
     .sort();
 }
 
-async function readJSONFile(jsonFile) {
-  let data = {};
-
-  try {
-    data = await fsExtra.readJson(jsonFile);
-  } catch (e) {
-    return {
-      error: true, errorMessage: getErrorHtml("JSON Syntax error. Please make sure the dataFile is valid.", e),
-    };
-  }
-
-  return data;
-}
-
-async function getBlockConfigs(jsonFileName = 'default', {includeConfigs} = {}) {
-  let data = await readJSONFile(path.join(projectPath, 'data', `${jsonFileName}.json`));
-  if (data.error) {
-    return data;
-  }
-
-  if (includeConfigs) {
-    Object.assign(data, {
-      config: Object.assign(JSON.parse(JSON.stringify(config)), // The entire config object.
-        {
-          projectDir: modulesPath, activeDataFile: jsonFileName, dataFiles: dataFiles.map((name) => {
-            return {
-              name, active: jsonFileName === name,
-            };
-          }), remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-        })
-    });
-  }
-
-  return data;
-}
-
-function getErrorHtml(message = '', errorMessage = '') {
-  return `<div style="padding: 10px 15px; font-family: Arial, sans-serif">
-    <p>${message}</p>
-    <pre style="padding: 10px 15px; background-color: #ffd0d0; border: 1px solid red;">${errorMessage}</pre>
-  </div>`;
-}
 
 async function zipProject() {
   // create a file to stream archive data to.