search

bobbingwide / oik-blocks

WordPress 5.0 blocks for oik shortcodes
https://oik-plugins.com/oik-plugins/oik-blocks
GNU General Public License v3.0
1 stars 0 forks source link

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

Open bobbingwide opened 3 years ago

bobbingwide commented 3 years ago

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

Proposed solution

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 https://github.com/bobbingwide/sb-debug-block/issues/1

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

bobbingwide commented 3 years ago

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 commented 3 years ago

Internationalize and localize

Internationalise and localize using the solution developed for oik, which is documented in https://github.com/bobbingwide/sb-post-edit-block/issues/5 and https://github.com/bobbingwide/oik/issues/177

bobbingwide commented 2 years ago

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 commented 1 year ago

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

bobbingwide commented 6 months ago

update wp-scripts to v27.4.0