First pass at a blockbase child theme generator (#4001)

* First pass at a blockbase child theme generator

* First pass at a blockbase child theme generator

blockbase/create-child.js

@@ -0,0 +1,151 @@
+const child_theme_json = `{
+	"settings": {
+		"custom": {}
+	},
+	"styles": {
+		"blocks": {}
+	}	
+}`;
+
+const child_package_json = `{
+  "name": "{newtheme}",
+  "version": "0.0.1",
+  "description": "",
+  "main": "style.css",
+  "dependencies": {},
+  "devDependencies": {
+    "@wordpress/base-styles": "^3.4.0",
+    "chokidar-cli": "^2.1.0",
+    "node-sass": "^5.0.0",
+    "node-sass-package-importer": "^5.3.2"
+  },
+  "scripts": {
+    "start": "chokidar \\"**/*.scss\\" child-theme.json ../blockbase/theme.json -c \\"npm run build\\" --initial",
+    "build": "npm run build:theme && npm run build:scss",
+    "build:theme": "node ../blockbase/build.js {newtheme}",
+    "build:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/theme.scss assets/theme.css --output-style expanded --indent-type tab --indent-width 1 --source-map true"
+  },
+  "author": "",
+  "license": "GPLv2"
+}`;
+
+const style_css = `/*
+Theme Name: {newtheme}
+Theme URI: 
+Author: 
+Author URI: 
+Description: 
+Requires at least: 5.7
+Tested up to: 5.7
+Requires PHP: 5.7
+Version: 0.0.1
+License: GNU General Public License v2 or later
+License URI: 
+Template: blockbase
+Text Domain: {newtheme}
+Tags: 
+
+*/`;
+
+const theme_scss = `	
+// Custom CSS should be added here.  It will be compiled to /assets/theme.css.
+`;
+
+const functions_php = `
+<?php
+
+/**
+ * Add Editor Styles
+ */
+function newtheme_editor_styles() {
+	// Enqueue editor styles.
+	add_editor_style(
+		array(
+			'/assets/theme.css',
+		)
+	);
+}
+add_action( 'after_setup_theme', 'newtheme_editor_styles' );
+
+/**
+ *
+ * Enqueue scripts and styles.
+ */
+function newtheme_scripts() {
+	wp_enqueue_style( 'newtheme-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array('blockbase-ponyfill'), wp_get_theme()->get( 'Version' ) );
+}
+add_action( 'wp_enqueue_scripts', 'newtheme_scripts' );
+
+`;
+
+const block_templates_index_html = `
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:paragraph -->
+<p>Populate this /block-templates/INDEX.html template (and other templates) with your block markup.</p>
+<!-- /wp:paragraph -->
+`;
+
+const block_template_parts_header = `
+<!-- wp:paragraph -->
+<p>Populate this /block-template-parts/header.html template part (and other template parts) with your block markup.</p>
+<!-- /wp:paragraph -->
+`;
+
+const success_message = `
+  Success creating new theme {newtheme}!
+`;
+
+const fs = require( 'fs' );
+const execSync = require( 'child_process' ).execSync;
+const childThemeName = process.argv[ 2 ];
+
+if ( ! childThemeName ) {
+	console.log( 'Please provide the slug of the child theme to create.' );
+} else {
+	createChild( childThemeName );
+}
+
+function createChild( name ) {
+	//TODO: Santatize theme name/slug
+	try {
+		fs.mkdirSync( `../${ name }` );
+		fs.mkdirSync( `../${ name }/sass` );
+		fs.mkdirSync( `../${ name }/block-templates` );
+		fs.mkdirSync( `../${ name }/block-template-parts` );
+		fs.writeFileSync(
+			`../${ name }/child-theme.json`,
+			child_theme_json.replace( /{newtheme}/g, name )
+		);
+		fs.writeFileSync(
+			`../${ name }/package.json`,
+			child_package_json.replace( /{newtheme}/g, name )
+		);
+		fs.writeFileSync(
+			`../${ name }/style.css`,
+			style_css.replace( /{newtheme}/g, name )
+		);
+		fs.writeFileSync(
+			`../${ name }/functions.php`,
+			functions_php.replace( /{newtheme}/g, name )
+		);
+		fs.writeFileSync(
+			`../${ name }/sass/theme.scss`,
+			theme_scss.replace( /{newtheme}/g, name )
+		);
+		fs.writeFileSync(
+			`../${ name }/block-templates/index.html`,
+			block_templates_index_html.replace( /{newtheme}/g, name )
+		);
+		fs.writeFileSync(
+			`../${ name }/block-template-parts/header.html`,
+			block_template_parts_header.replace( /{newtheme}/g, name )
+		);
+		execSync( `cd ../${ name }/ && npm install && npm run build`, {
+			stdio: 'inherit',
+		} );
+		console.log( success_message.replace( /{newtheme}/g, name ) );
+	} catch ( err ) {
+		console.log( 'child theme creation failed: ' + err );
+	}
+}

blockbase/package.json

@@ -33,6 +33,7 @@
     "extends @wordpress/browserslist-config"
   ],
   "scripts": {
+    "create:child": "node create-child.js",
     "start": "chokidar \"sass/**/*.scss\" -c \"npm run build\" --initial",
     "start:child": "run-p start \"build:child -- {@} watch\" --",
     "start:all": "chokidar \"sass/**/*.scss\" \"experimental-theme.json\" -c \"npm run build:all\" --initial",

blockbase/readme.txt

@@ -24,10 +24,13 @@ The goal is for the ponyfill styling to reflect what Gutenberg will style, from
 
 To build a Blockbase child theme follow these instructions:
 
-- Add a [package.json](https://github.com/Automattic/themes/blob/trunk/seedlet-blocks/package.json), [style.css](https://github.com/Automattic/themes/blob/trunk/seedlet-blocks/style.css) and empty index.php files to your theme.
-- Your child theme's theme.json file will be built by combining Blockbase's original theme.json file and your child's `child-theme.json`. That is the file where your configuration values live (you only want the values for variables that are different from the parent there). To generate the combined file, run `npm run build` from inside your theme's folder or run `npm run build:child child-theme-slug` from inside Blockbase's folder.
+- Ensure node/npm are installed on your system.
+- From the /blockbase folder run the command `npm run create:child CHILDSLUG`
+- A directory with the necessary files will be created to match CHILDSLUG.  This folder will be a sibling of /blockbase.
+- From the /CHILDSLUG folder (whatever you decided it would be) run the command `npm run build` any time you make changes to the child-theme.json or any of the files in the /sass folder.
+- Your child theme's theme.json file will be built by combining Blockbase's original theme.json file and your child's `child-theme.json`. That is the file where your configuration values live (you only want the values for variables that are different from the parent there). 
+- Use the command `npm run start` to enter watch mode to rebuild the assets any time you change child-theme.json or any of the files in /scss.
 - Extend the parent's templates that you want to customize or add new ones where needed following the [template hierarchy](https://themeshaper.com/2020/12/18/getting-started-with-block-themes-templates/).
-- Using `npm run start` will both watch changes inside the `sass` and `assets` folder and changes to the `child-theme.json` file.
 
 == Building a Universal Child Theme ==