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
WordPress · Jun 4, 2020 · ac64aca · ac64aca
1 parent 338e253
commit ac64aca
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -43,15 +43,15 @@ 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__ ),
 		array(),
 		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
@@ -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/.../lib/templates/esnext/editor.css.mustache → ...templates/esnext/src/editor.scss.mustache b/.../lib/templates/esnext/editor.css.mustache → ...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
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import Edit from './edit';
 import save from './save';
 

diff --git a/...k/lib/templates/esnext/style.css.mustache → .../templates/esnext/src/style.scss.mustache b/...k/lib/templates/esnext/style.css.mustache → .../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;
 }