Create Block: Split JS source file into parts for esnext template (#2…

…1750)

packages/create-block/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Master
 
+### Enhancements
+
+- Update `esnext` template to scaffold 3 JavaScript source files to illustrate how ES modules help to better organize code.
+
 ## 0.10.0 (2020-04-01)
 
 ### New Features

packages/create-block/lib/templates.js

@@ -54,7 +54,9 @@ const templates = {
 			'.editorconfig',
 			'.gitignore',
 			'editor.css',
+			'src/edit.js',
 			'src/index.js',
+			'src/save.js',
 			'$slug.php',
 			'style.css',
 			'readme.txt',

packages/create-block/lib/templates/esnext/src/edit.js.mustache

@@ -0,0 +1,24 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * 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.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
+ *
+ * @param {Object} [props] Properties passed from the editor.
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit( { className } ) {
+	return (
+		<p className={ className }>
+			{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
+		</p>
+	);
+}

packages/create-block/lib/templates/esnext/src/index.js.mustache

@@ -12,6 +12,12 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+
 /**
  * Every block starts by registering a new block type definition.
  *
@@ -61,36 +67,12 @@ registerBlockType( '{{namespace}}/{{slug}}', {
 	},
 
 	/**
-	 * 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.
-	 *
-	 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
-	 *
-	 * @param {Object} [props] Properties passed from the editor.
-	 *
-	 * @return {WPElement} Element to render.
+	 * @see ./edit.js
 	 */
-	edit( { className } ) {
-		return (
-			<p className={ className }>
-				{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
-			</p>
-		);
-	},
+	edit: Edit,
 
 	/**
-	 * The save function defines the way in which the different attributes should be combined
-	 * into the final markup, which is then serialized by the block editor into `post_content`.
-	 *
-	 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
-	 *
-	 * @return {WPElement} Element to render.
+	 * @see ./save.js
 	 */
-	save() {
-		return (
-			<p>
-				{ __( '{{title}} – hello from the saved content!', '{{textdomain}}' ) }
-			</p>
-		);
-	},
+	save,
 } );

packages/create-block/lib/templates/esnext/src/save.js.mustache

@@ -0,0 +1,26 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function save() {
+	return (
+		<p>
+			{ __(
+				'{{title}} – hello from the saved content!',
+				'{{textdomain}}'
+			) }
+		</p>
+	);
+}