From 643885684ef4301530e3ca1e357c3cbeaa117413 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 24 Mar 2022 11:23:01 -0400 Subject: [PATCH 01/39] Add npmDevDependencies as a template variable. Update messaging to show what packages are being installed. --- .../create-block/lib/init-package-json.js | 55 +++++++++++++++---- packages/create-block/lib/scaffold.js | 2 + 2 files changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index 94608207fd9359..44fe5f9ed4b45e 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -22,6 +22,7 @@ module.exports = async ( { wpEnv, wpScripts, npmDependencies, + npmDevDependencies, customScripts, } ) => { const cwd = join( process.cwd(), slug ); @@ -58,23 +59,35 @@ module.exports = async ( { ) ); - if ( wpScripts && size( npmDependencies ) ) { + /** + * Helper to determine if we can install this package. + * + * @param {string} packageArg The package to install. + */ + function checkDependency( packageArg ) { + const { type } = npmPackageArg( packageArg ); + if ( + ! [ 'git', 'tag', 'version', 'range', 'remote' ].includes( type ) + ) { + throw new Error( + `Provided package type "${ type }" is not supported.` + ); + } + } + + if ( + wpScripts && + ( size( npmDependencies ) || size( npmDevDependencies ) ) + ) { info( '' ); info( 'Installing npm dependencies. It might take a couple of minutes...' ); for ( const packageArg of npmDependencies ) { try { - const { type } = npmPackageArg( packageArg ); - if ( - ! [ 'git', 'tag', 'version', 'range', 'remote' ].includes( - type - ) - ) { - throw new Error( - `Provided package type "${ type }" is not supported.` - ); - } + checkDependency( packageArg ); + info( '' ); + info( `Installing "${ packageArg }".` ); await command( `npm install ${ packageArg }`, { cwd, } ); @@ -84,5 +97,25 @@ module.exports = async ( { error( message ); } } + info( '' ); + info( + 'Installing npm devDependencies. It might take a couple of minutes...' + ); + for ( const packageArg of npmDevDependencies ) { + try { + checkDependency( packageArg ); + info( '' ); + info( `Installing "${ packageArg }".` ); + await command( `npm install ${ packageArg } --save-dev`, { + cwd, + } ); + } catch ( { message } ) { + info( '' ); + info( + `Skipping "${ packageArg }" npm dev dependency. Reason:` + ); + error( message ); + } + } } }; diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index b9de1bcd42246f..a13b742ae9a23a 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -36,6 +36,7 @@ module.exports = async ( wpScripts, wpEnv, npmDependencies, + npmDevDependencies, customScripts, folderName, editorScript, @@ -74,6 +75,7 @@ module.exports = async ( wpScripts, wpEnv, npmDependencies, + npmDevDependencies, customScripts, folderName, editorScript, From e8d6cc325071845a95e90ae0857979dbee4cf34f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 24 May 2022 15:43:34 -0400 Subject: [PATCH 02/39] Remove extra code block. --- .../create-block/lib/init-package-json.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index 468a160a3b41b1..834b42f3d53d19 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -121,25 +121,5 @@ module.exports = async ( { } } } - info( '' ); - info( - 'Installing npm devDependencies. It might take a couple of minutes...' - ); - for ( const packageArg of npmDevDependencies ) { - try { - checkDependency( packageArg ); - info( '' ); - info( `Installing "${ packageArg }".` ); - await command( `npm install ${ packageArg } --save-dev`, { - cwd, - } ); - } catch ( { message } ) { - info( '' ); - info( - `Skipping "${ packageArg }" npm dev dependency. Reason:` - ); - error( message ); - } - } } }; From 2b4e90ca24f1007bc8b88702733c9594d4b32715 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 24 May 2022 15:44:28 -0400 Subject: [PATCH 03/39] Add --is-dynamic flag and some conditional logic as a first pass at managing both block type options. --- packages/create-block/lib/index.js | 4 ++++ packages/create-block/lib/init-block.js | 11 +++++++++- packages/create-block/lib/scaffold.js | 27 +++++++++++++++++-------- 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index cacb10c012ec80..a421a89f07f3e7 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -57,6 +57,7 @@ program 'disable integration with `@wordpress/scripts` package' ) .option( '--wp-env', 'enable integration with `@wordpress/env` package' ) + .option( '--is-dynamic', 'makes the block dynamic' ) .action( async ( slug, @@ -68,6 +69,7 @@ program title, wpScripts, wpEnv, + isDynamic, } ) => { await checkSystemRequirements( engines ); @@ -82,6 +84,7 @@ program title, wpScripts, wpEnv, + isDynamic, }, ( value ) => value !== undefined ); @@ -106,6 +109,7 @@ program const blockPrompts = getPrompts( pluginTemplate, [ 'slug', 'namespace', + 'title', 'description', 'dashicon', diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index b02aaf142a8169..5c496e54a3827f 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -64,8 +64,17 @@ async function initBlockJSON( { } module.exports = async function ( outputTemplates, view ) { + // Filter the files based on whether this block is dynamic or not. + const templateList = view.isDynamic + ? Object.keys( outputTemplates ).filter( + ( item ) => item !== 'save.js' + ) + : Object.keys( outputTemplates ).filter( + ( item ) => item !== 'template.php' + ); + await Promise.all( - Object.keys( outputTemplates ).map( + templateList.map( async ( outputFile ) => await writeOutputTemplate( outputTemplates[ outputFile ], diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index a13b742ae9a23a..4d04521e652259 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -42,6 +42,7 @@ module.exports = async ( editorScript, editorStyle, style, + isDynamic, } ) => { slug = slug.toLowerCase(); @@ -81,17 +82,27 @@ module.exports = async ( editorScript, editorStyle, style, + isDynamic, }; + // Filter the files based on whether this block is dynamic or not. + const templateList = view.isDynamic + ? Object.keys( pluginOutputTemplates ).filter( + ( item ) => ! item.includes( 'static' ) + ) + : Object.keys( pluginOutputTemplates ).filter( + ( item ) => ! item.includes( 'dynamic' ) + ); + await Promise.all( - Object.keys( pluginOutputTemplates ).map( - async ( outputFile ) => - await writeOutputTemplate( - pluginOutputTemplates[ outputFile ], - outputFile, - view - ) - ) + templateList.map( async ( outputFile ) => { + const file = outputFile.replace( /(-static|-dynamic)/, '' ); + await writeOutputTemplate( + pluginOutputTemplates[ outputFile ], + file, + view + ); + } ) ); await Promise.all( From df813af4f53557ff44c8751e8ab1aa5341988cf9 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 24 May 2022 15:45:15 -0400 Subject: [PATCH 04/39] Update templates and tutorial packages to use new templates. --- .../block-templates/template.php.mustache | 3 + .../$slug.php-dynamic.mustache | 60 +++++++++++++++++++ ...php.mustache => $slug.php-static.mustache} | 0 .../lib/templates/block/index.js.mustache | 4 ++ .../lib/templates/block/template.php.mustache | 3 + .../plugin/$slug.php-dynamic.mustache | 59 ++++++++++++++++++ ...php.mustache => $slug.php-static.mustache} | 0 7 files changed, 129 insertions(+) create mode 100644 packages/create-block-tutorial-template/block-templates/template.php.mustache create mode 100644 packages/create-block-tutorial-template/plugin-templates/$slug.php-dynamic.mustache rename packages/create-block-tutorial-template/plugin-templates/{$slug.php.mustache => $slug.php-static.mustache} (100%) create mode 100644 packages/create-block/lib/templates/block/template.php.mustache create mode 100644 packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache rename packages/create-block/lib/templates/plugin/{$slug.php.mustache => $slug.php-static.mustache} (100%) diff --git a/packages/create-block-tutorial-template/block-templates/template.php.mustache b/packages/create-block-tutorial-template/block-templates/template.php.mustache new file mode 100644 index 00000000000000..e55362cf93fd5b --- /dev/null +++ b/packages/create-block-tutorial-template/block-templates/template.php.mustache @@ -0,0 +1,3 @@ +

> + +

diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php-dynamic.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php-dynamic.mustache new file mode 100644 index 00000000000000..4f05183523fbb3 --- /dev/null +++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php-dynamic.mustache @@ -0,0 +1,60 @@ + '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback', + ) + ); + +} +add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); + + +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-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php-static.mustache similarity index 100% rename from packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache rename to packages/create-block-tutorial-template/plugin-templates/$slug.php-static.mustache diff --git a/packages/create-block/lib/templates/block/index.js.mustache b/packages/create-block/lib/templates/block/index.js.mustache index 4a3ab40a54cd7a..4bbd5e049f9e10 100644 --- a/packages/create-block/lib/templates/block/index.js.mustache +++ b/packages/create-block/lib/templates/block/index.js.mustache @@ -18,7 +18,9 @@ import './style.scss'; * Internal dependencies */ import Edit from './edit'; +{{^isDynamic}} import save from './save'; +{{/isDynamic}} /** * Every block starts by registering a new block type definition. @@ -30,8 +32,10 @@ registerBlockType( '{{namespace}}/{{slug}}', { * @see ./edit.js */ edit: Edit, + {{^isDynamic}} /** * @see ./save.js */ save, + {{/isDynamic}} } ); diff --git a/packages/create-block/lib/templates/block/template.php.mustache b/packages/create-block/lib/templates/block/template.php.mustache new file mode 100644 index 00000000000000..e55362cf93fd5b --- /dev/null +++ b/packages/create-block/lib/templates/block/template.php.mustache @@ -0,0 +1,3 @@ +

> + +

diff --git a/packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache b/packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache new file mode 100644 index 00000000000000..857d90931be798 --- /dev/null +++ b/packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache @@ -0,0 +1,59 @@ + '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback', + ) + ); + +} +add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); + + +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/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php-static.mustache similarity index 100% rename from packages/create-block/lib/templates/plugin/$slug.php.mustache rename to packages/create-block/lib/templates/plugin/$slug.php-static.mustache From 7a2fd82556b1e491db8e713dc9b0c6f2d4447d85 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 8 Jun 2022 13:06:59 -0400 Subject: [PATCH 05/39] Revert code to check the slug of a file. --- packages/create-block/lib/init-block.js | 11 +---------- packages/create-block/lib/scaffold.js | 14 ++------------ 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js index 5c496e54a3827f..b02aaf142a8169 100644 --- a/packages/create-block/lib/init-block.js +++ b/packages/create-block/lib/init-block.js @@ -64,17 +64,8 @@ async function initBlockJSON( { } module.exports = async function ( outputTemplates, view ) { - // Filter the files based on whether this block is dynamic or not. - const templateList = view.isDynamic - ? Object.keys( outputTemplates ).filter( - ( item ) => item !== 'save.js' - ) - : Object.keys( outputTemplates ).filter( - ( item ) => item !== 'template.php' - ); - await Promise.all( - templateList.map( + Object.keys( outputTemplates ).map( async ( outputFile ) => await writeOutputTemplate( outputTemplates[ outputFile ], diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 4d04521e652259..0f1ce0adc5ef42 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -85,21 +85,11 @@ module.exports = async ( isDynamic, }; - // Filter the files based on whether this block is dynamic or not. - const templateList = view.isDynamic - ? Object.keys( pluginOutputTemplates ).filter( - ( item ) => ! item.includes( 'static' ) - ) - : Object.keys( pluginOutputTemplates ).filter( - ( item ) => ! item.includes( 'dynamic' ) - ); - await Promise.all( - templateList.map( async ( outputFile ) => { - const file = outputFile.replace( /(-static|-dynamic)/, '' ); + Object.keys( pluginOutputTemplates ).map( async ( outputFile ) => { await writeOutputTemplate( pluginOutputTemplates[ outputFile ], - file, + outputFile, view ); } ) From a3539493694026e73487a8c92126ed7c4ae2624f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 8 Jun 2022 13:08:18 -0400 Subject: [PATCH 06/39] Check for empty template files before writing them into the filesystem. --- packages/create-block/lib/output.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js index 9671a52bb20c35..fcb5dde657f3ee 100644 --- a/packages/create-block/lib/output.js +++ b/packages/create-block/lib/output.js @@ -19,7 +19,11 @@ const writeOutputTemplate = async ( inputFile, outputFile, view ) => { outputFile.replace( /\$slug/g, view.slug ) ); 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 ).trim(); + if ( renderedFile.length ) { + writeFile( outputFilePath, renderedFile ); + } }; module.exports = { From 4bae818719d7fba3096a4acae08353701c2ed49a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 8 Jun 2022 13:08:42 -0400 Subject: [PATCH 07/39] Remove files with block type in the name. --- .../plugin/$slug.php-dynamic.mustache | 59 ------------------- .../plugin/$slug.php-static.mustache | 43 -------------- 2 files changed, 102 deletions(-) delete mode 100644 packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache delete mode 100644 packages/create-block/lib/templates/plugin/$slug.php-static.mustache diff --git a/packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache b/packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache deleted file mode 100644 index 857d90931be798..00000000000000 --- a/packages/create-block/lib/templates/plugin/$slug.php-dynamic.mustache +++ /dev/null @@ -1,59 +0,0 @@ - '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback', - ) - ); - -} -add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); - - -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/lib/templates/plugin/$slug.php-static.mustache b/packages/create-block/lib/templates/plugin/$slug.php-static.mustache deleted file mode 100644 index 27da9860657881..00000000000000 --- a/packages/create-block/lib/templates/plugin/$slug.php-static.mustache +++ /dev/null @@ -1,43 +0,0 @@ - Date: Wed, 8 Jun 2022 13:10:05 -0400 Subject: [PATCH 08/39] Add the {{isDynamic}} placeholders to the templates bundled with the package to manage output based on the --is-dynamic flag. --- .../lib/templates/block/template.php.mustache | 2 + .../lib/templates/es5/$slug.php.mustache | 30 +++++++- .../lib/templates/es5/index.js.mustache | 4 +- .../lib/templates/es5/template.php.mustache | 5 ++ .../lib/templates/plugin/$slug.php.mustache | 71 +++++++++++++++++++ 5 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 packages/create-block/lib/templates/es5/template.php.mustache create mode 100644 packages/create-block/lib/templates/plugin/$slug.php.mustache diff --git a/packages/create-block/lib/templates/block/template.php.mustache b/packages/create-block/lib/templates/block/template.php.mustache index e55362cf93fd5b..761addb995908c 100644 --- a/packages/create-block/lib/templates/block/template.php.mustache +++ b/packages/create-block/lib/templates/block/template.php.mustache @@ -1,3 +1,5 @@ +{{#isDynamic}}

>

+{{/isDynamic}} diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache index c8bcde2818edd3..0977c2f38be52b 100644 --- a/packages/create-block/lib/templates/es5/$slug.php.mustache +++ b/packages/create-block/lib/templates/es5/$slug.php.mustache @@ -68,7 +68,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { array(), filemtime( "$dir/$style_css" ) ); - + {{^isDynamic}} register_block_type( '{{namespace}}/{{slug}}', array( @@ -77,5 +77,33 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { 'style' => '{{namespace}}-{{slug}}-block', ) ); + {{/isDynamic}} + {{#isDynamic}} + 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', + ) + ); + {{/isDynamic}} } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); +{{#isDynamic}} +/** + * 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(); +} +{{/isDynamic}} diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache index 10a6939465d0e2..b4b80a5400b913 100644 --- a/packages/create-block/lib/templates/es5/index.js.mustache +++ b/packages/create-block/lib/templates/es5/index.js.mustache @@ -94,8 +94,7 @@ useBlockProps(), __( '{{title}} – hello from the editor!', '{{textdomain}}' ) ); - }, - + }{{^isDynamic}}, /** * 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`. @@ -111,6 +110,7 @@ __( '{{title}} – hello from the saved content!', '{{textdomain}}' ) ); }, + {{/isDynamic}} } ); }( window.wp diff --git a/packages/create-block/lib/templates/es5/template.php.mustache b/packages/create-block/lib/templates/es5/template.php.mustache new file mode 100644 index 00000000000000..761addb995908c --- /dev/null +++ b/packages/create-block/lib/templates/es5/template.php.mustache @@ -0,0 +1,5 @@ +{{#isDynamic}} +

> + +

+{{/isDynamic}} diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache new file mode 100644 index 00000000000000..82a46d56761e9c --- /dev/null +++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache @@ -0,0 +1,71 @@ + '{{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(); +} +{{/isDynamic}} From 2a1b2bfc9d72efee4cf88b5999f8dfa2e9d9b0c3 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 8 Jun 2022 13:27:31 -0400 Subject: [PATCH 09/39] Add readme and changelog entries. --- packages/create-block/CHANGELOG.md | 2 ++ packages/create-block/README.md | 9 ++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 3e7684a704f4de..5d3d7a5426b18f 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- Introduce `--is-dynamic` flag to allow creation of dynamic blocks if the template supports it. ([#41289](https://github.com/WordPress/gutenberg/pull/41289)). + ## 3.3.0 (2022-06-01) ### Enhancement diff --git a/packages/create-block/README.md b/packages/create-block/README.md index b7769488a6d021..c968496ddf2f88 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -49,6 +49,7 @@ Options: --no-wp-scripts disable integration with `@wordpress/scripts` package --wp-env enable integration with `@wordpress/env` package -h, --help output usage information +--is-dynamic generates a dynamic block based on the template being used. The template must opt-in to this functionality. ``` More examples: @@ -71,7 +72,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 --is-dynamic +``` + +5. Help – you need to use `npx` to output usage information. ```bash $ npx @wordpress/create-block --help From 9ab2889054a0561f4b39ca597df03d2feea646ba Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 9 Jun 2022 12:49:44 -0400 Subject: [PATCH 10/39] Render the output files will whitespace maintained. --- packages/create-block/lib/output.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js index fcb5dde657f3ee..ed8f4d9ad718e9 100644 --- a/packages/create-block/lib/output.js +++ b/packages/create-block/lib/output.js @@ -22,7 +22,8 @@ const writeOutputTemplate = async ( inputFile, outputFile, 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 ).trim(); if ( renderedFile.length ) { - writeFile( outputFilePath, renderedFile ); + // We need to re-render so that the whitespace at the end of files are maintained + writeFile( outputFilePath, render( inputFile, view ) ); } }; From 898d8e8300cb72b8d08d9a51e707dec2d585605e Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 14 Jun 2022 11:50:22 -0400 Subject: [PATCH 11/39] Updating the create-block-tutorial-template to use the mustache conditionals. --- .../block-templates/template.php.mustache | 2 + .../$slug.php-static.mustache | 43 ------------------- ...hp-dynamic.mustache => $slug.php.mustache} | 25 ++++++++--- 3 files changed, 20 insertions(+), 50 deletions(-) delete mode 100644 packages/create-block-tutorial-template/plugin-templates/$slug.php-static.mustache rename packages/create-block-tutorial-template/plugin-templates/{$slug.php-dynamic.mustache => $slug.php.mustache} (74%) 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 e55362cf93fd5b..761addb995908c 100644 --- a/packages/create-block-tutorial-template/block-templates/template.php.mustache +++ b/packages/create-block-tutorial-template/block-templates/template.php.mustache @@ -1,3 +1,5 @@ +{{#isDynamic}}

>

+{{/isDynamic}} diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php-static.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php-static.mustache deleted file mode 100644 index 676f923e7ec09b..00000000000000 --- a/packages/create-block-tutorial-template/plugin-templates/$slug.php-static.mustache +++ /dev/null @@ -1,43 +0,0 @@ - '{{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(); } - - +{{/isDynamic}} From 430a9f0d6c40486b9e49b6762c037cf1088c63c5 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 14 Jun 2022 12:01:52 -0400 Subject: [PATCH 12/39] Add the --webpack-copy-php to the scripts based on the the --is-dynamic flag. --- packages/create-block/lib/init-package-json.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index 834b42f3d53d19..41091ea47b1f29 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -24,6 +24,7 @@ module.exports = async ( { npmDependencies, npmDevDependencies, customScripts, + isDynamic, } ) => { const cwd = join( process.cwd(), slug ); @@ -43,13 +44,17 @@ module.exports = async ( { main: wpScripts && 'build/index.js', scripts: { ...( wpScripts && { - build: 'wp-scripts build', + build: isDynamic + ? '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: isDynamic + ? 'wp-scripts start --webpack-copy-php' + : 'wp-scripts start', } ), ...( wpEnv && { env: 'wp-env' } ), ...customScripts, From 1e7a1d54885243dbb5699da19b5ef89405f5b62b Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 14 Jun 2022 13:28:48 -0400 Subject: [PATCH 13/39] Move the .trim call into the context of the if statement. Proof that @gziolo is a much better developer than I am. --- packages/create-block/lib/output.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js index ed8f4d9ad718e9..7e6926f76a0c0d 100644 --- a/packages/create-block/lib/output.js +++ b/packages/create-block/lib/output.js @@ -20,10 +20,9 @@ const writeOutputTemplate = async ( inputFile, outputFile, view ) => { ); await makeDir( dirname( outputFilePath ) ); // If the rendered template is empty, don't write it. This is how we can conditionally add template files. - const renderedFile = render( inputFile, view ).trim(); - if ( renderedFile.length ) { - // We need to re-render so that the whitespace at the end of files are maintained - writeFile( outputFilePath, render( inputFile, view ) ); + const renderedFile = render( inputFile, view ); + if ( renderedFile.trim().length ) { + writeFile( outputFilePath, renderedFile ); } }; From 969eac8fad01ebdeb327da21e6dcd06f53b6c6be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 15 Jun 2022 07:13:41 +0200 Subject: [PATCH 14/39] Update packages/create-block/CHANGELOG.md --- packages/create-block/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 5d3d7a5426b18f..98ddac2320840e 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,7 +2,9 @@ ## Unreleased -- Introduce `--is-dynamic` flag to allow creation of dynamic blocks if the template supports it. ([#41289](https://github.com/WordPress/gutenberg/pull/41289)). +### New Feature + +- Introduce `--is-dynamic` flag to allow creation of dynamic blocks if the template supports it ([#41289](https://github.com/WordPress/gutenberg/pull/41289)). ## 3.3.0 (2022-06-01) From b31ab374997515a7b6cd25019096fa80da7e8764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 15 Jun 2022 07:15:53 +0200 Subject: [PATCH 15/39] Update packages/create-block/lib/index.js --- packages/create-block/lib/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index a421a89f07f3e7..5b887452f7dcb5 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -109,7 +109,6 @@ program const blockPrompts = getPrompts( pluginTemplate, [ 'slug', 'namespace', - 'title', 'description', 'dashicon', From 5b079b5327a760befe45f59581675f1efad0a29a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 29 Jun 2022 12:13:19 -0400 Subject: [PATCH 16/39] Remove extra code block added in error. --- .../create-block/lib/init-package-json.js | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index c281cd2ac314bc..caaf3ef28b7233 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -121,25 +121,5 @@ module.exports = async ( { } } } - info( '' ); - info( - 'Installing npm devDependencies. It might take a couple of minutes...' - ); - for ( const packageArg of npmDevDependencies ) { - try { - checkDependency( packageArg ); - info( '' ); - info( `Installing "${ packageArg }".` ); - await command( `npm install ${ packageArg } --save-dev`, { - cwd, - } ); - } catch ( { message } ) { - info( '' ); - info( - `Skipping "${ packageArg }" npm dev dependency. Reason:` - ); - error( message ); - } - } } }; From ba0c060b2b297fee6818e894a4b0fba2bf0f890a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 12:46:45 -0400 Subject: [PATCH 17/39] Adding variants array to the template and generating template variables for each one. --- packages/create-block/lib/index.js | 6 +++--- packages/create-block/lib/scaffold.js | 8 ++++---- packages/create-block/lib/templates.js | 14 ++++++++++++++ 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 429f99e06f1d85..d1085e2c08d18c 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -59,7 +59,7 @@ program ) .option( '--wp-env', 'enable integration with `@wordpress/env` package' ) .option( '--no-plugin', 'scaffold only block files' ) - .option( '--is-dynamic', 'makes the block dynamic' ) + .option( '--variant ', 'the variant of the template to use' ) .action( async ( slug, @@ -72,7 +72,7 @@ program title, wpScripts, wpEnv, - isDynamic, + variant, } ) => { await checkSystemRequirements( engines ); @@ -88,7 +88,7 @@ program title, wpScripts, wpEnv, - isDynamic, + variant, }, ( value ) => value !== undefined ); diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 8a898838d048bf..0b7d703b26b0a5 100644 --- a/packages/create-block/lib/scaffold.js +++ b/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,12 +44,11 @@ module.exports = async ( editorScript, editorStyle, style, - isDynamic, + 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 @@ -100,7 +100,7 @@ module.exports = async ( editorScript, editorStyle, style, - isDynamic, + ...getTemplateVariantVars( variants, variant ), }; if ( plugin ) { diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 47e05292a18bff..15aebce6472f77 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -44,6 +44,7 @@ const predefinedPluginTemplates = { html: false, }, }, + variants: [ 'static', 'dynamic' ], }, }; @@ -100,6 +101,7 @@ const configToTemplate = async ( { blockTemplatesPath, defaultValues = {}, assetsPath, + variants, ...deprecated } ) => { if ( defaultValues === null || typeof defaultValues !== 'object' ) { @@ -129,6 +131,7 @@ const configToTemplate = async ( { defaultValues, outputAssets: assetsPath ? await getOutputAssets( assetsPath ) : {}, pluginOutputTemplates: await getOutputTemplates( pluginTemplatesPath ), + variants, }; }; @@ -229,8 +232,19 @@ const getPrompts = ( pluginTemplate, keys ) => { } ); }; +const getTemplateVariantVars = ( variants, variant ) => { + const variantTypes = {}; + for ( const variantName of variants ) { + const key = + variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); + variantTypes[ `is${ key }` ] = variant === variantName ?? false; + } + return variantTypes; +}; + module.exports = { getPluginTemplate, getDefaultValues, getPrompts, + getTemplateVariantVars, }; From d4388d71c895c1e27e436b8d1a8043f289d96cdf Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 12:47:13 -0400 Subject: [PATCH 18/39] Add isStatic check to save.js --- packages/create-block/lib/templates/block/save.js.mustache | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/create-block/lib/templates/block/save.js.mustache b/packages/create-block/lib/templates/block/save.js.mustache index eeb81e432055cf..1443810a6b46db 100644 --- a/packages/create-block/lib/templates/block/save.js.mustache +++ b/packages/create-block/lib/templates/block/save.js.mustache @@ -1,3 +1,4 @@ +{{#isStatic}} /** * React hook that is used to mark the block wrapper element. * It provides all the necessary props like the class name. @@ -22,3 +23,4 @@ export default function save() {

); } +{{/isStatic}} From 6cdfed1ef1f53cf60d46a328887bfefb010a1d0a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 12:50:01 -0400 Subject: [PATCH 19/39] Add logic to return empty object if no variants are defined in the template --- packages/create-block/lib/templates.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 15aebce6472f77..8d4b017e21eea8 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -234,10 +234,12 @@ const getPrompts = ( pluginTemplate, keys ) => { const getTemplateVariantVars = ( variants, variant ) => { const variantTypes = {}; - for ( const variantName of variants ) { - const key = - variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); - variantTypes[ `is${ key }` ] = variant === variantName ?? false; + if ( variants ) { + for ( const variantName of variants ) { + const key = + variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); + variantTypes[ `is${ key }` ] = variant === variantName ?? false; + } } return variantTypes; }; From 903b0c9ad7f4da35d4693d7b0644665a21d83c32 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 12:57:21 -0400 Subject: [PATCH 20/39] Update the template variable names to be is{variantName}Variant. --- packages/create-block/lib/templates.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 8d4b017e21eea8..5d331ae252f698 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -238,7 +238,8 @@ const getTemplateVariantVars = ( variants, variant ) => { for ( const variantName of variants ) { const key = variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); - variantTypes[ `is${ key }` ] = variant === variantName ?? false; + variantTypes[ `is${ key }Variant` ] = + variant === variantName ?? false; } } return variantTypes; From c841b2650984f40230de625c21c3681f7cc4afe3 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 12:58:54 -0400 Subject: [PATCH 21/39] Update templates to use new variable name convention and look for the variable name for each type rather than checking for the negation. --- .../create-block/lib/templates/block/index.js.mustache | 8 ++++---- .../create-block/lib/templates/block/save.js.mustache | 4 ++-- .../lib/templates/block/template.php.mustache | 4 ++-- packages/create-block/lib/templates/es5/index.js.mustache | 4 ++-- .../create-block/lib/templates/es5/template.php.mustache | 4 ++-- .../create-block/lib/templates/plugin/$slug.php.mustache | 4 ++-- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/create-block/lib/templates/block/index.js.mustache b/packages/create-block/lib/templates/block/index.js.mustache index e16b5136b0c1c9..7ce98bf84dff53 100644 --- a/packages/create-block/lib/templates/block/index.js.mustache +++ b/packages/create-block/lib/templates/block/index.js.mustache @@ -18,9 +18,9 @@ import './style.scss'; * Internal dependencies */ import Edit from './edit'; -{{^isDynamic}} +{{#isStaticVariant}} import save from './save'; -{{/isDynamic}} +{{/isStaticVariant}} import metadata from './block.json'; /** @@ -33,10 +33,10 @@ registerBlockType( metadata.name, { * @see ./edit.js */ edit: Edit, - {{^isDynamic}} + {{#isStaticVariant}} /** * @see ./save.js */ save, - {{/isDynamic}} + {{/isStaticVariant}} } ); diff --git a/packages/create-block/lib/templates/block/save.js.mustache b/packages/create-block/lib/templates/block/save.js.mustache index 1443810a6b46db..70452e60a6a4fa 100644 --- a/packages/create-block/lib/templates/block/save.js.mustache +++ b/packages/create-block/lib/templates/block/save.js.mustache @@ -1,4 +1,4 @@ -{{#isStatic}} +{{#isStaticVariant}} /** * React hook that is used to mark the block wrapper element. * It provides all the necessary props like the class name. @@ -23,4 +23,4 @@ export default function save() {

); } -{{/isStatic}} +{{/isStaticVariant}} diff --git a/packages/create-block/lib/templates/block/template.php.mustache b/packages/create-block/lib/templates/block/template.php.mustache index 761addb995908c..349a119de8e66d 100644 --- a/packages/create-block/lib/templates/block/template.php.mustache +++ b/packages/create-block/lib/templates/block/template.php.mustache @@ -1,5 +1,5 @@ -{{#isDynamic}} +{{#isDynamicVariant}}

>

-{{/isDynamic}} +{{/isDynamicVariant}} diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache index c3bbc145442244..a81ad9f625fe53 100644 --- a/packages/create-block/lib/templates/es5/index.js.mustache +++ b/packages/create-block/lib/templates/es5/index.js.mustache @@ -94,7 +94,7 @@ useBlockProps(), __( '{{title}} – hello from the editor!', '{{textdomain}}' ) ); - }{{^isDynamic}}, + }{{#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`. @@ -110,7 +110,7 @@ '{{title}} – hello from the saved content!', ); }, - {{/isDynamic}} + {{/isStaticVariant}} } ); }( window.wp diff --git a/packages/create-block/lib/templates/es5/template.php.mustache b/packages/create-block/lib/templates/es5/template.php.mustache index 761addb995908c..349a119de8e66d 100644 --- a/packages/create-block/lib/templates/es5/template.php.mustache +++ b/packages/create-block/lib/templates/es5/template.php.mustache @@ -1,5 +1,5 @@ -{{#isDynamic}} +{{#isDynamicVariant}}

>

-{{/isDynamic}} +{{/isDynamicVariant}} diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache index 82a46d56761e9c..21627b0c1ac31b 100644 --- a/packages/create-block/lib/templates/plugin/$slug.php.mustache +++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache @@ -37,12 +37,12 @@ * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ -{{^isDynamic}} +{{#isStaticVariant}} function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { register_block_type( __DIR__ . '/build' ); } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); -{{/isDynamic}} +{{/isStaticVariant}} {{#isDynamic}} function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { register_block_type( From 987d7f8e2b85cdc97b3f619b5159d3cfbe81fd8d Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 13:28:31 -0400 Subject: [PATCH 22/39] If no variant is select via CLI, use the first one in the array of defined variants as the default. --- packages/create-block/lib/templates.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 5d331ae252f698..88f13c8fa6b8e8 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -235,11 +235,12 @@ const getPrompts = ( pluginTemplate, keys ) => { const getTemplateVariantVars = ( variants, variant ) => { const variantTypes = {}; if ( variants ) { + const chosenVariant = variant ?? variants[ 0 ]; // If no variant is passed, use the first in the array as the default for ( const variantName of variants ) { const key = variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); variantTypes[ `is${ key }Variant` ] = - variant === variantName ?? false; + chosenVariant === variantName ?? false; } } return variantTypes; From 689041bb31a7f4df03dd7009d201d18d37fe284d Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 13:43:05 -0400 Subject: [PATCH 23/39] Check that the passed variant is a valid variant and exit if not. --- packages/create-block/lib/templates.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 88f13c8fa6b8e8..f388ad54bc9cbe 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -236,11 +236,21 @@ const getTemplateVariantVars = ( variants, variant ) => { const variantTypes = {}; if ( variants ) { const chosenVariant = variant ?? variants[ 0 ]; // If no variant is passed, use the first in the array as the default - for ( const variantName of variants ) { - const key = - variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); - variantTypes[ `is${ key }Variant` ] = - chosenVariant === variantName ?? false; + + if ( variants.includes( chosenVariant ) ) { + for ( const variantName of variants ) { + const key = + variantName.charAt( 0 ).toUpperCase() + + variantName.slice( 1 ); + variantTypes[ `is${ key }Variant` ] = + chosenVariant === variantName ?? false; + } + } else { + throw new CLIError( + `"${ chosenVariant }" is not a valid variant for this template. Available variants are: ${ variants.join( + ', ' + ) }` + ); } } return variantTypes; From 352869e0935afa19d0b4c4ccafed610bfcff09a2 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 13:48:01 -0400 Subject: [PATCH 24/39] Define a single variant for the create-block-tutorial-template. Remove references to the dynamic block version. --- .../block-templates/index.js.mustache | 4 +++ .../block-templates/save.js.mustache | 2 ++ .../block-templates/template.php.mustache | 5 ---- .../create-block-tutorial-template/index.js | 1 + .../plugin-templates/$slug.php.mustache | 30 ++----------------- 5 files changed, 9 insertions(+), 33 deletions(-) delete mode 100644 packages/create-block-tutorial-template/block-templates/template.php.mustache 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 05fc05d445eb9e..ba504dcf80f198 100644 --- a/packages/create-block-tutorial-template/block-templates/index.js.mustache +++ b/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}} } ); diff --git a/packages/create-block-tutorial-template/block-templates/save.js.mustache b/packages/create-block-tutorial-template/block-templates/save.js.mustache index 605c5165c35b0f..d390552490a579 100644 --- a/packages/create-block-tutorial-template/block-templates/save.js.mustache +++ b/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
{ attributes.message }
; } +{{/isStaticVariant}} diff --git a/packages/create-block-tutorial-template/block-templates/template.php.mustache b/packages/create-block-tutorial-template/block-templates/template.php.mustache deleted file mode 100644 index 761addb995908c..00000000000000 --- a/packages/create-block-tutorial-template/block-templates/template.php.mustache +++ /dev/null @@ -1,5 +0,0 @@ -{{#isDynamic}} -

> - -

-{{/isDynamic}} diff --git a/packages/create-block-tutorial-template/index.js b/packages/create-block-tutorial-template/index.js index 90f1f304ea7695..d485ff95325298 100644 --- a/packages/create-block-tutorial-template/index.js +++ b/packages/create-block-tutorial-template/index.js @@ -22,6 +22,7 @@ module.exports = { html: false, }, }, + variants: [ 'static' ], pluginTemplatesPath: join( __dirname, 'plugin-templates' ), blockTemplatesPath: join( __dirname, 'block-templates' ), assetsPath: join( __dirname, 'assets' ), 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 7aebf728d6e089..08ac460ce61f19 100644 --- a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache +++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache @@ -37,35 +37,9 @@ * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ -{{^isDynamic}} +{{#isStaticVariant}} function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { register_block_type( __DIR__ . '/build' ); } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); -{{/isDynamic}} -{{#isDynamic}} -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(); -} -{{/isDynamic}} +{{/isStaticVariant}} From 2db54575913c7ed9268c6b4697d049797c18de80 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 14:06:09 -0400 Subject: [PATCH 25/39] Add template selection to interactive mode. --- packages/create-block/lib/index.js | 1 + packages/create-block/lib/prompts.js | 8 ++++++++ packages/create-block/lib/templates.js | 3 +++ 3 files changed, 12 insertions(+) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index d1085e2c08d18c..9064ecfa7d1490 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -114,6 +114,7 @@ program ! Object.keys( optionsValues ).includes( name ); const blockPrompts = getPrompts( pluginTemplate, [ 'slug', + 'variant', 'namespace', 'title', 'description', diff --git a/packages/create-block/lib/prompts.js b/packages/create-block/lib/prompts.js index 9807f2a61c9e12..8e845c80a0b528 100644 --- a/packages/create-block/lib/prompts.js +++ b/packages/create-block/lib/prompts.js @@ -129,8 +129,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, diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index f388ad54bc9cbe..2f0066d792afac 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -225,6 +225,9 @@ const getDefaultValues = ( pluginTemplate ) => { const getPrompts = ( pluginTemplate, keys ) => { const defaultValues = getDefaultValues( pluginTemplate ); return keys.map( ( promptName ) => { + if ( promptName === 'variant' ) { + prompts[ promptName ].choices = pluginTemplate.variants; + } return { ...prompts[ promptName ], default: defaultValues[ promptName ], From 8c74ad2bb83ea5744fd1c1f0358bf65f345c13f1 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Aug 2022 14:38:22 -0400 Subject: [PATCH 26/39] Update changelog. --- packages/create-block/CHANGELOG.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 25d48179054e9f..ee717471fc1434 100644 --- a/packages/create-block/CHANGELOG.md +++ b/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) @@ -16,10 +17,6 @@ - Added prompt to continue when minimum system requirements not met ([#42151](https://github.com/WordPress/gutenberg/pull/42151)). -### New Feature - -- Introduce `--is-dynamic` flag to allow creation of dynamic blocks if the template supports it ([#41289](https://github.com/WordPress/gutenberg/pull/41289)). - ## 3.3.0 (2022-06-01) ### Enhancement From 7a3dbab6dbcb0a7d47e5a76b8db26c68d1b7045e Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 10:43:24 -0400 Subject: [PATCH 27/39] Update isDynamic to isDynamicVariant --- .../lib/templates/es5/$slug.php.mustache | 12 ++++++------ .../lib/templates/plugin/$slug.php.mustache | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache index 0977c2f38be52b..2a9135db105fa9 100644 --- a/packages/create-block/lib/templates/es5/$slug.php.mustache +++ b/packages/create-block/lib/templates/es5/$slug.php.mustache @@ -68,7 +68,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { array(), filemtime( "$dir/$style_css" ) ); - {{^isDynamic}} + {{^isDynamicVariant}} register_block_type( '{{namespace}}/{{slug}}', array( @@ -77,8 +77,8 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { 'style' => '{{namespace}}-{{slug}}-block', ) ); - {{/isDynamic}} - {{#isDynamic}} + {{/isDynamicVariant}} + {{#isDynamicVariant}} register_block_type( '{{namespace}}/{{slug}}', array( @@ -88,10 +88,10 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { 'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback', ) ); - {{/isDynamic}} + {{/isDynamicVariant}} } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); -{{#isDynamic}} +{{#isDynamicVariant}} /** * Render callback function * @@ -106,4 +106,4 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $conte require plugin_dir_path( __FILE__ ) . '/template.php'; return ob_get_clean(); } -{{/isDynamic}} +{{/isDynamicVariant}} diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache index 21627b0c1ac31b..89780f870bd804 100644 --- a/packages/create-block/lib/templates/plugin/$slug.php.mustache +++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache @@ -43,7 +43,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { } add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); {{/isStaticVariant}} -{{#isDynamic}} +{{#isDynamicVariant}} function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { register_block_type( __DIR__ . '/build', @@ -68,4 +68,4 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $conte require plugin_dir_path( __FILE__ ) . 'build/template.php'; return ob_get_clean(); } -{{/isDynamic}} +{{/isDynamicVariant}} From ca0b38b3ba5c265e3664c2e3ed7869c803a0d35a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 10:49:44 -0400 Subject: [PATCH 28/39] Replace variantTypes with variantVars --- packages/create-block/lib/templates.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 2f0066d792afac..adebd2368db939 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -236,7 +236,7 @@ const getPrompts = ( pluginTemplate, keys ) => { }; const getTemplateVariantVars = ( variants, variant ) => { - const variantTypes = {}; + const variantVars = {}; if ( variants ) { const chosenVariant = variant ?? variants[ 0 ]; // If no variant is passed, use the first in the array as the default @@ -245,7 +245,7 @@ const getTemplateVariantVars = ( variants, variant ) => { const key = variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); - variantTypes[ `is${ key }Variant` ] = + variantVars[ `is${ key }Variant` ] = chosenVariant === variantName ?? false; } } else { @@ -256,7 +256,7 @@ const getTemplateVariantVars = ( variants, variant ) => { ); } } - return variantTypes; + return variantVars; }; module.exports = { From 5349b5fbd8a21621df4d57be355d49ca8b4d27d2 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 10:52:00 -0400 Subject: [PATCH 29/39] Update isDynamic to isDynamicVariant... again. --- packages/create-block/lib/init-package-json.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js index e983a2ec5abe0f..06bb170394d01c 100644 --- a/packages/create-block/lib/init-package-json.js +++ b/packages/create-block/lib/init-package-json.js @@ -23,7 +23,7 @@ module.exports = async ( { npmDependencies, npmDevDependencies, customScripts, - isDynamic, + isDynamicVariant, } ) => { const cwd = join( process.cwd(), slug ); @@ -43,7 +43,7 @@ module.exports = async ( { main: wpScripts && 'build/index.js', scripts: { ...( wpScripts && { - build: isDynamic + build: isDynamicVariant ? 'wp-scripts build --webpack-copy-php' : 'wp-scripts build', format: 'wp-scripts format', @@ -51,7 +51,7 @@ module.exports = async ( { 'lint:js': 'wp-scripts lint-js', 'packages-update': 'wp-scripts packages-update', 'plugin-zip': 'wp-scripts plugin-zip', - start: isDynamic + start: isDynamicVariant ? 'wp-scripts start --webpack-copy-php' : 'wp-scripts start', } ), From fb27be19aa540f6201d684f52e5b6b5820287886 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 10:55:58 -0400 Subject: [PATCH 30/39] Update readme to use --variant flag. --- packages/create-block/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-block/README.md b/packages/create-block/README.md index 7c85369e7e11ff..d622131b620384 100644 --- a/packages/create-block/README.md +++ b/packages/create-block/README.md @@ -50,7 +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 ---is-dynamic generates a dynamic block based on the template being used. The template must opt-in to this functionality. +--variant choose a block variant as defined by the template ``` More examples: @@ -76,7 +76,7 @@ $ npx @wordpress/create-block --template ./path/to/template-directory 4. Generating a dynamic block based on the built-in template. ```bash -$ npx @wordpress/create-block --is-dynamic +$ npx @wordpress/create-block --variant dynamic ``` 5. Help – you need to use `npx` to output usage information. From 6aae5e63082efd9c61874aea92d51de2f5fa9cdf Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 11:10:18 -0400 Subject: [PATCH 31/39] Add logic to conditionally show the variant prompt only if there are more than one. --- packages/create-block/lib/index.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index adaa0bea02328b..81f4b3ffcb43c7 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -110,15 +110,24 @@ program const filterOptionsProvided = ( { name } ) => ! Object.keys( optionsValues ).includes( name ); - const blockPrompts = getPrompts( pluginTemplate, [ - 'slug', - 'variant', - 'namespace', - 'title', - 'description', - 'dashicon', - 'category', - ] ).filter( filterOptionsProvided ); + + const blockPrompts = getPrompts( + pluginTemplate, + [ + 'slug', + 'variant', + 'namespace', + 'title', + 'description', + 'dashicon', + 'category', + ].filter( ( prompt ) => { + if ( prompt === 'variant' ) { + return pluginTemplate.variants?.length > 1; + } + return true; + } ) + ).filter( filterOptionsProvided ); const blockAnswers = await inquirer.prompt( blockPrompts ); const pluginAnswers = plugin From d40643828491f08e60dcec64216e271a7ec86a4c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 11:14:16 -0400 Subject: [PATCH 32/39] Adds variants to the es5 block and removes "static" from various properties. --- packages/create-block/lib/templates.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index adebd2368db939..9133ad38df3dd2 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -21,10 +21,10 @@ const prompts = require( './prompts' ); const predefinedPluginTemplates = { es5: { defaultValues: { - slug: 'example-static-es5', - title: 'Example Static (ES5)', + slug: 'example-es5', + title: 'Example (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', @@ -32,13 +32,13 @@ const predefinedPluginTemplates = { style: 'file:./style.css', }, templatesPath: join( __dirname, 'templates', 'es5' ), + variants: [ 'static', 'dynamic' ], }, static: { defaultValues: { - slug: 'example-static', - title: 'Example Static', - description: - 'Example static block scaffolded with Create Block tool.', + slug: 'example-block', + title: 'Example Block', + description: 'Example block scaffolded with Create Block tool.', dashicon: 'smiley', supports: { html: false, From 4149c3589fed8801f4b4a9e0637a286ca45d5399 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 11:20:29 -0400 Subject: [PATCH 33/39] Change "static" template to "standard". --- packages/create-block/lib/index.js | 4 ++-- packages/create-block/lib/templates.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 81f4b3ffcb43c7..74bc3326012922 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -34,8 +34,8 @@ program .arguments( '[slug]' ) .option( '-t, --template ', - '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 ', 'internal namespace for the block name' ) .option( diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 9133ad38df3dd2..8330a7d93b7970 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -34,7 +34,7 @@ const predefinedPluginTemplates = { templatesPath: join( __dirname, 'templates', 'es5' ), variants: [ 'static', 'dynamic' ], }, - static: { + standard: { defaultValues: { slug: 'example-block', title: 'Example Block', From 4e304ad4b5781b16f080f16baa52cad83ec54bfd Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 12:18:39 -0400 Subject: [PATCH 34/39] Convert variants to an object where the property is the variant name and it's value is settings that will override the defaults. --- packages/create-block/lib/index.js | 13 +++++++-- packages/create-block/lib/scaffold.js | 1 + packages/create-block/lib/templates.js | 38 ++++++++++++++++++++------ 3 files changed, 41 insertions(+), 11 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 74bc3326012922..7199ebee60b1b9 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -77,7 +77,10 @@ program 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, @@ -114,8 +117,8 @@ program const blockPrompts = getPrompts( pluginTemplate, [ - 'slug', 'variant', + 'slug', 'namespace', 'title', 'description', @@ -123,7 +126,11 @@ program 'category', ].filter( ( prompt ) => { if ( prompt === 'variant' ) { - return pluginTemplate.variants?.length > 1; + const variantKeys = Object.keys( + pluginTemplate.variants + ); + + return variantKeys.length > 1; } return true; } ) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 0b7d703b26b0a5..2636db0a3d4647 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -101,6 +101,7 @@ module.exports = async ( editorStyle, style, ...getTemplateVariantVars( variants, variant ), + ...variants[ variant ], }; if ( plugin ) { diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 8330a7d93b7970..0f98e81f0e1dc9 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -32,7 +32,16 @@ const predefinedPluginTemplates = { style: 'file:./style.css', }, templatesPath: join( __dirname, 'templates', 'es5' ), - variants: [ 'static', 'dynamic' ], + variants: { + static: { + slug: 'example-static-es5', + title: 'Example Static Block (ES5)', + }, + dynamic: { + slug: 'example-dynamic-es5', + title: 'Example Dynamic Block (ES5)', + }, + }, }, standard: { defaultValues: { @@ -44,7 +53,16 @@ const predefinedPluginTemplates = { html: false, }, }, - variants: [ 'static', 'dynamic' ], + variants: { + static: { + slug: 'example-static-block', + title: 'Example Static Block', + }, + dynamic: { + slug: 'example-dynamic-block', + title: 'Example Dynamic Block', + }, + }, }, }; @@ -200,7 +218,7 @@ const getPluginTemplate = async ( templateName ) => { } }; -const getDefaultValues = ( pluginTemplate ) => { +const getDefaultValues = ( pluginTemplate, variant ) => { return { $schema: 'https://schemas.wp.org/trunk/block.json', apiVersion: 2, @@ -219,6 +237,7 @@ const getDefaultValues = ( pluginTemplate ) => { editorStyle: 'file:./index.css', style: 'file:./style-index.css', ...pluginTemplate.defaultValues, + ...pluginTemplate.variants[ variant ], }; }; @@ -226,7 +245,9 @@ const getPrompts = ( pluginTemplate, keys ) => { const defaultValues = getDefaultValues( pluginTemplate ); return keys.map( ( promptName ) => { if ( promptName === 'variant' ) { - prompts[ promptName ].choices = pluginTemplate.variants; + prompts[ promptName ].choices = Object.keys( + pluginTemplate.variants + ); } return { ...prompts[ promptName ], @@ -238,10 +259,11 @@ const getPrompts = ( pluginTemplate, keys ) => { const getTemplateVariantVars = ( variants, variant ) => { const variantVars = {}; if ( variants ) { - const chosenVariant = variant ?? variants[ 0 ]; // If no variant is passed, use the first in the array as the default + 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 ( variants.includes( chosenVariant ) ) { - for ( const variantName of variants ) { + if ( variantNames.includes( chosenVariant ) ) { + for ( const variantName of variantNames ) { const key = variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 ); @@ -250,7 +272,7 @@ const getTemplateVariantVars = ( variants, variant ) => { } } else { throw new CLIError( - `"${ chosenVariant }" is not a valid variant for this template. Available variants are: ${ variants.join( + `"${ chosenVariant }" is not a valid variant for this template. Available variants are: ${ variantNames.join( ', ' ) }` ); From 50bb648e5897be795535e4e56285e79672bfb0ce Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 18 Aug 2022 12:20:07 -0400 Subject: [PATCH 35/39] Define a dynamic variant for the create-block-tutorial and override the attribute settings. --- .../block-templates/template.php.mustache | 5 ++++ .../create-block-tutorial-template/index.js | 11 +++++++- .../plugin-templates/$slug.php.mustache | 26 +++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 packages/create-block-tutorial-template/block-templates/template.php.mustache diff --git a/packages/create-block-tutorial-template/block-templates/template.php.mustache b/packages/create-block-tutorial-template/block-templates/template.php.mustache new file mode 100644 index 00000000000000..38a471b67c0e2a --- /dev/null +++ b/packages/create-block-tutorial-template/block-templates/template.php.mustache @@ -0,0 +1,5 @@ +{{#isDynamicVariant}} +

> + +

+{{/isDynamicVariant}} diff --git a/packages/create-block-tutorial-template/index.js b/packages/create-block-tutorial-template/index.js index d485ff95325298..df13ae6100dc2a 100644 --- a/packages/create-block-tutorial-template/index.js +++ b/packages/create-block-tutorial-template/index.js @@ -22,7 +22,16 @@ module.exports = { html: false, }, }, - variants: [ 'static' ], + variants: { + static: {}, + dynamic: { + attributes: { + message: { + type: 'string', + }, + }, + }, + }, pluginTemplatesPath: join( __dirname, 'plugin-templates' ), blockTemplatesPath: join( __dirname, 'block-templates' ), assetsPath: join( __dirname, 'assets' ), 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 08ac460ce61f19..99249aed248903 100644 --- a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache +++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache @@ -43,3 +43,29 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { } 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}} From 07d061416ea2781b277346b2361a8f73fe2152bc Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 19 Aug 2022 17:02:23 -0400 Subject: [PATCH 36/39] Get the variant first and then retrieve the defaults based on that value. --- packages/create-block/lib/index.js | 25 ++++++++++++++----------- packages/create-block/lib/templates.js | 9 ++++++++- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js index 7199ebee60b1b9..5df49217ef2118 100644 --- a/packages/create-block/lib/index.js +++ b/packages/create-block/lib/index.js @@ -114,27 +114,29 @@ program const filterOptionsProvided = ( { name } ) => ! Object.keys( optionsValues ).includes( name ); + // 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, [ - 'variant', 'slug', 'namespace', 'title', 'description', 'dashicon', 'category', - ].filter( ( prompt ) => { - if ( prompt === 'variant' ) { - const variantKeys = Object.keys( - pluginTemplate.variants - ); - - return variantKeys.length > 1; - } - return true; - } ) + ], + variantSelection.variant ).filter( filterOptionsProvided ); + const blockAnswers = await inquirer.prompt( blockPrompts ); const pluginAnswers = plugin @@ -174,6 +176,7 @@ program ...defaultValues, ...optionsValues, ...blockAnswers, + ...variantSelection, ...pluginAnswers, } ); } diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 0f98e81f0e1dc9..1447759466a75e 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -241,14 +241,21 @@ const getDefaultValues = ( pluginTemplate, 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 ], From 1c0b85c67e81b0e2750e2fec207734ffb0a2b7fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Mon, 22 Aug 2022 09:43:17 +0200 Subject: [PATCH 37/39] Update templates.js --- packages/create-block/lib/templates.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 1447759466a75e..65fb0ac1ede03d 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -21,8 +21,8 @@ const prompts = require( './prompts' ); const predefinedPluginTemplates = { es5: { defaultValues: { - slug: 'example-es5', - title: 'Example (ES5)', + slug: 'example-static-es5', + title: 'Example Static Block (ES5)', description: 'Example block scaffolded with Create Block tool – no build step required.', dashicon: 'smiley', @@ -33,10 +33,7 @@ const predefinedPluginTemplates = { }, templatesPath: join( __dirname, 'templates', 'es5' ), variants: { - static: { - slug: 'example-static-es5', - title: 'Example Static Block (ES5)', - }, + static: {}, dynamic: { slug: 'example-dynamic-es5', title: 'Example Dynamic Block (ES5)', @@ -45,8 +42,8 @@ const predefinedPluginTemplates = { }, standard: { defaultValues: { - slug: 'example-block', - title: 'Example Block', + slug: 'example-static-block', + title: 'Example Static Block', description: 'Example block scaffolded with Create Block tool.', dashicon: 'smiley', supports: { @@ -54,10 +51,7 @@ const predefinedPluginTemplates = { }, }, variants: { - static: { - slug: 'example-static-block', - title: 'Example Static Block', - }, + static: {}, dynamic: { slug: 'example-dynamic-block', title: 'Example Dynamic Block', From e700c5520d2d183c2ef3e67db914e9a5e951b2c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Mon, 22 Aug 2022 09:48:29 +0200 Subject: [PATCH 38/39] Update templates.js --- packages/create-block/lib/templates.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 65fb0ac1ede03d..41933286df71ac 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -22,7 +22,7 @@ const predefinedPluginTemplates = { es5: { defaultValues: { slug: 'example-static-es5', - title: 'Example Static Block (ES5)', + title: 'Example Static (ES5)', description: 'Example block scaffolded with Create Block tool – no build step required.', dashicon: 'smiley', @@ -36,14 +36,14 @@ const predefinedPluginTemplates = { static: {}, dynamic: { slug: 'example-dynamic-es5', - title: 'Example Dynamic Block (ES5)', + title: 'Example Dynamic (ES5)', }, }, }, standard: { defaultValues: { - slug: 'example-static-block', - title: 'Example Static Block', + slug: 'example-static', + title: 'Example Static', description: 'Example block scaffolded with Create Block tool.', dashicon: 'smiley', supports: { @@ -53,8 +53,8 @@ const predefinedPluginTemplates = { variants: { static: {}, dynamic: { - slug: 'example-dynamic-block', - title: 'Example Dynamic Block', + slug: 'example-dynamic', + title: 'Example Dynamic', }, }, }, From 11a27c08b2095b876156ed5bf2da124bf788747f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Mon, 22 Aug 2022 09:54:12 +0200 Subject: [PATCH 39/39] Update packages/create-block/lib/prompts.js --- packages/create-block/lib/prompts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block/lib/prompts.js b/packages/create-block/lib/prompts.js index 04a2e390031e2c..9a6b9b1449537a 100644 --- a/packages/create-block/lib/prompts.js +++ b/packages/create-block/lib/prompts.js @@ -137,7 +137,7 @@ const updateURI = { const variant = { type: 'list', name: 'variant', - message: 'The template variant to use for this block.', + message: 'The template variant to use for this block:', choices: [], };