[Create-block] Add --variant flag to allow creation of different block type variants

packages/create-block-tutorial-template/block-templates/index.js.mustache

@@ -20,7 +20,9 @@ import './editor.scss';
  * Internal dependencies
  */
 import Edit from './edit';
+{{#isStaticVariant}}
 import save from './save';
+{{/isStaticVariant}}
 import metadata from './block.json';
 
 /**
@@ -41,8 +43,10 @@ registerBlockType( metadata.name, {
 	 * @see ./edit.js
 	 */
 	edit: Edit,
+	{{#isStaticVariant}}
 	/**
 	 * @see ./save.js
 	 */
 	save,
+	{{/isStaticVariant}}
 } );

packages/create-block-tutorial-template/block-templates/save.js.mustache

@@ -1,3 +1,4 @@
+{{#isStaticVariant}}
 /**
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
@@ -21,3 +22,4 @@ export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
 	return <div { ...blockProps }>{ attributes.message }</div>;
 }
+{{/isStaticVariant}}

packages/create-block-tutorial-template/block-templates/template.php.mustache

@@ -0,0 +1,5 @@
+{{#isDynamicVariant}}
+<p <?php echo get_block_wrapper_attributes(); ?>>
+	<?php echo esc_html( $atts['message']) ?>
+</p>
+{{/isDynamicVariant}}

packages/create-block-tutorial-template/index.js

@@ -22,6 +22,16 @@ module.exports = {
 			html: false,
 		},
 	},
+	variants: {
+		static: {},
+		dynamic: {
+			attributes: {
+				message: {
+					type: 'string',
+				},
+			},
+		},
+	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),
 	assetsPath: join( __dirname, 'assets' ),

packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache

@@ -37,7 +37,35 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
+{{#isStaticVariant}}
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	register_block_type( __DIR__ . '/build' );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+{{/isStaticVariant}}
+{{#isDynamicVariant}}
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	register_block_type(
+		__DIR__ . '/build',
+		array(
+			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
+		)
+	);
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+
+/**
+ * Render callback function
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string The rendered output.
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block) {
+	ob_start();
+	require plugin_dir_path( __FILE__ ) . 'build/template.php';
+	return ob_get_clean();
+}
+{{/isDynamicVariant}}

packages/create-block/CHANGELOG.md

@@ -9,6 +9,7 @@
 ### New Feature
 
 -   Add `--no-plugin` flag to allow scaffolding of a block in an existing plugin ([#41642](https://github.com/WordPress/gutenberg/pull/41642))
+-   Introduce the `--variant` flag to allow selection of a variant as defined in the template ([#41289](https://github.com/WordPress/gutenberg/pull/41289)).
 
 ## 3.6.0 (2022-07-13)
 

packages/create-block/README.md

@@ -50,6 +50,7 @@ Options:
 --no-wp-scripts              disable integration with `@wordpress/scripts` package
 --wp-env                     enable integration with `@wordpress/env` package
 -h, --help                   output usage information
+--variant                    choose a block variant as defined by the template
 ```
 
 More examples:
@@ -72,7 +73,13 @@ $ npx @wordpress/create-block --template my-template-package
 $ npx @wordpress/create-block --template ./path/to/template-directory
 ```
 
-4. Help – you need to use `npx` to output usage information.
+4. Generating a dynamic block based on the built-in template.
+
+```bash
+$ npx @wordpress/create-block --variant dynamic
+```
+
+5. Help – you need to use `npx` to output usage information.
 
 ```bash
 $ npx @wordpress/create-block --help

packages/create-block/lib/index.js

@@ -34,8 +34,8 @@ program
 	.arguments( '[slug]' )
 	.option(
 		'-t, --template <name>',
-		'project template type name; allowed values: "static", "es5", the name of an external npm package, or the path to a local directory',
-		'static'
+		'project template type name; allowed values: "standard", "es5", the name of an external npm package, or the path to a local directory',
+		'standard'
 	)
 	.option( '--namespace <value>', 'internal namespace for the block name' )
 	.option(
@@ -58,6 +58,7 @@ program
 	)
 	.option( '--wp-env', 'enable integration with `@wordpress/env` package' )
 	.option( '--no-plugin', 'scaffold only block files' )
+	.option( '--variant <variant>', 'the variant of the template to use' )
 	.action(
 		async (
 			slug,
@@ -70,12 +71,16 @@ program
 				title,
 				wpScripts,
 				wpEnv,
+				variant,
 			}
 		) => {
 			await checkSystemRequirements( engines );
 			try {
 				const pluginTemplate = await getPluginTemplate( templateName );
-				const defaultValues = getDefaultValues( pluginTemplate );
+				const defaultValues = getDefaultValues(
+					pluginTemplate,
+					variant
+				);
 				const optionsValues = Object.fromEntries(
 					Object.entries( {
 						plugin,
@@ -85,6 +90,7 @@ program
 						title,
 						wpScripts,
 						wpEnv,
+						variant,
 					} ).filter( ( [ , value ] ) => value !== undefined )
 				);
 
@@ -107,14 +113,30 @@ program
 
 					const filterOptionsProvided = ( { name } ) =>
 						! Object.keys( optionsValues ).includes( name );
-					const blockPrompts = getPrompts( pluginTemplate, [
-						'slug',
-						'namespace',
-						'title',
-						'description',
-						'dashicon',
-						'category',
-					] ).filter( filterOptionsProvided );
+
+					// Get the variant prompt first. This will help get the default values
+					const variantPrompt =
+						Object.keys( pluginTemplate.variants )?.length > 1
+							? getPrompts( pluginTemplate, [ 'variant' ] )
+							: false;
+
+					const variantSelection = variantPrompt
+						? await inquirer.prompt( variantPrompt )
+						: false;
+
+					const blockPrompts = getPrompts(
+						pluginTemplate,
+						[
+							'slug',
+							'namespace',
+							'title',
+							'description',
+							'dashicon',
+							'category',
+						],
+						variantSelection.variant
+					).filter( filterOptionsProvided );
+
 					const blockAnswers = await inquirer.prompt( blockPrompts );
 
 					const pluginAnswers = plugin
@@ -154,6 +176,7 @@ program
 						...defaultValues,
 						...optionsValues,
 						...blockAnswers,
+						...variantSelection,
 						...pluginAnswers,
 					} );
 				}

packages/create-block/lib/init-package-json.js

@@ -23,6 +23,7 @@ module.exports = async ( {
 	npmDependencies,
 	npmDevDependencies,
 	customScripts,
+	isDynamicVariant,
 } ) => {
 	const cwd = join( process.cwd(), slug );
 
@@ -42,13 +43,17 @@ module.exports = async ( {
 				main: wpScripts && 'build/index.js',
 				scripts: {
 					...( wpScripts && {
-						build: 'wp-scripts build',
+						build: isDynamicVariant
+							? 'wp-scripts build --webpack-copy-php'
+							: 'wp-scripts build',
 						format: 'wp-scripts format',
 						'lint:css': 'wp-scripts lint-style',
 						'lint:js': 'wp-scripts lint-js',
 						'packages-update': 'wp-scripts packages-update',
 						'plugin-zip': 'wp-scripts plugin-zip',
-						start: 'wp-scripts start',
+						start: isDynamicVariant
+							? 'wp-scripts start --webpack-copy-php'
+							: 'wp-scripts start',
 					} ),
 					...( wpEnv && { env: 'wp-env' } ),
 					...customScripts,

packages/create-block/lib/output.js

@@ -17,7 +17,11 @@ const writeOutputTemplate = async ( inputFile, outputFile, view ) => {
 		? join( view.slug, outputFile.replace( /\$slug/g, view.slug ) )
 		: outputFile;
 	await makeDir( dirname( outputFilePath ) );
-	writeFile( outputFilePath, render( inputFile, view ) );
+	// If the rendered template is empty, don't write it. This is how we can conditionally add template files.
+	const renderedFile = render( inputFile, view );
+	if ( renderedFile.trim().length ) {
+		writeFile( outputFilePath, renderedFile );
+	}
 };
 
 module.exports = {

packages/create-block/lib/prompts.js

@@ -134,8 +134,16 @@ const updateURI = {
 	message: 'A custom update URI for the plugin (optional):',
 };
 
+const variant = {
+	type: 'list',
+	name: 'variant',
+	message: 'The template variant to use for this block:',
+	choices: [],
+};
+
 module.exports = {
 	slug,
+	variant,
 	namespace,
 	title,
 	description,

packages/create-block/lib/scaffold.js

@@ -12,9 +12,10 @@ const initWPScripts = require( './init-wp-scripts' );
 const initWPEnv = require( './init-wp-env' );
 const { code, info, success, error } = require( './log' );
 const { writeOutputAsset, writeOutputTemplate } = require( './output' );
+const { getTemplateVariantVars } = require( './templates' );
 
 module.exports = async (
-	{ blockOutputTemplates, pluginOutputTemplates, outputAssets },
+	{ blockOutputTemplates, pluginOutputTemplates, outputAssets, variants },
 	{
 		$schema,
 		apiVersion,
@@ -43,11 +44,11 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		variant,
 	}
 ) => {
 	slug = slug.toLowerCase();
 	namespace = namespace.toLowerCase();
-
 	/**
 	 * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath).
 	 * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that
@@ -99,6 +100,8 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		...getTemplateVariantVars( variants, variant ),
+		...variants[ variant ],
 	};
 
 	if ( plugin ) {