@wordpress/create-block 3.6.0 → 4.0.1-next.d6164808d3.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 4.0.0-next.0 (2022-08-23)
+
+### Breaking Change
+
+-   Increase the minimum Node.js version to 14 and minimum npm version to 6.14.4 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
+
+### 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)
 
 ### Enhancement

package/README.md

@@ -20,7 +20,7 @@ $ cd todo-list
 $ npm start
 ```
 
-_(requires `node` version `12.0.0` or above, and `npm` version `6.9.0` or above)_
+_(requires `node` version `14.0.0` or above, and `npm` version `6.14.4` or above)_
 
 It creates a WordPress plugin that you need to [install manually](https://wordpress.org/support/article/managing-plugins/#manual-plugin-installation).
 
@@ -41,6 +41,7 @@ Options:
 ```bash
 -V, --version                output the version number
 -t, --template <name>        project template type name; allowed values: "static" (default), "es5", the name of an external npm package, or the path to a local directory
+--no-plugin                  scaffold block files only
 --namespace <value>          internal namespace for the block name
 --title <value>              display title for the block and the WordPress plugin
 --short-description <value>  short description for the block and the WordPress plugin
@@ -49,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:
@@ -71,12 +73,25 @@ $ 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
 ```
 
+5. No plugin mode – it is also possible to scaffold only block files into the current directory.
+
+
+```bash
+$ npx @wordpress/create-block --no-plugin
+```
+
 When you scaffold a block, you must provide at least a `slug` name, the `namespace` which usually corresponds to either the `theme` or `plugin` name. In most cases, we recommended pairing blocks with WordPress plugins rather than themes, because only using plugin ensures that all blocks still work when your theme changes.
 
 ## Available Commands

package/lib/check-system-requirements.js

@@ -4,7 +4,6 @@
 const inquirer = require( 'inquirer' );
 const checkSync = require( 'check-node-version' );
 const tools = require( 'check-node-version/tools' );
-const { forEach } = require( 'lodash' );
 const { promisify } = require( 'util' );
 
 /**
@@ -21,13 +20,15 @@ async function checkSystemRequirements( engines ) {
 		log.error( 'Minimum system requirements not met!' );
 		log.info( '' );
 
-		forEach( result.versions, ( { isSatisfied, wanted }, name ) => {
-			if ( ! isSatisfied ) {
-				log.error(
-					`Error: Wanted ${ name } version ${ wanted.raw } (${ wanted.range })`
-				);
+		Object.entries( result.versions ).forEach(
+			( [ name, { isSatisfied, wanted } ] ) => {
+				if ( ! isSatisfied ) {
+					log.error(
+						`Error: Wanted ${ name } version ${ wanted.raw } (${ wanted.range })`
+					);
+				}
 			}
-		} );
+		);
 
 		log.info( '' );
 		log.error( 'The program may not complete correctly if you continue.' );
@@ -46,13 +47,16 @@ async function checkSystemRequirements( engines ) {
 			log.error( 'Cancelled.' );
 			log.info( '' );
 
-			forEach( result.versions, ( { isSatisfied, wanted }, name ) => {
-				if ( ! isSatisfied ) {
-					log.info(
-						tools[ name ].getInstallInstructions( wanted.raw )
-					);
+			Object.entries( result.versions ).forEach(
+				( [ name, { isSatisfied, wanted } ] ) => {
+					if ( ! isSatisfied ) {
+						log.info(
+							tools[ name ].getInstallInstructions( wanted.raw )
+						);
+					}
 				}
-			} );
+			);
+
 			process.exit( 1 );
 		}
 	}

package/lib/index.js

@@ -2,8 +2,8 @@
  * External dependencies
  */
 const inquirer = require( 'inquirer' );
+const { capitalCase } = require( 'change-case' );
 const program = require( 'commander' );
-const { pickBy, startCase } = require( 'lodash' );
 
 /**
  * Internal dependencies
@@ -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(
@@ -57,10 +57,13 @@ program
 		'disable integration with `@wordpress/scripts` package'
 	)
 	.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,
 			{
+				plugin,
 				category,
 				namespace,
 				shortDescription: description,
@@ -68,22 +71,27 @@ program
 				title,
 				wpScripts,
 				wpEnv,
+				variant,
 			}
 		) => {
 			await checkSystemRequirements( engines );
 			try {
 				const pluginTemplate = await getPluginTemplate( templateName );
-				const defaultValues = getDefaultValues( pluginTemplate );
-				const optionsValues = pickBy(
-					{
+				const defaultValues = getDefaultValues(
+					pluginTemplate,
+					variant
+				);
+				const optionsValues = Object.fromEntries(
+					Object.entries( {
+						plugin,
 						category,
 						description,
 						namespace,
 						title,
 						wpScripts,
 						wpEnv,
-					},
-					( value ) => value !== undefined
+						variant,
+					} ).filter( ( [ , value ] ) => value !== undefined )
 				);
 
 				if ( slug ) {
@@ -91,59 +99,84 @@ program
 						...defaultValues,
 						slug,
 						// Transforms slug to title as a fallback.
-						title: startCase( slug ),
+						title: capitalCase( slug ),
 						...optionsValues,
 					};
 					await scaffold( pluginTemplate, answers );
 				} else {
 					log.info( '' );
 					log.info(
-						"Let's customize your WordPress plugin with blocks:"
+						plugin
+							? "Let's customize your WordPress plugin with blocks:"
+							: "Let's add a new block to your existing WordPress plugin:"
 					);
 
 					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 = await inquirer
-						.prompt( {
-							type: 'confirm',
-							name: 'configurePlugin',
-							message:
-								'Do you want to customize the WordPress plugin?',
-							default: false,
-						} )
-						.then( async ( { configurePlugin } ) => {
-							if ( ! configurePlugin ) {
-								return {};
-							}
+					const pluginAnswers = plugin
+						? await inquirer
+								.prompt( {
+									type: 'confirm',
+									name: 'configurePlugin',
+									message:
+										'Do you want to customize the WordPress plugin?',
+									default: false,
+								} )
+								.then( async ( { configurePlugin } ) => {
+									if ( ! configurePlugin ) {
+										return {};
+									}
+
+									const pluginPrompts = getPrompts(
+										pluginTemplate,
+										[
+											'pluginURI',
+											'version',
+											'author',
+											'license',
+											'licenseURI',
+											'domainPath',
+											'updateURI',
+										]
+									).filter( filterOptionsProvided );
+									const result = await inquirer.prompt(
+										pluginPrompts
+									);
+									return result;
+								} )
+						: {};
 
-							const pluginPrompts = getPrompts( pluginTemplate, [
-								'pluginURI',
-								'version',
-								'author',
-								'license',
-								'licenseURI',
-								'domainPath',
-								'updateURI',
-							] ).filter( filterOptionsProvided );
-							const result = await inquirer.prompt(
-								pluginPrompts
-							);
-							return result;
-						} );
 					await scaffold( pluginTemplate, {
 						...defaultValues,
 						...optionsValues,
 						...blockAnswers,
+						...variantSelection,
 						...pluginAnswers,
 					} );
 				}

package/lib/init-block.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const { omitBy } = require( 'lodash' );
 const { dirname, join } = require( 'path' );
 const makeDir = require( 'make-dir' );
 const { writeFile } = require( 'fs' ).promises;
@@ -15,6 +14,7 @@ const { writeOutputTemplate } = require( './output' );
 async function initBlockJSON( {
 	$schema,
 	apiVersion,
+	plugin,
 	slug,
 	namespace,
 	title,
@@ -33,13 +33,15 @@ async function initBlockJSON( {
 	info( '' );
 	info( 'Creating a "block.json" file.' );
 
-	const outputFile = join( process.cwd(), slug, folderName, 'block.json' );
+	const outputFile = plugin
+		? join( process.cwd(), slug, folderName, 'block.json' )
+		: join( process.cwd(), slug, 'block.json' );
 	await makeDir( dirname( outputFile ) );
 	await writeFile(
 		outputFile,
 		JSON.stringify(
-			omitBy(
-				{
+			Object.fromEntries(
+				Object.entries( {
 					$schema,
 					apiVersion,
 					name: namespace + '/' + slug,
@@ -54,8 +56,7 @@ async function initBlockJSON( {
 					editorScript,
 					editorStyle,
 					style,
-				},
-				( value ) => ! value
+				} ).filter( ( [ , value ] ) => !! value )
 			),
 			null,
 			'\t'
@@ -65,15 +66,17 @@ async function initBlockJSON( {
 
 module.exports = async function ( outputTemplates, view ) {
 	await Promise.all(
-		Object.keys( outputTemplates ).map(
-			async ( outputFile ) =>
-				await writeOutputTemplate(
-					outputTemplates[ outputFile ],
-					join( view.folderName, outputFile ),
-					view
-				)
-		)
-	);
+		Object.keys( outputTemplates ).map( async ( outputFile ) => {
+			const pathName = view.plugin
+				? join( view.folderName, outputFile )
+				: join( process.cwd(), view.slug, outputFile );
 
+			await writeOutputTemplate(
+				outputTemplates[ outputFile ],
+				pathName,
+				view
+			);
+		} )
+	);
 	await initBlockJSON( view );
 };

package/lib/init-package-json.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 const { command } = require( 'execa' );
-const { isEmpty, omitBy } = require( 'lodash' );
 const npmPackageArg = require( 'npm-package-arg' );
 const { join } = require( 'path' );
 const writePkg = require( 'write-pkg' );
@@ -24,6 +23,7 @@ module.exports = async ( {
 	npmDependencies,
 	npmDevDependencies,
 	customScripts,
+	isDynamicVariant,
 } ) => {
 	const cwd = join( process.cwd(), slug );
 
@@ -32,8 +32,8 @@ module.exports = async ( {
 
 	await writePkg(
 		cwd,
-		omitBy(
-			{
+		Object.fromEntries(
+			Object.entries( {
 				name: slug,
 				version,
 				description,
@@ -43,19 +43,22 @@ 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,
 				},
-			},
-			isEmpty
+			} ).filter( ( [ , value ] ) => !! value )
 		)
 	);
 

package/lib/output.js

@@ -13,13 +13,15 @@ const writeOutputAsset = async ( inputFile, outputFile, view ) => {
 };
 
 const writeOutputTemplate = async ( inputFile, outputFile, view ) => {
-	// Output files can have names that depend on the slug provided.
-	const outputFilePath = join(
-		view.slug,
-		outputFile.replace( /\$slug/g, view.slug )
-	);
+	const outputFilePath = view.plugin
+		? 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 = {

package/lib/prompts.js

@@ -1,14 +1,19 @@
 /**
- * External dependencies
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return {string} Capitalized string.
  */
-const { isEmpty, upperFirst } = require( 'lodash' );
+const upperFirst = ( [ firstLetter, ...rest ] ) =>
+	firstLetter.toUpperCase() + rest.join( '' );
 
 // Block metadata.
 const slug = {
 	type: 'input',
 	name: 'slug',
 	message:
-		'The block slug used for identification (also the plugin and output folder name):',
+		'The block slug used for identification (also the output folder name):',
 	validate( input ) {
 		if ( ! /^[a-z][a-z0-9\-]*$/.test( input ) ) {
 			return 'Invalid block slug specified. Block slug can contain only lowercase alphanumeric characters or dashes, and start with a letter.';
@@ -56,7 +61,7 @@ const dashicon = {
 	message:
 		'The dashicon to make it easier to identify your block (optional):',
 	validate( input ) {
-		if ( ! isEmpty( input ) && ! /^[a-z][a-z0-9\-]*$/.test( input ) ) {
+		if ( input.length && ! /^[a-z][a-z0-9\-]*$/.test( input ) ) {
 			return 'Invalid dashicon name specified. Visit https://developer.wordpress.org/resource/dashicons/ to discover available names.';
 		}
 
@@ -129,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,

package/lib/scaffold.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-const { snakeCase, camelCase, upperFirst } = require( 'lodash' );
+const { pascalCase, snakeCase } = require( 'change-case' );
 
 /**
  * Internal dependencies
@@ -10,14 +10,16 @@ const initBlock = require( './init-block' );
 const initPackageJSON = require( './init-package-json' );
 const initWPScripts = require( './init-wp-scripts' );
 const initWPEnv = require( './init-wp-env' );
-const { code, info, success } = require( './log' );
+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,
+		plugin,
 		namespace,
 		slug,
 		title,
@@ -42,22 +44,39 @@ 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
+	 * doesn't support it.
+	 */
+	if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) {
+		error(
+			'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.'
+		);
+		return;
+	}
 
 	info( '' );
-	info( `Creating a new WordPress plugin in the "${ slug }" directory.` );
+	info(
+		plugin
+			? `Creating a new WordPress plugin in the ${ slug } directory.`
+			: `Creating a new block in the ${ slug } directory.`
+	);
 
 	const view = {
 		$schema,
 		apiVersion,
+		plugin,
 		namespace,
 		namespaceSnakeCase: snakeCase( namespace ),
 		slug,
 		slugSnakeCase: snakeCase( slug ),
-		slugPascalCase: upperFirst( camelCase( slug ) ),
+		slugPascalCase: pascalCase( slug ),
 		title,
 		description,
 		dashicon,
@@ -81,18 +100,22 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		...getTemplateVariantVars( variants, variant ),
+		...variants[ variant ],
 	};
 
-	await Promise.all(
-		Object.keys( pluginOutputTemplates ).map(
-			async ( outputFile ) =>
-				await writeOutputTemplate(
-					pluginOutputTemplates[ outputFile ],
-					outputFile,
-					view
-				)
-		)
-	);
+	if ( plugin ) {
+		await Promise.all(
+			Object.keys( pluginOutputTemplates ).map(
+				async ( outputFile ) =>
+					await writeOutputTemplate(
+						pluginOutputTemplates[ outputFile ],
+						outputFile,
+						view
+					)
+			)
+		);
+	}
 
 	await Promise.all(
 		Object.keys( outputAssets ).map(
@@ -107,21 +130,26 @@ module.exports = async (
 
 	await initBlock( blockOutputTemplates, view );
 
-	await initPackageJSON( view );
-
-	if ( wpScripts ) {
-		await initWPScripts( view );
-	}
+	if ( plugin ) {
+		await initPackageJSON( view );
+		if ( wpScripts ) {
+			await initWPScripts( view );
+		}
 
-	if ( wpEnv ) {
-		await initWPEnv( view );
+		if ( wpEnv ) {
+			await initWPEnv( view );
+		}
 	}
 
 	info( '' );
+
 	success(
-		`Done: WordPress plugin "${ title }" bootstrapped in the "${ slug }" directory.`
+		plugin
+			? `Done: WordPress plugin ${ title } bootstrapped in the ${ slug } directory.`
+			: `Done: Block "${ title }" bootstrapped in the ${ slug }directory.`
 	);
-	if ( wpScripts ) {
+
+	if ( plugin && wpScripts ) {
 		info( '' );
 		info( 'You can run several commands inside:' );
 		info( '' );
@@ -145,18 +173,18 @@ module.exports = async (
 		info( '' );
 		code( '  $ npm run packages-update' );
 		info( '    Updates WordPress packages to the latest version.' );
+		info( '' );
+		info( 'To enter the directory type:' );
+		info( '' );
+		code( `  $ cd ${ slug }` );
 	}
-	info( '' );
-	info( 'To enter the directory type:' );
-	info( '' );
-	code( `  $ cd ${ slug }` );
-	if ( wpScripts ) {
+	if ( plugin && wpScripts ) {
 		info( '' );
 		info( 'You can start development with:' );
 		info( '' );
 		code( '  $ npm start' );
 	}
-	if ( wpEnv ) {
+	if ( plugin && wpEnv ) {
 		info( '' );
 		info( 'You can start WordPress with:' );
 		info( '' );

package/lib/templates/block/edit.js.mustache

@@ -1,7 +1,7 @@
 /**
  * Retrieves the translation of text.
  *
- * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
  */
 import { __ } from '@wordpress/i18n';
 
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
  *
- * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
@@ -25,7 +25,7 @@ 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.
  *
- * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
  *
  * @return {WPElement} Element to render.
  */

package/lib/templates/block/index.js.mustache

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

package/lib/templates/block/save.js.mustache

@@ -1,15 +1,9 @@
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
- */
-import { __ } from '@wordpress/i18n';
-
+{{#isStaticVariant}}
 /**
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
  *
- * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
@@ -18,17 +12,15 @@ import { useBlockProps } from '@wordpress/block-editor';
  * 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
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
  *
  * @return {WPElement} Element to render.
  */
 export default function save() {
 	return (
 		<p { ...useBlockProps.save() }>
-			{ __(
-				'{{title}} – hello from the saved content!',
-				'{{textdomain}}'
-			) }
+			{ '{{title}} – hello from the saved content!' }
 		</p>
 	);
 }
+{{/isStaticVariant}}

package/lib/templates/block/template.php.mustache

@@ -0,0 +1,5 @@
+{{#isDynamicVariant}}
+<p <?php echo get_block_wrapper_attributes(); ?>>
+ <?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+</p>
+{{/isDynamicVariant}}

package/lib/templates/es5/$slug.php.mustache

@@ -68,7 +68,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 		array(),
 		filemtime( "$dir/$style_css" )
 	);
-
+	{{^isDynamicVariant}}
 	register_block_type(
 		'{{namespace}}/{{slug}}',
 		array(
@@ -77,5 +77,33 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 			'style'         => '{{namespace}}-{{slug}}-block',
 		)
 	);
+	{{/isDynamicVariant}}
+	{{#isDynamicVariant}}
+	register_block_type(
+		'{{namespace}}/{{slug}}',
+		array(
+			'editor_script'   => '{{namespace}}-{{slug}}-block-editor',
+			'editor_style'    => '{{namespace}}-{{slug}}-block-editor',
+			'style'           => '{{namespace}}-{{slug}}-block',
+			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
+		)
+	);
+	{{/isDynamicVariant}}
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+{{#isDynamicVariant}}
+/**
+ * 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__ ) . '/template.php';
+	return ob_get_clean();
+}
+{{/isDynamicVariant}}

package/lib/templates/es5/index.js.mustache

@@ -16,14 +16,14 @@
 	/**
 	 * Retrieves the translation of text.
 	 *
-	 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 	 */
 	var __ = wp.i18n.__;
 
 	/**
 	 * This hook is used to mark the block wrapper element.
 	 *
-	 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 	 */
 	var useBlockProps = wp.blockEditor.useBlockProps;
 
@@ -84,7 +84,7 @@
 		 * 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
+		 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 		 *
 		 * @return {WPElement} Element to render.
 		 */
@@ -94,13 +94,12 @@
 				useBlockProps(),
 				__( '{{title}} – hello from the editor!', '{{textdomain}}' )
 			);
-		},
-
+		}{{#isStaticVariant}},
 		/**
 		 * 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
+		 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 		 *
 		 * @return {WPElement} Element to render.
 		 */
@@ -108,9 +107,10 @@
 			return el(
 				'p',
 				useBlockProps.save(),
-				__( '{{title}} – hello from the saved content!', '{{textdomain}}' )
+				'{{title}} – hello from the saved content!',
 			);
 		},
+		{{/isStaticVariant}}
 	} );
 }(
 	window.wp

package/lib/templates/es5/template.php.mustache

@@ -0,0 +1,5 @@
+{{#isDynamicVariant}}
+<p <?php echo get_block_wrapper_attributes(); ?>>
+ <?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+</p>
+{{/isDynamicVariant}}

package/lib/templates/plugin/$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}}

package/lib/templates.js

@@ -6,7 +6,6 @@ const glob = require( 'fast-glob' );
 const { resolve } = require( 'path' );
 const { existsSync } = require( 'fs' );
 const { mkdtemp, readFile } = require( 'fs' ).promises;
-const { fromPairs } = require( 'lodash' );
 const npmPackageArg = require( 'npm-package-arg' );
 const { tmpdir } = require( 'os' );
 const { join } = require( 'path' );
@@ -25,7 +24,7 @@ const predefinedPluginTemplates = {
 			slug: 'example-static-es5',
 			title: 'Example Static (ES5)',
 			description:
-				'Example static block scaffolded with Create Block tool – no build step required.',
+				'Example block scaffolded with Create Block tool – no build step required.',
 			dashicon: 'smiley',
 			wpScripts: false,
 			editorScript: 'file:./index.js',
@@ -33,18 +32,31 @@ const predefinedPluginTemplates = {
 			style: 'file:./style.css',
 		},
 		templatesPath: join( __dirname, 'templates', 'es5' ),
+		variants: {
+			static: {},
+			dynamic: {
+				slug: 'example-dynamic-es5',
+				title: 'Example Dynamic (ES5)',
+			},
+		},
 	},
-	static: {
+	standard: {
 		defaultValues: {
 			slug: 'example-static',
 			title: 'Example Static',
-			description:
-				'Example static block scaffolded with Create Block tool.',
+			description: 'Example block scaffolded with Create Block tool.',
 			dashicon: 'smiley',
 			supports: {
 				html: false,
 			},
 		},
+		variants: {
+			static: {},
+			dynamic: {
+				slug: 'example-dynamic',
+				title: 'Example Dynamic',
+			},
+		},
 	},
 };
 
@@ -53,7 +65,7 @@ const getOutputTemplates = async ( outputTemplatesPath ) => {
 		cwd: outputTemplatesPath,
 		dot: true,
 	} );
-	return fromPairs(
+	return Object.fromEntries(
 		await Promise.all(
 			outputTemplatesFiles.map( async ( outputTemplateFile ) => {
 				const outputFile = outputTemplateFile.replace(
@@ -75,7 +87,7 @@ const getOutputAssets = async ( outputAssetsPath ) => {
 		cwd: outputAssetsPath,
 		dot: true,
 	} );
-	return fromPairs(
+	return Object.fromEntries(
 		await Promise.all(
 			outputAssetFiles.map( async ( outputAssetFile ) => {
 				const outputAsset = await readFile(
@@ -101,6 +113,7 @@ const configToTemplate = async ( {
 	blockTemplatesPath,
 	defaultValues = {},
 	assetsPath,
+	variants,
 	...deprecated
 } ) => {
 	if ( defaultValues === null || typeof defaultValues !== 'object' ) {
@@ -130,6 +143,7 @@ const configToTemplate = async ( {
 		defaultValues,
 		outputAssets: assetsPath ? await getOutputAssets( assetsPath ) : {},
 		pluginOutputTemplates: await getOutputTemplates( pluginTemplatesPath ),
+		variants,
 	};
 };
 
@@ -198,7 +212,7 @@ const getPluginTemplate = async ( templateName ) => {
 	}
 };
 
-const getDefaultValues = ( pluginTemplate ) => {
+const getDefaultValues = ( pluginTemplate, variant ) => {
 	return {
 		$schema: 'https://schemas.wp.org/trunk/block.json',
 		apiVersion: 2,
@@ -217,12 +231,25 @@ const getDefaultValues = ( pluginTemplate ) => {
 		editorStyle: 'file:./index.css',
 		style: 'file:./style-index.css',
 		...pluginTemplate.defaultValues,
+		...pluginTemplate.variants[ variant ],
 	};
 };
 
-const getPrompts = ( pluginTemplate, keys ) => {
+const getPrompts = ( pluginTemplate, keys, variant ) => {
 	const defaultValues = getDefaultValues( pluginTemplate );
+	const variantData = pluginTemplate.variants[ variant ] ?? false;
 	return keys.map( ( promptName ) => {
+		if ( promptName === 'variant' ) {
+			prompts[ promptName ].choices = Object.keys(
+				pluginTemplate.variants
+			);
+		}
+		if ( variantData && variantData[ promptName ] ) {
+			return {
+				...prompts[ promptName ],
+				default: variantData[ promptName ],
+			};
+		}
 		return {
 			...prompts[ promptName ],
 			default: defaultValues[ promptName ],
@@ -230,8 +257,34 @@ const getPrompts = ( pluginTemplate, keys ) => {
 	} );
 };
 
+const getTemplateVariantVars = ( variants, variant ) => {
+	const variantVars = {};
+	if ( variants ) {
+		const variantNames = Object.keys( variants );
+		const chosenVariant = variant ?? variantNames[ 0 ]; // If no variant is passed, use the first in the array as the default
+
+		if ( variantNames.includes( chosenVariant ) ) {
+			for ( const variantName of variantNames ) {
+				const key =
+					variantName.charAt( 0 ).toUpperCase() +
+					variantName.slice( 1 );
+				variantVars[ `is${ key }Variant` ] =
+					chosenVariant === variantName ?? false;
+			}
+		} else {
+			throw new CLIError(
+				`"${ chosenVariant }" is not a valid variant for this template. Available variants are: ${ variantNames.join(
+					', '
+				) }`
+			);
+		}
+	}
+	return variantVars;
+};
+
 module.exports = {
 	getPluginTemplate,
 	getDefaultValues,
 	getPrompts,
+	getTemplateVariantVars,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "3.6.0",
+	"version": "4.0.1-next.d6164808d3.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12",
-		"npm": ">=6.9"
+		"node": ">=14",
+		"npm": ">=6.14.4"
 	},
 	"files": [
 		"lib"
@@ -31,14 +31,14 @@
 		"wp-create-block": "./index.js"
 	},
 	"dependencies": {
-		"@wordpress/lazy-import": "^1.4.2",
+		"@wordpress/lazy-import": "^1.4.3-next.d6164808d3.0",
 		"chalk": "^4.0.0",
+		"change-case": "^4.1.2",
 		"check-node-version": "^4.1.0",
 		"commander": "^9.2.0",
 		"execa": "^4.0.2",
 		"fast-glob": "^3.2.7",
 		"inquirer": "^7.1.0",
-		"lodash": "^4.17.21",
 		"make-dir": "^3.0.0",
 		"mustache": "^4.0.0",
 		"npm-package-arg": "^8.1.5",
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }