Description

Partially addresses #25188.

You can watch two screencasts that contain an extended explanation or read the shorter version that is included afterwards:

It's an initial version that allows moving block.json to any location inside the project rather than having it always in the top-level folder. It will make it possible to handle multiple block.json files if users want to scaffold multiple blocks in one plugin.

Changes included:

• Add support for handling block templates with the blockTemplatesPath field in the external template configuration.
• Add a new field folderName for setting the location for the block.json file and other optional block files generated from block templates included in the folder set with the blockTemplatesPath setting.
• Automatically copy block.json files located in the src folder and its subfolders to the output folder (build by default) when using start and build from @wordpress/scripts.

All the above combined allows to put block.json in a custom location. When the block metadata is discovered in the src folder (or subfolders) it gets copied to the build folder, which allows using simplified paths for block assets:

{
	blockTemplatesPath: join( __dirname, 'block-templates' ),
	defaultValues: {
		folderName: 'src',
		editorScript: 'file:./index.js',
		editorStyle: 'file:./index.css',
		style: 'file:./style-index.css',
	},
}

In addition to that, we can now explicitly set templates related only to the block with blockTemplatesPath. The last missing piece that I believe should be tackled separately is to enhance the CLI to support prompts for multiple blocks that would use block templates with customized settings for every block based on the user input.

How has this been tested?

Scaffolding

I generated three blocks using templates included in Gutenberg

ES5

npx wp-create-block --no-wp-scripts -t es5 es5-example

ESNext + JSX (the default)

npx wp-create-block --no-wp-scripts esnext-example
cd esnext-example
../node_modules/.bin/wp-scripts build
cd ..

Gutenpride (handbook tutorial)

npx wp-create-block --no-wp-scripts -t @wordpress/create-block-tutorial-template gutenpride
cd gutenpride
../node_modules/.bin/wp-scripts build
cd ..

WordPress environment

I used wp-env command integrated with the Gutenberg project.

I created an override to the existing config:

File: .wp-env.override.json

{
	"plugins": [ ".", "./es5-example", "./esnext-example", "./gutenpride" ]
}

I executed:

npx wp-env start

Testing plugins

I opened the following URL to test all the installed plugins: http://localhost:8888/wp-admin.

I created a new post and inserter all 3 blocks:

• ES 5 Example
• Esnext Example
• Gutenpride (I also typed a phrase Gutenpride)

I saved the post and confirmed it renders correctly on the frontend.

Screenshots

Editor:

Frontend:

Types of changes

New features and enhancements (non-breaking change which adds functionality) -->

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• [-] My code follows the accessibility standards.
• [-] I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• [-] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).