From 4029e2120b430238db8bc0270fa2e940e9270b09 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Mon, 27 Jan 2020 13:45:55 +0100
Subject: [PATCH] Improve the strucutre and handling of templates Props to
 @aduth for the proposal:
 https://github.com/WordPress/gutenberg/pull/19773#discussion_r370833992.

---
 packages/create-block/lib/scaffold.js         | 13 ++++----
 packages/create-block/lib/templates.js        | 30 +++++++++----------
 ...plugin-php.mustache => $slug.php.mustache} |  0
 .../.editorconfig.mustache}                   |  0
 .../editor.css.mustache}                      |  0
 .../{index-js.mustache => index.js.mustache}  |  0
 .../style.css.mustache}                       |  0
 ...plugin-php.mustache => $slug.php.mustache} |  0
 .../templates/esnext/.editorconfig.mustache   | 22 ++++++++++++++
 .../.gitignore.mustache}                      |  0
 .../lib/templates/esnext/editor.css.mustache  |  9 ++++++
 .../index.js.mustache}                        |  0
 .../lib/templates/esnext/style.css.mustache   | 12 ++++++++
 13 files changed, 64 insertions(+), 22 deletions(-)
 rename packages/create-block/lib/templates/es5/{plugin-php.mustache => $slug.php.mustache} (100%)
 rename packages/create-block/lib/templates/{editorconfig.mustache => es5/.editorconfig.mustache} (100%)
 rename packages/create-block/lib/templates/{editor-css.mustache => es5/editor.css.mustache} (100%)
 rename packages/create-block/lib/templates/es5/{index-js.mustache => index.js.mustache} (100%)
 rename packages/create-block/lib/templates/{style-css.mustache => es5/style.css.mustache} (100%)
 rename packages/create-block/lib/templates/esnext/{plugin-php.mustache => $slug.php.mustache} (100%)
 create mode 100644 packages/create-block/lib/templates/esnext/.editorconfig.mustache
 rename packages/create-block/lib/templates/{gitignore.mustache => esnext/.gitignore.mustache} (100%)
 create mode 100644 packages/create-block/lib/templates/esnext/editor.css.mustache
 rename packages/create-block/lib/templates/esnext/{index-js.mustache => src/index.js.mustache} (100%)
 create mode 100644 packages/create-block/lib/templates/esnext/style.css.mustache

diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
index 30980fd2e6616..bf21a255f6e41 100644
--- a/packages/create-block/lib/scaffold.js
+++ b/packages/create-block/lib/scaffold.js
@@ -27,7 +27,6 @@ module.exports = async function( templateName, {
 	info( '' );
 	info( `Creating a new WordPress block in "${ slug }" folder.` );
 
-	const outputFiles = getOutputFiles( templateName );
 	const view = {
 		namespace,
 		slug,
@@ -41,17 +40,17 @@ module.exports = async function( templateName, {
 		license,
 		textdomain: namespace,
 	};
-
 	await Promise.all(
-		Object.keys( outputFiles ).map( async ( fileName ) => {
+		getOutputFiles( templateName ).map( async ( file ) => {
 			const template = await readFile(
-				join( __dirname, `templates/${ outputFiles[ fileName ] }.mustache` ),
+				join( __dirname, `templates/${ templateName }/${ file }.mustache` ),
 				'utf8'
 			);
-			const filePath = `${ slug }/${ fileName.replace( /\$slug/g, slug ) }`;
-			await makeDir( dirname( filePath ) );
+			// Output files can have names that depend on the slug provided.
+			const outputFilePath = `${ slug }/${ file.replace( /\$slug/g, slug ) }`;
+			await makeDir( dirname( outputFilePath ) );
 			writeFile(
-				filePath,
+				outputFilePath,
 				render( template, view )
 			);
 		} )
diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js
index edc4476fd8787..8d157666c663f 100644
--- a/packages/create-block/lib/templates.js
+++ b/packages/create-block/lib/templates.js
@@ -24,13 +24,13 @@ const templates = {
 			license,
 			version,
 		},
-		outputFiles: {
-			'.editorconfig': 'editorconfig',
-			'editor.css': 'editor-css',
-			'index.js': 'es5/index-js',
-			'$slug.php': 'es5/plugin-php',
-			'style.css': 'style-css',
-		},
+		outputFiles: [
+			'.editorconfig',
+			'editor.css',
+			'index.js',
+			'$slug.php',
+			'style.css',
+		],
 	},
 	esnext: {
 		defaultValues: {
@@ -44,14 +44,14 @@ const templates = {
 			license,
 			version,
 		},
-		outputFiles: {
-			'.editorconfig': 'editorconfig',
-			'.gitignore': 'gitignore',
-			'editor.css': 'editor-css',
-			'src/index.js': 'esnext/index-js',
-			'$slug.php': 'esnext/plugin-php',
-			'style.css': 'style-css',
-		},
+		outputFiles: [
+			'.editorconfig',
+			'.gitignore',
+			'editor.css',
+			'src/index.js',
+			'$slug.php',
+			'style.css',
+		],
 		wpScriptsEnabled: true,
 	},
 };
diff --git a/packages/create-block/lib/templates/es5/plugin-php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache
similarity index 100%
rename from packages/create-block/lib/templates/es5/plugin-php.mustache
rename to packages/create-block/lib/templates/es5/$slug.php.mustache
diff --git a/packages/create-block/lib/templates/editorconfig.mustache b/packages/create-block/lib/templates/es5/.editorconfig.mustache
similarity index 100%
rename from packages/create-block/lib/templates/editorconfig.mustache
rename to packages/create-block/lib/templates/es5/.editorconfig.mustache
diff --git a/packages/create-block/lib/templates/editor-css.mustache b/packages/create-block/lib/templates/es5/editor.css.mustache
similarity index 100%
rename from packages/create-block/lib/templates/editor-css.mustache
rename to packages/create-block/lib/templates/es5/editor.css.mustache
diff --git a/packages/create-block/lib/templates/es5/index-js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache
similarity index 100%
rename from packages/create-block/lib/templates/es5/index-js.mustache
rename to packages/create-block/lib/templates/es5/index.js.mustache
diff --git a/packages/create-block/lib/templates/style-css.mustache b/packages/create-block/lib/templates/es5/style.css.mustache
similarity index 100%
rename from packages/create-block/lib/templates/style-css.mustache
rename to packages/create-block/lib/templates/es5/style.css.mustache
diff --git a/packages/create-block/lib/templates/esnext/plugin-php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache
similarity index 100%
rename from packages/create-block/lib/templates/esnext/plugin-php.mustache
rename to packages/create-block/lib/templates/esnext/$slug.php.mustache
diff --git a/packages/create-block/lib/templates/esnext/.editorconfig.mustache b/packages/create-block/lib/templates/esnext/.editorconfig.mustache
new file mode 100644
index 0000000000000..de75f444cfd0c
--- /dev/null
+++ b/packages/create-block/lib/templates/esnext/.editorconfig.mustache
@@ -0,0 +1,22 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
+
+[{*.json,*.yml}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/create-block/lib/templates/gitignore.mustache b/packages/create-block/lib/templates/esnext/.gitignore.mustache
similarity index 100%
rename from packages/create-block/lib/templates/gitignore.mustache
rename to packages/create-block/lib/templates/esnext/.gitignore.mustache
diff --git a/packages/create-block/lib/templates/esnext/editor.css.mustache b/packages/create-block/lib/templates/esnext/editor.css.mustache
new file mode 100644
index 0000000000000..fc68223e00660
--- /dev/null
+++ b/packages/create-block/lib/templates/esnext/editor.css.mustache
@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	border: 1px dotted #f00;
+}
diff --git a/packages/create-block/lib/templates/esnext/index-js.mustache b/packages/create-block/lib/templates/esnext/src/index.js.mustache
similarity index 100%
rename from packages/create-block/lib/templates/esnext/index-js.mustache
rename to packages/create-block/lib/templates/esnext/src/index.js.mustache
diff --git a/packages/create-block/lib/templates/esnext/style.css.mustache b/packages/create-block/lib/templates/esnext/style.css.mustache
new file mode 100644
index 0000000000000..76b12185cee07
--- /dev/null
+++ b/packages/create-block/lib/templates/esnext/style.css.mustache
@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	background-color: #000;
+	color: #fff;
+	padding: 2px;
+}