Restructure WP Rig for v2.0 (#133)

* Restructure dev/css to css/src

* Restructure dev/js to js/src

* Restructure dev/images to /images

* Restructure dev/*.php to /*.php

* Restructure dev/style.css to /style.css

* Restructure dev/inc to /inc

* Restructure dev/template-parts to /template-parts

* Restructure dev/pluggable to /pluggable

* Restructure dev/config to /config

* Restructure dev/tests to /tests

* Restructure dev/optional to /optional

* Exclude the optional directory from WP_Theme::scandir()

Uses the `theme_scandir_exclusions` filter to add `optional` to the array of items ignored by the `WP_Theme::scandir()` method.

* Update dev paths

* Update .gitignore for new file structure

* Update .gitignore for new file structure

* Remove dev from paths

* Update npm modules

* Run bundle in production mode

* Only make string replacements if in production

* Correct css dest path

* Combine css watch tasks

* Update some paths for new file structure

* Remove jsMin and jsLibs

* Remove jsMin and jsLibs gulp tasks

* Update PHP task for new dev process

Remove the first run and name change conditionals as we are not longer doing string replacements in dev mode. Now we only code sniff in dev mode.

* Correct coding standard violations

* Update gulp scripts task for new dev process

Don't do string replacements in dev mode. Remove verbose file output.

* Update gulp scripts task for new dev process

Don't do string replacements in dev mode. Remove verbose file output. Inject CSS file changes rather than doing a full reload.

* Update main gulpfile for new dev process changes

Remove jsMin and jsLibs tasks. Run more tasks in parallel on initial start.

* Dynamic CSS file enqeueueing

Enqueue all top-level CSS files in `/css`. Add `filemtime` as the file version for busting browser cache.

* Move editor styles to subdirectory

* Add filemtime as version for JS files and main CSS

* Actually use the  variable

* Move `/css`, `/js` and `/images` into `/assets/`

* Don't enqueue style.css

* Add .min to processed CSS/JS files

* Add global.css

Register and enqueue stylesheets separately.
Make the list of CSS files to register/enqueue filterable

* Remove everything except the required WordPress comment from style.css

* Add global CSS source

* Only enqueue global styles

* Clarify function name and comment

* Don't process images in the default dev task

* Adjust old /dev paths in .eslintignore, ignore /dev in .gitignore.

* Adjust PHPCodeSniffer ruleset to work with new paths.

* Fix unit tests setup to work with new paths.

* Add newline at end of file for coding standards

* Inject styles after renaming files to .min

* Add series wrapper around styles task

* Update dependencies

* Add image processing to the default task

Optimize images in `assets/images/src` to `assets/images` to match the directory structure of CSS and JS

* First pass at a production build step

* Moar production build step

* Fix translations

* Update dependencies

* Use one conditional for prod paths rather than inline ternary

* Remove unnecessary gulp 4 warning

* Delete test script

* Update README with new gulp tasks and directory structure

* Only save PHP files when doing the production build

* Add devStringReplace gulp task

* correct function name

* String replace files inline, not destination files

* document devStringReplace gulp task

* Only code sniff changed PHP files

* Add gulp script

* Upgrade all npm dependencies. Babel 7

* Remove source string replacement task

* Make npm run gulp the default process

* Use npm run dev for default task

* Remove npm run gulp

* Add -- to the start of custom properties and media

* Set options in postcssCustomProperties and postcssCustomMedia directly

* Removed unused log import

.eslintignore

@@ -1,9 +1,7 @@
-/dev/js/libs/**
+/assets/js/libs/**
 /node_modules/**
 /vendor/**
-/js/customizer.js
-/js/navigation.js
-./dev/config/**
+/config/**
 
 # Because parsing error: 'import' and 'export' may appear only with 'sourceType: module'
 /gulpfile.babel.js

.github/CODEOWNERS

@@ -10,4 +10,4 @@ gulpfile.babel.js @ataylorme
 phpcs.xml.dist @felixarntz
 phpunit.integration.xml.dist @felixarntz
 phpunit.xml.dist @felixarntz
-/dev/tests/ @felixarntz
+/tests/ @felixarntz

.gitignore

@@ -1,11 +1,26 @@
 # Ignore everything:
 /*
-
-# Whitelist what you want tracked:
 !/.github/
-!/dev/
+!/assets/
+/assets/*
+!/assets/css/
+/assets/css/*
+!/assets/css/src/
+!/assets/js/
+/assets/js/*
+!/assets/js/src/
+!/assets/images/
+/assets/images/*
+!/assets/images/src/
 !/languages/
 !gulp/
+!style.css
+!/inc/
+!/template-parts/
+!/pluggable/
+!/config/
+!/tests/
+!/optional/
 
 !.babelrc
 !composer.json

dev/css/content.css → assets/css/src/content.css

@@ -378,26 +378,6 @@ ul.wp-block-latest-posts.is-grid.alignwide {
 	/* stylelint-enable */
 }
 
-/*--------------------------------------------------------------
-## Custom block font sizes.
---------------------------------------------------------------*/
-
-.has-small-font-size {
-	font-size: calc(var(--small-font-size) / 16)rem;
-}
-
-.has-regular-font-size {
-	font-size: calc(var(--regular-font-size) / 16)rem;
-}
-
-.has-large-font-size {
-	font-size: calc(var(--large-font-size) / 16)rem;
-}
-
-.has-larger-font-size {
-	font-size: calc(var(--larger-font-size) / 16)rem;
-}
-
 /*--------------------------------------------------------------
 ## Media
 --------------------------------------------------------------*/

dev/css/editor-styles.css → assets/css/src/editor/editor-styles.css

@@ -182,21 +182,3 @@ body.gutenberg-editor-page .wp-block-cover-image .wp-block-cover-image h2 {
 	font-size: calc(var(--larger-font-size) / 16)rem;
 	/* stylelint-enable */
 }
-
-/* Visualize editor font sizes (defined in functions.php). */
-
-.has-small-font-size {
-	font-size: calc(var(--small-font-size) / 16)rem;
-}
-
-.has-regular-font-size {
-	font-size: calc(var(--regular-font-size) / 16)rem;
-}
-
-.has-large-font-size {
-	font-size: calc(var(--large-font-size) / 16)rem;
-}
-
-.has-larger-font-size {
-	font-size: calc(var(--larger-font-size) / 16)rem;
-}

dev/style.css → assets/css/src/global.css

@@ -1,19 +1,4 @@
-/*!
-Theme Name: WP Rig
-Theme URI: https://github.com/wprig/wprig/
-Author: Morten Rand-Hendriksen et.al.
-Author URI: https://github.com/wprig/wprig/
-Description: A progressive theme development rig for WordPress.
-Version: 2.0.0
-License: GNU General Public License v3 or later
-License URI: LICENSE
-Text Domain: wp-rig
-Tags: translation-ready
-
-This theme, like WordPress, is licensed under the GPL.
-Use it to make something cool, have fun, and share
-what you've learned with others.
-
+/*
 CSS normalization based in part on normalize.css by
 Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
 */
@@ -49,7 +34,7 @@ Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
-html {
+ html {
 	line-height: 1.15; /* 1 */
 	-webkit-text-size-adjust: 100%; /* 2 */
 }

config/cssVariables.json

@@ -0,0 +1,21 @@
+{
+	"variables": {
+		"--global-font-color": "#333",
+		"--global-font-family": "'Crimson Text', serif",
+		"--global-font-size": "20",
+		"--global-font-line-height": "1.4",
+		"--highlight-font-family": "'Roboto Condensed', sans-serif",
+		"--content-width": "45",
+		"--dropdown-symbol-width": "0.7em",
+		"--small-font-size": "16",
+		"--regular-font-size": "20",
+		"--large-font-size": "36",
+		"--larger-font-size": "48"
+	},
+	"queries": {
+		"--narrow-menu-query": "screen and (max-width: 37.5em)",
+		"--wide-menu-query": "screen and (min-width: 37.5em)",
+		"--content-query": "screen and (min-width: 48em)",
+		"--sidebar-query": "screen and (min-width: 60em)"
+	}
+}

gulp/constants.js

@@ -3,9 +3,8 @@
 
 // External dependencies
 export const gulpPlugins = require('gulp-load-plugins')();
-
-// Internal dependencies
-import {getThemeConfig} from './utils';
+import path from 'path';
+import requireUncached from 'require-uncached';
 
 // gulp string replace options
 export const gulpReplaceOptions = {
@@ -18,95 +17,98 @@ export const gulpReplaceOptions = {
 // Root path is where npm run commands happen
 export const rootPath = process.env.INIT_CWD;
 
+// Dev or production
+export const isProd = ( process.env.NODE_ENV === 'production' );
+
 // get a fresh copy of the config
-export const config = getThemeConfig(true);
+export const config = requireUncached(`${rootPath}/config/themeConfig.js`);
+
+// directory for the production theme
+export const prodThemePath = path.normalize(`${rootPath}/../${config.theme.slug}`);
+
+// directory for assets (CSS, JS, images)
+export const assetsDir = `${rootPath}/assets`;
+
+// directory for assets (CSS, JS, images) in production
+export const prodAssetsDir = `${prodThemePath}/assets`;
+
+// Theme config name fields and their defaults
+export const nameFieldDefaults = {
+	slug          : 'wp-rig',
+	name          : 'WP Rig',
+	underscoreCase: 'wp_rig',
+	constant      : 'WP_RIG',
+	camelCase     : 'WpRig',
+	camelCaseVar  : 'wpRig',
+	author        : 'Morten Rand-Hendriksen',
+};
 
 // Project paths
-export const paths = {
-    browserSync: {
+let paths = {
+	assetsDir: assetsDir,
+	browserSync: {
 		dir: `${rootPath}/BrowserSync`,
 		cert: `${rootPath}/BrowserSync/wp-rig-browser-sync-cert.crt`,
 		caCert: `${rootPath}/BrowserSync/wp-rig-browser-sync-root-cert.crt`,
 		key: `${rootPath}/BrowserSync/wp-rig-browser-sync-key.key`
-    },
+	},
 	config: {
-		cssVars: `${rootPath}/dev/config/cssVariables.json`,
-		themeConfig: `${rootPath}/dev/config/themeConfig.js`
+		cssVars: `${rootPath}/config/cssVariables.json`,
+		themeConfig: `${rootPath}/config/themeConfig.js`
 	},
 	php: {
 		src: [
-			`${rootPath}/dev/**/*.php`,
-			`!${rootPath}/dev/optional/**/*.*`,
-			`!${rootPath}/dev/tests/**/*.*`,
+			`${rootPath}/**/*.php`,
+			`!${rootPath}/optional/**/*.*`,
+			`!${rootPath}/tests/**/*.*`,
+			`!${rootPath}/vendor/**/*.*`,
 		],
 		dest: `${rootPath}/`
 	},
 	styles: {
-		src: [
-			`${rootPath}/dev/**/*.css`,
-			`!${rootPath}/dev/optional/**/*.*`
-		],
-		dest: `${rootPath}/`,
-		sass: [`${rootPath}/dev/**/*.scss`]
+		src: `${assetsDir}/css/src/**/*.css`,
+		sass: `${assetsDir}/css/src/**/*.scss`,
+		dest: `${assetsDir}/css/`
 	},
 	scripts: {
-		src: [
-			`${rootPath}/dev/**/*.js`,
-			`!${rootPath}/dev/**/*.min.js`,
-			`!${rootPath}/dev/js/libs/**/*.js`,
-			`!${rootPath}/dev/optional/**/*.*`,
-			`!${rootPath}/dev/config/**/*`,
-		],
-		min: `${rootPath}/dev/**/*.min.js`,
-		dest: `${rootPath}/`,
-		libs: `${rootPath}/dev/js/libs/**/*.js`,
-		libsDest: `${rootPath}/js/libs/`,
-		verboseLibsDest: `${rootPath}/verbose/js/libs/`,
+		src: `${assetsDir}/js/src/**/*.js`,
+		dest: `${assetsDir}/js/`
 	},
 	images: {
-		src: [
-			`${rootPath}/dev/**/*.{jpg,JPG,png,svg,,gif,GIF}`,
-			`!${rootPath}/dev/optional/**/*.*`,
-		],
-		dest: `${rootPath}/`
+		src: `${assetsDir}/images/src/**/*.{jpg,JPG,png,svg,gif,GIF}`,
+		dest: `${assetsDir}/images/`
 	},
 	languages: {
 		src: [
 			`${rootPath}/**/*.php`,
-			`!${rootPath}/dev/**/*.php`,
-			`!${rootPath}/verbose/**/*.php`,
+			`!${rootPath}/optional/**/*.*`,
+			`!${rootPath}/tests/**/*.*`,
+			`!${rootPath}/vendor/**/*.*`,
 		],
-		dest: `${rootPath}/languages/${config.theme.slug}.pot`
+		dest: `${rootPath}/languages/${nameFieldDefaults.slug}.pot`
 	},
-	verbose: `${rootPath}/verbose/`,
 	export: {
 		src: [
-			`${rootPath}/**/*`,
-			`!${rootPath}/${config.theme.slug}`,
-			`!${rootPath}/${config.theme.slug}/**/*`,
-			`!${rootPath}/dev/**/*`,
-			`!${rootPath}/node_modules`,
-			`!${rootPath}/node_modules/**/*`,
-			`!${rootPath}/vendor`,
-			`!${rootPath}/vendor/**/*`,
-			`!${rootPath}/.*`,
-			`!${rootPath}/composer.*`,
-			`!${rootPath}/gulpfile.*`,
-			`!${rootPath}/gulp/**/*`,
-			`!${rootPath}/package*.*`,
-			`!${rootPath}/phpcs.*`,
-			`!${rootPath}/*.zip`,
+			`${rootPath}/style.css`,
+			`${rootPath}/readme.txt`,
+			`${rootPath}/screenshot.png`,
+			`${rootPath}/LICENSE`,
+			`${rootPath}/pluggable/`,
 		],
-		dest: `${rootPath}/`
+		dest: `${prodThemePath}/`
 	}
 };
 
-// Theme config name fields and their defaults
-export const nameFieldDefaults = {
-	slug          : 'wp-rig',
-	name          : 'WP Rig',
-	underscoreCase: 'wp_rig',
-	constant      : 'WP_RIG',
-	camelCase     : 'WpRig',
-	camelCaseVar  : 'wpRig',
-};
+// Override paths for production
+if( isProd ){
+	paths.php.dest = `${prodThemePath}/`;
+	paths.styles.dest = `${prodAssetsDir}/css/`;
+	paths.scripts.dest = `${prodAssetsDir}/js/`;
+	paths.images.dest = `${prodAssetsDir}/images/`;
+	paths.languages = {
+		src: `${prodThemePath}/**/*.php`,
+		dest: `${prodThemePath}/languages/${config.theme.slug}.pot`
+	};
+}
+
+export {paths};

gulp/images.js

@@ -12,7 +12,7 @@ import {paths, gulpPlugins} from './constants';
  * Optimize images.
  */
 export default function images(done) {
-	pump([
+    pump([
         src(paths.images.src),
         gulpPlugins.newer(paths.images.dest),
         gulpPlugins.imagemin(),