@wordpress/create-block 3.6.0 → 4.0.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 4.0.0 (2022-08-24)
+
+### 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), [#43481](https://github.com/WordPress/gutenberg/pull/43481)).
+
 ## 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,81 +71,131 @@ program
 				title,
 				wpScripts,
 				wpEnv,
+				variant,
 			}
 		) => {
 			await checkSystemRequirements( engines );
 			try {
 				const pluginTemplate = await getPluginTemplate( templateName );
-				const defaultValues = getDefaultValues( pluginTemplate );
-				const optionsValues = pickBy(
-					{
+				const availableVariants = Object.keys(
+					pluginTemplate.variants
+				);
+				if ( variant && ! availableVariants.includes( variant ) ) {
+					if ( ! availableVariants.length ) {
+						throw new CLIError(
+							`"${ variant }" variant was selected. This template does not have any variants!`
+						);
+					}
+					throw new CLIError(
+						`"${ variant }" is not a valid variant for this template. Available variants are: ${ availableVariants.join(
+							', '
+						) }.`
+					);
+				}
+
+				const optionsValues = Object.fromEntries(
+					Object.entries( {
+						plugin,
 						category,
 						description,
 						namespace,
 						title,
 						wpScripts,
 						wpEnv,
-					},
-					( value ) => value !== undefined
+					} ).filter( ( [ , value ] ) => value !== undefined )
 				);
 
 				if ( slug ) {
+					const defaultValues = getDefaultValues(
+						pluginTemplate,
+						variant
+					);
 					const answers = {
 						...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:"
+					);
+
+					if ( ! variant && availableVariants.length > 1 ) {
+						const result = await inquirer.prompt( {
+							type: 'list',
+							name: 'variant',
+							message:
+								'The template variant to use for this block:',
+							choices: availableVariants,
+						} );
+						variant = result.variant;
+					}
+
+					const defaultValues = getDefaultValues(
+						pluginTemplate,
+						variant
 					);
 
 					const filterOptionsProvided = ( { name } ) =>
 						! Object.keys( optionsValues ).includes( name );
-					const blockPrompts = getPrompts( pluginTemplate, [
-						'slug',
-						'namespace',
-						'title',
-						'description',
-						'dashicon',
-						'category',
-					] ).filter( filterOptionsProvided );
+					const blockPrompts = getPrompts(
+						pluginTemplate,
+						[
+							'slug',
+							'namespace',
+							'title',
+							'description',
+							'dashicon',
+							'category',
+						],
+						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',
+										],
+										variant
+									).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,
+						variant,
 						...blockAnswers,
 						...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.';
 		}
 

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,7 +10,7 @@ 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' );
 
 module.exports = async (
@@ -18,6 +18,7 @@ module.exports = async (
 	{
 		$schema,
 		apiVersion,
+		plugin,
 		namespace,
 		slug,
 		title,
@@ -42,22 +43,39 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		variantVars,
 	}
 ) => {
 	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 +99,21 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		...variantVars,
 	};
 
-	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 +128,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 +171,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,11 @@ 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

@@ -75,7 +75,27 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 			'editor_script' => '{{namespace}}-{{slug}}-block-editor',
 			'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
 			'style'         => '{{namespace}}-{{slug}}-block',
+			{{#isDynamicVariant}}
+			'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( $attributes, $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.
 		 */
@@ -95,12 +95,13 @@
 				__( '{{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 +109,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

@@ -38,6 +38,33 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	{{#isStaticVariant}}
 	register_block_type( __DIR__ . '/build' );
+	{{/isStaticVariant}}
+	{{#isDynamicVariant}}
+	register_block_type(
+		__DIR__ . '/build',
+		array(
+			'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( $attributes, $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(
@@ -99,8 +111,9 @@ const externalTemplateExists = async ( templateName ) => {
 const configToTemplate = async ( {
 	pluginTemplatesPath,
 	blockTemplatesPath,
-	defaultValues = {},
 	assetsPath,
+	defaultValues = {},
+	variants = {},
 	...deprecated
 } ) => {
 	if ( defaultValues === null || typeof defaultValues !== 'object' ) {
@@ -127,9 +140,10 @@ const configToTemplate = async ( {
 		blockOutputTemplates: blockTemplatesPath
 			? await getOutputTemplates( blockTemplatesPath )
 			: {},
-		defaultValues,
-		outputAssets: assetsPath ? await getOutputAssets( assetsPath ) : {},
 		pluginOutputTemplates: await getOutputTemplates( pluginTemplatesPath ),
+		outputAssets: assetsPath ? await getOutputAssets( assetsPath ) : {},
+		defaultValues,
+		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,11 +231,13 @@ const getDefaultValues = ( pluginTemplate ) => {
 		editorStyle: 'file:./index.css',
 		style: 'file:./style-index.css',
 		...pluginTemplate.defaultValues,
+		...pluginTemplate.variants?.[ variant ],
+		variantVars: getVariantVars( pluginTemplate.variants, variant ),
 	};
 };
 
-const getPrompts = ( pluginTemplate, keys ) => {
-	const defaultValues = getDefaultValues( pluginTemplate );
+const getPrompts = ( pluginTemplate, keys, variant ) => {
+	const defaultValues = getDefaultValues( pluginTemplate, variant );
 	return keys.map( ( promptName ) => {
 		return {
 			...prompts[ promptName ],
@@ -230,6 +246,24 @@ const getPrompts = ( pluginTemplate, keys ) => {
 	} );
 };
 
+const getVariantVars = ( variants, variant ) => {
+	const variantVars = {};
+	const variantNames = Object.keys( variants );
+	if ( variantNames.length === 0 ) {
+		return variantVars;
+	}
+
+	const currentVariant = variant ?? variantNames[ 0 ];
+	for ( const variantName of variantNames ) {
+		const key =
+			variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 );
+		variantVars[ `is${ key }Variant` ] =
+			currentVariant === variantName ?? false;
+	}
+
+	return variantVars;
+};
+
 module.exports = {
 	getPluginTemplate,
 	getDefaultValues,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "3.6.0",
+	"version": "4.0.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"
@@ -33,12 +33,12 @@
 	"dependencies": {
 		"@wordpress/lazy-import": "^1.4.2",
 		"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": "171b87c7465b93e685e081c5f57f153507363c95"
 }