pull in v11.0.1 from upstream

.github/labeler.yml

@@ -1,19 +1,15 @@
 build:
   - changed-files:
       - any-glob-to-any-file:
-          - .eslintrc.js
+          - vite.config.js
-          - .prettierrc
-          - .stylelintrc
-          - bud.config.js
-          - tsconfig.json
 dependencies:
   - changed-files:
       - any-glob-to-any-file:
-          - yarn.lock
+          - package-lock.json
 javascript:
   - changed-files:
       - any-glob-to-any-file:
-          - resources/scripts/**/*.js
+          - resources/js/**/*.js
 php:
   - changed-files:
       - any-glob-to-any-file:

.github/renovate.json

@@ -1,17 +1,23 @@
 {
-  "baseBranches": ["main"],
+  "baseBranches": [
+    "main"
+  ],
   "commitMessageAction": "⬆️ Bump",
   "commitMessageTopic": "{{depName}}",
-  "extends": ["config:base", "schedule:weekly"],
+  "extends": [
+    "config:recommended",
+    "schedule:weekly"
+  ],
+  "rangeStrategy": "bump",
   "packageRules": [
     {
-      "matchUpdateTypes": ["minor", "patch", "pin"]
+      "matchUpdateTypes": [
-    },
+        "minor",
-    {
+        "patch",
-      "groupName": "Bud",
+        "pin"
-      "matchPackagePrefixes": ["@roots/"],
+      ],
-      "schedule": ["at any time"]
+      "enabled": true
     }
   ],
-  "timezone": "America/Chicago"
+  "timezone": "America/Detroit"
 }

.github/workflows/main.yml

@@ -25,18 +25,34 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install dependencies using Yarn
+      - name: Install dependencies using npm
-        run: yarn install --frozen-lockfile
+        run: npm install
 
       - name: Build and compile assets
         run: |
-          yarn build
+          npm run build
-          cat public/entrypoints.json
+          cat public/build/manifest.json
-          cat public/manifest.json
+
+      - name: Validate theme.json
+        run: |
+          THEME_JSON="public/build/assets/theme.json"
+
+          if [ ! -f "$THEME_JSON" ]; then
+            echo "❌ theme.json not found"
+            exit 1
+          fi
+
+          jq -e '
+            (.settings.color.palette | length > 0) and
+            (.settings.typography.fontFamilies | length > 0) and
+            (.settings.typography.fontSizes | length > 0)
+          ' "$THEME_JSON" 2>&1 || {
+            echo "❌ Invalid theme.json structure or missing required values"
+            exit 1
+          }
 
   php:
     name: PHP ${{ matrix.php }}
@@ -44,7 +60,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     strategy:
       matrix:
-        php: ['8.1', '8.2']
+        php: ['8.2']
 
     steps:
       - name: Checkout the project

.gitignore

@@ -1,7 +1,6 @@
 /node_modules
 /vendor
-/public
+/public/*
+!/public/.gitkeep
 .env
-.budfiles
 npm-debug.log
-yarn-error.log

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) Roots Software Foundation LLC
+Copyright (c) Roots Software LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,54 +1,31 @@
 <p align="center">
-  <a href="https://roots.io/sage/">
+  <a href="https://roots.io/sage/"><img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100"></a>
-    <img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100">
-  </a>
 </p>
 
 <p align="center">
-  <a href="https://packagist.org/packages/roots/sage">
+  <a href="https://packagist.org/packages/roots/sage"><img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square"></a>
-    <img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square">
+  <a href="https://github.com/roots/sage/actions/workflows/main.yml"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square"></a>
-  </a>
+  <a href="https://bsky.app/profile/roots.dev"><img alt="Follow roots.dev on Bluesky" src="https://img.shields.io/badge/follow-@roots.dev-0085ff?logo=bluesky&style=flat-square"></a>
-
-  <a href="https://github.com/roots/sage/actions/workflows/main.yml">
-    <img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square">
-  </a>
-
-  <a href="https://twitter.com/rootswp">
-    <img alt="Follow Roots" src="https://img.shields.io/badge/follow%20@rootswp-1da1f2?logo=twitter&logoColor=ffffff&message=&style=flat-square">
-  </a>
 </p>
 
-<p align="center">Advanced WordPress starter theme with Tailwind CSS and Laravel Blade</p>
+# Sage
 
-<p align="center">
+**Advanced hybrid WordPress starter theme with Laravel Blade and Tailwind CSS**
-  <a href="https://roots.io/sage/">Website</a> &nbsp;&nbsp; <a href="https://roots.io/sage/docs/installation/">Documentation</a> &nbsp;&nbsp; <a href="https://github.com/roots/sage/releases">Releases</a> &nbsp;&nbsp; <a href="https://discourse.roots.io/">Community</a>
+
-</p>
+- 🔧 Clean, efficient theme templating with Laravel Blade
+- ⚡️ Modern front-end development workflow powered by Vite
+- 🎨 Out of the box support for Tailwind CSS
+- 🚀 Harness the power of Laravel with [Acorn integration](https://github.com/roots/acorn)
+- 📦 Block editor support built-in
+
+Sage brings proper PHP templating and modern JavaScript tooling to WordPress themes. Write organized, component-based code using Laravel Blade, enjoy instant builds and CSS hot-reloading with Vite, and leverage Laravel's robust feature set through Acorn.
+
+[Read the docs to get started](https://roots.io/sage/docs/installation/)
 
 ## Sponsors
 
-Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, please consider [sponsoring Roots](https://github.com/sponsors/roots).
+Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, [please consider sponsoring us](https://github.com/sponsors/roots).
 
 <div align="center">
-<a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="120" height="90"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a>
+<a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a> <a href="https://bonsai.so/"><img src="https://cdn.roots.io/app/uploads/bonsai.svg" alt="Bonsai" width="120" height="90"></a>
 </div>
-
-## Overview
-
-Sage is a WordPress starter theme with block editor support.
-
-- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn)
-- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/master/blade)
-- Modern frontend development workflow powered by [Bud](https://bud.js.org/)
-- Out of the box support for [Tailwind CSS](https://tailwindcss.com/)
-
-## Getting Started
-
-See the [Sage installation documentation](https://roots.io/sage/docs/installation/).
-
-## Stay Connected
-
-- Join us on Discord by [sponsoring us on GitHub](https://github.com/sponsors/roots)
-- Participate on [Roots Discourse](https://discourse.roots.io/)
-- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
-- Read the [Roots Blog](https://roots.io/blog/)
-- Subscribe to the [Roots Newsletter](https://roots.io/newsletter/)

app/View/Composers/App.php

@@ -17,10 +17,13 @@ class App extends Composer
     ];
 
     /**
-     * Data to be passed to view before rendering.
+     * Retrieve the site name.
-     *
-     * @return array
      */
+    public function siteName(): string
+    {
+        return get_bloginfo('name', 'display');
+    }
+
     public function with()
     {
         return [
@@ -28,20 +31,9 @@ class App extends Composer
             'VideoSrcset' => new Utilities\VideoSrcset,
             'ImageSrcset' => new Utilities\ImageSrcset,
             'siteName' => $this->siteName(),
-            'siteLogo' => @file_get_contents(get_template_directory() . '/resources/images/logo-rhythm-road-entertainment.svg'),
             'company_legal' => get_field('badegg_company_legal', 'option'),
             'company_tel' => get_field('badegg_company_tel', 'option'),
             'company_email' => get_field('badegg_company_email', 'option'),
         ];
     }
-
-    /**
-     * Returns the site name.
-     *
-     * @return string
-     */
-    public function siteName()
-    {
-        return get_bloginfo('name', 'display');
-    }
 }

app/View/Composers/Comments.php

@@ -15,29 +15,10 @@ class Comments extends Composer
         'partials.comments',
     ];
 
-    /**
-     * Data to be passed to view before rendering.
-     *
-     * @return array
-     */
-    public function with()
-    {
-        return [
-            'title' => $this->title(),
-            'responses' => $this->responses(),
-            'previous' => $this->previous(),
-            'next' => $this->next(),
-            'paginated' => $this->paginated(),
-            'closed' => $this->closed(),
-        ];
-    }
-
     /**
      * The comment title.
-     *
-     * @return string
      */
-    public function title()
+    public function title(): string
     {
         return sprintf(
             /* translators: %1$s is replaced with the number of comments and %2$s with the post title */
@@ -49,13 +30,11 @@ class Comments extends Composer
 
     /**
      * Retrieve the comments.
-     *
-     * @return string
      */
-    public function responses()
+    public function responses(): ?string
     {
         if (! have_comments()) {
-            return;
+            return null;
         }
 
         return wp_list_comments([
@@ -67,13 +46,11 @@ class Comments extends Composer
 
     /**
      * The previous comments link.
-     *
-     * @return string
      */
-    public function previous()
+    public function previous(): ?string
     {
         if (! get_previous_comments_link()) {
-            return;
+            return null;
         }
 
         return get_previous_comments_link(
@@ -83,13 +60,11 @@ class Comments extends Composer
 
     /**
      * The next comments link.
-     *
-     * @return string
      */
-    public function next()
+    public function next(): ?string
     {
         if (! get_next_comments_link()) {
-            return;
+            return null;
         }
 
         return get_next_comments_link(
@@ -99,20 +74,16 @@ class Comments extends Composer
 
     /**
      * Determine if the comments are paginated.
-     *
-     * @return bool
      */
-    public function paginated()
+    public function paginated(): bool
     {
         return get_comment_pages_count() > 1 && get_option('page_comments');
     }
 
     /**
      * Determine if the comments are closed.
-     *
-     * @return bool
      */
-    public function closed()
+    public function closed(): bool
     {
         return ! comments_open() && get_comments_number() != '0' && post_type_supports(get_post_type(), 'comments');
     }

app/View/Composers/Post.php

@@ -17,25 +17,10 @@ class Post extends Composer
         'partials.content-*',
     ];
 
-    /**
-     * Data to be passed to view before rendering, but after merging.
-     *
-     * @return array
-     */
-    public function override()
-    {
-        return [
-            'title' => $this->title(),
-            'pagination' => $this->pagination(),
-        ];
-    }
-
     /**
      * Retrieve the post title.
-     *
-     * @return string
      */
-    public function title()
+    public function title(): string
     {
         if ($this->view->name() !== 'partials.page-header') {
             return get_the_title();
@@ -70,10 +55,8 @@ class Post extends Composer
 
     /**
      * Retrieve the pagination links.
-     *
-     * @return string
      */
-    public function pagination()
+    public function pagination(): string
     {
         return wp_link_pages([
             'echo' => 0,

app/setup.php

@@ -6,25 +6,56 @@
 
 namespace App;
 
-use function Roots\bundle;
+use Illuminate\Support\Facades\Vite;
 
 /**
- * Register the theme assets.
+ * Inject styles into the block editor.
+ *
+ * @return array
+ */
+add_filter('block_editor_settings_all', function ($settings) {
+    $style = Vite::asset('resources/css/editor.scss');
+
+    $settings['styles'][] = [
+        'css' => "@import url('{$style}')",
+    ];
+
+    return $settings;
+});
+
+/**
+ * Inject scripts into the block editor.
  *
  * @return void
  */
-add_action('wp_enqueue_scripts', function () {
+add_filter('admin_head', function () {
-    bundle('app')->enqueue();
+    if (! get_current_screen()?->is_block_editor()) {
-}, 100);
+        return;
+    }
+
+    $dependencies = json_decode(Vite::content('editor.deps.json'));
+
+    foreach ($dependencies as $dependency) {
+        if (! wp_script_is($dependency)) {
+            wp_enqueue_script($dependency);
+        }
+    }
+
+    echo Vite::withEntryPoints([
+        'resources/js/editor.js',
+    ])->toHtml();
+});
 
 /**
- * Register the theme assets with the block editor.
+ * Use the generated theme.json file.
  *
- * @return void
+ * @return string
  */
-add_action('enqueue_block_editor_assets', function () {
+add_filter('theme_file_path', function ($path, $file) {
-    bundle('editor')->enqueue();
+    return $file === 'theme.json'
-}, 100);
+        ? public_path('build/assets/theme.json')
+        : $path;
+}, 10, 2);
 
 /**
  * Register the initial theme setup.

bud.config.js

@@ -1,78 +0,0 @@
-/**
- * Compiler configuration
- *
- * @see {@link https://roots.io/sage/docs sage documentation}
- * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
- *
- * @type {import('@roots/bud').Config}
- */
-export default async (app) => {
-  /**
-   * Application assets & entrypoints
-   *
-   * @see {@link https://bud.js.org/reference/bud.entry}
-   * @see {@link https://bud.js.org/reference/bud.assets}
-   */
-  app
-    .entry('app', ['@scripts/app', '@styles/app'])
-    .entry('editor', ['@scripts/editor', '@styles/editor'])
-    .assets(['images']);
-
-  /**
-   * Set public path
-   *
-   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
-   */
-  app.setPublicPath('/app/themes/sage/public/');
-
-  /**
-   * Development server settings
-   *
-   * @see {@link https://bud.js.org/reference/bud.setUrl}
-   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
-   * @see {@link https://bud.js.org/reference/bud.watch}
-   */
-  app
-    .setUrl('https://localhost:3000')
-    .setProxyUrl('https://badegg-bedrock.localhost.1fp.ltd')
-    .watch(['resources/views', 'app']);
-
-  /**
-   * Generate WordPress `theme.json`
-   *
-   * @note This overwrites `theme.json` on every build.
-   *
-   * @see {@link https://bud.js.org/extensions/sage/theme.json}
-   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
-   */
-  app.wpjson
-    .setSettings({
-      background: {
-        backgroundImage: true,
-      },
-      color: {
-        custom: false,
-        customDuotone: false,
-        customGradient: false,
-        defaultDuotone: false,
-        defaultGradients: false,
-        defaultPalette: false,
-        duotone: [],
-      },
-      custom: {
-        spacing: {},
-        typography: {
-          'font-size': {},
-          'line-height': {},
-        },
-      },
-      spacing: {
-        padding: true,
-        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
-      },
-      typography: {
-        customFontSize: false,
-      },
-    })
-    .enable();
-};

composer.json

@@ -39,11 +39,12 @@
     }
   },
   "require": {
-    "php": ">=8.1",
+    "php": ">=8.2",
+    "roots/acorn": "^5.0",
     "ourcodeworld/name-that-color": "dev-master"
   },
   "require-dev": {
-    "laravel/pint": "^1.13"
+    "laravel/pint": "^1.20"
   },
   "suggest": {
     "log1x/sage-directives": "A collection of useful Blade directives for WordPress and Sage (^1.0)."
@@ -55,11 +56,9 @@
   },
   "minimum-stability": "dev",
   "prefer-stable": true,
-  "extra": {
+  "scripts": {
-    "acorn": {
+    "post-autoload-dump": [
-      "providers": [
+      "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
-        "App\\Providers\\ThemeServiceProvider"
+    ]
-      ]
-    }
   }
 }

functions.php

@@ -1,5 +1,7 @@
 <?php
 
+use Roots\Acorn\Application;
+
 /*
 |--------------------------------------------------------------------------
 | Register The Auto Loader
@@ -29,18 +31,11 @@ require $composer;
 |
 */
 
-if (! function_exists('\Roots\bootloader')) {
+Application::configure()
-    wp_die(
+    ->withProviders([
-        __('You need to install Acorn to use this theme.', 'sage'),
+        App\Providers\ThemeServiceProvider::class,
-        '',
+    ])
-        [
+    ->boot();
-            'link_url' => 'https://roots.io/acorn/docs/installation/',
-            'link_text' => __('Acorn Docs: Installation', 'sage'),
-        ]
-    );
-}
-
-\Roots\bootloader()->boot();
 
 /*
 |--------------------------------------------------------------------------

jsconfig.json

@@ -1,33 +0,0 @@
-{
-  "extends": [
-    "@roots/bud/config/jsconfig.json",
-    "@roots/sage/config/jsconfig.json"
-  ],
-  "compilerOptions": {
-    "baseUrl": "resources",
-    /**
-     * Resolve aliases
-     */
-    "paths": {
-      "@fonts/*": ["fonts/*"],
-      "@images/*": ["images/*"],
-      "@scripts/*": ["scripts/*"],
-      "@styles/*": ["styles/*"]
-    },
-    /**
-     * Type definitions
-     */
-    "types": [
-      "@roots/bud",
-      "@roots/bud-react",
-      "@roots/bud-postcss",
-      "@roots/bud-preset-recommend",
-      "@roots/bud-preset-wordpress",
-      "@roots/bud-wordpress-theme-json",
-      "@roots/sage"
-    ]
-  },
-  "files": ["bud.config.js"],
-  "include": ["resources"],
-  "exclude": ["node_modules", "public"]
-}

package.json

@@ -1,16 +1,13 @@
 {
   "name": "sage",
   "private": true,
-  "browserslist": [
-    "extends @roots/browserslist-config"
-  ],
   "engines": {
     "node": ">=20.0.0"
   },
   "type": "module",
   "scripts": {
-    "dev": "bud dev",
+    "dev": "vite",
-    "build": "bud build",
+    "build": "vite build",
     "translate": "npm run translate:pot && npm run translate:update",
     "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
     "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
@@ -19,9 +16,9 @@
     "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
   },
   "devDependencies": {
-    "@roots/bud": "6.23.3",
+    "@roots/vite-plugin": "^1.0.2",
-    "@roots/bud-sass": "^6.23.3",
+    "laravel-vite-plugin": "^1.2.0",
-    "@roots/sage": "6.23.3"
+    "sass": "^1.93.2",
-  },
+    "vite": "^6.2.0"
-  "dependencies": {}
+  }
 }

resources/css/global/_fonts.scss

@@ -21,8 +21,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: normal;
   font-weight: 400;
-  src: url('~fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-italic - latin */
@@ -31,8 +31,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight: 400;
-  src: url('~fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-700 - latin */
@@ -41,8 +41,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: normal;
   font-weight: 700;
-  src: url('~fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-700italic - latin */
@@ -51,6 +51,6 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight: 700;
-  src: url('~fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

resources/css/global/variables/_spacing.scss

@@ -2,6 +2,9 @@
 
 $offCanvasWidth:      17.5em;
 
+$brandWidth:          9em !default;
+$brandHeight:         3em !default;
+
 $tileAspectRatio:     math.div(400, 640) * 100%;
 $heroAspectRatio:     math.div(593, 1920) * 100vw;
 $slideAspectRatio:    math.div(733, 1920) * 100vw;

resources/js/app.js

@@ -1,4 +1,9 @@
-import domReady from '@roots/sage/client/dom-ready';
+import.meta.glob([
+  '../images/**',
+  '../fonts/**',
+]);
+
+import domReady from '@wordpress/dom-ready';
 import blocks from './blocks.js';
 import Header from './sections/header.js';
 import LazyLoad from './lib/Lazy.js';
@@ -11,8 +16,3 @@ domReady(async () => {
   blocks();
   Header();
 });
-
-/**
- * @see {@link https://webpack.js.org/api/hot-module-replacement/}
- */
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/js/editor.js

@@ -0,0 +1,5 @@
+import domReady from '@wordpress/dom-ready';
+
+domReady(() => {
+  //
+});

resources/scripts/editor.js

@@ -1,9 +0,0 @@
-/**
- * @see {@link https://bud.js.org/extensions/bud-preset-wordpress/editor-integration/filters}
- */
-roots.register.filters('@scripts/filters');
-
-/**
- * @see {@link https://webpack.js.org/api/hot-module-replacement/}
- */
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/scripts/filters/button.filter.js

@@ -1,25 +0,0 @@
-/**
- * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
- */
-export const hook = 'blocks.registerBlockType';
-
-/**
- * Filter handle
- */
-export const name = 'sage/button';
-
-/**
- * Filter callback
- *
- * @param {object} settings
- * @param {string} name
- * @returns modified settings
- */
-export function callback(settings, name) {
-  if (name !== 'core/button') return settings;
-
-  return {
-    ...settings,
-    styles: [{ label: 'Outline', name: 'outline' }],
-  };
-}

resources/views/layouts/app.blade.php

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     @php(do_action('get_header'))
     @php(wp_head())
+
+    @vite(['resources/css/app.scss', 'resources/js/app.js'])
   </head>
 
   <body @php(body_class())>

resources/views/partials/comments.blade.php

@@ -1,6 +1,6 @@
 @if (! post_password_required())
   <section id="comments" class="comments">
-    @if ($responses)
+    @if ($responses())
       <h2>
         {!! $title !!}
       </h2>
@@ -9,16 +9,16 @@
         {!! $responses !!}
       </ol>
 
-      @if ($paginated)
+      @if ($paginated())
         <nav aria-label="Comment">
           <ul class="pager">
-            @if ($previous)
+            @if ($previous())
               <li class="previous">
                 {!! $previous !!}
               </li>
             @endif
 
-            @if ($next)
+            @if ($next())
               <li class="next">
                 {!! $next !!}
               </li>
@@ -28,7 +28,7 @@
       @endif
     @endif
 
-    @if ($closed)
+    @if ($closed())
       <x-alert type="warning">
         {!! __('Comments are closed.', 'sage') !!}
       </x-alert>

resources/views/partials/content-page.blade.php

@@ -1,6 +1,6 @@
 @php(the_content())
 
-@if ($pagination)
+@if ($pagination())
   <nav class="page-nav" aria-label="Page">
     {!! $pagination !!}
   </nav>

resources/views/partials/content-single.blade.php

@@ -11,7 +11,7 @@
     @php(the_content())
   </div>
 
-  @if ($pagination)
+  @if ($pagination())
     <footer>
       <nav class="page-nav" aria-label="Page">
         {!! $pagination !!}

style.css

@@ -1,13 +1,13 @@
 /*
 Theme Name:         Bad Egg Digital
-Theme URI:          https://www.badegg.uk
+Theme URI:          https://www.badegg.uk/?utm_source=wp_theme
 Description:        A bespoke Wordpress theme using Roots' Sage as a starting point.
-Version:            10.x-dev
+Version:            11.0.1
 Author:             Steve Ross
-Author URI:         https://badegg.uk/about/steve-ross
+Author URI:         https://badegg.uk/about/steve-ross/?utm_source=wp_theme
 Text Domain:        sage
 License:            MIT License
 License URI:        https://opensource.org/licenses/MIT
-Requires PHP:       8.1
+Requires PHP:       8.2
-Requires at least:  5.9
+Requires at least:  6.6
 */

theme.json

@@ -1,8 +1,11 @@
 {
-  "__generated__": "⚠️ This file is generated. Do not edit.",
+  "__preprocessed__": "This file is used to build the theme.json file in the `public/build/assets` directory. The built artifact includes Tailwind's colors, fonts, and font sizes.",
   "$schema": "https://schemas.wp.org/trunk/theme.json",
-  "version": 2,
+  "version": 3,
   "settings": {
+    "layout": {
+      "contentSize": "48rem"
+    },
     "background": {
       "backgroundImage": true
     },
@@ -24,16 +27,10 @@
     },
     "spacing": {
       "padding": true,
-      "units": [
+      "units": ["px", "%", "em", "rem", "vw", "vh"]
-        "px",
-        "%",
-        "em",
-        "rem",
-        "vw",
-        "vh"
-      ]
     },
     "typography": {
+      "defaultFontSizes": false,
       "customFontSize": false
     }
   }

vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import laravel from 'laravel-vite-plugin'
+import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';
+
+export default defineConfig({
+  base: '/app/themes/sage/public/build/',
+  plugins: [
+    laravel({
+      input: [
+        'resources/css/app.scss',
+        'resources/js/app.js',
+        'resources/css/editor.scss',
+        'resources/js/editor.js',
+      ],
+      refresh: true,
+      url: process.env.APP_URL,
+    }),
+
+    wordpressPlugin(),
+
+    // Generate the theme.json file in the public/build/assets directory
+    // based on the Tailwind config and the theme.json file from base theme folder
+    wordpressThemeJson({
+      disableTailwindColors: true,
+      disableTailwindFonts: true,
+      disableTailwindFontSizes: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@scripts': '/resources/js',
+      '@styles': '/resources/css',
+      '@fonts': '/resources/fonts',
+      '@images': '/resources/images',
+    },
+  },
+})