wp-blank-scripts 3.1.12 → 4.0.0-dev-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-blank-scripts",
-  "version": "3.1.12",
+  "version": "4.0.0-dev-0",
   "description": "Personal Wordpress Scripts",
   "main": "index.js",
   "bin": {
@@ -50,6 +50,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "file-loader": "^6.2.0",
     "get-port": "5.1.1",
     "glob": "^10.2.7",
     "html-webpack-plugin": "^5.5.3",
@@ -67,7 +68,7 @@
     "raw-loader": "^4.0.2",
     "react-refresh": "^0.14.0",
     "replace-in-file": "^7.0.1",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.1",
     "rsync": "^0.6.1",
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
@@ -91,4 +92,4 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-node": "^11.1.0"
   }
-}
+}

package/webpack.base.config.js

@@ -67,6 +67,33 @@ function makeBaseConfig(options) {
         ignore: ['.DS_Store'],
       },
     },
+    // Blocks
+    // @TODO, copy the blocks into their own folders
+    {
+      from: path.join(sourceDir, 'blocks', '**', 'block.json'), // Include only block.json
+      to({ absoluteFilename }) {
+        // Extract the directory structure after 'blocks'
+        const relativePath = path.relative(
+          path.join(sourceDir, 'blocks'),
+          path.dirname(absoluteFilename)
+        );
+        // Join the themePath with the relative path to get the desired structure
+        return path.join(themePath, 'blocks', relativePath, 'block.json');
+      },
+    },
+    {
+      from: path.join(sourceDir, 'blocks', '**', 'render.php'), // Include only render.php
+      to({ absoluteFilename }) {
+        // Extract the directory structure after 'blocks'
+        const relativePath = path.relative(
+          path.join(sourceDir, 'blocks'),
+          path.dirname(absoluteFilename)
+        );
+        // Join the themePath with the relative path to get the desired structure
+        return path.join(themePath, 'blocks', relativePath, 'render.php');
+      },
+    },
+    // /End blocks
     {
       from: path.join(sourceDir, 'inc'),
       to: path.join(themePath, 'inc'),
@@ -141,10 +168,31 @@ function makeBaseConfig(options) {
   ];
 
   // Admin entries
-  const adminScripts = glob.sync(path.join(sourcePath, 'assets', 'admin', 'js', '*.js'));
-  const adminStyles = glob.sync(path.join(sourcePath, 'assets', 'admin', 'css', '*.scss'));
+  const adminScripts = glob.sync(path.join(sourcePath, 'assets', 'admin', '*.js'));
+
+  const adminStyles = glob.sync(path.join(sourcePath, 'assets', 'admin', '*.scss'));
+  const mainStyleVariables = path.join(sourcePath, 'assets', 'css', 'utils', 'variables.scss'); //* Not sure if this is needed.
+
+  const blockJsonFiles = [];
+
+  glob.sync(path.join(sourcePath, 'blocks', '***', '*.json')).forEach((filePath) => {
+    blockJsonFiles.push(filePath);
+  });
 
-  const mainStyleVariables = path.join(sourcePath, 'assets', 'css', 'utils', 'variables.scss');
+  const blockJsonScripts = [];
+  const blockJsonStyles = [];
+
+  blockJsonFiles.forEach((file) => {
+    const content = JSON.parse(fs.readFileSync(file, 'utf-8'));
+    if (content.editorScript && fs.existsSync(content.editorScript)) {
+      const editorScript = `${path.dirname(file)}/${content.editorScript}`;
+      blockJsonScripts.push(editorScript);
+    }
+    if (content.editorStyle && fs.existsSync(content.editorStyle)) {
+      const editorStyle = `${path.dirname(file)}/${content.editorStyle}`;
+      blockJsonStyles.push(editorStyle);
+    }
+  });
 
   let sassVariables = `$env: ${process.env.NODE_ENV};`;
 
@@ -169,8 +217,8 @@ function makeBaseConfig(options) {
     mode,
     target: 'web',
     entry: {
-      adminScripts: [...fxFiles.admin.js, ...adminScripts],
-      'admin.style': [...fxFiles.admin.sass, ...adminStyles],
+      adminScripts: [...fxFiles.admin.js, ...blockJsonScripts, ...adminScripts],
+      'admin.style': [...fxFiles.admin.sass, ...blockJsonStyles, ...adminStyles],
     },
     output: {
       path: buildPath,

package/webpack.wp.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const fs = require('fs');
 
 const glob = require('glob');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -6,52 +7,49 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const logger = require('./logger');
 
 // Overridable build config utils
-const { copyFx } = require('./overridable');
-
-const getFxFiles = require('./utils/getFxFiles');
 const getSettings = require('./utils/projectSettings');
 
 function makeWpWebpackConfig() {
-  const mode = process.env.NODE_ENV || 'development';
-
   const settings = getSettings();
 
   const sourceDir = 'src';
   const sourcePath = path.join(process.cwd(), sourceDir);
   const themeDir = path.join('wp-content', 'themes', settings.project);
 
-  const fxFiles = getFxFiles(copyFx());
+  const blockJsonFiles = [];
 
-  // Source entries
-  const mainScripts = {};
-  glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach((filePath) => {
-    const name = path.basename(filePath, '.js');
-    mainScripts[name] = [filePath];
+  glob.sync(path.join(sourcePath, 'blocks', '***', '*.json')).forEach((filePath) => {
+    blockJsonFiles.push(filePath);
   });
 
-  glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach((filePath) => {
-    const name = path.basename(filePath, '.js');
-    mainScripts[`gutenberg/${name}`] = [filePath];
+  const blockJsonScripts = [];
+  const blockJsonStyles = [];
+
+  blockJsonFiles.forEach((file) => {
+    const content = JSON.parse(fs.readFileSync(file, 'utf-8'));
+    if (content.viewScript && fs.existsSync(content.viewScript)) {
+      const viewScript = `${path.dirname(file)}/${content.viewScript}`;
+      blockJsonScripts.push(viewScript);
+    }
+    if (content.style && fs.existsSync(content.style)) {
+      const style = `${path.dirname(file)}/${content.style}`;
+      blockJsonStyles.push(style);
+    }
   });
 
-  if (!mainScripts.main) {
-    mainScripts.main = [];
-  }
+  const entryScript = glob.sync(path.join(sourcePath, 'index.js'));
 
-  const commonChunkFilePath = mainScripts.main[0];
-  if (!commonChunkFilePath) {
-    // We have to have a main.js file to put all common code in, so warn if it's not there
-    logger.warn('No file was found for the common chunk, make sure you have a main.js file');
+  if (!entryScript) {
+    // We have to have a index.js file to put all common code in, so warn if it's not there
+    logger.warn('No file was found for the common chunk, make sure you have a index.js file');
   }
 
-  mainScripts.main.push(...fxFiles.js);
-
-  const mainStyles = glob.sync(path.join(sourcePath, 'assets', 'css', '*.scss'));
+  const mainStyles = glob.sync(path.join(sourcePath, 'style.scss'));
 
   return {
     entry: {
-      ...mainScripts,
-      style: [...fxFiles.sass, ...mainStyles],
+      main: [...blockJsonScripts, ...entryScript],
+      style: [...blockJsonStyles, ...mainStyles],
     },
     plugins: [
       new MiniCssExtractPlugin({