[Create Block] Allows custom keys to be generated in block.json files and package.json files #44649
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… resulting package.json file.
ryanwelcher
changed the title
ryanwelcher
changed the title
ryanwelcher
added
the
Developer Experience
ryanwelcher
changed the title
|
Size Change: 0 B Total Size: 1.27 MB ℹ️ View Unchanged
|
|
@ryanwelcher this is awesomesauce! I took it for a test spin and noticed an oddity. Here are my steps for testing (a bit different from yours):
I'm testing against my own custom block template (download
Once the block is output. I noticed that the Perhaps my custom block template is not written properly? Or I'm missing something? |
I think it’s all good with your template, @colorful-tones. It looks like a side-effect of using the spread operator for fields passed from
How do you both feel about offering By the way, excellent job @ryanwelcher, taking care of the PR so fast! |
|
Makes sense about the spread operator. I would vote for |
|
Super excited about this PR. Agreed on |
|
Thanks for the feedback! I felt that the spread approach was a little naive so I agree that a dedicated key is probably the best approach. I'll add the |
|
@ryanwelcher Admittedly, this might need to be another ticket - but what would you think about adding support for |
Interesting idea! Templates hosted on npm are currently supported by create-block. Does that suit the need or were you hoping to be able to use a git repo for example? |
Ah, we can likely use the npm approach! I didn't realise that was even possible (and thought we'd need to get our users to download templates manually first etc). I'll check that out and open a new issue/PR if needed! |
Here is an older example I made and the usage looks like:
Feel free to reach out with any questions! |
@lgladdy, it might already work with GitHub URLs as it's supported by https://docs.npmjs.com/cli/v8/commands/npm-install Example: This is what we run behind the scenes: gutenberg/packages/create-block/lib/templates.js Lines 190 to 192 in 154c0ee |
colorful-tones
approved these changes
Oct 5, 2022
There was a problem hiding this comment.
@ryanwelcher I'm not sure of the use case for customPackageJSON, but it could potentially be useful and I'm just blanking on an immediate use case.
I tested and the customBlockJSON works wonderfully. Thanks for the great work.
gziolo
approved these changes
Oct 5, 2022
One example is adding prettier config: |
gziolo
reviewed
Oct 5, 2022
| @@ -74,6 +74,7 @@ The following configurable variables are used with the template files. Template | |||
| - `customScripts` (default: {}) – the list of custom scripts to add to `package.json` . It also allows overriding default scripts. | |||
| - `npmDependencies` (default: `[]`) – the list of remote npm packages to be installed in the project with [`npm install`](https://docs.npmjs.com/cli/v8/commands/npm-install) when `wpScripts` is enabled. | |||
| - `npmDevDependencies` (default: `[]`) – the list of remote npm packages to be installed in the project with [`npm install --save-dev`](https://docs.npmjs.com/cli/v8/commands/npm-install) when `wpScripts` is enabled. | |||
| - `customPackageJSON` (no default) - allows definition of additional properties for the generated package.json file. | |||
There was a problem hiding this comment.
We have a bit of overlap with customScripts, npmDependencies, and npmDevDependencies. It doesn’t have to be a bad thing as we would have to put special care to handle them in a similar way through customPackageJSON. I’m mostly noticing here that this new option might override all other settings.
There was a problem hiding this comment.
That's a good point. I wonder if we just filter those keys out of customPackageJSON before adding it?
There was a problem hiding this comment.
It isn’t a blocker. We can look into it once it starts to confuse people.
bph
added
the
Needs Dev Note
|
Although create-block isn't really part of WordPress 6.2, Gutenberg 14.4 is part of the Gutenberg plugins version that are said to arrive at WordPress 6.2, so it would be a great occasion to let developers know about this enhancement in a Dev Note for the Fieldguide of WP6.2 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR allows template authors to pass custom block.json properties by adding them to the
defaultproperty or anyvariantand introduces a new key calledcustomPackageJSONthat will add keys to the generated package.json file.Closes: #44626
Why?
Block creation via the create-block package has limited options that can be passed via a custom template. With the functionality introduced by this PR, it becomes more flexible both when new features are added to other packages ( see #44185 ) and especially for block developers who need/want to customize their process.
Testing Instructions
This can be tested with a custom template or by changing the built-in template information in the package.
Custom block.json keys
node ./index.js test-blockblock.jsonfilenode ./index.js test-block --variant=static|dynamic( use correct variant based on what you updatedblock.jsonfileCustom package.json keys
customPackageJSONkey to the defaults with any key/value pairnode ./index.js test-block