Update to the latest @wordpress/scripts package and rework as required

[bobbingwide]

Update to the latest @wordpress/scripts package and rework as required

[bobbingwide]

Understand what's needed to enqueue the required CSS in the block editor and on the front end.

For oik-bob-bing-wide I noticed that style-index.css was no longer being enqueued for the oik-bbw/dashicon block unless the oik-bbw/csv block was also included in the post. I assumed this was part of the change to support multiple blocks.
To resolve this I needed to add the style attribute to each block's block.json.

 "style": "file:../../build/style-index.css"

It's only needed when the block has its own style.scss.

I haven't checked whether or not the style-index.css is enqueued multiple times.
Need to test with combinations of the following blocks: csv, dashicon, wp.

[bobbingwide]

Process

1. Try changing the block.json files before updating wp-scripts
2. Build using npm run dev
3. See what's different and if the blocks still work.
4. Update wp-scripts using npm run packages-update
5. Build using npm run dev
6. See what's different
7. See if the blocks still work.

Block	old block.json value	new block.json value
sb-starting-block	index	sb-starting-block
second-block	Not set	second-block

Results

After step 3. the build files hadn't changed. No need to test therefore.

The output from step 5. was

C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block>npm run dev

> [email protected] dev C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block
> wp-scripts start

Skipping "../../build/second-block.js" listed in "C:/apache/htdocs/wordpress/wp-content/plugins/sb-starting-block/src/second-block/block.json". File is located outside of the "src" directory.
Skipping "../../build/sb-starting-block.js" listed in "C:/apache/htdocs/wordpress/wp-content/plugins/sb-starting-block/src/starting-block/block.json". File is located outside of the "src" directory.
assets by chunk 30.1 KiB (name: index)
  asset index.js 28.1 KiB [emitted] (name: index) 1 related asset
  asset index.css 1.84 KiB [emitted] (name: index) 1 related asset
  asset index.asset.php 202 bytes [emitted] (name: index)
asset ./style-index.css 1.84 KiB [emitted] (name: ./style-index) (id hint: style) 1 related asset
asset second-block/block.json 804 bytes [emitted] [from: src/second-block/block.json] [copied]
asset starting-block/block.json 782 bytes [emitted] [from: src/starting-block/block.json] [copied]
Entrypoint index 31.9 KiB (20.4 KiB) = ./style-index.css 1.84 KiB index.css 1.84 KiB index.js 28.1 KiB index.asset.php 202 bytes 3 auxiliary assets
runtime modules 7.42 KiB 22 modules
orphan modules 6.66 KiB [orphan] 6 modules
built modules 8.35 KiB (javascript) 670 bytes (css/mini-extract) [built]
  cacheable modules 8.07 KiB (javascript) 670 bytes (css/mini-extract)
    javascript modules 8.07 KiB 12 modules
    css modules 670 bytes
      modules by path ./src/starting-block/ 305 bytes 2 modules
      modules by path ./src/second-block/ 365 bytes 2 modules
  + 7 modules

Again, I have no idea what the Skipping messages mean.

[bobbingwide]

Looking at Ryan Welcher's https://github.com/ryanwelcher/create-block-multple-blocks-template it appears that I was missing an important part of the process to do with the entry points.

• wp-scripts doesn't automatically determine the run time components from the block.json files.
• It needs to be told this in a custom webpack.config.js file
• This lists the entry points

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
	...defaultConfig,
	entry: {
		'sb-starting-block': './src/starting-block',
		'second-block': './src/second-block'
	},
};

with this configuration the build output is more promising

C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block>npm run dev

> [email protected] dev C:\apache\htdocs\wordpress\wp-content\plugins\sb-starting-block
> wp-scripts start

Skipping "../../build/second-block.js" listed in "C:/apache/htdocs/wordpress/wp-content/plugins/sb-starting-block/src/second-block/block.json". File is located outside of the "src" directory.
Skipping "../../build/sb-starting-block.js" listed in "C:/apache/htdocs/wordpress/wp-content/plugins/sb-starting-block/src/starting-block/block.json". File is located outside of the "src" directory.
assets by chunk 20.9 KiB (name: sb-starting-block)
  asset sb-starting-block.js 19.8 KiB [emitted] (name: sb-starting-block) 1 related asset
  asset sb-starting-block.css 946 bytes [emitted] (name: sb-starting-block) 1 related asset
  asset sb-starting-block.asset.php 202 bytes [emitted] (name: sb-starting-block)
assets by chunk 16.8 KiB (name: second-block)
  asset second-block.js 15.7 KiB [emitted] (name: second-block) 1 related asset
  asset second-block.css 996 bytes [emitted] (name: second-block) 1 related asset
  asset second-block.asset.php 150 bytes [emitted] (name: second-block)
assets by path ./*.css 1.9 KiB
  asset ./style-sb-starting-block.css 978 bytes [emitted] (name: ./style-sb-starting-block) (id hint: style) 1 related asset
  asset ./style-second-block.css 966 bytes [emitted] (name: ./style-second-block) (id hint: style) 1 related asset
asset second-block/block.json 804 bytes [emitted] [from: src/second-block/block.json] [copied]
asset starting-block/block.json 782 bytes [emitted] [from: src/starting-block/block.json] [copied]
Entrypoint sb-starting-block 21.9 KiB (15.3 KiB) = ./style-sb-starting-block.css 978 bytes sb-starting-block.css 946 bytes sb-starting-block.js 19.8 KiB sb-starting-block.asset.php 202 bytes 3 auxiliary assets
Entrypoint second-block 17.7 KiB (12.3 KiB) = ./style-second-block.css 966 bytes second-block.css 996 bytes second-block.js 15.7 KiB second-block.asset.php 150 bytes 3 auxiliary assets
runtime modules 11 KiB 28 modules
orphan modules 6.66 KiB [orphan] 6 modules
built modules 8.3 KiB (javascript) 670 bytes (css/mini-extract) [built]
  cacheable modules 8.02 KiB (javascript) 670 bytes (css/mini-extract)
    javascript modules 8.02 KiB 11 modules
    css modules 670 bytes
      modules by path ./src/starting-block/ 305 bytes 2 modules
      modules by path ./src/second-block/ 365 bytes 2 modules
  + 7 modules
webpack 5.70.0 compiled successfully in 989 ms

I now have to test whether or not the localized files for each block are loaded in the editor.

Does my i18n process build the right files?

[bobbingwide]

The code's now delivered in v0.1.0 but the screenshots need updating and there are typos in the README

[bobbingwide]

Latest "@wordpress/scripts": "^26.17.0"

[bobbingwide]

The code's now delivered in v0.1.0 but the screenshots need updating and there are typos in the README

Screenshots updated. Readme typos corrected. Delivered in v0.1.1