From ac64aca7eb91a35c61980db6a5bf4a1f02167ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= <grzegorz@gziolo.pl>
Date: Thu, 4 Jun 2020 09:03:01 +0200
Subject: [PATCH] Create Block: Integrate CSS import in JS with esnext template
 (#22727)

* Create Block: Integrate esnext template with CSS import in JS

* Update CHANGELOG.md

* Update CHANGELOG.md
---
 packages/create-block/CHANGELOG.md                          | 6 +++++-
 .../create-block/lib/templates/esnext/$slug.php.mustache    | 4 ++--
 .../create-block/lib/templates/esnext/src/edit.js.mustache  | 5 +++++
 .../{editor.css.mustache => src/editor.scss.mustache}       | 2 +-
 .../create-block/lib/templates/esnext/src/index.js.mustache | 1 +
 .../esnext/{style.css.mustache => src/style.scss.mustache}  | 4 ++--
 6 files changed, 16 insertions(+), 6 deletions(-)
 rename packages/create-block/lib/templates/esnext/{editor.css.mustache => src/editor.scss.mustache} (87%)
 rename packages/create-block/lib/templates/esnext/{style.css.mustache => src/style.scss.mustache} (81%)

diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 6160ea0fe9d15..35c5923ebed09 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Update `esnext` (default) template to leverage CSS import in JavaScript support added to `@wordpress/scripts` ([#22727](https://github.com/WordPress/gutenberg/pull/22727/files)).
+
 ## 0.13.0 (2020-05-28)
 
 ### Internal
@@ -16,7 +20,7 @@
 
 ### Enhancements
 
-- Update `esnext` template to scaffold 3 JavaScript source files to illustrate how ES modules help to better organize code.
+- Update `esnext` (default) template to scaffold 3 JavaScript source files to illustrate how ES modules help to better organize code ([#21750](https://github.com/WordPress/gutenberg/pull/21750)).
 
 ## 0.10.0 (2020-04-01)
 
diff --git a/packages/create-block/lib/templates/esnext/$slug.php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache
index e5f30dfffa15a..cc68e73249496 100644
--- a/packages/create-block/lib/templates/esnext/$slug.php.mustache
+++ b/packages/create-block/lib/templates/esnext/$slug.php.mustache
@@ -43,7 +43,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 		$script_asset['version']
 	);
 
-	$editor_css = 'editor.css';
+	$editor_css = 'build/index.css';
 	wp_register_style(
 		'{{namespace}}-{{slug}}-block-editor',
 		plugins_url( $editor_css, __FILE__ ),
@@ -51,7 +51,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 		filemtime( "$dir/$editor_css" )
 	);
 
-	$style_css = 'style.css';
+	$style_css = 'build/style.css';
 	wp_register_style(
 		'{{namespace}}-{{slug}}-block',
 		plugins_url( $style_css, __FILE__ ),
diff --git a/packages/create-block/lib/templates/esnext/src/edit.js.mustache b/packages/create-block/lib/templates/esnext/src/edit.js.mustache
index caea5d2571ee7..71eea7e192829 100644
--- a/packages/create-block/lib/templates/esnext/src/edit.js.mustache
+++ b/packages/create-block/lib/templates/esnext/src/edit.js.mustache
@@ -5,6 +5,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
 /**
  * The edit function describes the structure of your block in the context of the
  * editor. This represents what the editor will render when the block is used.
diff --git a/packages/create-block/lib/templates/esnext/editor.css.mustache b/packages/create-block/lib/templates/esnext/src/editor.scss.mustache
similarity index 87%
rename from packages/create-block/lib/templates/esnext/editor.css.mustache
rename to packages/create-block/lib/templates/esnext/src/editor.scss.mustache
index fc68223e00660..0f0c68b4cf488 100644
--- a/packages/create-block/lib/templates/esnext/editor.css.mustache
+++ b/packages/create-block/lib/templates/esnext/src/editor.scss.mustache
@@ -5,5 +5,5 @@
  */
 
 .wp-block-{{namespace}}-{{slug}} {
-	border: 1px dotted #f00;
+	border: 1px dotted red;
 }
diff --git a/packages/create-block/lib/templates/esnext/src/index.js.mustache b/packages/create-block/lib/templates/esnext/src/index.js.mustache
index 7cc26fbc0c929..72fa02b82a751 100644
--- a/packages/create-block/lib/templates/esnext/src/index.js.mustache
+++ b/packages/create-block/lib/templates/esnext/src/index.js.mustache
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import Edit from './edit';
 import save from './save';
 
diff --git a/packages/create-block/lib/templates/esnext/style.css.mustache b/packages/create-block/lib/templates/esnext/src/style.scss.mustache
similarity index 81%
rename from packages/create-block/lib/templates/esnext/style.css.mustache
rename to packages/create-block/lib/templates/esnext/src/style.scss.mustache
index 76b12185cee07..3e1dc0a2b3504 100644
--- a/packages/create-block/lib/templates/esnext/style.css.mustache
+++ b/packages/create-block/lib/templates/esnext/src/style.scss.mustache
@@ -6,7 +6,7 @@
  */
 
 .wp-block-{{namespace}}-{{slug}} {
-	background-color: #000;
-	color: #fff;
+	background-color: theme(button);
+	color: white;
 	padding: 2px;
 }