Updates to scaffold repo

Author: ashleyshaw

.github/chatmodes/chatmodes.md

@@ -105,7 +105,7 @@ I'm your WordPress block theme development assistant for **{{theme_name}}**. I c
 
 - `{{theme_slug}}_setup` — Theme setup
 - `{{theme_slug}}_enqueue_assets` — Asset loading
-- `{{theme_slug}}_customize_register` — Customizer options
+- `{{theme_slug}}_register_pattern_categories` — Block pattern categories
 
 ---
 

.github/instructions/playwright-tests.instructions.md

@@ -25,7 +25,7 @@
 - Integrate Playwright into CI/CD.
 
 ## WordPress Theme Testing
-- Cover block registration, rendering, customizer options, frontend/backend appearance, accessibility, device compatibility.
+- Cover block registration, rendering, pattern functionality, frontend/backend appearance, accessibility, device compatibility.
 - Reference: [Theme Testing](https://developer.wordpress.org/themes/releasing-your-theme/testing/)
 
 ## Related Instructions

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
   lint:
     name: Code Quality & Linting
     runs-on: ubuntu-latest
-    
+
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -52,12 +52,12 @@ jobs:
   test:
     name: Run Tests
     runs-on: ubuntu-latest
-    
+
     strategy:
       matrix:
         php-version: [8.0, 8.1, 8.2]
         wp-version: [latest, 6.4, 6.5]
-    
+
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -95,7 +95,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [lint, test]
     if: github.event_name == 'release'
-    
+
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -129,11 +129,45 @@ jobs:
         asset_name: {{theme_slug}}-${{ github.event.release.tag_name }}.zip
         asset_content_type: application/zip
 
+  name: build-files
+          path: build/
+
+  security-audit:
+    name: Security Audit
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run npm audit
+      run: |
+        echo "🔒 Running security audit..."
+        npm audit --audit-level=moderate --production || {
+          echo "❌ Security vulnerabilities detected."
+          echo "Run 'npm audit' locally for details."
+          exit 1
+        }
+
+    - name: Check for outdated dependencies
+      run: |
+        echo "📦 Checking for outdated dependencies..."
+        npm outdated || true
+
   e2e:
     name: End-to-End Tests
     runs-on: ubuntu-latest
     needs: [lint]
-    
+
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
@@ -163,8 +197,8 @@ jobs:
   accessibility:
     name: Accessibility Tests
     runs-on: ubuntu-latest
-    needs: [lint]
-    
+    needs: [lint, security-audit]
+
     steps:
     - name: Checkout code
       uses: actions/checkout@v4

.gitignore

@@ -8,6 +8,10 @@ public/
 build/
 dist/
 
+# Translation files (keep .pot, ignore compiled)
+languages/*.mo
+!languages/.gitkeep
+
 # Cache and temp files
 .cache/
 .tmp/

.husky/pre-commit

@@ -0,0 +1,44 @@
+#!/usr/bin/env sh
+
+# Pre-commit hook for {{theme_slug}} theme
+# This hook runs before each commit to ensure code quality
+
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "🔍 Running pre-commit checks for {{theme_name}}..."
+
+# Run JavaScript linting
+echo "🟡 Linting JavaScript..."
+npm run lint:js || {
+    echo "❌ JavaScript linting failed. Please fix the issues and try again."
+    exit 1
+}
+
+# Run CSS linting
+echo "🟡 Linting CSS..."
+npm run lint:css || {
+    echo "❌ CSS linting failed. Please fix the issues and try again."
+    exit 1
+}
+
+# Run PHP linting (if composer is available)
+if command -v composer &> /dev/null; then
+    echo "🟡 Linting PHP..."
+    composer run lint || {
+        echo "❌ PHP linting failed. Please fix the issues and try again."
+        exit 1
+    }
+else
+    echo "⚠️  Skipping PHP linting (Composer not available)"
+fi
+
+# Run security audit
+echo "🔒 Running security audit..."
+npm audit --audit-level=high --production || {
+    echo "⚠️  Security vulnerabilities detected (high or critical)."
+    echo "Run 'npm audit' for details or 'npm audit fix' to attempt automatic fixes."
+    echo "To bypass this check (not recommended), use: git commit --no-verify"
+    exit 1
+}
+
+echo "✅ All pre-commit checks passed!"

.postcss.config.cjs

@@ -1,8 +1,35 @@
+/**
+ * PostCSS Configuration for {{theme_name}}
+ *
+ * PostCSS processes CSS files during the build process:
+ * - Autoprefixer: Adds vendor prefixes based on browserslist config
+ * - cssnano: Minifies CSS for production builds
+ *
+ * This configuration is automatically used by wp-scripts when compiling Sass files.
+ *
+ * @package {{theme_name}}
+ * @since {{version}}
+ */
+
 module.exports = {
 	plugins: [
+		// Add vendor prefixes automatically based on .browserslistrc.
 		require( 'autoprefixer' ),
+
+		// Minify CSS for production builds only.
+		// wp-scripts automatically applies this based on NODE_ENV.
 		require( 'cssnano' )( {
-			preset: 'default',
+			preset: [
+				'default',
+				{
+					// Preserve important comments (like licenses).
+					discardComments: {
+						removeAll: false,
+					},
+					// Normalize whitespace but keep readability in development.
+					normalizeWhitespace: process.env.NODE_ENV === 'production',
+				},
+			],
 		} ),
 	],
 };

.webpack.config.cjs

@@ -1,3 +1,10 @@
+/**
+ * Webpack Configuration for {{theme_name}}
+ *
+ * @package {{theme_name}}
+ * @since {{version}}
+ */
+
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 const path = require( 'path' );
 
@@ -10,7 +17,7 @@ module.exports = {
 		'editor-style': './src/css/editor.scss',
 	},
 	output: {
-		path: path.resolve( process.cwd(), 'public' ),
+		path: path.resolve( process.cwd(), 'build' ),
 		filename: 'js/[name].js',
 		clean: true,
 	},
@@ -19,19 +26,18 @@ module.exports = {
 		rules: [
 			...defaultConfig.module.rules,
 			{
-				test: /\.scss$/,
-				use: [
-					'style-loader',
-					'css-loader',
-					{
-						loader: 'sass-loader',
-						options: {
-							sassOptions: {
-								includePaths: [ 'src/css' ],
-							},
-						},
-					},
-				],
+				test: /\.(png|jpe?g|gif|svg)$/i,
+				type: 'asset/resource',
+				generator: {
+					filename: 'images/[name][ext]',
+				},
+			},
+			{
+				test: /\.(woff|woff2|eot|ttf|otf)$/i,
+				type: 'asset/resource',
+				generator: {
+					filename: 'fonts/[name][ext]',
+				},
 			},
 		],
 	},
@@ -40,19 +46,32 @@ module.exports = {
 		alias: {
 			...defaultConfig.resolve.alias,
 			'@': path.resolve( __dirname, 'src' ),
+			'@css': path.resolve( __dirname, 'src/css' ),
+			'@js': path.resolve( __dirname, 'src/js' ),
 		},
 	},
 	optimization: {
 		...defaultConfig.optimization,
 		splitChunks: {
-			chunks: 'all',
 			cacheGroups: {
-				vendor: {
-					test: /[\\/]node_modules[\\/]/,
-					name: 'vendors',
+				style: {
+					name: 'style',
+					test: /\.css$/,
+					chunks: 'all',
+					enforce: true,
+				},
+				editor: {
+					name: 'editor-style',
+					test: /editor\.scss$/,
 					chunks: 'all',
+					enforce: true,
 				},
 			},
 		},
 	},
+	performance: {
+		...defaultConfig.performance,
+		maxAssetSize: 512000,
+		maxEntrypointSize: 512000,
+	},
 };

README.md

@@ -29,18 +29,21 @@ A modern WordPress block theme supporting Full Site Editing (FSE), built with mu
 ### Development Installation
 
 1. Clone this repository:
+
    ```bash
    git clone {{theme_repo_url}}
    cd {{theme_slug}}
    ```
 
 2. Install dependencies:
+
    ```bash
    npm install
    composer install
    ```
 
 3. Build assets:
+
    ```bash
    npm run build
    ```
@@ -65,19 +68,55 @@ composer install
 npm run start
 ```
 
+### Build Process
+
+This theme uses `@wordpress/scripts` for a modern build workflow:
+
+- **Compilation**: Modern JavaScript (ESNext/JSX) → Browser-compatible code via Babel
+- **Bundling**: Multiple files combined into optimized bundles via webpack
+- **Sass Compilation**: `.scss` files compiled to standard CSS
+- **Code Minification**: JavaScript (Terser) and CSS (cssnano) optimization
+- **Code Linting**: ESLint for JavaScript, Stylelint for CSS
+- **Code Formatting**: Prettier for consistent styling
+
+**Documentation**:
+
+- 📖 [Build Process Guide](docs/BUILD-PROCESS.md) - Complete build documentation
+- 📖 [wp-scripts Configuration](docs/WP-SCRIPTS-CONFIGURATION.md) - Detailed setup guide
+- 📖 [Quick Reference](docs/WP-SCRIPTS-QUICK-REFERENCE.md) - Common tasks and commands
+- 📖 [Summary](docs/WP-SCRIPTS-SUMMARY.md) - Configuration summary
+
 ### Available Scripts
 
-- `npm run start` - Start development mode with hot reloading
-- `npm run build` - Build for production
-- `npm run build:production` - Build optimized for production
-- `npm run lint` - Run all linters
-- `npm run lint:js` - Lint JavaScript
-- `npm run lint:css` - Lint CSS
-- `npm run lint:php` - Lint PHP
-- `npm run test` - Run all tests
-- `npm run test:js` - Run JavaScript tests
-- `npm run test:php` - Run PHP tests
-- `npm run test:e2e` - Run end-to-end tests
+#### Build Commands
+
+- `npm run start` - Start development mode with hot reloading and watch mode
+- `npm run build` - Build optimized production assets
+- `npm run build:production` - Alternative production build
+
+#### Code Quality
+
+- `npm run lint` - Run all linters (JavaScript, CSS, PHP)
+- `npm run lint:js` - Lint JavaScript files
+- `npm run lint:js:fix` - Auto-fix JavaScript issues
+- `npm run lint:css` - Lint CSS/Sass files
+- `npm run lint:css:fix` - Auto-fix CSS issues
+- `npm run lint:php` - Lint PHP files
+- `npm run format` - Format all files with Prettier
+
+#### Testing
+
+- `npm run test` - Run all tests (JavaScript + PHP)
+- `npm run test:js` - Run JavaScript unit tests
+- `npm run test:js:watch` - Run Jest in watch mode
+- `npm run test:php` - Run PHP unit tests
+- `npm run test:e2e` - Run end-to-end tests with Playwright
+
+#### Internationalization
+
+- `npm run makepot` - Generate translation POT file
+- `npm run makejson` - Generate JSON translation files
+- `npm run i18n` - Complete i18n workflow (makepot + makejson)
 
 ### Theme Structure
 
@@ -124,6 +163,7 @@ This theme uses mustache templates for easy customization. Key variables include
 ### Customizing Colors and Typography
 
 Edit `theme.json` to customize:
+
 - Color palette
 - Typography settings
 - Spacing scale
@@ -158,6 +198,7 @@ Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details.
 ## Support
 
 - Documentation: [Full documentation]({{docs_url}})
+- Internationalization: [i18n Guide](docs/INTERNATIONALIZATION.md)
 - Issues: [GitHub Issues]({{theme_repo_url}}/issues)
 - Community: [WordPress.org Support](https://wordpress.org/support/theme/{{theme_slug}})