From 6b393f8acc329828f991877ab46769c98420c040 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Tue, 23 Aug 2022 11:38:02 +0200 Subject: [PATCH] Create Block: Refactor handling for template variants (#43481) --- .../CHANGELOG.md | 4 ++ .../block-templates/index.js.mustache | 1 + .../block-templates/template.php.mustache | 2 +- .../plugin-templates/$slug.php.mustache | 15 +++-- packages/create-block/CHANGELOG.md | 2 +- packages/create-block/lib/index.js | 58 +++++++++++++------ packages/create-block/lib/prompts.js | 8 --- packages/create-block/lib/scaffold.js | 8 +-- packages/create-block/lib/templates.js | 57 ++++++------------ .../lib/templates/block/index.js.mustache | 1 + .../lib/templates/es5/$slug.php.mustache | 20 ++----- .../lib/templates/es5/index.js.mustache | 4 +- .../lib/templates/plugin/$slug.php.mustache | 15 +++-- 13 files changed, 92 insertions(+), 103 deletions(-) diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md index ccfcc5b877d66..43c02cc221ca0 100644 --- a/packages/create-block-tutorial-template/CHANGELOG.md +++ b/packages/create-block-tutorial-template/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancement + +- Add support to the `dynamic` variant ([#41289](https://github.com/WordPress/gutenberg/pull/41289), [#43481](https://github.com/WordPress/gutenberg/pull/43481)). + ## 2.3.0 (2022-06-01) ### Enhancement diff --git a/packages/create-block-tutorial-template/block-templates/index.js.mustache b/packages/create-block-tutorial-template/block-templates/index.js.mustache index ba504dcf80f19..fa35fbf272922 100644 --- a/packages/create-block-tutorial-template/block-templates/index.js.mustache +++ b/packages/create-block-tutorial-template/block-templates/index.js.mustache @@ -44,6 +44,7 @@ registerBlockType( metadata.name, { */ edit: Edit, {{#isStaticVariant}} + /** * @see ./save.js */ diff --git a/packages/create-block-tutorial-template/block-templates/template.php.mustache b/packages/create-block-tutorial-template/block-templates/template.php.mustache index 38a471b67c0e2..bd08be1004a07 100644 --- a/packages/create-block-tutorial-template/block-templates/template.php.mustache +++ b/packages/create-block-tutorial-template/block-templates/template.php.mustache @@ -1,5 +1,5 @@ {{#isDynamicVariant}}

> - +

{{/isDynamicVariant}} diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache index 99249aed24890..0211437450c15 100644 --- a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache +++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache @@ -37,25 +37,24 @@ * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ -{{#isStaticVariant}} function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { + {{#isStaticVariant}} register_block_type( __DIR__ . '/build' ); -} -add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); -{{/isStaticVariant}} -{{#isDynamicVariant}} -function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { + {{/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 + * Render callback function. * * @param array $attributes The block attributes. * @param string $content The block content. @@ -63,7 +62,7 @@ add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); * * @return string The rendered output. */ -function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block) { +function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block ) { ob_start(); require plugin_dir_path( __FILE__ ) . 'build/template.php'; return ob_get_clean(); diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index ee717471fc143..ff359861b107d 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -9,7 +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)). +- 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) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 5df49217ef211..785e593a379fe 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -77,10 +77,22 @@ program await checkSystemRequirements( engines ); try { const pluginTemplate = await getPluginTemplate( templateName ); - const defaultValues = getDefaultValues( - pluginTemplate, - variant + 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, @@ -90,11 +102,14 @@ program title, wpScripts, wpEnv, - variant, } ).filter( ( [ , value ] ) => value !== undefined ) ); if ( slug ) { + const defaultValues = getDefaultValues( + pluginTemplate, + variant + ); const answers = { ...defaultValues, slug, @@ -111,19 +126,24 @@ program : "Let's add a new block to your existing WordPress plugin:" ); - const filterOptionsProvided = ( { name } ) => - ! Object.keys( optionsValues ).includes( name ); + 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; + } - // 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 defaultValues = getDefaultValues( + pluginTemplate, + variant + ); + const filterOptionsProvided = ( { name } ) => + ! Object.keys( optionsValues ).includes( name ); const blockPrompts = getPrompts( pluginTemplate, [ @@ -134,9 +154,8 @@ program 'dashicon', 'category', ], - variantSelection.variant + variant ).filter( filterOptionsProvided ); - const blockAnswers = await inquirer.prompt( blockPrompts ); const pluginAnswers = plugin @@ -163,7 +182,8 @@ program 'licenseURI', 'domainPath', 'updateURI', - ] + ], + variant ).filter( filterOptionsProvided ); const result = await inquirer.prompt( pluginPrompts @@ -175,8 +195,8 @@ program await scaffold( pluginTemplate, { ...defaultValues, ...optionsValues, + variant, ...blockAnswers, - ...variantSelection, ...pluginAnswers, } ); } diff --git a/packages/create-block/lib/prompts.js b/packages/create-block/lib/prompts.js index 9a6b9b1449537..12da9f892b80e 100644 --- a/packages/create-block/lib/prompts.js +++ b/packages/create-block/lib/prompts.js @@ -134,16 +134,8 @@ 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, diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 2636db0a3d464..9e18dcc3e3d2f 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -12,10 +12,9 @@ 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, variants }, + { blockOutputTemplates, pluginOutputTemplates, outputAssets }, { $schema, apiVersion, @@ -44,7 +43,7 @@ module.exports = async ( editorScript, editorStyle, style, - variant, + variantVars, } ) => { slug = slug.toLowerCase(); @@ -100,8 +99,7 @@ module.exports = async ( editorScript, editorStyle, style, - ...getTemplateVariantVars( variants, variant ), - ...variants[ variant ], + ...variantVars, }; if ( plugin ) { diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 41933286df71a..eb0e5e52631c7 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -111,9 +111,9 @@ const externalTemplateExists = async ( templateName ) => { const configToTemplate = async ( { pluginTemplatesPath, blockTemplatesPath, - defaultValues = {}, assetsPath, - variants, + defaultValues = {}, + variants = {}, ...deprecated } ) => { if ( defaultValues === null || typeof defaultValues !== 'object' ) { @@ -140,9 +140,9 @@ 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, }; }; @@ -231,25 +231,14 @@ const getDefaultValues = ( pluginTemplate, variant ) => { editorStyle: 'file:./index.css', style: 'file:./style-index.css', ...pluginTemplate.defaultValues, - ...pluginTemplate.variants[ variant ], + ...pluginTemplate.variants?.[ variant ], + variantVars: getVariantVars( pluginTemplate.variants, variant ), }; }; const getPrompts = ( pluginTemplate, keys, variant ) => { - const defaultValues = getDefaultValues( pluginTemplate ); - const variantData = pluginTemplate.variants[ variant ] ?? false; + const defaultValues = getDefaultValues( pluginTemplate, variant ); 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 ], @@ -257,28 +246,21 @@ const getPrompts = ( pluginTemplate, keys, variant ) => { } ); }; -const getTemplateVariantVars = ( variants, variant ) => { +const getVariantVars = ( 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 + const variantNames = Object.keys( variants ); + if ( variantNames.length === 0 ) { + return variantVars; + } - 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( - ', ' - ) }` - ); - } + 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; }; @@ -286,5 +268,4 @@ module.exports = { getPluginTemplate, getDefaultValues, getPrompts, - getTemplateVariantVars, }; diff --git a/packages/create-block/lib/templates/block/index.js.mustache b/packages/create-block/lib/templates/block/index.js.mustache index 7ce98bf84dff5..cbf5f7f7864fb 100644 --- a/packages/create-block/lib/templates/block/index.js.mustache +++ b/packages/create-block/lib/templates/block/index.js.mustache @@ -34,6 +34,7 @@ registerBlockType( metadata.name, { */ edit: Edit, {{#isStaticVariant}} + /** * @see ./save.js */ diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache index 2a9135db105fa..d35db3dea0da4 100644 --- a/packages/create-block/lib/templates/es5/$slug.php.mustache +++ b/packages/create-block/lib/templates/es5/$slug.php.mustache @@ -68,32 +68,24 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { array(), filemtime( "$dir/$style_css" ) ); - {{^isDynamicVariant}} + register_block_type( '{{namespace}}/{{slug}}', array( 'editor_script' => '{{namespace}}-{{slug}}-block-editor', 'editor_style' => '{{namespace}}-{{slug}}-block-editor', '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', + {{#isDynamicVariant}} 'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback', + {{/isDynamicVariant}} ) ); - {{/isDynamicVariant}} } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); {{#isDynamicVariant}} + /** - * Render callback function + * Render callback function. * * @param array $attributes The block attributes. * @param string $content The block content. @@ -101,7 +93,7 @@ add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); * * @return string The rendered output. */ -function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block) { +function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $attributes, $content, $block ) { ob_start(); require plugin_dir_path( __FILE__ ) . '/template.php'; return ob_get_clean(); diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache index a81ad9f625fe5..333bd5790b20b 100644 --- a/packages/create-block/lib/templates/es5/index.js.mustache +++ b/packages/create-block/lib/templates/es5/index.js.mustache @@ -94,7 +94,9 @@ useBlockProps(), __( '{{title}} – hello from the editor!', '{{textdomain}}' ) ); - }{{#isStaticVariant}}, + }, + {{#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`. diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache index 89780f870bd80..f10318db7ee55 100644 --- a/packages/create-block/lib/templates/plugin/$slug.php.mustache +++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache @@ -37,25 +37,24 @@ * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ -{{#isStaticVariant}} function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { + {{#isStaticVariant}} register_block_type( __DIR__ . '/build' ); -} -add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); -{{/isStaticVariant}} -{{#isDynamicVariant}} -function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { + {{/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 + * Render callback function. * * @param array $attributes The block attributes. * @param string $content The block content. @@ -63,7 +62,7 @@ add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); * * @return string The rendered output. */ -function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block) { +function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $attributes, $content, $block ) { ob_start(); require plugin_dir_path( __FILE__ ) . 'build/template.php'; return ob_get_clean();