Creating a plugin that exposes several blocks while using the same wp-scripts package

[flexseth]

Use Case: I want to create a Freelancer Toolkit plugin that offers multiple tools (blocks) for freelancers.

• Time Tracker
• Expense Tracker
• Estimate Generator
• Invoice Generator

I used the WordPress Plugin Boilerplate website to create the base plugin, which I call "Freelancer Toolkit." Downloaded and installed this plugin (making sure it doesn't collide with namespaces in the WP.org plugin repo)

Now, I'd like to scaffold multiple blocks that do this, without having to install the wp-scripts package every time. For instance, having a directory structure as so:

├── LICENSE
├── LICENSE.txt
├── README.md
├── README.txt
├── admin
│   ├── class-freelance-toolkit-admin.php
│   ├── css
│   │   └── freelance-toolkit-admin.css
│   ├── index.php
│   ├── js
│   │   └── freelance-toolkit-admin.js
│   └── partials
│       └── freelance-toolkit-admin-display.php
├── blocks
├── freelance-toolkit.php
├── includes
│   ├── class-freelance-toolkit-activator.php
│   ├── class-freelance-toolkit-deactivator.php
│   ├── class-freelance-toolkit-i18n.php
│   ├── class-freelance-toolkit-loader.php
│   ├── class-freelance-toolkit.php
│   └── index.php
├── index.php
├── languages
│   └── freelance-toolkit.pot
├── public
│   ├── class-freelance-toolkit-public.php
│   ├── css
│   │   └── freelance-toolkit-public.css
│   ├── index.php
│   ├── js
│   │   └── freelance-toolkit-public.js
│   └── partials
│       └── freelance-toolkit-public-display.php
└── uninstall.php

or a similar directory structure, with wp-scripts being accessible by each block scaffolded using the no-plugin flag

The blocks directory should have the blocks being scaffolded, as listed above.

Once the plugin is installed, use the command npm install @wordpress/scripts --save-dev to add the wp-scripts package to the root plugin folder, in this case, freelance-toolkit, which was the namespace I used so (that does not collide with WP.org)

Addresses the issue

Blocks know where wp-scripts is
Then, I'd like to make sure that each block knows where the WordPress scripts package is, so that I don't have to have all of these extra files as part of the plugin download and installation.

• Question: Is this best achieved by creating a custom template that points to a root plugin directory, where the wp-scripts package is installed?

• Question 2: Any new dependencies would need to be installed and added to the root wp-scripts folders, even though the script may be a dependency of a block in a subfolder of the plugin root (IE: a block folder with no-plugin

Use Case: I want to scaffold a block that has a PDF generator package from NPM to automatically generate PDFs from estimates and invoices when using those blocks, ie: Download Estimate button. This block has a NPM package dependency that is a JavaScript libraries to generate PDFs from HTML code (sample use case)
]
Now, I need to make sure this block's package is required in the root package.json, rebuild this block accordingly with Webpack, to make sure all of the node modules are loaded when using this block in Gutenberg.

• ** Question 3:** How to automatically install packages into the plugin directories node_modules folder, and update package.json automagically?

• Question 4: Is this best achieved by symbolic linking the folder to the new block when scaffolding, or better fixed by using a custom template that knows where wp-scripts lives?

• Question 5: Also, how to handle .gitignore for this custom scripts location..?

Proposed Fix
--scripts-directory

• A flag for @wordpress/create-block that makes a newly scaffolded block know where wp-scripts is.

Have a flag that realizes you are using multiple blocks, and points to the wp-scripts not only on scaffolding, but also when installing new dependencies such as Debounce or the PDF generator. IE: --scripts-directory= that can be used with the --no-plugin flag when creating a new block, to not install multiple instances of node modules.

npx @wordpress/create-block timetracker --noplugin --scripts-directory='.' #the root plugin directory

• Some type of build tool for recognizing where wp-scripts is installed.

Thanks for considering this as a feature or need!!

Seth

[ryanwelcher]

Hi @flexseth! Thanks for putting all of this together!

While it definitely is an interesting project, I'm afraid it may be too complicated to turn into a recipe - which tend to be smaller in scope.

I LOVE the idea of a recipe that explains how to set up a multi-block plugin though with a scope that would include the following:

1. Using create-block to scaffold an initial plugin.
2. Again using create-block to add new blocks and show off the new --target-dir flag
3. Add the new wp_register_block_metadata_collection function added in 6.7 to show how to load multiple block performantly