Housekeeping (#2520)

* enhance(project): Add .prettierrc to project
* chore(deps): Bump dependencies
* chore(view): Improve readability of the search form view
* chore(admin): Improve language used in the customize_register filter docblock
* chore(lint): Lint project assets
* chore(change-log): Improve/prepare the changelog for actual release
* chore(readme): Improve README feature list
* chore(readme): Update README theme directory structure
* chore(readme): Add GitHub sponsors badge
* chore(readme): Clean up various wording
* fix(ci): Fix failing tests
* fix(mix): Add index.php to purgecss scope (Supersedes #2423) (Credit @oxyc)

.circleci/config.yml

@@ -14,10 +14,10 @@ workflows:
             - run: yarn run build:production
           matrix:
             parameters:
-              version: ["10.21", "12.18", "14.4"]
+              version: ['12.18', '14.4']
       - php/test:
           name: php-<< matrix.version >>
           test-command: lint
           matrix:
             parameters:
-              version: ["7.2", "7.3", "7.4"]
+              version: ['7.2', '7.3', '7.4']

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": true
+}

README.md

@@ -29,7 +29,7 @@
 </p>
 
 <p align="center">
-  <a href="https://roots.io">Official Website</a> | <a href="https://roots.io/docs/sage/9.x/installation/">Documentation</a> | <a href="CHANGELOG.md">Change Log</a>
+  <a href="https://roots.io">Official Website</a> | <a href="https://roots.io/docs/sage/">Documentation</a> | <a href="CHANGELOG.md">Change Log</a>
 </p>
 
 ## Supporting
@@ -40,25 +40,25 @@ However, the amount of effort needed to maintain and develop new features and pr
 
 <div align="center">
 
-[![Donate via Patreon](https://img.shields.io/badge/donate-patreon-orange.svg?style=flat-square&logo=patreon")](https://www.patreon.com/rootsdev)
+[![Sponsor on GitHub](https://img.shields.io/static/v1?label=sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/roots)
+[![Sponsor on Patreon](https://img.shields.io/badge/sponsor-patreon-orange.svg?style=flat-square&logo=patreon")](https://www.patreon.com/rootsdev)
 [![Donate via PayPal](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square&logo=paypal)](https://www.paypal.me/rootsdev)
 
 </div>
 
-## Overview
+## About Sage
 
-Sage is a WordPress starter theme with a modern development workflow.
+Sage is a productivity-driven WordPress starter theme with a modern development workflow.
 
-**Sage 10 is in active development and is currently in alpha. The `master` branch tracks Sage 10 development. If you want a stable version, use the [latest Sage 9 release](https://github.com/roots/sage/releases/latest).**
+**The `master` branch currently tracks Sage 10 which is in active development. Looking for Sage 9? [See releases](https://github.com/roots/sage/releases).**
 
 ## Features
 
-* Sass for stylesheets
+- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn).
-* Modern JavaScript
+- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/latest/blade).
-* [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) for compiling assets and concatenating and minifying files
+- Easy [Browsersync](http://www.browsersync.io/) support alongside asset compilation, concatenating, and minification powered by [Laravel Mix](https://github.com/JeffreyWay/laravel-mix).
-* [Browsersync](http://www.browsersync.io/) for synchronized browser testing
+- Out of the box support for [Bootstrap 5](https://getbootstrap.com/) and [jQuery](https://jquery.com).
-* [Blade](https://laravel.com/docs/5.8/blade) as a templating engine
+- A clean starting point for theme styles using [Sass](https://sass-lang.com/).
-* [Bootstrap 4](https://getbootstrap.com/) (optional)
 
 See a working example at [roots-example-project.com](https://roots-example-project.com/).
 
@@ -66,11 +66,11 @@ See a working example at [roots-example-project.com](https://roots-example-proje
 
 Make sure all dependencies have been installed before moving on:
 
-* [WordPress](https://wordpress.org/) >= 5.4
+- [WordPress](https://wordpress.org/) >= 5.4
-* [PHP](https://secure.php.net/manual/en/install.php) >= 7.2.0 (with [`php-mbstring`](https://secure.php.net/manual/en/book.mbstring.php) enabled)
+- [PHP](https://secure.php.net/manual/en/install.php) >= 7.2.5 (with [`php-mbstring`](https://secure.php.net/manual/en/book.mbstring.php) enabled)
-* [Composer](https://getcomposer.org/download/)
+- [Composer](https://getcomposer.org/download/)
-* [Node.js](http://nodejs.org/) >= 8.0.0
+- [Node.js](http://nodejs.org/) >= 12.0.0
-* [Yarn](https://yarnpkg.com/en/docs/install)
+- [Yarn](https://yarnpkg.com/en/docs/install)
 
 ## Theme installation
 
@@ -83,18 +83,16 @@ $ composer create-project roots/sage your-theme-name
 
 To install the latest development version of Sage, add `dev-master` to the end of the command:
 
-```shell
+```sh
 $ composer create-project roots/sage your-theme-name dev-master
 ```
 
-During theme installation you will have options to update `style.css` theme headers, select a CSS framework, and configure Browsersync.
-
 ## Theme structure
 
 ```sh
 themes/your-theme-name/   # → Root of your Sage based theme
 ├── app/                  # → Theme PHP
-│   ├── Composers/        # → View composers
+│   ├── View/             # → View models
 │   ├── Providers/        # → Service providers
 │   ├── admin.php         # → Theme customizer setup
 │   ├── filters.php       # → Theme filters
@@ -104,22 +102,24 @@ themes/your-theme-name/   # → Root of your Sage based theme
 │   ├── app.php           # → Application configuration
 │   ├── assets.php        # → Asset configuration
 │   ├── filesystems.php   # → Filesystems configuration
+│   ├── logging.php       # → Logging configuration
 │   └── view.php          # → View configuration
 ├── composer.json         # → Autoloading for `app/` files
 ├── composer.lock         # → Composer lock file (never edit)
 ├── dist/                 # → Built theme assets (never edit)
-├── functions.php         # → Composer autoloader, Acorn bootloader
+├── functions.php         # → Theme bootloader
-├── index.php             # → Never manually edit
+├── index.php             # → Theme template wrapper
 ├── node_modules/         # → Node.js packages (never edit)
 ├── package.json          # → Node.js dependencies and scripts
 ├── resources/            # → Theme assets and templates
 │   ├── assets/           # → Front-end assets
 │   │   ├── fonts/        # → Theme fonts
 │   │   ├── images/       # → Theme images
-│   │   ├── scripts/      # → Theme JS
+│   │   ├── scripts/      # → Theme javascript
 │   │   └── styles/       # → Theme stylesheets
 │   └── views/            # → Theme templates
 │       ├── components/   # → Component templates
+│       ├── form/         # → Form templates
 │       ├── layouts/      # → Base templates
 │       └── partials/     # → Partial templates
 ├── screenshot.png        # → Theme screenshot for WP admin
@@ -135,18 +135,18 @@ Edit `app/setup.php` to enable or disable theme features, setup navigation menus
 
 ## Theme development
 
-* Run `yarn` from the theme directory to install dependencies
+- Run `yarn` from the theme directory to install dependencies
-* Update `webpack.mix.js` with your local dev URL
+- Update `webpack.mix.js` with your local dev URL
 
 ### Build commands
 
-* `yarn start` — Compile assets when file changes are made, start Browsersync session
+- `yarn start` — Compile assets when file changes are made, start Browsersync session
-* `yarn build` — Compile and optimize the files in your assets directory
+- `yarn build` — Compile and optimize the files in your assets directory
-* `yarn build:production` — Compile assets for production
+- `yarn build:production` — Compile assets for production
 
 ## Documentation
 
-* [Sage documentation](https://roots.io/sage/docs/)
+- [Sage documentation](https://roots.io/sage/docs/)
 
 ## Contributing
 
@@ -154,7 +154,7 @@ Contributions are welcome from everyone. We have [contributing guidelines](https
 
 ## Sage sponsors
 
-Help support our open-source development efforts by [becoming a patron](https://www.patreon.com/rootsdev).
+Help support our open-source development efforts by [becoming a sponsor](https://github.com/sponsors/roots).
 
 <a href="https://kinsta.com/?kaid=OFDHAJIXUDIV"><img src="https://cdn.roots.io/app/uploads/kinsta.svg" alt="Kinsta" width="200" height="150"></a> <a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="200" height="150"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="200" height="150"></a>
 
@@ -162,8 +162,8 @@ Help support our open-source development efforts by [becoming a patron](https://
 
 Keep track of development and community news.
 
-* Participate on the [Roots Discourse](https://discourse.roots.io/)
+- Participate on the [Roots Discourse](https://discourse.roots.io/)
-* Follow [@rootswp on Twitter](https://twitter.com/rootswp)
+- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
-* Read and subscribe to the [Roots Blog](https://roots.io/blog/)
+- Read and subscribe to the [Roots Blog](https://roots.io/blog/)
-* Subscribe to the [Roots Newsletter](https://roots.io/subscribe/)
+- Subscribe to the [Roots Newsletter](https://roots.io/subscribe/)
-* Listen to the [Roots Radio podcast](https://roots.io/podcast/)
+- Listen to the [Roots Radio podcast](https://roots.io/podcast/)

app/admin.php

@@ -11,7 +11,7 @@ use WP_Customize_Manager;
 use function Roots\asset;
 
 /**
- * Register the `.brand` selector as the blogname.
+ * Register the `.brand` selector to the blogname.
  *
  * @param  \WP_Customize_Manager $wp_customize
  * @return void

app/setup.php

@@ -93,7 +93,15 @@ add_action('after_setup_theme', function () {
      * Enable HTML5 markup support
      * @link https://developer.wordpress.org/reference/functions/add_theme_support/#html5
      */
-    add_theme_support('html5', ['caption', 'comment-form', 'comment-list', 'gallery', 'search-form', 'script', 'style']);
+    add_theme_support('html5', [
+        'caption',
+        'comment-form',
+        'comment-list',
+        'gallery',
+        'search-form',
+        'script',
+        'style'
+    ]);
 
     /**
      * Enable selective refresh for widgets in customizer
@@ -107,8 +115,8 @@ add_action('after_setup_theme', function () {
      */
     add_theme_support('editor-color-palette', [
         [
-            'name'  => __('Primary', 'sage'),
+            'name' => __('Primary', 'sage'),
-            'slug'  => 'primary',
+            'slug' => 'primary',
             'color' => '#525ddc',
         ]
     ]);

composer.json

@@ -40,7 +40,7 @@
   },
   "require": {
     "php": "^7.2.5",
-    "roots/acorn": "^1.0.1"
+    "roots/acorn": "^1.1"
   },
   "require-dev": {
     "filp/whoops": "^2.7",

config/filesystems.php

@@ -58,6 +58,13 @@ return [
             'visibility' => 'public',
         ],
 
+        'sage' => [
+            'driver' => 'local',
+            'root' => get_theme_file_path(),
+            'url' => get_theme_file_uri(),
+            'visibility' => 'public',
+        ],
+
         's3' => [
             'driver' => 's3',
             'key' => env('AWS_ACCESS_KEY_ID'),

package.json

@@ -23,31 +23,31 @@
     "translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print"
   },
   "devDependencies": {
-    "@tinypixelco/laravel-mix-wp-blocks": "^1.0.0",
+    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
-    "@wordpress/babel-preset-default": "^4.13.0",
+    "@wordpress/babel-preset-default": "^4.17.0",
-    "@wordpress/browserslist-config": "^2.6.0",
+    "@wordpress/browserslist-config": "^2.7.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^2.5.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
     "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.7",
+    "browser-sync": "^2.26.12",
     "browser-sync-webpack-plugin": "^2.0.1",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
+    "eslint": "^7.7.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.22.0",
     "laravel-mix": "^5.0.4",
     "laravel-mix-copy-watched": "^2.2.4",
-    "laravel-mix-purgecss": "^5.0.0-rc.1",
+    "laravel-mix-purgecss": "^5.0.0",
     "npm-run-all": "^4.1",
-    "purgecss-with-wordpress": "^2.1.0",
+    "purgecss-with-wordpress": "^2.3.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3",
+    "sass": "^1.26.10",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^9.0.3",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.5.2",
-    "jquery": "^3.5.0",
+    "jquery": "^3.5.1",
     "popper.js": "^1.16.1"
   }
 }

resources/assets/scripts/editor.js

@@ -1,9 +1,6 @@
 import '@wordpress/edit-post';
 import domReady from '@wordpress/dom-ready';
-import {
+import { unregisterBlockStyle, registerBlockStyle } from '@wordpress/blocks';
-  unregisterBlockStyle,
-  registerBlockStyle,
-} from '@wordpress/blocks';
 
 domReady(() => {
   unregisterBlockStyle('core/button', 'outline');

resources/views/forms/search.blade.php

@@ -1,7 +1,16 @@
 <form role="search" method="get" class="search-form" action="{{ home_url('/') }}">
   <label>
-    <span class="screen-reader-text">{{ _x('Search for:', 'label', 'sage') }}</span>
+    <span class="screen-reader-text">
-    <input type="search" class="search-field" placeholder="{!! esc_attr_x('Search &hellip;', 'placeholder', 'sage') !!}" value="{{ get_search_query() }}" name="s">
+      {{ _x('Search for:', 'label', 'sage') }}
+    </span>
+
+    <input
+      type="search"
+      class="search-field"
+      placeholder="{!! esc_attr_x('Search &hellip;', 'placeholder', 'sage') !!}"
+      value="{{ get_search_query() }}"
+      name="s"
+    >
   </label>
 
   <input type="submit" class="button" value="{{ esc_attr_x('Search', 'submit button', 'sage') }}">

webpack.mix.js

@@ -14,31 +14,31 @@ require('laravel-mix-copy-watched');
  |
  */
 
-mix.setPublicPath('./dist')
+mix
-   .browserSync('sage.test');
+  .setPublicPath('./dist')
+  .browserSync('sage.test');
 
-mix.sass('resources/assets/styles/app.scss', 'styles')
+mix
-   .sass('resources/assets/styles/editor.scss', 'styles')
+  .sass('resources/assets/styles/app.scss', 'styles')
-   .purgeCss({
+  .sass('resources/assets/styles/editor.scss', 'styles')
-     whitelist: require('purgecss-with-wordpress').whitelist,
+  .purgeCss({
-     whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
+    extend: { content: [path.join(__dirname, 'index.php')] },
-   });
+    whitelist: require('purgecss-with-wordpress').whitelist,
+    whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
+  });
 
-mix.js('resources/assets/scripts/app.js', 'scripts')
+mix
-   .js('resources/assets/scripts/customizer.js', 'scripts')
+  .js('resources/assets/scripts/app.js', 'scripts')
-   .blocks('resources/assets/scripts/editor.js', 'scripts')
+  .js('resources/assets/scripts/customizer.js', 'scripts')
-   .extract();
+  .blocks('resources/assets/scripts/editor.js', 'scripts')
+  .extract();
 
-mix.copyWatched('resources/assets/images/**', 'dist/images')
+mix
-   .copyWatched('resources/assets/fonts/**', 'dist/fonts');
+  .copyWatched('resources/assets/images/**', 'dist/images')
+  .copyWatched('resources/assets/fonts/**', 'dist/fonts');
 
-mix.autoload({
+mix
-  jquery: ['$', 'window.jQuery'],
+  .autoload({ jquery: ['$', 'window.jQuery'] })
-});
+  .options({ processCssUrls: false })
-
+  .sourceMaps(false, 'source-map')
-mix.options({
+  .version();
-  processCssUrls: false,
-});
-
-mix.sourceMaps(false, 'source-map')
-   .version();