Update blocks to build using wp-scripts, register with block.json. Test with WordPress 6.5

[bobbingwide]

The oik-blocks plugin was originally built using webpack.

When used in WordPress 5.8 the Widget block editor produces a "doing it wrong" message due to the enqueueing of wp-editor;
This is used for Server Side Rendering

It seems the best solution is to rework the code to build it using wp-scripts which will enable use of

import ServerSideRender from '@wordpress/server-side-render';

See bobbingwide/bobbingwide#30 (comment)

It also is dependent upon wp-editor for other functions such as getPermalinkParts, which is used by the oik-block/blockinfo block. When wp-editor is not enqueued the Widget block editor fails with:

blocklist.js?f522:116 Uncaught TypeError: Cannot read property 'getPermalinkParts' of null
    at getBlockLink (blocklist.js?f522:116)
    at BlockListItem (blocklist.js?f522:140)
    at BlockinfoStyled (blockinfo.js?df38:36)
    at edit (index.js?0538:188)
    at renderWithHooks (react-dom.js?ver=16.13.1:14938)
    at updateFunctionComponent (react-dom.js?ver=16.13.1:17169)
    at beginWork (react-dom.js?ver=16.13.1:18745)
    at HTMLUnknownElement.callCallback (react-dom.js?ver=16.13.1:182)
    at Object.invokeGuardedCallbackDev (react-dom.js?ver=16.13.1:231)
    at invokeGuardedCallback (react-dom.js?ver=16.13.1:286)

I don't yet know how to resolve this additional problem.

Note: When wp-editor is not enqueued the Block editor fails earlier than the Block widget editor, with Uncaught TypeError: Cannot read property 'ServerSideRender' of undefined.

Requirements

• Ability to use the Widget block editor without getting messages regarding wp-editor.
• Which means changing the build to allow the import above.
• Build using wp-scripts
• Register the blocks using block.json
• Ensure the blocks can be selected
• Add some color and typography settings where applicable
• Add text align capability where applicable
• Remove deprecated blocks which are now in other plugins.

Proposed solution

• Copy and cobble the solution developed for oik-bob-bing-wide
• Remove unnecessary files: webpack.config.js and .babelrc
• Change package.json
• Eliminate the blocks that are no longer needed
• Change block.json for each block
• Change each block's index.js to register the block
• Change each block's Server Side Registration to register the block from block.json
• Change each block to use get_block_wrapper_attributes(), where applicable
• Update node_modules and rebuild
• Internationalize and localize

Process for updating node_modules

1. Remove the existing node_modules folder
2. npm install
3. npm install @wordpress/scripts --save-dev

See https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/

[bobbingwide]

The blocks to retain are:

Block	Notes
oik-blockicon	For block documentation
oik-blockinfo	For block documentation
oik-blocklist	For block documentation
oik-content	Prototyped oik dynamic content shortcodes block
oik-fields	Server side rendered fields
oik-nivo	Prototyped wrapper to the [nivo] shortcode from oik-nivo-slider
oik-person	prototyped Server Side Rendering for the [bw_user] shortcode from oik-user

[bobbingwide]

npm install

What should I do about this?

npm WARN oik-blocks@1.0.0 No repository field.
npm WARN oik-blocks@1.0.0 license should be a valid SPDX license expression

Should I be bothered by the last message produced by running npm install?
4102 high level vulnerabilities! Really?

added 2627 packages from 828 contributors and audited 2633 packages in 119.337s

203 packages are looking for funding
  run `npm fund` for details

found 15375 vulnerabilities (11182 low, 91 moderate, 4102 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Running npm audit produces

found 15375 vulnerabilities (11182 low, 91 moderate, 4102 high) in 2633 scanned packages
  run `npm audit fix` to fix 15373 of them.
  1 vulnerability requires semver-major dependency updates.
  1 vulnerability requires manual review. See the full report for details.

Running npm audit fix produces

added 3 packages from 2 contributors, removed 3 packages and updated 10 packages in 27.95s

203 packages are looking for funding
  run `npm fund` for details

fixed 15373 of 15375 vulnerabilities in 2633 scanned packages
  1 vulnerability required manual review and could not be updated
  1 package update for 1 vulnerability involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

[bobbingwide]

What should I do about this?

Add the following to package.json

"repository": {
  "type": "git",
  "url": "git://github.com/bobbingwide/oik-blocks.git"
}

change license to

"license": "GPL-2.0-or-later",

See also bobbingwide/sb-debug-block#1

This change can also be applied retrospectively to other plugins that use package.json

[bobbingwide]

When refactoring the oik-block/person block I was getting the following message Error loading block: invalid block.

The block was being registered in the server using the following code.

$args = [ 'render_callback' => 'oik_blocks_dynamic_block_person' ];
$registered = register_block_type_from_metadata( __DIR__ .'/src/oik-person' );

It took me a while to realise that the $args parameter was not being passed on the register call.

$args = [ 'render_callback' => 'oik_blocks_dynamic_block_person' ];
$registered = register_block_type_from_metadata( __DIR__ .'/src/oik-person', $args );

[bobbingwide]

Internationalize and localize

Internationalise and localize using the solution developed for oik, which is documented in bobbingwide/sb-post-edit-block#5
and
bobbingwide/oik#177

[bobbingwide]

Updating wp-scripts today...

The following package versions were changed:
@wordpress/block-editor: ^5.3.3 -> ^10.0.0
@wordpress/blocks: ^8.0.3 -> ^11.16.0
@wordpress/i18n: ^3.20.0 -> ^4.17.0
@wordpress/scripts: ^15.0.1 -> ^24.1.0

[bobbingwide]

Since this is still open, it's time to update to wp-scripts v26.12.0

[bobbingwide]

update wp-scripts to v27.4.0