Description

Fixes #19237.

Plugin developers could benefit from having one command to run to output the zip file with all assets that should be included for the plugin to work in WordPress.

I discussed it with @bph and she raised the concern that having big folders like the node_modules one included might be not the best experience. She shared her workaround:

I worked ‘around’ it to upload it to GitHub which is probably where it all ends up in the end. But it would be great for local testing without the need to use the GitHub repository and have the zip file easy to produce.

This PR adds a new plugin-zip command to create a zip file for a WordPress plugin in @wordpress/scripts. By default, the command uses best practices for file organization documented in Plugin Handbook.

Usage:

Recommended changes in package.json:

{
	"scripts": {
		"plugin-zip": "wp-scripts plugin-zip"
	}
}

Executing from CLI:

npm run plugin-zip

Advanced information

In the case where the plugin author wants to customize the files included in the zip file, they can provide the files field in the package.json file as documented in https://www.npmjs.com/package/npm-packlist, example:

{
  "files": [ "dir" ]
}

It reuses the same logic as npm pack command to create an npm package tarball.

How has this been tested?

I executed ./bin/test-create-block.sh to ensure that the new command runs correctly and lists all necessary files:

Creating a plugin zip file...

Creating archive for `esnext-test` plugin... 🎁

Using Plugin Handbook best practices to discover files:

  Adding `block.json`.
  Adding `esnext-test.php`.
  Adding `readme.txt`.
  Adding `build/index.asset.php`.
  Adding `build/index.css`.
  Adding `build/index.js`.
  Adding `build/style-index.css`.

Done. `esnext-test.zip` is ready! 🎉

The same command is executed on CI.

I also executed some of the steps manually to test uploading the created zip file with WordPress:

npx wp-create-block esnext-test --no-wp-scripts
cd esnext-test
../node_modules/.bin/wp-scripts build
../node_modules/.bin/wp-scripts plugin-zip

Steps necessary to activate the plugin from the zip file:

1. Opened WP-Admin.
2. Navigated to the Plugins section.
3. Clicked on Add New.
4. Clicked on Upload Plugin.
5. Selected the esnext-test.zip file and clicked the Install Now button.
6. Clicked the Activate Plugin button.
7. Navigate to the Posts section.
8. Opened an existing post to test whether the new block can be inserted into the document.
9. Ensured it works as expected.

Screenshots

Types of changes

New feature (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).