Migrate blocks to block api v3

.gitignore

@@ -9,6 +9,7 @@
 web.config
 /db-config.php
 /index.php
+/private/.yarn
 /private/node_modules
 /readme.html
 /wp-activate.php
@@ -22,6 +23,7 @@ web.config
 /wp-content/backup-db/*
 /wp-content/blogs.dir/*
 /wp-content/cache/*
+/wp-content/debug.log
 /wp-content/index.php
 /wp-content/languages/*
 /wp-content/mu-plugins/*
@@ -30,6 +32,7 @@ web.config
 /wp-content/themes/humanity-theme/assets/images/*
 /wp-content/themes/humanity-theme/assets/scripts/*
 /wp-content/themes/humanity-theme/assets/styles/*
+/wp-content/themes/humanity-theme/build/*
 /wp-content/themes/index.php
 /wp-content/themes/twenty*
 /wp-content/upgrade/*

phpcs.xml

@@ -3,4 +3,5 @@
   <description>PHPCS linting rules for the Humanity Theme</description>
   <config name="minimum_supported_wp_version" value="5.8" />
   <rule ref="./vendor/bigbite/phpcs-config/BigBite" />
+  <exclude-pattern>./build/**/*.asset.php</exclude-pattern>
 </ruleset>

private/.eslintrc

@@ -24,11 +24,11 @@
     "prettier/prettier": ["error"],
     "react/prop-types": "off",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-    "@wordpress/i18n-text-domain": ["error", { "allowedTextDomain": ["amnesty", "default"] }]
+    "@wordpress/i18n-text-domain": ["error", { "allowedTextDomain": ["amnesty", "default"]}]
   },
   "settings": {
     "react": {
-      "version": "18.2.0"
+      "version": "18.3.1"
     }
   }
 }

private/.prettierrc

@@ -1,5 +1,8 @@
 {
+  "arrowParens": "always",
+  "endOfLine": "auto",
   "printWidth": 100,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "semi": true
 }

private/bin/lint.sh

@@ -19,8 +19,8 @@ trap error_out 1 2 3 6
 # lint all the things
 composer lint
 cd ./private
-yarn lint:scripts
-yarn lint:styles
+yarn lint:scss
+yarn lint:js
 cd ..
 
 if which shfmt > /dev/null; then

private/package.json

@@ -6,81 +6,71 @@
   "license": "GPL-2.0-or-later",
   "packageManager": "[email protected]",
   "scripts": {
-    "build:dev": "webpack --mode development",
-    "build:prod": "webpack --mode production",
-    "build:static": "webpack --mode production --env static",
-    "build": "webpack --mode production",
-    "watch:dev": "webpack --mode development --watch",
-    "watch:prod": "webpack --mode production --watch",
-    "watch": "webpack --mode development --watch",
-    "lint:scripts": "eslint ./src/",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
-    "lint": "yarn lint:scripts; yarn lint:styles",
+    "build": "wp-scripts build --webpack-copy-php --source-path=./src --output-path=../wp-content/themes/humanity-theme/build",
+    "watch": "wp-scripts start --webpack-copy-php --source-path=./src --output-path=../wp-content/themes/humanity-theme/build",
+    "lint": "yarn lint:scss; yarn lint:js",
+    "lint:scss": "stylelint ./src/**/*.scss",
+    "lint:js": "eslint ./src/**/*.(js|jsx)",
     "env": "yarn dlx @wordpress/env"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@babel/plugin-proposal-pipeline-operator": "^7.16.0",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/plugin-transform-optional-chaining": "^7.23.4",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "@wordpress/eslint-plugin": "^17.4.0",
-    "@wordpress/i18n": "^4.2.4",
-    "autoprefixer": "^10.4.0",
-    "babel-loader": "^9.1.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
-    "esbuild-loader": "^4.0.2",
-    "eslint": "^8.3.0",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.25.9",
+    "@playwright/test": "^1.49.1",
+    "@types/react": "^19.0.8",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.2.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "expose-loader": "^4.0.0",
-    "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "node-normalize-scss": "^8.1.2",
-    "postcss": "^8.4.32",
-    "postcss-banner": "^4.0.1",
-    "postcss-loader": "^7.0.1",
-    "postcss-pxtorem": "^6.0.0",
-    "postcss-reporter": "^7.0.4",
-    "postcss-scss": "^4.0.3",
-    "prettier": "^3.1.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "resolve-url-loader": "^5.0.0",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.2.2",
-    "sass-mq": "^6.0.0",
-    "style-loader": "^3.3.1",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-scss": "^5.3.1",
-    "stylelint-webpack-plugin": "^4.1.1",
-    "typescript": "^5.3.2",
-    "webpack": "^5.94.0",
-    "webpack-cli": "^5.0.0"
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "postcss": "^8.4.49",
+    "postcss-pxtorem": "^6.1.0",
+    "postcss-reporter": "^7.1.0",
+    "prettier": "^3.4.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
+    "stylelint": "^16.12.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-scss": "^6.10.0",
+    "stylelint-webpack-plugin": "^5.0.1",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^7.0.1",
-    "classnames": "^2.3.1",
-    "core-js": "^3.19.1",
-    "css-vars-ponyfill": "^2.4.7",
-    "delegate": "^3.2.0",
-    "flickity": "^2.2.2",
-    "flickity-as-nav-for": "^2.0.1",
-    "intersection-observer": "^0.12.0",
-    "js-cookie": "^3.0.1",
-    "memize": "^1.1.0",
-    "object-fit-images": "^3.2.4",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-select": "^5.7.2"
+    "@braintree/sanitize-url": "^7.1.1",
+    "@wordpress/api-fetch": "^7.15.1",
+    "@wordpress/block-editor": "^14.10.1",
+    "@wordpress/blocks": "^14.4.1",
+    "@wordpress/components": "^29.1.1",
+    "@wordpress/compose": "^7.15.1",
+    "@wordpress/core-data": "^7.15.1",
+    "@wordpress/data": "^10.15.1",
+    "@wordpress/dom": "^4.18.0",
+    "@wordpress/editor": "^14.15.1",
+    "@wordpress/element": "^6.15.1",
+    "@wordpress/eslint-plugin": "^22.2.0",
+    "@wordpress/hooks": "^4.15.0",
+    "@wordpress/i18n": "^5.15.1",
+    "@wordpress/plugins": "^7.17.0",
+    "@wordpress/scripts": "^30.8.1",
+    "@wordpress/server-side-render": "^5.15.1",
+    "@wordpress/url": "^4.15.0",
+    "classnames": "^2.5.1",
+    "core-js": "^3.40.0",
+    "flickity": "^3.0.0",
+    "flickity-as-nav-for": "^3.0.0",
+    "intersection-observer": "^0.12.2",
+    "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
+    "memize": "^2.1.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-select": "^5.9.0"
   }
 }

private/postcss.config.js

@@ -2,12 +2,10 @@ const autoprefixer = require('autoprefixer');
 const pxtorem = require('postcss-pxtorem');
 const reporter = require('postcss-reporter');
 
-module.exports = {
-  plugins: [
-    autoprefixer(),
-    pxtorem({
-      prop_white_list: ['font', 'font-size', 'line-height', 'letter-spacing'],
-    }),
-    reporter({ clearMessages: true }),
-  ],
-};
+module.exports = [
+  autoprefixer(),
+  pxtorem({
+    prop_white_list: ['font', 'font-size', 'line-height', 'letter-spacing'],
+  }),
+  reporter({ clearMessages: true }),
+];

private/src/admin/block.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "amnesty-core/admin-assets",
+  "title": "Admin assets build",
+  "description": "This is a fake block to make wp-scripts build our admin assets",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "supports": {
+    "inserter": false
+  }
+}

private/src/scripts/admin/cmb-events.js → private/src/admin/cmb-events.js

@@ -1,5 +1,5 @@
-const { isFunction } = lodash;
-const { applyFilters } = wp.hooks;
+import { isFunction } from 'lodash';
+import { applyFilters } from '@wordpress/hooks';
 
 let globalChangeEvent;
 

private/src/admin/cmb-font-options.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('#cmb2-metabox-amnesty_font_options_page');
+
+  if (!form) {
+    return;
+  }
+
+  const initial = form.querySelector('.cmb2-option[name="font_load_type"]:checked').value;
+
+  const repaint = (selector, compare) => {
+    form.querySelectorAll(selector).forEach((el) => {
+      if (el.dataset.showFor.indexOf(compare) !== -1) {
+        // eslint-disable-next-line no-param-reassign
+        el.closest('.cmb-row').style.display = 'block';
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        el.closest('.cmb-row').style.display = 'none';
+      }
+    });
+  };
+
+  repaint('[data-show-for]', initial);
+
+  form.addEventListener('click', (e) => {
+    if (!e.target.classList.contains('cmb2-options')) {
+      return;
+    }
+
+    repaint('[data-show-for]', e.target.value);
+  });
+});

private/src/scripts/admin/cmb-term-type.js → private/src/admin/cmb-term-type.js

@@ -1,4 +1,4 @@
-const { addFilter } = wp.hooks;
+import { addFilter } from '@wordpress/hooks';
 
 addFilter('amnesty.cmb2.change.type', 'amnesty/cmb2', () => (event, $form) => {
   const type = event.target.value;

private/src/admin/index.js

@@ -0,0 +1,6 @@
+import './index.scss';
+import './cmb-events';
+import './cmb-font-options';
+import './cmb-term-type';
+import './ordered-list-preview';
+import './options-general';

private/src/admin/index.scss

@@ -0,0 +1,12 @@
+@use "cmb2";
+@use "user-profile";
+@use "localisation-options";
+
+:root {
+  --amnesty-icon-path: url("../images/sprite.svg"), none;
+  --wp--preset--layout--contentSize: 1468px;
+}
+
+.is-hidden {
+  display: none;
+}