Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Create Block] Introduce the transformer property. #55423

Merged
merged 5 commits into from
Oct 18, 2023
Merged

[Create Block] Introduce the transformer property. #55423

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
60e4c65
Introduce the transformer property.
ryanwelcher Oct 17, 2023
e380e2e
Add changelog entry.
ryanwelcher Oct 17, 2023
a27db25
Merge branch 'trunk' into feature/add-transformer-to-create-block
ryanwelcher Oct 18, 2023
16cb0a3
Move transformer default function to before spreading the values from…
ryanwelcher Oct 18, 2023
4800d7e
Sanitize the slug and namespace before running the transformer functi…
ryanwelcher Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/create-block/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
62 changes: 35 additions & 27 deletions packages/create-block/lib/scaffold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -106,9 +82,41 @@ module.exports = async (
style,
render,
viewScript,
variantVars,
customPackageJSON,
customBlockJSON,
example,
} );

const { slug: transformedSlug, namespace: transformedNamespace } =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason for moving sanitization after transformation?

It only exists to enforce lower casing for the slug and the namespace, which is the requirement for the plugin name and the block name. If it would get back to the previous place in the code, we could avoid this hard to read destructuring.

Copy link
Contributor Author

@ryanwelcher ryanwelcher Oct 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

slug is used later on for messaging and to generate various variations for the view. So we needed to have any transforms applied before it's use. I agree it's not that easily read so I'll refactor.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it work as expected if the sanitized version gets passed to the transformer? I don't think it matters.

Copy link
Contributor Author

@ryanwelcher ryanwelcher Oct 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would but there was no guarantee that the slug coming back from the transformer would be formatted correctly. That's the reason we transform first and then sanitize the results after.

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,
};

Expand Down
1 change: 1 addition & 0 deletions packages/create-block/lib/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ const getDefaultValues = ( pluginTemplate, variant ) => {
...pluginTemplate.defaultValues,
...pluginTemplate.variants?.[ variant ],
variantVars: getVariantVars( pluginTemplate.variants, variant ),
transformer: ( view ) => view,
};
};

Expand Down
Loading