Update blocks to build using wp-scripts and register with block.json

[bobbingwide]

The blocks in the oik plugin were 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)

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 in the block editor
• Add some color and typography settings where applicable
• Add text align capability where applicable
• Internationalized and localized

Proposed solution

• Copy and cobble the solution developed for oik-blocks
• Remove unnecessary files: webpack.config.js and .babelrc
• Change package.json
• 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
• Enable internationalization and localization of JavaScript and block.json strings
• Internationalize translatable strings in the block's JavaScript files

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 Countdown block generates a shortcode from the blocks attributes.
When used in the Block widget editor the __internalWidgetId value is exposed.
This unexpected attribute doesn't affect the execution of the block on the front end.

The Countdown block will be rendered on the front end.
Shortcode equivalent:
[bw_countdown until="2021-12-25" description="Christmas" format="D" __internalWidgetId="block-22"]

[bobbingwide]

Having now implemented the 6 blocks being registered on the server using register_block_type_from_metadata(), where only the first block specifies the build files, I'm unable to get any of the blocks to operate in the user's preferred locale ( bb_BB ).

The result of this call, performed after the block registration is true

$ok = wp_set_script_translations( 'oik-address-editor-script', 'oik' , __DIR__ .'/languages' );

But there are no translations being loaded from the oik-bb_BB-dfbff627e6c248bcb3b61d7d06da9ca9.json

<script id='oik-address-editor-script-js-translations'>
            (function(domain, translations) {
                var localeData = translations.locale_data[domain] || translations.locale_data.messages;
                localeData[""].domain = domain;
                wp.i18n.setLocaleData(localeData, domain);
            }
            )("oik", {
                "locale_data": {
                    "messages": {
                        "": {}
                    }
                }
            });
        </script>
        <script src='https://s.b/wordpress/wp-content/plugins/oik/src/oik-address/../../build/index.js?ver=c459e0f8d615461c711a00d36c23e0e7' id='oik-address-editor-script-js'>
</script>

The internationalization and localization works for sb-chart-block, which is built with wp-scripts but uses old style registration.
Let's try internationalizing the sb-post-edit-block plugin to see if that works.
It's a single block plugin. The block is registered using register_block_type_from_metadata.
It has one translatable string "Link text", which should appear as "Lnik txet" in bb_BB locale.

[bobbingwide]

Let's try internationalizing the sb-post-edit-block plugin to see if that works.

See the above referenced issue for the analysis of the problem. There's a summary at bobbingwide/sb-post-edit-block#5 (comment) that explains how to do it for single block plugins and multi-block plugins such as oik.

[bobbingwide]

oik v4.4.0 in now available from wordpress.org. Closing therefore.