Update wp-scripts and test with WordPress 6.5

[bobbingwide]

oik-css is currently built with wp-scripts v24.6.0
Does it need rebuilding for WordPress 6.3 or can it just be retested and readme.txt updated?

[bobbingwide]

Latest wp-scripts is 26.9.0

[bobbingwide]

When running npm run makepot on oik-css we see the following warnings

> [email protected] makepot C:\apache\htdocs\wordpress\wp-content\plugins\oik-css
> wp i18n make-pot . languages/oik-css.pot --ignore-domain --exclude=node_modules,vendor,src/*.js

Plugin file detected.
Warning: The string "%1$s may not be fully functional." contains placeholders but has no "translators:" comment to clarify their meaning. (libs/oik-depends.php:152)
Warning: The string "Install %1$s" contains placeholders but has no "translators:" comment to clarify their meaning. (libs/oik-depends.php:286)
Warning: The string "Activate %1$s" contains placeholders but has no "translators:" comment to clarify their meaning. (libs/oik-depends.php:314)
Warning: The string "Upgrade %1$s" contains placeholders but has no "translators:" comment to clarify their meaning. (libs/oik-depends.php:332)
Success: POT file successfully generated!

These Warnings are not produced in oik since the file admin/oik-activation.php and/or libs/oik-activation.php already contains the translators comment for the same string.

When I was adding translator comments for oik I chose not to add them for oik-depends.
Two possible reasons

1. I probably wasn't aware of the problem
2. Had I tried to add a translators comment and coded it differently I could have got a different Warning.

Warning: The string "Please install and activate the required minimum version of this plugin: %1$s" has 2 different translator comments. (libs/oik-activation.php:204)

And that's not a particularly useful message since it only identifies the first location of the comment.
See also #18

[bobbingwide]

This was delivered in v2.1.1

[bobbingwide]

latest scripts is v27.4.0
npm run build produces

TypeError: Object.hasOwn is not a function

Object.hasOwn is only available since node.js v16.9.0.

My version of node is v14.18.0

Therefore node needs updating.
Downloaded latest version from nodejs.org/en/download

C:\apache\htdocs\wordpress\wp-content\plugins\oik-css>node -v
v20.11.1

Running npm run build results in

[email protected] build
wp-scripts build

Skipping "../../build/index.js" listed in "C:/apache/htdocs/wordpress/wp-content/plugins/oik-css/src/oik-css/block.json". File is located outside of the "src" directory.
[webpack-cli] TypeError: Cannot convert undefined or null to object
at Function.keys ()
at getNormalizedEntryStatic (C:\apache\htdocs\wordpress\wp-content\plugins\oik-css\node_modules\webpack\lib\config\normalization.js:498:27)

• oik builds OK though!
• Most other blocks build
• oik-blocks fails with the same problem.

[bobbingwide]

The problem would appear to be that neither oik-css nor oik-blocks has a webpack.config.js file that supports multiple entry points. Adding this enables the build to complete. Does it also require changes to the PHP server code?

It would appear so

Notice: Function register_block_script_handle was called incorrectly. The asset file (C:/apache/htdocs/wordpress/wp-content/plugins/oik-css/src/oik-css/../../build/index.asset.php) for the "editorScript" defined in "oik-css/css" block definition is missing. Please see Debugging in WordPress for more information. (This message was added in version 5.5.0.) in C:\apache\htdocs\oikcom\wp-includes\functions.php on line 6031

[bobbingwide]

Copied from oik's issue 202

oik's blocks are currently delivered with one entry point /build/index.js.
wp-scripts has been improved considerably. It now supports multiple blocks per plugin.

Requirement

• Update oik to benefit from improvements to wp-scripts from the @wordpress/scripts package
• Simplify / reduce the code needed to support internationalization
• Register each block so that only the required code is loaded for the blocks that are used.
• Understand what's needed to enqueue the required CSS in the block editor and on the front end.

Process

• Update wp-scripts using npm run packages-update
• Change webpack.config.js to deliver multiple entry points
• Change each block's block.json file to refer to the appropriate entry-points and CSS
• Mark src/index.js as superceded
• Update server logic for multiple entry points
  • Call wp_set_script_translations() for each block's editor-script
  • Correct the filter function for load_script_textdomain_relative_path
• Build using npm run dev
• Test

For plugins which have already been changed refer to the code changes in bobbingwide/sb-starting-block#3 and bobbingwide/oik-bob-bing-wide#42