Added logic of creating block from scratch.

create-block.js

@@ -17,7 +17,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
-const blocksRegistry = isDev ? 'https://axe-web-blocks-registry.captain.devdevdev.life' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
+const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
 const blocksDirectory = isDev ? 'blocks/' : '';
 
 if (isDev) {
@@ -74,30 +74,38 @@ async function getBlockSourceFiles(blockName) {
     throw new Error("⚠️ [ERROR]", responseData.message || "Server side error.");
   }
 
-  console.log(`⬇️ Downloading v${responseData.version}`);
-  const zipFile = await downloadFile(responseData.downloadUrl, responseData.name + '.zip');
-
-  // Download, Extract and Remove downloaded file.
-  try {
-    const zip = new StreamZip.async({file: zipFile});
-    await zip.extract(null, `${blocksDirectory}${responseData.name}/src`);
-    await zip.close();
-
-    await fs.promises.access(zipFile, fs.constants.W_OK);
-    await fs.promises.unlink(zipFile);
-  } catch (e) {
-    throw e;
-  }
-
-
-  await createTechnicalFiles({
+  const data = {
     title: responseData.title,
     name: responseData.name,
+    preview_image: responseData.preview_image,
+    remToPx: responseData.config.remToPx ?? 16,
     blockFilename: responseData.name,
+    blockClassName: responseData.name,
     blockGroupName: responseData.project,
     version: responseData.version,
     devToolSource: defaultGitRepo,
-  }, __dirname, `${blocksDirectory}${responseData.name}`);
+  };
+
+  if (responseData.downloadUrl) {
+    console.log(`⬇️ Downloading v${responseData.version}`);
+    const zipFile = await downloadFile(responseData.downloadUrl, responseData.name + '.zip');
+
+    // Download, Extract and Remove downloaded file.
+    try {
+      const zip = new StreamZip.async({file: zipFile});
+      await zip.extract(null, `${blocksDirectory}${responseData.name}/src`);
+      await zip.close();
+
+      await fs.promises.access(zipFile, fs.constants.W_OK);
+      await fs.promises.unlink(zipFile);
+    } catch (e) {
+      throw e;
+    }
+  } else {
+    await createSourceFiles(data, __dirname, `${blocksDirectory}${responseData.name}`);
+  }
+
+  await createTechnicalFiles(data, __dirname, `${blocksDirectory}${responseData.name}`);
 
   if (responseData.config.design_files) {
     await downloadDesignFiles(responseData.name, responseData.config.design_files);
@@ -186,6 +194,30 @@ async function downloadFile(url, fileName) {
   })
 }
 
+export async function createSourceFiles(data, baseDir, distPath) {
+  const pathDist = distPath + '/src'; //path.join(baseDir, distPath);
+  const generatorsPath = path.join(baseDir, 'generators/block/templates/src');
+
+  const store = memFs.create();
+  const filesystem = editor.create(store);
+
+  const files = [
+    {from: 'template.template.hbs', to: `${data.name}.template.hbs`},
+    {from: 'styles/template.scss', to: `styles/${data.name}.scss`},
+    {from: 'scripts/template.js', to: `scripts/${data.name}.js`},
+    'images/demo.jpeg',
+  ];
+
+  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
+}
+
 export async function createTechnicalFiles(data, baseDir, distPath) {
   const pathDist = distPath; //path.join(baseDir, distPath);
   const generatorsPath = path.join(baseDir, 'generators/block/templates');

generators/block/templates/block.json

@@ -4,7 +4,7 @@
 	"title": "<%= title %>",
 	"categories": [],
 	"icon": "shortcode",
-	"preview_image": "",
+	"preview_image": "<%= preview_image %>",
 	"field_groups": [
 		{
 			"name": "content",

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

@@ -103,7 +103,7 @@ function DataOptions(props = {}) {
     dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
 
     return dataOptions.find((item) => {
-      return item.widthDimension === 414;
+      return item.widthDimension; // first
     });
   }
 }