Template-04-controls-esnext - updated template to match https://githu…

…b.com/WordPress/gutenberg-examples/tree/master/04-controls-esnext

packages/create-block/lib/templates.js

@@ -56,12 +56,14 @@ const predefinedBlockTemplates = {
 		],
 		wpScriptsEnabled: true,
 	},
-	esnextControls: {
+	'controls-esnext': {
 		defaultValues: {
-			// namespace,
-			slug: 'esnext-controls',
-			title: 'ESNext Controls Example',
-			description: 'Example of controls block – build step required.',
+			slug: 'controls-esnext',
+			title: 'Controls ESNext',
+			description:
+				'Example block written with ESNext standard and JSX support – build step required.',
+			dashicon: 'universal-access-alt',
+			category: 'layout',
 		},
 	},
 };

packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache

@@ -1,9 +1,14 @@
 /**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
+ * Note that these styles are loaded *after* common styles, so that
+ * editor-specific styles using the same selectors will take precedence.
  */
-
+.wp-block-gutenberg-examples-example-04-controls-esnext {
+	color: #fff;
+	background: #00a8db;
+	border: 2px solid #0D72B2;
+	padding: 20px;
+	font-family: sans-serif;
+}
 .wp-block-{{namespace}}-{{slug}} {
 	border: 1px dotted red;
 }

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

@@ -13,11 +13,15 @@ import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
- * Internal dependencies
+ * 
+ *
+ * 
  */
-import './style.scss';
-import Edit from './edit';
-import save from './save';
+import {
+	RichText,
+	AlignmentToolbar,
+	BlockControls,
+} from '@wordpress/block-editor';
 
 /**
  * Every block starts by registering a new block type definition.
@@ -51,6 +55,23 @@ registerBlockType( '{{namespace}}/{{slug}}', {
 	 */
 	category: '{{category}}',
 
+	/**
+	 * 
+	 *
+	 * 
+	 */
+	attributes: {
+		content: {
+			type: 'array',
+			source: 'children',
+			selector: 'p',
+		},
+		alignment: {
+			type: 'string',
+			default: 'none',
+		},
+	},
+
 	{{#dashicon}}
 	/**
 	 * An icon property should be specified to make it easier to identify a block.
@@ -59,21 +80,58 @@ registerBlockType( '{{namespace}}/{{slug}}', {
 	icon: '{{dashicon}}',
 
 	{{/dashicon}}
-	/**
-	 * Optional block extended support features.
-	 */
-	supports: {
-		// Removes support for an HTML mode.
-		html: false,
-	},
 
 	/**
-	 * @see ./edit.js
+	 * 
 	 */
-	edit: Edit,
+	edit: ( props ) => {
+		const {
+			attributes: { content, alignment },
+			className,
+		} = props;
+
+		const onChangeContent = ( newContent ) => {
+			props.setAttributes( { content: newContent } );
+		};
+
+		const onChangeAlignment = ( newAlignment ) => {
+			props.setAttributes( {
+				alignment: newAlignment === undefined ? 'none' : newAlignment,
+			} );
+		};
+
+		return (
+			<div>
+				{
+					<BlockControls>
+						<AlignmentToolbar
+							value={ alignment }
+							onChange={ onChangeAlignment }
+						/>
+					</BlockControls>
+				}
+				<RichText
+					className={ className }
+					style={ { textAlign: alignment } }
+					tagName="p"
+					onChange={ onChangeContent }
+					value={ content }
+				/>
+			</div>
+		);
+	},
 
 	/**
-	 * @see ./save.js
+	 * 
 	 */
-	save,
+
+	save: ( props ) => {
+		return (
+			<RichText.Content
+				className={ `gutenberg-examples-align-${ props.attributes.alignment }` }
+				tagName="p"
+				value={ props.attributes.content }
+			/>
+		);
+	},
 } );

packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache

@@ -1,9 +1,26 @@
 /**
- * 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.
+ * Note that these styles are loaded *before* editor styles, so that
+ * editor-specific styles using the same selectors will take precedence.
  */
+.wp-block-gutenberg-examples-example-04-controls-esnext {
+	color: #fff;
+	background: #00a8db;
+	border: 2px solid #0D72B2;
+	padding: 20px;
+	font-family: sans-serif;
+}
+
+.gutenberg-examples-align-left {
+	text-align: left;
+}
+
+.gutenberg-examples-align-center {
+	text-align: center;
+}
+
+.gutenberg-examples-align-right {
+	text-align: right;
+}
 
 .wp-block-{{namespace}}-{{slug}} {
 	background-color: theme(button);