Add/controls template esnext

packages/create-block/lib/templates.js

@@ -33,6 +33,18 @@ const predefinedBlockTemplates = {
 				'Example block written with ESNext standard and JSX support – build step required.',
 		},
 	},
+	'controls-esnext': {
+		defaultValues: {
+			namespace: 'gutenberg-examples',
+			slug: 'example-04-controls-esnext',
+			title: 'Example: Controls (ESNext)',
+			textdomain: 'gutenberg-examples',
+			description:
+				'Example block written with ESNext standard and JSX support for GUI Controls– build step required.',
+			dashicon: 'universal-access-alt',
+			category: 'layout',
+		},
+	},
 };
 
 const getOutputTemplates = async ( name ) => {

packages/create-block/lib/templates/controls-esnext/$slug.php.mustache

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Plugin Name:     {{title}}
+{{#description}}
+ * Description:     {{description}}
+{{/description}}
+ * Version:         {{version}}
+{{#author}}
+ * Author:          {{author}}
+{{/author}}
+{{#license}}
+ * License:         {{license}}
+{{/license}}
+{{#licenseURI}}
+ * License URI:     {{{licenseURI}}}
+{{/licenseURI}}
+ * Text Domain:     {{textdomain}}
+ *
+ * @package         {{namespace}}
+ */
+
+/**
+ * Registers all block assets so that they can be enqueued through the block editor
+ * in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/applying-styles-with-stylesheets/
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	$dir = dirname( __FILE__ );
+
+	$script_asset_path = "$dir/build/index.asset.php";
+	if ( ! file_exists( $script_asset_path ) ) {
+		throw new Error(
+			'You need to run `npm start` or `npm run build` for the "{{namespace}}/{{slug}}" block first.'
+		);
+	}
+	$index_js     = 'build/index.js';
+	$script_asset = require( $script_asset_path );
+	wp_register_script(
+		'{{namespace}}-{{slug}}-block-editor',
+		plugins_url( $index_js, __FILE__ ),
+		$script_asset['dependencies'],
+		$script_asset['version']
+	);
+
+	$editor_css = 'editor.css';
+	wp_register_style(
+		'{{namespace}}-{{slug}}-block-editor',
+		plugins_url( $editor_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	$style_css = 'style.css';
+	wp_register_style(
+		'{{namespace}}-{{slug}}-block',
+		plugins_url( $style_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$style_css" )
+	);
+
+	register_block_type( '{{namespace}}/{{slug}}', array(
+		'editor_script' => '{{namespace}}-{{slug}}-block-editor',
+		'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
+		'style'         => '{{namespace}}-{{slug}}-block',
+	) );
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

packages/create-block/lib/templates/controls-esnext/.editorconfig.mustache

@@ -0,0 +1,21 @@
+# 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
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

packages/create-block/lib/templates/controls-esnext/.gitignore.mustache

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env

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

@@ -0,0 +1,18 @@
+/**
+ * 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-{{namespace}}-{{slug}} {
+	color: #fff;
+	background: #00a8db;
+	border: 2px solid #0D72B2;
+	padding: 20px;
+	font-family: sans-serif;
+}

packages/create-block/lib/templates/controls-esnext/readme.txt.mustache

@@ -0,0 +1,63 @@
+=== {{title}} ===
+{{#author}}
+Contributors:      {{author}}
+{{/author}}
+Tags:              block
+Requires at least: 5.3.2
+Tested up to:      5.4.1
+Stable tag:        {{version}}
+Requires PHP:      7.0.0
+{{#license}}
+License:           {{license}}
+{{/license}}
+{{#licenseURI}}
+License URI:       {{{licenseURI}}}
+{{/licenseURI}}
+
+{{description}}
+
+== Description ==
+
+This is the long description. No limit, and you can use Markdown (as well as in the following sections).
+
+For backwards compatibility, if this section is missing, the full length of the short description will be used, and
+Markdown parsed.
+
+== Installation ==
+
+This section describes how to install the plugin and get it working.
+
+e.g.
+
+1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly.
+1. Activate the plugin through the 'Plugins' screen in WordPress
+
+
+== Frequently Asked Questions ==
+
+= A question that someone might have =
+
+An answer to that question.
+
+= What about foo bar? =
+
+Answer to foo bar dilemma.
+
+== Screenshots ==
+
+1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
+the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
+directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
+(or jpg, jpeg, gif).
+2. This is the second screen shot
+
+== Changelog ==
+
+= {{version}} =
+* Release
+
+== Arbitrary section ==
+
+You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
+plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
+"installation." Arbitrary sections will be shown below the built-in sections outlined above.

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

@@ -0,0 +1,136 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Editor imports
+ */
+import {
+	RichText,
+	AlignmentToolbar,
+	BlockControls,
+} from '@wordpress/block-editor';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+registerBlockType( '{{namespace}}/{{slug}}', {
+	/**
+	 * This is the display title for your block, which can be translated with `i18n` functions.
+	 * The block inserter will show this name.
+	 */
+	title: __(
+		'{{title}}',
+		'{{textdomain}}'
+	),
+
+	{{#description}}
+	/**
+	 * This is a short description for your block, can be translated with `i18n` functions.
+	 * It will be shown in the Block Tab in the Settings Sidebar.
+	 */
+	description: __(
+		'{{description}}',
+		'{{textdomain}}'
+	),
+
+	{{/description}}
+	/**
+	 * Blocks are grouped into categories to help users browse and discover them.
+	 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+	 */
+	category: '{{category}}',
+
+	/**
+	 * Attributes used in functions
+	 */
+	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.
+	 * These can be any of WordPress’ Dashicons, or a custom svg element.
+	 */
+	icon: '{{dashicon}}',
+
+	{{/dashicon}}
+
+	/**
+	 * Edit function
+	 *
+	 * @param {obj} props
+	 */
+	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>
+		);
+	},
+
+	/**
+	 * Save function
+	 *
+	 * @param {obj} props
+	 */
+	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/style.css.mustache

@@ -0,0 +1,30 @@
+/**
+ * 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-{{namespace}}-{{slug}}  {
+	color: #fff;
+	background: orange;
+	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;
+}