From 60e4c65ddcf33d011b8c3abd59ffea039758ea43 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 17 Oct 2023 12:39:46 -0400 Subject: [PATCH 1/4] Introduce the transformer property. Co-authored-by: JuanMa --- packages/create-block/lib/scaffold.js | 62 +++++++++++++++----------- packages/create-block/lib/templates.js | 1 + 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 568ec2f007457..20c3938069fb4 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -49,52 +49,28 @@ module.exports = async ( customPackageJSON, customBlockJSON, example, + transformer, } ) => { - slug = slug.toLowerCase(); - namespace = namespace.toLowerCase(); - /** - * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath). - * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that - * doesn't support it. - */ - if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) { - error( - 'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.' - ); - return; - } - - info( '' ); - info( - plugin - ? `Creating a new WordPress plugin in the ${ slug } directory.` - : `Creating a new block in the ${ slug } directory.` - ); - - const view = { + const transformedData = transformer( { $schema, apiVersion, plugin, namespace, - namespaceSnakeCase: snakeCase( namespace ), slug, - slugSnakeCase: snakeCase( slug ), - slugPascalCase: pascalCase( slug ), title, description, dashicon, category, attributes, supports, - version, author, pluginURI, license, licenseURI, - textdomain: slug, domainPath, updateURI, + version, wpScripts, wpEnv, npmDependencies, @@ -106,9 +82,41 @@ module.exports = async ( style, render, viewScript, + variantVars, customPackageJSON, customBlockJSON, example, + } ); + + const { slug: transformedSlug, namespace: transformedNamespace } = + transformedData; + slug = transformedSlug.toLowerCase(); + namespace = transformedNamespace.toLowerCase(); + /** + * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath). + * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that + * doesn't support it. + */ + if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) { + error( + 'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.' + ); + return; + } + + info( '' ); + info( + plugin + ? `Creating a new WordPress plugin in the ${ slug } directory.` + : `Creating a new block in the ${ slug } directory.` + ); + + const view = { + ...transformedData, + namespaceSnakeCase: snakeCase( namespace ), + slugSnakeCase: snakeCase( slug ), + slugPascalCase: pascalCase( slug ), + textdomain: slug, ...variantVars, }; diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index e835e31c08425..557272cf905f5 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -244,6 +244,7 @@ const getDefaultValues = ( pluginTemplate, variant ) => { ...pluginTemplate.defaultValues, ...pluginTemplate.variants?.[ variant ], variantVars: getVariantVars( pluginTemplate.variants, variant ), + transformer: ( view ) => view, }; }; From e380e2e5255841c9a669a9b0db7130f0b7e4f28f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 17 Oct 2023 13:26:38 -0400 Subject: [PATCH 2/4] Add changelog entry. --- packages/create-block/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index fa1fa983085f1..dea8f02dbd0a0 100644 --- a/packages/create-block/CHANGELOG.md +++ b/packages/create-block/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### New Feature + +- Add new `transformer` property to external templates to allow customization of any values being passed from cli or the template.[#55423](https://github.com/WordPress/gutenberg/pull/55423) + ## 4.27.0 (2023-10-05) ## 4.26.0 (2023-09-20) From 16cb0a366dca63ac55bd40471c9ffc3c825cb305 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 18 Oct 2023 12:43:54 -0400 Subject: [PATCH 3/4] Move transformer default function to before spreading the values from the pluginTemplate. --- packages/create-block/lib/templates.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 557272cf905f5..cf8274a21d3c0 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -241,10 +241,10 @@ const getDefaultValues = ( pluginTemplate, variant ) => { editorScript: 'file:./index.js', editorStyle: 'file:./index.css', style: 'file:./style-index.css', + transformer: ( view ) => view, ...pluginTemplate.defaultValues, ...pluginTemplate.variants?.[ variant ], variantVars: getVariantVars( pluginTemplate.variants, variant ), - transformer: ( view ) => view, }; }; From 4800d7e6512fca67d535c3f19f88872b62ee604c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 18 Oct 2023 13:15:18 -0400 Subject: [PATCH 4/4] Sanitize the slug and namespace before running the transformer function. They create the view based on the transformed values and access the view.slug for the CLI output. --- packages/create-block/lib/scaffold.js | 31 +++++++++++++-------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index 20c3938069fb4..49d3cbf794777 100644 --- a/packages/create-block/lib/scaffold.js +++ b/packages/create-block/lib/scaffold.js @@ -52,7 +52,10 @@ module.exports = async ( transformer, } ) => { - const transformedData = transformer( { + slug = slug.toLowerCase(); + namespace = namespace.toLowerCase(); + + const transformedValues = transformer( { $schema, apiVersion, plugin, @@ -86,12 +89,17 @@ module.exports = async ( customPackageJSON, customBlockJSON, example, + textdomain: slug, } ); - const { slug: transformedSlug, namespace: transformedNamespace } = - transformedData; - slug = transformedSlug.toLowerCase(); - namespace = transformedNamespace.toLowerCase(); + const view = { + ...transformedValues, + namespaceSnakeCase: snakeCase( transformedValues.slug ), + slugSnakeCase: snakeCase( transformedValues.slug ), + slugPascalCase: pascalCase( transformedValues.slug ), + ...variantVars, + }; + /** * --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 @@ -107,19 +115,10 @@ module.exports = async ( info( '' ); info( plugin - ? `Creating a new WordPress plugin in the ${ slug } directory.` - : `Creating a new block in the ${ slug } directory.` + ? `Creating a new WordPress plugin in the ${ view.slug } directory.` + : `Creating a new block in the ${ view.slug } directory.` ); - const view = { - ...transformedData, - namespaceSnakeCase: snakeCase( namespace ), - slugSnakeCase: snakeCase( slug ), - slugPascalCase: pascalCase( slug ), - textdomain: slug, - ...variantVars, - }; - if ( plugin ) { await Promise.all( Object.keys( pluginOutputTemplates ).map(