wp-blank-scripts 3.1.18 → 4.0.0-alpha.0

package/webpack.base.config.js

@@ -10,11 +10,10 @@ const glob = require('glob');
 const postcssPresetEnv = require('postcss-preset-env');
 
 const logger = require('./logger');
-const { copyFiles, copyFx, loaderOptions } = require('./overridable');
+const { copyFiles, loaderOptions } = require('./overridable');
 
 const getEnvironmentFile = require('./utils/getEnvironmentFile');
 const getSettings = require('./utils/projectSettings');
-const getFxFiles = require('./utils/getFxFiles');
 const verifyLoaderOptions = require('./utils/verifyLoaderOptions');
 
 function makeBaseConfig(options) {
@@ -30,11 +29,21 @@ function makeBaseConfig(options) {
 
   // Absolute paths
   const sourcePath = path.join(process.cwd(), sourceDir);
-  const buildPath = path.join(process.cwd(), settings.directories.build);
+  const buildDir = process.env.DEPLOY_OUT_DIR || settings.directories.build;
+  const buildPath = path.join(process.cwd(), buildDir);
   const themePath = path.join(buildPath, themeDir);
 
-  const fxFiles = getFxFiles(copyFx());
   const fontsDir = path.join(sourceDir, 'assets', 'fonts');
+  const fxClassesDir = 'vendor/vivo-digital/fx-classes';
+
+  // Detect legacy vs new image directory (legacy: assets/img, new: assets/images)
+  const legacyImgDir = path.join(sourceDir, 'assets', 'img');
+  const imgSourceDir = fs.existsSync(legacyImgDir)
+    ? legacyImgDir
+    : path.join(sourceDir, 'assets', 'images');
+  const imgDestDir = fs.existsSync(legacyImgDir)
+    ? path.join(themePath, 'assets', 'img')
+    : path.join(themePath, 'assets', 'images');
 
   const sourceFiles = [
     {
@@ -47,8 +56,8 @@ function makeBaseConfig(options) {
     },
     { from: path.join(sourceDir, 'style.css'), to: themePath },
     {
-      from: path.join(sourceDir, 'assets', 'img'),
-      to: path.join(themePath, 'assets', 'img'),
+      from: imgSourceDir,
+      to: imgDestDir,
       globOptions: { ignore: ['.DS_Store'] },
     },
     ...(fs.existsSync(fontsDir)
@@ -67,6 +76,41 @@ function makeBaseConfig(options) {
         ignore: ['.DS_Store'],
       },
     },
+    ...(fs.existsSync(path.join(sourceDir, 'parts'))
+      ? [
+          {
+            from: path.join(sourceDir, 'parts'),
+            to: path.join(themePath, 'parts'),
+            globOptions: { ignore: ['.DS_Store'] },
+          },
+        ]
+      : []),
+    // Blocks
+    ...(fs.existsSync(path.join(sourceDir, 'blocks'))
+      ? [
+          {
+            from: path.join(sourceDir, 'blocks', '**', 'block.json'),
+            to({ absoluteFilename }) {
+              const relativePath = path.relative(
+                path.join(sourceDir, 'blocks'),
+                path.dirname(absoluteFilename)
+              );
+              return path.join(themePath, 'blocks', relativePath, 'block.json');
+            },
+          },
+          {
+            from: path.join(sourceDir, 'blocks', '**', 'render.php'),
+            to({ absoluteFilename }) {
+              const relativePath = path.relative(
+                path.join(sourceDir, 'blocks'),
+                path.dirname(absoluteFilename)
+              );
+              return path.join(themePath, 'blocks', relativePath, 'render.php');
+            },
+          },
+        ]
+      : []),
+    // /End blocks
     {
       from: path.join(sourceDir, 'inc'),
       to: path.join(themePath, 'inc'),
@@ -79,12 +123,22 @@ function makeBaseConfig(options) {
       },
       globOptions: { ignore: ['.DS_Store'] },
     },
-    ...fxFiles.copy.map(({ context, from, to }) => ({
-      from,
-      to: path.join(themePath, 'inc', to),
-      context,
-      globOptions: { ignore: ['.DS_Store'] },
-    })),
+    ...(fs.existsSync(fxClassesDir)
+      ? [
+          {
+            from: '**/*',
+            to: path.join(themePath, 'inc', 'fx-classes'),
+            context: path.join(fxClassesDir, 'dist'),
+            globOptions: { ignore: ['.DS_Store'] },
+          },
+          {
+            from: '**/*',
+            to: path.join(themePath, 'inc', 'fx-classes'),
+            context: path.join(fxClassesDir, 'lib'),
+            globOptions: { ignore: ['.DS_Store'] },
+          },
+        ]
+      : []),
   ];
 
   const envFiles = [
@@ -112,19 +166,6 @@ function makeBaseConfig(options) {
     { from: 'wp-content', to: 'wp-content' },
   ];
 
-  // ViVO Master Blocks package copy process
-  const includeBlocks = process.env.MASTER_BLOCKS;
-  const masterBlocksPath = process.env.MASTER_BLOCKS_DEV
-    ? '../../vivo/vivo-master-blocks/dist'
-    : 'vendor/vivo-digital/vivo-master-blocks/dist';
-
-  const masterBlocks = [
-    {
-      from: path.join(process.cwd(), masterBlocksPath),
-      to: path.join(themePath, 'inc', 'vivo-master-blocks'),
-    },
-  ];
-
   let customFiles = [];
   if (typeof copyFiles === 'function') {
     customFiles = copyFiles({
@@ -136,20 +177,44 @@ function makeBaseConfig(options) {
     });
   }
 
-  const filesToCopy = [
-    ...sourceFiles,
-    ...envFiles,
-    ...wordpressFiles,
-    ...customFiles,
-    ...(includeBlocks ? masterBlocks : []),
-  ];
-
-  // 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 filesToCopy = [...sourceFiles, ...envFiles, ...wordpressFiles, ...customFiles];
 
+  // Admin entries — use same structure detection as webpack.wp.config.js (src/index.js = new)
+  const isLegacyStructure = !fs.existsSync(path.join(sourcePath, 'index.js'));
+  const adminScripts = isLegacyStructure
+    ? glob.sync(path.join(sourcePath, 'assets', 'admin', 'js', '*.js'))
+    : glob.sync(path.join(sourcePath, 'admin', '*.js'));
+  const adminStyles = isLegacyStructure
+    ? glob.sync(path.join(sourcePath, 'assets', 'admin', 'css', '*.scss'))
+    : glob.sync(path.join(sourcePath, 'admin', '*.scss'));
   const mainStyleVariables = path.join(sourcePath, 'assets', 'css', 'utils', 'variables.scss');
 
+  // Admin component styles (new structure only)
+  const adminComponentStyles = isLegacyStructure
+    ? []
+    : glob.sync(path.join(sourcePath, 'admin', 'components', '***', '*.{scss,css}'));
+
+  const blockJsonFiles = [];
+
+  glob.sync(path.join(sourcePath, 'blocks', '***', '*.json')).forEach((filePath) => {
+    blockJsonFiles.push(filePath);
+  });
+
+  const blockJsonScripts = [];
+  const blockJsonStyles = [];
+
+  blockJsonFiles.forEach((file) => {
+    const content = JSON.parse(fs.readFileSync(file, 'utf-8'));
+    if (content.editorScript) {
+      const editorScript = `${path.dirname(file)}/${content.editorScript}`;
+      blockJsonScripts.push(editorScript);
+    }
+    if (content.editorStyle) {
+      const editorStyle = `${path.dirname(file)}/${content.editorStyle}`;
+      blockJsonStyles.push(editorStyle);
+    }
+  });
+
   let sassVariables = `$env: ${process.env.NODE_ENV};`;
 
   for (const key of Object.keys(process.env)) {
@@ -173,8 +238,8 @@ function makeBaseConfig(options) {
     mode,
     target: 'web',
     entry: {
-      adminScripts: [...fxFiles.admin.js, ...adminScripts],
-      'admin.style': [...fxFiles.admin.sass, ...adminStyles],
+      adminScripts: [...blockJsonScripts, ...adminScripts],
+      'admin.style': [...blockJsonStyles, ...adminComponentStyles, ...adminStyles],
     },
     output: {
       path: buildPath,
@@ -234,9 +299,16 @@ function makeBaseConfig(options) {
             {
               loader: 'sass-loader',
               options: {
+                api: 'modern',
                 sourceMap: !isProd,
                 additionalData: sassVariables,
-                api: 'modern',
+                sassOptions: {
+                  // Silence Dart Sass 2+ deprecation warnings from legacy project SCSS.
+                  // These are expected in older projects and will need to be migrated
+                  // project-by-project via: wp-scripts migrate-sass
+                  // New projects using @use/@forward won't trigger these.
+                  silenceDeprecations: ['import', 'color-functions', 'slash-div', 'global-builtin'],
+                },
               },
             },
           ],
@@ -271,6 +343,7 @@ function makeBaseConfig(options) {
     devtool: isProd ? undefined : 'cheap-module-source-map',
     performance: {
       maxEntrypointSize: Infinity,
+      maxAssetSize: Infinity,
       assetFilter: function (assetFilename) {
         // Only warn about large JS assets
         return (

package/webpack.react.config.js

@@ -20,8 +20,8 @@ function makeReactWebpackConfig(options) {
   const entryPath = [path.join(sourcePath, 'index.js')];
   const globalVariablesPath = path.join(sourcePath, 'variables.scss');
   const globalVariables = fs.existsSync(globalVariablesPath)
-    ? fs.readFileSync(globalVariablesPath, 'utf8') + '\n'
-    : '';
+    ? fs.readFileSync(globalVariablesPath, 'utf8')
+    : null;
 
   const settings = getSettings();
   const themeDir = path.join('wp-content', 'themes', settings.project);
@@ -146,7 +146,7 @@ function makeReactWebpackConfig(options) {
           test: /\.(gif|png|svg|jpe?g)$/i,
           type: 'asset/resource',
           generator: {
-            filename: `${path.join(themeDir, 'assets', 'img')}/[contenthash][ext][query]`,
+            filename: `${path.join(themeDir, 'assets', 'images')}/[contenthash][ext][query]`,
           },
         },
         {

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,53 +7,81 @@ 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());
-
-  // Source entries
-  const mainScripts = {};
-  glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach((filePath) => {
-    const name = path.basename(filePath, '.js');
-    mainScripts[name] = [filePath];
+  // Detect project structure: new (4.0) uses src/index.js, legacy (3.x) uses src/assets/js/
+  const isNewStructure = fs.existsSync(path.join(sourcePath, 'index.js'));
+
+  // Blocks (supported in both structures)
+  const blockJsonScripts = [];
+  const blockJsonStyles = [];
+
+  glob.sync(path.join(sourcePath, 'blocks', '***', '*.json')).forEach((file) => {
+    const content = JSON.parse(fs.readFileSync(file, 'utf-8'));
+    if (content.viewScript) {
+      blockJsonScripts.push(`${path.dirname(file)}/${content.viewScript}`);
+    }
+    if (content.viewStyle) {
+      blockJsonStyles.push(`${path.dirname(file)}/${content.viewStyle}`);
+    }
   });
 
-  glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach((filePath) => {
-    const name = path.basename(filePath, '.js');
-    mainScripts[`gutenberg/${name}`] = [filePath];
-  });
+  // Parts (supported in both structures)
+  const partsScripts = glob.sync(path.join(sourcePath, 'parts', '***', '*.js'));
+  const partsStyles = glob.sync(path.join(sourcePath, 'parts', '***', '*.{scss,css}'));
 
-  if (!mainScripts.main) {
-    mainScripts.main = [];
-  }
+  let entry;
 
-  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 (isNewStructure) {
+    // New 4.0 structure: src/index.js + src/style.scss
+    const entryScript = glob.sync(path.join(sourcePath, 'index.js'));
+    if (!entryScript.length) {
+      logger.warn('No file was found for the common chunk, make sure you have a index.js file');
+    }
+    const mainStyles = glob.sync(path.join(sourcePath, 'style.scss'));
 
-  mainScripts.main.push(...fxFiles.js);
+    entry = {
+      main: [...blockJsonScripts, ...partsScripts, ...entryScript],
+      style: [...blockJsonStyles, ...partsStyles, ...mainStyles],
+    };
+  } else {
+    // Legacy 3.x structure: src/assets/js/*.js + gutenberg + src/assets/css/*.scss
+    const mainScripts = {};
 
-  const mainStyles = glob.sync(path.join(sourcePath, 'assets', 'css', '*.scss'));
+    glob.sync(path.join(sourcePath, 'assets', 'js', '*.js')).forEach((filePath) => {
+      const name = path.basename(filePath, '.js');
+      mainScripts[name] = [filePath];
+    });
 
-  return {
-    entry: {
+    glob.sync(path.join(sourcePath, 'assets', 'js', 'gutenberg', '*.js')).forEach((filePath) => {
+      const name = path.basename(filePath, '.js');
+      mainScripts[`gutenberg/${name}`] = [filePath];
+    });
+
+    if (!mainScripts.main) {
+      mainScripts.main = [];
+      logger.warn('No file was found for the common chunk, make sure you have a main.js file');
+    }
+
+    mainScripts.main.unshift(...blockJsonScripts, ...partsScripts);
+
+    const mainStyles = glob.sync(path.join(sourcePath, 'assets', 'css', '*.scss'));
+
+    entry = {
       ...mainScripts,
-      style: [...fxFiles.sass, ...mainStyles],
-    },
+      style: [...blockJsonStyles, ...partsStyles, ...mainStyles],
+    };
+  }
+
+  return {
+    entry,
     plugins: [
       new MiniCssExtractPlugin({
         filename: path.join(themeDir, 'assets', 'css', '[name].css'),

package/overridable/copyFx.js

@@ -1,5 +0,0 @@
-function copyFx() {
-  return {};
-}
-
-module.exports = copyFx;

package/utils/deploySQLFromCI.js

@@ -1,34 +0,0 @@
-const fs = require('fs');
-const fetch = require('node-fetch');
-
-const getMostRecentSqlFile = require('./getMostRecentSqlFile');
-const getSettings = require('./projectSettings');
-const replaceSQL = require('../utils/replaceSQL');
-
-const DEPLOY_URL = 'https://a64vpm7gjh4nzgmrys6vmltsva0dydvc.lambda-url.ap-southeast-2.on.aws/';
-
-async function deploySQLFromCI(options) {
-  const file = getMostRecentSqlFile(true);
-
-  console.log({ file });
-
-  await replaceSQL({
-    environmentIn: 'local',
-    environmentOut: options.environment,
-    file,
-  });
-
-  const sql = fs.readFileSync(file, 'utf8');
-
-  const response = await fetch(DEPLOY_URL, {
-    method: 'POST',
-    body: JSON.stringify({
-      sql,
-      settings: getSettings(),
-    }),
-  });
-
-  console.log(response.status);
-}
-
-module.exports = deploySQLFromCI;

package/utils/getDefaultSetup.js

@@ -1,5 +0,0 @@
-module.exports = () => ({
-  agency: 'ViVO Digital',
-  agencySlug: 'vivo',
-  agencyWebsite: 'https://vivo.digital',
-});

package/utils/getFxFiles.js

@@ -1,119 +0,0 @@
-const glob = require('glob');
-const path = require('path');
-
-const FX_MODULE_SASS_ENTRY = 'assets/styles.scss';
-const FX_MODULE_JS_ENTRY = 'assets/index.js';
-const FX_MODULE_ADMIN_SASS_ENTRY = 'admin/styles.scss';
-const FX_MODULE_ADMIN_JS_ENTRY = 'admin/index.js';
-const FX_MODULE_LIB = 'lib';
-
-const FX_CLASSES_ASSETS = 'dist';
-const FX_CLASSES_LIB = 'lib';
-
-function getAllViVODeps() {
-  return glob.sync('vendor/vivo-digital/*/');
-}
-
-function isFxClasses(dep) {
-  return dep.name.includes('fx-classes');
-}
-
-function isFxModule(dep) {
-  return dep.name.includes('fx-module-');
-}
-
-function formatCopyOptions(deps) {
-  const copyOptions = [];
-  deps.forEach(dep => {
-    const { name, dir } = dep;
-    if (isFxClasses(dep)) {
-      copyOptions.push({
-        context: path.join(dir, FX_CLASSES_ASSETS),
-        from: '**/*',
-        to: name,
-      });
-
-      copyOptions.push({
-        context: path.join(dir, FX_CLASSES_LIB),
-        from: '**/*',
-        to: name,
-      });
-
-      return;
-    }
-
-    if (isFxModule(dep)) {
-      copyOptions.push({
-        context: path.join(dir, FX_MODULE_LIB),
-        from: '**/*',
-        to: name,
-      });
-    }
-  });
-
-  return copyOptions;
-}
-
-function getSassEntry(dep) {
-  // TODO: Check exists
-  return path.join(dep.dir, FX_MODULE_SASS_ENTRY);
-}
-
-function getJsEntry(dep) {
-  // TODO: Check exists
-  return path.join(dep.dir, FX_MODULE_JS_ENTRY);
-}
-
-function getAdminSassEntry(dep) {
-  // TODO: Check exists
-  return path.join(dep.dir, FX_MODULE_ADMIN_SASS_ENTRY);
-}
-
-function getAdminJsEntry(dep) {
-  // TODO: Check exists
-  return path.join(dep.dir, FX_MODULE_ADMIN_JS_ENTRY);
-}
-
-function formatSassEntries(deps, isAdmin) {
-  return deps.filter(isFxModule).map(dep => (isAdmin ? getAdminSassEntry(dep) : getSassEntry(dep)));
-}
-function formatJsEntries(deps, isAdmin) {
-  return deps.filter(isFxModule).map(dep => (isAdmin ? getAdminJsEntry(dep) : getJsEntry(dep)));
-}
-
-function getFxFiles(overrides) {
-  const depPaths = getAllViVODeps();
-
-  const deps = depPaths.map(depPath => {
-    const name = path.basename(depPath);
-    const overridePath = overrides[name];
-
-    return {
-      name,
-      dir: overridePath || depPath,
-    };
-  });
-
-  Object.entries(overrides).forEach(([name, dir]) => {
-    const hasDep = deps.some(dep => dep.name === name);
-    if (!hasDep) {
-      // Module doesn't exist, so it must be new, let's include it
-      deps.push({
-        name,
-        dir,
-      });
-    }
-  });
-
-  return {
-    copy: formatCopyOptions(deps),
-    sass: formatSassEntries(deps),
-    js: formatJsEntries(deps),
-    admin: {
-      js: formatJsEntries(deps, true),
-      sass: formatJsEntries(deps, true),
-    },
-  };
-}
-
-module.exports = getFxFiles;