Improve the strucutre and handling of templates

Props to @aduth for the proposal: #19773 (comment).

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 )
 			);
 		} )

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,
 	},
 };

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

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;
+}

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;
+}