1.0.18

build.js

@@ -1,73 +1,74 @@
 #!/usr/bin/env node
-// For development purposes - run `npm run build-platform`.
 
+import {exec} from 'child_process';
 import config from 'config';
-import prompts from "prompts";
+import Generator from "yeoman-generator";
-import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
+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";
-import {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.js";
+import path from "path";
 
-const {isDev, developmentBlockName} = getConfigs();
+const {modulesPath, projectPath} = getConfigs();
-const blockName = !isDev && config.has('blockName') ? config.get('blockName') : developmentBlockName;
 
-export const PLATFORM_OPTIONS = [{
+const blockName = config.has('blockName') ? config.get('blockName') : 'development';
-  name: 'wordpress',
-  title: 'WordPress'
-}, {
-  name: 'wordpress-blocks',
-  title: 'WordPress Block'
-}, {
-  name: 'wordpress-elementor',
-  title: 'WordPress Elementor'
-}, {
-  name: 'hubspot',
-  title: 'Hubspot'
-}, {
-  name: 'hubspot-email',
-  title: 'Hubspot Email'
-}, {
-  name: 'javascript',
-  title: 'JavaScript'
-}, {
-  name: 'php',
-  title: 'PHP'
-}];
 
-const data = await getExportData();
+class buildGenerator extends Generator {
-const selectedPlatform = PLATFORM_OPTIONS[data['platform']];
+  async prompting() {
-await buildExportFiles(selectedPlatform);
+    this.data = await this.prompt([
-
-console.log('--------------------\nDone!');
-
-//
-// Functions
-//
-
-export async function buildExportFiles(platform) {
-  if (platform.name.startsWith('wordpress')) {
-    if (platform.name === 'wordpress-blocks') {
-      await buildWordPress(blockName, true);
-    } else if (platform.name === 'wordpress-elementor') {
-      await buildWordPress(blockName, false, true);
-    } else {
-      await buildWordPress(blockName);
-    }
-  } else if (platform.name === 'hubspot-email') {
-    await buildHubspotEmail(blockName)
-  } else if (platform.name === 'hubspot') {
-    await buildHubspotPage(blockName)
-  }
-}
-
-function getExportData() {
-  return prompts([
       {
-      type: "select",
+        type: "list",
         name: "platform",
         message: "Choose Platform",
-      choices: PLATFORM_OPTIONS.map(item => item.title),
+        choices: ['WordPress', 'WordPress Block', 'Hubspot', 'Hubspot Email', 'JavaScript', 'PHP'],
         default: 'WordPress'
       }
-  ]);
+    ])
+  }
+
+  writing() {
+    new Promise((resolve => {
+      if (['WordPress', 'PHP'].includes(this.data.platform)) {
+        const backPath = modulesPath ? modulesPath.split('/').map(() => '..').join('/') : '';
+
+        return new Promise((resolve, reject) => {
+          const phpGeneratorPath = path.join(modulesPath, 'platforms', 'php');
+          exec(`cd ${phpGeneratorPath} && composer install && php build.php '${blockName}' '${backPath}' '${projectPath}'`, function (error, stdout) {
+            if (error) {
+              console.log('Error:', error)
+              reject(error);
+            }
+
+            console.log(stdout);
+            resolve();
+          });
+        }).then(() => {
+          if (this.data.platform === 'WordPress') {
+            return buildWordPress();
+          }
+
+          if (this.data.platform === 'WordPress Block') {
+            return buildWordPress(true);
+          }
+        });
+
+      } else if (this.data.platform === 'Hubspot Email') {
+        buildHubspot(blockName)
+          .then(() => {
+            resolve();
+          });
+      } else if (this.data.platform === 'Hubspot') {
+        console.log('"Hubspot" Coming soon...');
+        resolve();
+      } else {
+        resolve();
+      }
+    }))
+      .then(() => {
+        console.log('--------------------\nDone!');
+      });
+  }
 }
+
+const build = new buildGenerator([], {env: yeoman.createEnv()}, {});
+build.run().then(() => null);

debug.js

@@ -1,15 +0,0 @@
-#!/usr/bin/env node
-
-import {getConfigs} from "./helpers.js";
-
-const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
-
-console.log('----------------------------------\n')
-console.log('Local Details', process.versions, '\n');
-console.log('Configs', {
-  isDev,
-  modulesPath,
-  projectPath,
-  developmentBlockName
-});
-console.log('\n----------------------------------\n')

helpers.js

@@ -3,8 +3,6 @@ import config from 'config';
 import {fileURLToPath} from 'url';
 import memFs from 'mem-fs';
 import editor from 'mem-fs-editor';
-import fsExtra from "fs-extra";
-import archiver from "archiver";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -16,11 +14,13 @@ export function getConfigs() {
   return {
     isDev,
     developmentBlockName,
-    modulesPath: process.env.MODULE_PATH ?? (isDev ? '' : 'node_modules/block-dev-tool'),
+    modulesPath: isDev ? '' : 'node_modules/block-dev-tool',
-    projectPath: process.env.PROJECT_PATH ?? (isDev ? path.join('blocks', developmentBlockName) : ''),
+    projectPath: isDev ? path.join('blocks', developmentBlockName) : '',
   };
 }
 
+import fsExtra from "fs-extra";
+
 export async function readJSONFile(jsonFile) {
   let data = {};
 
@@ -107,48 +107,3 @@ export function capitalize(str) {
     })
     .join(' ');
 }
-
-export async function zipProject(srcDir, outputFileName = 'dist.zip') {
-  // create a file to stream archive data to.
-  const output = await fsExtra.createWriteStream(outputFileName);
-  const archive = archiver('zip', {});
-
-  // listen for all archive data to be written
-  // 'close' event is fired only when a file descriptor is involved
-  output.on('close', function () {
-    console.log(archive.pointer() + ' total bytes');
-    console.log('archiver has been finalized and the output file descriptor has closed.');
-  });
-
-  // This event is fired when the data source is drained no matter what was the data source.
-  // It is not part of this library but rather from the NodeJS Stream API.
-  // @see: https://nodejs.org/api/stream.html#stream_event_end
-  output.on('end', function () {
-    console.log('Data has been drained');
-  });
-
-  // good practice to catch warnings (ie stat failures and other non-blocking errors)
-  archive.on('warning', function (err) {
-    if (err.code === 'ENOENT') {
-      // log warning
-    } else {
-      // throw error
-      throw err;
-    }
-  });
-
-  // good practice to catch this error explicitly
-  archive.on('error', function (err) {
-    throw err;
-  });
-
-  // pipe archive data to the file
-  archive.pipe(output);
-
-  // append files from a subdirectory, putting its contents at the root of archive
-  archive.directory(srcDir, false);
-
-  // finalize the archive (ie we are done appending files but streams have to finish yet)
-  // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
-  await archive.finalize();
-}

layouts/alignfull.hbs

@@ -2,7 +2,7 @@
 
 {{> (include_partial "layouts/partials/head") }}
 
-<body class="{{#if iframeMode}}body--iframe{{/if}}">
+<body>
 
 <main>
   {{> (include_block_template) }}

layouts/container.hbs

@@ -2,7 +2,7 @@
 
 {{> (include_partial "layouts/partials/head") }}
 
-<body class="{{#if iframeMode}}body--iframe{{/if}}">
+<body>
 
 <main>
   <div class="container">

layouts/index.hbs

@@ -18,7 +18,7 @@
 </script>
 
 <div class="preview">
-  <iframe id="preview_frame" src="{{ previewFrameUrl }}?iframe=true" class="breakpoint"></iframe>
+  <iframe id="preview_frame" src="{{ previewFrameUrl }}" class="breakpoint"></iframe>
 </div>
 
 <script src="/scripts/dist/index.min.js"></script>

layouts/partials/scripts.hbs

@@ -1,4 +1,4 @@
-<script src="/scripts/dist/frame-index.min.js"></script>
+<script src="/scripts/frame-index.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
 {{#each config.jsUrl }}<script src="{{ this }}"></script>

layouts/partials/toolbar.hbs

@@ -9,9 +9,6 @@
   </div>
 
   <div class="page_toolbar__right">
-    {{#if config.styleGuideUrl}}
+    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab"></a>
-      <a href="{{ config.styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
-    {{/if}}
-    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab" title="Open in New Window"></a>
   </div>
 </header>

layouts/scripts/dist/frame-index.min.js

@@ -1 +0,0 @@
-!function(){let e;function n(n){const t=document.querySelector("body > main").scrollHeight;if(e===t)return;e=t,window.parent.postMessage("resize:"+JSON.stringify({height:e}),"*")}n(),new ResizeObserver(n).observe(document.body)}();

layouts/scripts/dist/toolbar/images/icon-palette.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#21252d">
-  <path
-    d="M24 45.25q-4.35 0-8.225-1.675T9 39q-2.9-2.9-4.575-6.775Q2.75 28.35 2.75 24q0-4.5 1.675-8.375t4.625-6.75Q12 6 15.95 4.35q3.95-1.65 8.4-1.65 4.2 0 8 1.425t6.675 3.95Q41.9 10.6 43.6 14.05q1.7 3.45 1.7 7.5 0 5.7-3.2 9.35-3.2 3.65-8.9 3.65h-2.9q-.8 0-1.4.65-.6.65-.6 1.45 0 1.25.5 1.75t.5 1.55q0 2.2-1.5 3.75-1.5 1.55-3.8 1.55ZM24 24Zm-11.2 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.1-8.15q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm10.25 0q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm6.2 8.15q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1.05 0-1.775.75-.725.75-.725 1.75t.725 1.75q.725.75 1.775.75ZM23.8 40.55q.4 0 .6-.175.2-.175.2-.625 0-.7-.75-1.175-.75-.475-.75-2.375 0-2.45 1.65-4.4 1.65-1.95 4.1-1.95h4.35q3.7 0 5.525-2.2 1.825-2.2 1.825-5.8 0-6.6-4.925-10.5Q30.7 7.45 24.4 7.45q-7.1 0-12.025 4.825Q7.45 17.1 7.45 24q0 6.9 4.8 11.725 4.8 4.825 11.55 4.825Z"/>
-</svg>

layouts/scripts/frame-index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const heightLimit = window.outerHeight * 2;
+let height = getCurrentHeight();
+setupResizeListener();
+
+///
+
+function setupResizeListener() {
+  const resizeObserver = new ResizeObserver(handleHeightChange);
+  resizeObserver.observe(document.body);
+}
+
+function handleHeightChange(entries) {
+  const updatedHeight = getCurrentHeight();
+  if (height === updatedHeight || updatedHeight > heightLimit) {
+    return;
+  }
+
+  const RESIZE_CODE = 'resize:';
+  window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+  height = updatedHeight;
+}
+
+function getCurrentHeight() {
+  return document.querySelector('body > main').scrollHeight;
+}

layouts/scripts/frame/editor.js

@@ -1,17 +0,0 @@
-export function setupFrameResizeListener() {
-  const previewFrame = getPreviewFrame();
-
-  window.addEventListener('message', function (e) {
-    const RESIZE_CODE = 'resize:';
-    if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
-      return;
-    }
-
-    const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
-    previewFrame.style.height = data.height + 'px'
-  });
-}
-
-export function getPreviewFrame() {
-  return document.getElementById('preview_frame');
-}

layouts/scripts/frame/frame.js

@@ -1,46 +0,0 @@
-'use strict';
-
-// Blocks Initialization.
-function initBlock(blockName = '', selector = '', cb) {
-  document.querySelectorAll(selector).forEach((el) => cb(el));
-}
-
-// Scrollbars / Frame resizes notifications.
-(function () {
-  let height;
-  const debug = false;
-
-  handleHeightChange(); // Initial frame's height setup.
-  setupResizeListener(); // Listen to frame's height changes.
-
-  ///
-
-  function setupResizeListener() {
-    const resizeObserver = new ResizeObserver(handleHeightChange);
-    resizeObserver.observe(document.body);
-  }
-
-  function handleHeightChange(entries) {
-    const updatedHeight = getCurrentHeight();
-
-    if (debug) {
-      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);
-    }
-
-    if (height === updatedHeight) {
-      return;
-    }
-
-    const RESIZE_CODE = 'resize:';
-    height = updatedHeight;
-    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
-
-    if (debug) {
-      console.log('Resize message sent: ', height)
-    }
-  }
-
-  function getCurrentHeight() {
-    return document.querySelector('body > main').scrollHeight;
-  }
-})();

layouts/scripts/index.js

@@ -3,13 +3,22 @@
 import {setupResponsiveness} from './toolbar/responsive.jsx';
 import {setupPublish} from "./toolbar/publish.jsx";
 import {setupDataOptions} from "./toolbar/data-options/DataOptions.jsx";
-import {getPreviewFrame, setupFrameResizeListener} from "./frame/editor.js";
 
+const previewFrame = document.getElementById('preview_frame');
 const rootAttributes = {
-  previewFrame: getPreviewFrame(),
+  previewFrame,
-};
+}
 
-setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
-setupPublish(rootAttributes);
+setupPublish(rootAttributes)
+
+window.addEventListener('message', function (e) {
+  const RESIZE_CODE = 'resize:';
+  if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
+    return;
+  }
+
+  const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
+  previewFrame.style.height = data.height + 'px';
+});

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -98,12 +98,7 @@ function DataOptions(props = {}) {
 
   async function changeDataOption(e) {
     const dataName = e.target.value;
-
+    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + dataName;
-    const previewFrameUrl = new URL(window.devTool.previewFrameUrl);
-    previewFrameUrl.searchParams.set('data', dataName);
-    previewFrameUrl.searchParams.set('iframe', 'true');
-
-    props.rootAttributes.previewFrame.src = previewFrameUrl.href;
 
     const dataOption = await fetchDataOptions(dataName);
     updateState(Object.assign({}, dataOption, {dataName}));

layouts/scripts/toolbar/images/icon-palette.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="#21252d">
-  <path
-    d="M24 45.25q-4.35 0-8.225-1.675T9 39q-2.9-2.9-4.575-6.775Q2.75 28.35 2.75 24q0-4.5 1.675-8.375t4.625-6.75Q12 6 15.95 4.35q3.95-1.65 8.4-1.65 4.2 0 8 1.425t6.675 3.95Q41.9 10.6 43.6 14.05q1.7 3.45 1.7 7.5 0 5.7-3.2 9.35-3.2 3.65-8.9 3.65h-2.9q-.8 0-1.4.65-.6.65-.6 1.45 0 1.25.5 1.75t.5 1.55q0 2.2-1.5 3.75-1.5 1.55-3.8 1.55ZM24 24Zm-11.2 1.3q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1 0-1.75.75t-.75 1.75q0 1 .75 1.75t1.75.75Zm6.1-8.15q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm10.25 0q1 0 1.75-.75t.75-1.75q0-1.05-.75-1.775-.75-.725-1.75-.725-1.05 0-1.775.725-.725.725-.725 1.725 0 1.05.725 1.8t1.775.75Zm6.2 8.15q1 0 1.75-.75t.75-1.75q0-1-.75-1.75t-1.75-.75q-1.05 0-1.775.75-.725.75-.725 1.75t.725 1.75q.725.75 1.775.75ZM23.8 40.55q.4 0 .6-.175.2-.175.2-.625 0-.7-.75-1.175-.75-.475-.75-2.375 0-2.45 1.65-4.4 1.65-1.95 4.1-1.95h4.35q3.7 0 5.525-2.2 1.825-2.2 1.825-5.8 0-6.6-4.925-10.5Q30.7 7.45 24.4 7.45q-7.1 0-12.025 4.825Q7.45 17.1 7.45 24q0 6.9 4.8 11.725 4.8 4.825 11.55 4.825Z"/>
-</svg>

layouts/scripts/toolbar/publish.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 function Publish(props = {}) {

layouts/scroll.hbs

@@ -1,16 +0,0 @@
-<html lang="en">
-
-{{> (include_partial "layouts/partials/head") }}
-
-<body class="{{#if iframeMode}}body--iframe{{/if}}">
-
-<main>
-  <section class="fullscreen_layout"></section>
-  {{> (include_block_template) }}
-  <section class="fullscreen_layout"></section>
-</main>
-
-{{> (include_partial "layouts/partials/scripts") }}
-
-</body>
-</html>

layouts/styles/_page--view-swiper.scss

@@ -1,9 +0,0 @@
-.swiper {
-  &-slide {
-    width: initial;
-  }
-
-  &-wrapper {
-    height: initial;
-  }
-}

layouts/styles/page--main.css

@@ -139,11 +139,11 @@ body {
   max-width: var(--breakpoint);
 }
 
-.open_in_new_tab, .palette {
+.open_in_new_tab {
   --size: 1.5rem;
   width: var(--size);
   height: var(--size);
-  background-image: url("/scripts/dist/toolbar/images/icon-open-new-tab.svg");
+  background-image: url("/scripts/toolbar/images/icon-open-new-tab.svg");
   background-repeat: no-repeat;
   background-size: calc(var(--size) - 0.15rem);
   background-position: center center;
@@ -158,8 +158,4 @@ body {
   outline: none;
 }
 
-.palette {
-  background-image: url("/scripts/dist/toolbar/images/icon-palette.svg");
-}
-
 /*# sourceMappingURL=page--main.css.map */

layouts/styles/page--main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -92,7 +92,7 @@ body {
   width: var(--size);
   height: var(--size);
 
-  background-image: url("/scripts/dist/toolbar/images/icon-open-new-tab.svg");
+  background-image: url("/scripts/toolbar/images/icon-open-new-tab.svg");
   background-repeat: no-repeat;
   background-size: calc(var(--size) - 0.15rem);
   background-position: center center;
@@ -107,8 +107,3 @@ body {
   border-radius: 0.25rem;
   outline: none;
 }
-
-.palette {
-  @extend .open_in_new_tab;
-  background-image: url("/scripts/dist/toolbar/images/icon-palette.svg");
-}

layouts/styles/page--view.css

@@ -1,32 +1,11 @@
 body {
   margin: 0;
+  overflow-y: hidden;
 }
 
 main {
   margin-left: auto;
   margin-right: auto;
-  min-height: 100%;
-  overflow-x: hidden;
-}
-main .swiper-slide {
-  width: initial;
-}
-main .swiper-wrapper {
-  height: initial;
-}
-
-.body--iframe {
-  overflow-y: hidden;
-}
-.body--iframe main {
-  overflow-y: auto;
-}
-
-.fullscreen_layout {
-  background-color: #9cc3ff;
-  min-height: 100%;
-  background-image: url("https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg");
-  background-size: cover;
 }
 
 /*# sourceMappingURL=page--view.css.map */

layouts/styles/page--view.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--view.scss","_page--view-swiper.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;ACPA;EACE;;AAGF;EACE;;;ADSJ;EACE;;AAEA;EAGE;;;AAIJ;EACE;EACA;EACA;EACA","file":"page--view.css"}
+{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA","file":"page--view.css"}

layouts/styles/page--view.scss

@@ -1,32 +1,18 @@
 body {
   margin: 0;
+  overflow-y: hidden;
 }
 
 main {
   margin-left: auto;
   margin-right: auto;
-  min-height: 100%;
-  overflow-x: hidden;
-
-  // Fixes scrolling issues of swiperJS. Should be included in all projects.
-  @import "page--view-swiper";
-}
-
-// iFrame mode
-.body--iframe {
-  overflow-y: hidden;
-
-  main {
-    // If you change to "overflow: initial", the margin-top/bottom of first/last element will be not included.
-    // Test on fresh block setup where heading has margin-top.
-    overflow-y: auto;
-  }
-}
-
-.fullscreen_layout {
-  background-color: #9cc3ff;
-  min-height: 100%;
-  background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg');
-  background-size: cover;
 }
 
+// Container rules must be provided by the projectStyles (theme).
+//.container {
+//  max-width: 1200px;
+//  margin-left: auto;
+//  margin-right: auto;
+//  padding-left: 15px;
+//  padding-right: 15px;
+//}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axe-web/block-dev-tool",
-	"version": "1.0.22",
+	"version": "1.0.18",
 	"author": {
 		"name": "AXE-WEB",
 		"email": "office@axe-web.com",
@@ -8,12 +8,11 @@
 	},
 	"scripts": {
 		"start": "component-dev",
-		"info": "node debug.js",
+		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/team/config BLOCK_NAME=team node server.js",
-		"dev": "NODE_ENV=development NODE_CONFIG_DIR=blocks/text-block/config BLOCK_NAME=text-block node server.js",
 		"build": "rollup --config rollup.config.js",
-		"build-platform": "NODE_ENV=development NODE_CONFIG_DIR=blocks/text-block/config BLOCK_NAME=text-block 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": "NODE_ENV=development rollup --config rollup.config.js --watch"
+		"dev-js": "rollup --config rollup.config.js --watch"
 	},
 	"license": "ISC",
 	"type": "module",
@@ -23,7 +22,6 @@
 		"browser-sync": "^2.27.9",
 		"config": "^3.3.7",
 		"escape-html": "^1.0.3",
-		"exec-php": "^0.0.6",
 		"express": "^4.17.3",
 		"express-handlebars": "^6.0.4",
 		"fs-extra": "^10.0.1",
@@ -39,9 +37,10 @@
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",
 		"plugin-error": "^2.0.0",
-		"prompts": "^2.4.2",
 		"sanitize-html": "^2.7.1",
-		"sass": "^1.50.1"
+		"sass": "^1.50.1",
+		"yeoman-environment": "^3.10.0",
+		"yeoman-generator": "^5.6.1"
 	},
 	"devDependencies": {
 		"@babel/preset-react": "^7.18.6",
@@ -55,7 +54,6 @@
 		"rollup": "^2.77.2",
 		"rollup-plugin-copy": "^3.4.0",
 		"rollup-plugin-jsx": "^1.0.3",
-		"rollup-plugin-terser": "^7.0.2",
 		"styled-components": "^5.3.5"
 	},
 	"bin": {
@@ -64,13 +62,7 @@
 	},
 	"files": [
 		"helpers.js",
-		"debug.js",
+		"layouts/**/*",
-		"layouts/**/*.hbs",
-		"layouts/styles/*.css*",
-		"layouts/scripts/dist/*.js*",
-		"layouts/scripts/dist/**/*.jpg",
-		"layouts/scripts/dist/**/*.png",
-		"layouts/scripts/dist/**/*.svg",
 		"platforms/**/*"
 	]
 }

platforms/hubspot/hubspot-adapter.js

@@ -1,31 +1,47 @@
-import path from "path";
 import {readFile, writeFile, mkdir, copyFile} from "fs/promises";
-import {capitalize, getConfigs} from "../../helpers.js";
 
-export async function buildHubspotEmail(blockName) {
+export async function buildHubspot(blockName) {
-  const distPath = await createDistFolder(blockName);
+  const distPath = `./exports/hubspot/${blockName}.module`;
+  await mkdir(distPath, {recursive: true})
+  await copyFile(`./src/${blockName}.template.hbs`, `${distPath}/module.html`)
 
-  // Template
+  const metaData = {
-  let handlebars = await readFile(path.join(srcPath, `${blockName}.template.hbs`), "utf8");
-  await writeFile(path.join(distPath, 'module.html'), handlebarsToHubl(handlebars));
-
-  // JSON
-  await buildHubspotJSONFiles(distPath, {
     global: false,
     host_template_types: ["EMAIL"],
     label: capitalize(blockName),
     is_available_for_new_content: true
+  }
+
+  await writeFile(`${distPath}/meta.json`, JSON.stringify(metaData, null, 4));
+
+  const blockJSON = await readFile(`./block.json`, "utf8");
+  const block = JSON.parse(blockJSON);
+
+  const fields = getBlockFields(block, 'content');
+
+  // Styling TAB.
+  const stylingFields = getBlockFields(block, 'styling');
+
+  if (stylingFields.length) {
+    const stylingFieldsByName = {};
+    stylingFields.forEach(field => stylingFieldsByName[field.name] = field);
+
+    const stylingGroup = convertToHubspotField({
+      type: 'group',
+      name: 'style',
+      label: "Style",
+      sub_fields: stylingFieldsByName,
     });
+    stylingGroup.tab = "STYLE";
+
+    fields.push(stylingGroup);
+  }
+
+  // Export JSON file.
+  await writeFile(`${distPath}/fields.json`, JSON.stringify(fields, null, 4));
 }
 
-export async function createDistFolder(blockName) {
+function getBlockFields(block = {}, type = 'content') {
-  const distPath = path.join('exports', 'hubspot', `${blockName}.module`);
-  await mkdir(distPath, {recursive: true})
-
-  return distPath;
-}
-
-export function getBlockFields(block = {}, type = 'content') {
   const fields_group = block['field_groups'].find((group) => group.name === type);
   const fields = [];
 
@@ -45,7 +61,7 @@ export function getBlockFields(block = {}, type = 'content') {
   });
 }
 
-export function convertToHubspotField(field = {}) {
+function convertToHubspotField(field = {}) {
   const data = {
     id: field.name,
     name: field.name,
@@ -54,12 +70,9 @@ export function convertToHubspotField(field = {}) {
     validation_regex: "",
     required: false,
     locked: false,
+    default: field.default
   };
 
-  if (field.default) {
-    data.default = field.default;
-  }
-
   let sub_fields = [];
 
   switch (field.type) {
@@ -98,14 +111,12 @@ export function convertToHubspotField(field = {}) {
         display: "checkbox",
       });
     case 'select':
-      const options = [];
+      const choices = [];
-      if (field.options) {
+      Object.keys(data.choices).forEach(value => choices.push([value, data.choices[value]]));
-        Object.keys(field.options).forEach(value => options.push([value, field.options[value]]));
-      }
 
       return Object.assign({}, data, {
-        type: "choice",
+        type: "select",
-        choices: options
+        choices: [choices]
       });
     case 'link':
       return Object.assign({}, data, {
@@ -214,54 +225,17 @@ export function convertToHubspotField(field = {}) {
   }
 }
 
-export async function buildHubspotJSONFiles(distPath, metaData) {
+export function capitalize(str) {
-  const {modulesPath, projectPath} = getConfigs();
+  if (typeof str !== 'string') {
-  await writeFile(path.join(distPath, 'meta.json'), JSON.stringify(metaData, null, 4));
+    return '';
-
-  const blockJSON = await readFile(path.join(projectPath, 'block.json'), "utf8");
-  const block = JSON.parse(blockJSON);
-
-  const fields = getBlockFields(block, 'content');
-
-  // Styling TAB.
-  const stylingFields = getBlockFields(block, 'styling');
-
-  if (stylingFields.length) {
-    const stylingFieldsByName = {};
-    stylingFields.forEach(field => stylingFieldsByName[field.name] = field);
-
-    const stylingGroup = convertToHubspotField({
-      type: 'group',
-      name: 'style',
-      label: "Style",
-    });
-
-    stylingGroup.children = Object.values(stylingFieldsByName);
-    stylingGroup.tab = "STYLE";
-
-    fields.push(stylingGroup);
   }
 
-  // Export JSON file.
+  return str
-  await writeFile(path.join(distPath, 'fields.json'), JSON.stringify(fields, null, 4));
+    .toLowerCase()
-}
+    .split(/[ -_]/g)
-
+    .filter((word) => !!word)
-
+    .map((word) => {
-export function handlebarsToHubl(handlebars) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
-  handlebars = handlebars.replace(/{{#if /g, '{% if module.');
+    })
-  handlebars = handlebars.replace(/{{\/if}}/g, '{% endif %}');
+    .join(' ');
-  handlebars = handlebars.replace(/{{#each /g, '{% for module.');
-  handlebars = handlebars.replace(/{{\/each}}/g, '{% endfor %}');
-  handlebars = handlebars.replace(/{{base_url}}/g, '');
-  handlebars = handlebars.replace(/{esc_attr /g, '{');
-  handlebars = handlebars.replace(/{esc_url /g, '{');
-  handlebars = handlebars.replace(/{esc_html /g, '{');
-  handlebars = handlebars.replace(/{{{ /g, '{{');
-  handlebars = handlebars.replace(/ }}}/g, '}}');
-  handlebars = handlebars.replace(/{{{/g, '{{');
-  handlebars = handlebars.replace(/}}}/g, '}}');
-  handlebars = handlebars.replace(/{{/g, '{{module.');
-  handlebars = handlebars.replace(/{{module. /g, '{{ module.');
-
-  return handlebars;
 }

platforms/hubspot/hubspot-page-adapter.js

@@ -1,28 +0,0 @@
-import path from "path";
-import {copyFile, readFile, writeFile} from "fs/promises";
-import {capitalize, getConfigs} from "../../helpers.js";
-import {buildHubspotJSONFiles, createDistFolder, handlebarsToHubl,} from "./hubspot-email-adapter.js";
-
-export async function buildHubspotPage(blockName) {
-  const {modulesPath, projectPath} = getConfigs();
-  const distPath = await createDistFolder(blockName);
-
-  const srcPath = path.join(projectPath, 'src');
-
-  // Template
-  let handlebars = await readFile(path.join(srcPath, `${blockName}.template.hbs`), "utf8");
-  await writeFile(path.join(distPath, 'module.html'), handlebarsToHubl(handlebars));
-
-  // Assets
-  await copyFile(path.join(srcPath, 'styles', `${blockName}.min.css`), path.join(distPath, 'module.css'));
-  await copyFile(path.join(srcPath, 'scripts', `${blockName}.min.js`), path.join(distPath, 'module.js'));
-  // await copy(path.join(projectPath, 'src', 'images'), path.join(distPath, 'images'));
-
-  // JSON
-  await buildHubspotJSONFiles(distPath, {
-    global: false,
-    host_template_types: ["PAGE"],
-    label: capitalize(blockName),
-    is_available_for_new_content: true
-  });
-}

platforms/php/build.php

@@ -3,10 +3,8 @@
 // Composer - Autoloader
 require_once __DIR__ . '/vendor/autoload.php';
 
-use Brick\VarExporter\ExportException;
 use LightnCandy\Flags;
 use LightnCandy\LightnCandy;
-use Brick\VarExporter\VarExporter;
 
 trait Custom_Handlebars {
   public array $custom_handlebars = [];
@@ -54,8 +52,7 @@ class Component_Builder {
   use Custom_Handlebars;
 
   public string $component_name = '';
-  public string $module_path = '';
+  private string $module_path = '';
-  public string $project_path = '';
 
   function __construct( $component_name, $module_path, $project_path ) {
     $this->module_path    = $module_path;
@@ -66,15 +63,22 @@ class Component_Builder {
 
   function build(): void {
     $root_path = __DIR__ . '/' . $this->module_path . '/../../' . $this->project_path;
-
-    $this->buildTemplatePhpFile( $root_path );
-  }
-
-  private function buildTemplatePhpFile( $root_path ) {
     $file_name = $this->get_handlebars_template( "$root_path/src/$this->component_name.template.hbs" );
 
     $output_folder = $root_path . '/exports/wordpress/templates';
+    foreach ( [ 'styles', 'scripts', 'images' ] as $dir ) {
+      $output_dir = "$output_folder/$dir";
+      if ( is_dir( $output_dir ) === false ) {
+        mkdir( $output_dir, 0777, true );
+      }
+    }
+
     rename( $file_name, "$output_folder/$this->component_name.template.php" );
+    copy( "$root_path/src/styles/$this->component_name.min.css", "$output_folder/styles/$this->component_name.min.css" );
+    copy( "$root_path/src/scripts/$this->component_name.min.js", "$output_folder/scripts/$this->component_name.min.js" );
+    shell_exec( "cp -r $root_path/src/images $output_folder" );
+
+    echo "Generated '$file_name'.";
   }
 
   private function get_handlebars_template( $path = '' ): string {
@@ -119,15 +123,4 @@ class Component_Builder {
   }
 }
 
-function build( $args = [] ) {
+( new Component_Builder( $argv[1], $argv[2], $argv[3] ) )->build();
-  ( new Component_Builder( $args['blockName'], $args['backPath'], $args['projectPath'] ) )->build();
-}
-
-/**
- * @throws ExportException
- */
-function jsonToPhp( $args = [] ): ?string {
-  $json = $args['json'] ?? [];
-
-  return VarExporter::export( $json );
-}

platforms/php/composer.json

@@ -6,7 +6,6 @@
 	},
 	"require": {
 		"php": ">=8.0",
-		"zordius/lightncandy": "^1.2.6",
+		"zordius/lightncandy": "^1.2.6"
-		"brick/varexporter": "^0.3.7"
 	}
 }

platforms/php/composer.lock

@@ -4,113 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "6731e0a19d488ee457b6682e62ef9018",
+    "content-hash": "1d9b4e7a02be366b48383c185193727f",
     "packages": [
-        {
-            "name": "brick/varexporter",
-            "version": "0.3.7",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/brick/varexporter.git",
-                "reference": "3e263cd718d242594c52963760fee2059fd5833c"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/brick/varexporter/zipball/3e263cd718d242594c52963760fee2059fd5833c",
-                "reference": "3e263cd718d242594c52963760fee2059fd5833c",
-                "shasum": ""
-            },
-            "require": {
-                "nikic/php-parser": "^4.0",
-                "php": "^7.2 || ^8.0"
-            },
-            "require-dev": {
-                "php-coveralls/php-coveralls": "^2.2",
-                "phpunit/phpunit": "^8.5 || ^9.0",
-                "vimeo/psalm": "4.23.0"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "Brick\\VarExporter\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "description": "A powerful alternative to var_export(), which can export closures and objects without __set_state()",
-            "keywords": [
-                "var_export"
-            ],
-            "support": {
-                "issues": "https://github.com/brick/varexporter/issues",
-                "source": "https://github.com/brick/varexporter/tree/0.3.7"
-            },
-            "funding": [
-                {
-                    "url": "https://github.com/BenMorel",
-                    "type": "github"
-                }
-            ],
-            "time": "2022-06-29T23:37:57+00:00"
-        },
-        {
-            "name": "nikic/php-parser",
-            "version": "v4.15.2",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/nikic/PHP-Parser.git",
-                "reference": "f59bbe44bf7d96f24f3e2b4ddc21cd52c1d2adbc"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/f59bbe44bf7d96f24f3e2b4ddc21cd52c1d2adbc",
-                "reference": "f59bbe44bf7d96f24f3e2b4ddc21cd52c1d2adbc",
-                "shasum": ""
-            },
-            "require": {
-                "ext-tokenizer": "*",
-                "php": ">=7.0"
-            },
-            "require-dev": {
-                "ircmaxell/php-yacc": "^0.0.7",
-                "phpunit/phpunit": "^6.5 || ^7.0 || ^8.0 || ^9.0"
-            },
-            "bin": [
-                "bin/php-parse"
-            ],
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "4.9-dev"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "PhpParser\\": "lib/PhpParser"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
-            "authors": [
-                {
-                    "name": "Nikita Popov"
-                }
-            ],
-            "description": "A PHP parser written in PHP",
-            "keywords": [
-                "parser",
-                "php"
-            ],
-            "support": {
-                "issues": "https://github.com/nikic/PHP-Parser/issues",
-                "source": "https://github.com/nikic/PHP-Parser/tree/v4.15.2"
-            },
-            "time": "2022-11-12T15:38:23+00:00"
-        },
         {
             "name": "zordius/lightncandy",
             "version": "v1.2.6",

platforms/wordpress/templates/Template_Basic_Component.php

@@ -1,49 +1,31 @@
 <?php
 
-namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>;
+use Core\Global_Functions;
 
 class <%= blockClassModel %>_Component {
 
 	public function __construct() {
-		// add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
+		add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
-    add_action( 'after_setup_theme', [ $this, 'register_assets' ] );
 	}
 
 	function register_assets(): void {
-    // $version = get_plugin_data( __DIR__ . "/../../scytale-custom-blocks.php" )['Version']; // In Plugins
+		wp_enqueue_style( '<%= blockFilename %>',
-		$version = \Core\Global_Functions::get_current_version_number(); // In Theme
+			get_template_directory_uri() . '/components/partials/<%= blockFilename %>/templates/styles/<%= blockFilename %>.min.css',
-
-		// $base_path = plugin_dir_url( __FILE__ ); // In Plugins
-		$base_path = get_template_directory_uri() . '/components/partials/<%= blockFilename %>/';
-
-		wp_register_style( '<%= blockFilename %>',
-			$base_path . 'templates/styles/<%= blockFilename %>.min.css',
 			[ 'style-wp' ],
-			$version
+			Global_Functions::get_current_version_number()
 		);
-		wp_enqueue_style( '<%= blockFilename %>' );
 
-		wp_register_script( 'script-<%= blockFilename %>',
+		wp_enqueue_script( '<%= blockFilename %>',
-			$base_path . 'templates/scripts/<%= blockFilename %>.min.js',
+			get_template_directory_uri() . '/components/partials/<%= blockFilename %>/templates/scripts/<%= blockFilename %>.min.js',
 			[ 'jquery', 'swiper' ],
-			$version,
+			Global_Functions::get_current_version_number(),
 			true
 		);
-		wp_enqueue_script( 'script-<%= blockFilename %>' );
 	}
 
 	public function render( $args = [] ): void {
-    $args = array_merge( [], Helpers\<%= blockClassModel %>_Defaults::default_args( $args ), $args);
+		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
-		$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( $args, self::class );
-
 		echo apply_filters( 'the_content', wpautop( $output ) );
 	}
 
-	<% if (isElementor) { %>function register_elementor_widget( $widgets_manager ): void {
-    require_once "helpers/<%= blockClassModel %>_Elementor_Widget.php";
-  	$widgets_manager->register_widget_type( new Helpers\<%= blockClassModel %>_Elementor_Widget() );
-  }<% } %>
-
 }
-
-// ( new <%= blockClassModel %>_Component() ); // Initialization

platforms/wordpress/templates/Template_Component.php

@@ -5,27 +5,23 @@ namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>;
 class <%= blockClassModel %>_Component extends \Core\Component {
 
 	public function get_content( $args = [] ): string {
-    $default_args = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::default_args', [] ); // Not really practical.
+		$args = array_merge( Helpers\<%= blockClassModel %>_Defaults::default_args(), $args );
+    $args = Helpers\<%= blockClassModel %>_API::prepare_args( $args );
 
-    $args = apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::prepare_args', array_merge( $default_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' ) )( $args, self::class );
+				$output = ( include( __DIR__ . '/templates/<%= blockFilename %>.template.php' ) )( array_merge( [], $args ), self::class );
-
+    		echo apply_filters( 'the_content', wpautop( $output ) );
-    return apply_filters( 'axeweb_blocks/<%= ownerFilename %>/<%= blockFilename %>::content', $output );
+		<% } %>
 	}
 
-  <% if (!include_acf_block && !include_native_gutenberg_block) { %>function register_assets(): void {
+<% if (!include_acf_block && !include_native_gutenberg_block) { %>
-    $version = get_plugin_data( __DIR__ . "/../../scytale-custom-blocks.php" )['Version']; // In Plugins
+	public function register_assets() {
-    // $version = \Core\Global_Functions::get_current_version_number(); // In Theme
+		$this->add_style( __DIR__ . '/templates/styles/<%= blockFilename %>.min.css' );
+        <% if (include_script) { %>$this->add_script( __DIR__ . '/templates/scripts/<%= blockFilename %>.js' );<% } %>
+	}
 
-    // $base_path = get_template_directory_uri() . '/components/partials/<%= blockFilename %>/';
+<% } %><% if (include_elementor_widget) { %>   function register_custom_logic(): void {
-    wp_enqueue_style( 'block-<%= blockFilename %>', plugins_url( 'templates/styles/<%= blockFilename %>.min.css', __FILE__ ), ['assets-style'], get_blocks_version() );<% if (include_script) { %>
-    wp_enqueue_script( 'block-<%= blockFilename %>', plugins_url( 'templates/scripts/<%= blockFilename %>.min.js', __FILE__ ), ['assets-script'], get_blocks_version(), true );<% } %>
-
-    wp_enqueue_script( 'script-block-<%= blockFilename %>' );
-  }<% } %>
-
-  <% if (include_elementor_widget) { %>function register_custom_logic(): void {
 		add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_elementor_widget' ] );
 	}
 
@@ -35,17 +31,21 @@ class <%= blockClassModel %>_Component extends \Core\Component {
 
 <% } %><% if (include_acf_block) { %>  function register_acf_block() {
     $this->register_block( __DIR__ . "/<%= blockFilename %>.block.json", [
-      'style_assets'  => [
+      '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) { %>
-					'name' => '<%= blockFilename %>',
+	      wp_enqueue_script( '<%= blockFilename %>', \Core\Global_Functions::get_file_url( __DIR__ . '/templates/scripts/<%= blockFilename %>.js', true ), ['assets-script'], get_blocks_version() );<% } %>
-					'url'  => plugins_url( 'templates/styles/<%= blockFilename %>.min.css', __FILE__ ),
+      },
-				]
+      'default'        => Helpers\<%= blockClassModel %>_Defaults::default_args(),
+      'supports' => [
+        //'jsx' => true,
+		'color'   => [
+			'background' => true,
+			'text'       => true,
+		],
+		'spacing' => [
+			'margin'  => [ 'top', 'bottom' ],
+			'padding' => [ 'top', 'bottom' ]
 		],
-			'script_assets' => [
-				[
-					'name' => '<%= blockFilename %>',
-					'url'  => plugins_url( 'templates/scripts/<%= blockFilename %>.min.js', __FILE__ ),
-				]
       ]
     ] );
   }
@@ -66,5 +66,3 @@ class <%= blockClassModel %>_Component extends \Core\Component {
   }<% } %>
 
 }
-
-<%= blockClassModel %>_Component::get_instance();

platforms/wordpress/templates/helpers/Template_Defaults.php

@@ -8,10 +8,8 @@ namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\Helpers;
 
 class <%= blockClassModel %>_Defaults {
 	public static function default_args(): array {
-		$args =  <%- defaultData %>;
+		return [
-
+	       'title'           => '<%= title %>',
-    // $args['base_url'] = \Core\Global_Functions::get_file_url( __DIR__ . '/../templates/' );
+		];
-
-    return $args;
 	}
 }

platforms/wordpress/templates/helpers/Template_Elementor_Widget.php

@@ -1,60 +0,0 @@
-<?php
-
-namespace AXEWEB_Blocks\Blocks\<%= ownerClass %>\<%= blockClassModel %>\Helpers;
-
-class <%= blockClassModel %>_Elementor_Widget extends \Elementor\Widget_Base {
-	const PLUGIN_NAME = '<%= blockFilename %>';
-
-	public function get_name() {
-		return self::PLUGIN_NAME;
-	}
-
-	public function get_title() {
-		return '<%= blockClassModel %>';
-	}
-
-	public function get_icon() {
-		return 'eicon-plus-square-o';
-	}
-
-	protected function _register_controls() {
-		$this->start_controls_section( 'section_content', [ 'label' => 'Content' ] );
-
-		$repeater = new \Elementor\Repeater();
-
-		// $repeater->add_control(
-		//	'video_url', [
-		//		'label'       => 'YouTube URL',
-		//		'type'        => \Elementor\Controls_Manager::URL,
-		//		'label_block' => true,
-		//		'condition'   => [
-		//			'type' => 'video',
-		//		],
-		//	]
-		// );
-
-		$this->end_controls_section();
-	}
-
-	function get_style_depends() {
-		return [ '<%= blockFilename %>' ];
-	}
-
-	function get_script_depends() {
-		return [ 'script-<%= blockFilename %>' ];
-	}
-
-	protected function render() {
-		$settings = $this->get_settings_for_display();
-
-		$component = new \AXEWEB_Blocks\Blocks\Scytale\<%= blockClassModel %>\<%= blockClassModel %>_Component();
-
-		$args = self::prepare( $settings );
-		$component->render( $args );
-	}
-
-	public static function prepare( $args ): array {
-	  // Prepare $args for render function.
-		return $args;
-	}
-}

platforms/wordpress/wordpress-adapter.js

@@ -2,25 +2,23 @@ import path from "path";
 import {mkdir, copyFile} from "fs/promises";
 import {capitalize, createFiles, getBlockName, getConfigs, readJSONFile} from "../../helpers.js";
 import {fileURLToPath} from 'url';
-import {copy} from "fs-extra";
-import {exec} from 'child_process';
-import execPhp from "exec-php";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export async function buildWordPress(blockName, isBlock = false, isElementor = false) {
+const {projectPath} = getConfigs();
-  const {modulesPath, projectPath} = getConfigs();
 
+export async function buildWordPress(isBlock = false) {
   const distPath = path.join(projectPath, 'exports', 'wordpress');
-  // await mkdir(distPath, {recursive: true})
+  await mkdir(distPath, {recursive: true})
-  await mkdir(path.join(distPath, 'templates'), {recursive: true})
 
-  const blockFilePath = path.join(projectPath, 'block.json');
+  const jsonFilePath = path.join(projectPath, 'block.json');
+  await copyFile(jsonFilePath, `${distPath}/block.json`)
 
-  let data = await readJSONFile(blockFilePath);
+  let data = await readJSONFile(jsonFilePath);
   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);
 
@@ -33,58 +31,12 @@ export async function buildWordPress(blockName, isBlock = false, isElementor = f
     ownerClass: owner.replace(/ /ig, '_'),
     ownerFilename: owner.toLowerCase().replace(/ /ig, '-'),
     templateFormat: 'php',
-    include_acf_block: isBlock,
+    include_acf_block: false,
     include_native_gutenberg_block: false,
     include_script: true,
-    include_elementor_widget: isElementor,
+    include_elementor_widget: false,
-    isElementor,
   });
 
-  await copyFile(blockFilePath, path.join(distPath, data.blockFilename + '.block.json'));
-
-  const backPath = modulesPath ? modulesPath.split('/').map(() => '..').join('/') : '';
-
-  const phpGeneratorPath = path.join(modulesPath, 'platforms', 'php');
-  await execCommand(`cd ${phpGeneratorPath} && composer install`);
-  await execPHPFile(path.join(phpGeneratorPath, 'build.php'), 'build', {blockName, backPath, projectPath});
-
-  await copyStaticFile(
-    path.join(projectPath, 'src', 'styles', `${data.blockFilename}.min.css`),
-    path.join(distPath, 'templates', 'styles', `${data.blockFilename}.min.css`),
-  );
-
-  await copyStaticFile(
-    path.join(projectPath, 'src', 'scripts', `${data.blockFilename}.min.js`),
-    path.join(distPath, 'templates', 'scripts', `${data.blockFilename}.min.js`),
-  );
-
-  await copy(
-    path.join(projectPath, 'src', 'images'),
-    path.join(distPath, 'templates', 'images'),
-  );
-
-  const phpDataObject = await execPHPFile(path.join(phpGeneratorPath, 'build.php'), 'jsonToPhp', {
-    json: await readJSONFile(path.join(projectPath, 'data', 'default.json'), "utf8"),
-  });
-
-  // await createFiles(Object.assign({}, data, {defaultData: phpDataObject}), [{
-  //   from: `templates/helpers/Template_Defaults.php`,
-  //   to: `helpers/${data.blockClassModel}_Defaults.php`,
-  // }], {
-  //   pathDist: distPath,
-  //   generatorsPath: path.join(__dirname),
-  // });
-
-  if (isElementor) {
-    await createFiles(data, [{
-      from: `templates/helpers/Template_Elementor_Widget.php`,
-      to: `helpers/${data.blockClassModel}_Elementor_Widget.php`,
-    }], {
-      pathDist: distPath,
-      generatorsPath: path.join(__dirname)
-    });
-  }
-
   if (isBlock) {
     await createFiles(data, [{
       from: `templates/Template_Component.php`,
@@ -94,13 +46,21 @@ export async function buildWordPress(blockName, isBlock = false, isElementor = f
       generatorsPath: path.join(__dirname)
     });
 
-    // await createFiles(data, [{
+    await createFiles(data, [{
-    //   from: `templates/helpers/Template_API.php`,
+      from: `templates/helpers/Template_API.php`,
-    //   to: `helpers/${data.blockClassModel}_API.php`,
+      to: `helpers/${data.blockClassModel}_API.php`,
-    // }], {
+    }], {
-    //   pathDist: distPath,
+      pathDist: distPath,
-    //   generatorsPath: path.join(__dirname)
+      generatorsPath: path.join(__dirname)
-    // });
+    });
+
+    await createFiles(data, [{
+      from: `templates/helpers/Template_Defaults.php`,
+      to: `helpers/${data.blockClassModel}_Defaults.php`,
+    }], {
+      pathDist: distPath,
+      generatorsPath: path.join(__dirname)
+    });
   } else {
     await createFiles(data, [{
       from: `templates/Template_Basic_Component.php`,
@@ -111,44 +71,3 @@ export async function buildWordPress(blockName, isBlock = false, isElementor = f
     });
   }
 }
-
-export function execCommand(cmd = '') {
-  return new Promise((resolve, reject) => {
-
-    exec(cmd, function (error) {
-      if (error) {
-        console.log('Error:', error)
-        reject(error);
-      }
-
-      // console.log(stdout);
-      resolve();
-    });
-
-  });
-}
-
-function execPHPFile(file = '', functionName = '', args = {}) {
-  return new Promise((resolve, reject) => {
-    execPhp(file, 'php', (err, php, out) => {
-      if (err) {
-        console.error(out);
-        return reject(err);
-      }
-
-      php[functionName.toLowerCase()](args, (err, res, out) => {
-        if (err) {
-          console.error(out);
-          return reject(err);
-        }
-
-        return resolve(res);
-      })
-    })
-  });
-}
-
-async function copyStaticFile(from = '', to = '') {
-  await mkdir(path.dirname(to), {recursive: true})
-  await copyFile(from, to);
-}

rollup.config.js

@@ -3,17 +3,13 @@ import {nodeResolve} from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 import css from "@modular-css/rollup";
-import copy from 'rollup-plugin-copy';
+import copy from 'rollup-plugin-copy'
-import {terser} from "rollup-plugin-terser";
 
-const devMode = (process.env.NODE_ENV === 'development');
+export default {
-console.log('Build Mode', devMode ? 'Development' : 'Production');
-
-export default [{
   input: 'layouts/scripts/index.js',
   output: {
     file: 'layouts/scripts/dist/index.min.js',
-    sourcemap: devMode,
+    sourcemap: true
   },
   plugins: [
     nodeResolve({
@@ -30,21 +26,10 @@ export default [{
       presets: ["@babel/preset-react"],
     }),
     commonjs(),
-    !devMode && terser(),
     copy({
       targets: [
-        {src: 'layouts/scripts/toolbar/images/**/*', dest: 'layouts/scripts/dist/toolbar/images'}
+        { src: 'layouts/scripts/toolbar/images/**/*', dest: 'layouts/scripts/dist/toolbar/images' }
       ]
     })
   ],
-}, {
+}
-  input: 'layouts/scripts/frame/frame.js',
-  output: {
-    file: 'layouts/scripts/dist/frame-index.min.js',
-    sourcemap: devMode
-  },
-  plugins: [
-    commonjs(),
-    !devMode && terser()
-  ]
-}];

server.js

@@ -4,6 +4,7 @@ import path from 'path';
 import fetch from "node-fetch";
 import express from 'express';
 import {create} from 'express-handlebars';
+import fsExtra from 'fs-extra';
 import browserSync from 'browser-sync';
 import config from 'config';
 import gulp from 'gulp';
@@ -18,18 +19,16 @@ import open from "open";
 import {sanitizeUrl} from "@braintree/sanitize-url";
 import sanitizeHtml from 'sanitize-html';
 import {escape} from "lodash-es";
-import {getBlockConfigs, getConfigs, readJSONFile, zipProject} from "./helpers.js";
+import archiver from 'archiver';
+import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js";
 import PluginError from 'plugin-error';
 
 /**
  * Constants
  */
 
-const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
-
 const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
-const blocksRegistry = isDev ? 'http://localhost:3020' : PRODUCTION_REGISTRY_URL;
+const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
-
 
 /**
  * Init server
@@ -76,7 +75,7 @@ app.get('/', async (req, res) => {
 
   data.helpers = {
     port,
-    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+    include_partial: (filesPath) => path.join(modulesPath, filesPath),
     baseView,
     previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
   }
@@ -94,14 +93,10 @@ app.get('/view/:baseView', async (req, res) => {
   const blockName = config.has('blockName') ? config.get('blockName') : developmentBlockName;
 
   data.helpers = {
-    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
+    include_partial: (filesPath) => path.join(modulesPath, filesPath),
-    include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
+    include_block_template: () => path.join(projectPath, 'src', `${blockName}.template`),
     section_class: `${blockName}--${jsonFileName}`,
-    base_url: '/',
+    base_url: '/'
-  }
-
-  if (!!req.query.iframe) {
-    data.iframeMode = true;
   }
 
   const baseView = req.params.baseView ?? 'container';
@@ -132,7 +127,7 @@ app.get('/publish', async (req, res) => {
   }
 
   if (responseData.uploadUrl) {
-    await zipProject(path.join(projectPath, 'src'));
+    await zipProject();
     const body = await fs.readFile(path.join(projectPath, 'dist.zip'));
     const response = await fetch(`${responseData.uploadUrl}`, {
       method: 'PUT',
@@ -223,7 +218,7 @@ function startBrowserSync() {
         return cb();
       }]));
 
-      gulp.watch(path.posix.join(projectPath, "src/**/*.scss"), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
+      gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
         browserSyncReload(bs, 'css', 'Style Files Change');
         return cb();
       }]));
@@ -277,12 +272,12 @@ function browserSyncReload(bs, extension = '', message = '') {
 }
 
 function getJSBundleFiles() {
-  return [path.posix.join(projectPath, "src/**/*.js"), path.posix.join(projectPath, "src/**/*.mjs"), "!" + path.posix.join(projectPath, "src/**/*.min.js")];
+  return [path.join(projectPath, 'src/**/*.js'), path.join(projectPath, 'src/**/*.mjs'), '!' + path.join(projectPath, 'src/**/*.min.js')];
 }
 
 function buildScriptFiles(done) {
   const files = getJSBundleFiles();
-  return gulp.src(files, {base: path.posix.join(projectPath, 'src')})
+  return gulp.src(files)
     .pipe(sourcemaps.init({}))
     .pipe(babel()).on('error', function (error) {
       showError(new PluginError('JavaScript', error).toString());
@@ -293,11 +288,11 @@ function buildScriptFiles(done) {
     .pipe(uglify())
     .pipe(rename({extname: '.min.js'}))
     .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest(path.posix.join(projectPath, 'src')));
+    .pipe(gulp.dest(path.join(projectPath, 'src/')));
 }
 
 function buildStyleFiles(done) {
-  return gulp.src(path.join(projectPath, 'src/**/*.scss'), {base: path.posix.join(projectPath, 'src')})
+  return gulp.src(path.join(projectPath, 'src/**/*.scss'))
     .pipe(sourcemaps.init({}))
     .pipe(sass.sync({outputStyle: 'compressed'}).on('error', function (error) {
       showError(new PluginError('SCSS', error.messageFormatted).toString());
@@ -307,7 +302,7 @@ function buildStyleFiles(done) {
     // .pipe(gulp.dest('src/'))
     .pipe(rename({extname: '.min.css'}))
     .pipe(sourcemaps.write('.', {}))
-    .pipe(gulp.dest(path.posix.join(projectPath, 'src')))
+    .pipe(gulp.dest(path.join(projectPath, 'src')))
 }
 
 function buildAssetFiles() {
@@ -341,6 +336,52 @@ function prepareListOfDataFiles(dataFiles) {
     .sort();
 }
 
+
+async function zipProject() {
+  // create a file to stream archive data to.
+  const output = await fsExtra.createWriteStream('dist.zip');
+  const archive = archiver('zip', {});
+
+  // listen for all archive data to be written
+  // 'close' event is fired only when a file descriptor is involved
+  output.on('close', function () {
+    console.log(archive.pointer() + ' total bytes');
+    console.log('archiver has been finalized and the output file descriptor has closed.');
+  });
+
+  // This event is fired when the data source is drained no matter what was the data source.
+  // It is not part of this library but rather from the NodeJS Stream API.
+  // @see: https://nodejs.org/api/stream.html#stream_event_end
+  output.on('end', function () {
+    console.log('Data has been drained');
+  });
+
+  // good practice to catch warnings (ie stat failures and other non-blocking errors)
+  archive.on('warning', function (err) {
+    if (err.code === 'ENOENT') {
+      // log warning
+    } else {
+      // throw error
+      throw err;
+    }
+  });
+
+  // good practice to catch this error explicitly
+  archive.on('error', function (err) {
+    throw err;
+  });
+
+  // pipe archive data to the file
+  archive.pipe(output);
+
+  // append files from a subdirectory, putting its contents at the root of archive
+  archive.directory(path.join(projectPath, 'src', '/'), false);
+
+  // finalize the archive (ie we are done appending files but streams have to finish yet)
+  // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
+  await archive.finalize();
+}
+
 function handleSyntaxErrors(err, req, res, next) {
   if (err) {
     return res.render('error', {
@@ -353,8 +394,3 @@ function handleSyntaxErrors(err, req, res, next) {
 
   next();
 }
-
-function handlebarLayoutsPath() {
-  return path.join(...arguments)
-    .replace(/\\/g, '/'); // Windows path issue. Fix all "\" for Handlebars.
-}