Rebuilding core image block

Question

I am trying to rebuild core/image block to add extra link in the caption, which would be a link to the extended description of object in the image on another page.

This requires both modifying block edit interface, as well as saved markup. So I opted to take core/image block from github (and necessary dependency in embed folder).

After little modifying of block (removing unneded exports in index.js of the block and adding registerBlock - because block registering for Gutenberg is done for all core blocks in single js file), block compiles fine. However, in the Wordpress Gutenberg editor, block throws an error. Error is:

Uncaught TypeError: Object(...) is not a function

I tracked down error to useBlockProps hook, which is undefined in javascript, although it is imported before (import { BlockAlignmentToolbar, BlockControls, BlockIcon, MediaPlaceholder, useBlockProps } from '@wordpress/block-editor';) I am using @wordpress/create-block scaffold and mentioned imports resolve through webpack.

Why am I getting an error an how to fix it?

Answer 1

I discovered that I used master branch of github where I took core/image block source. Obviously, useBlockProps is yet not part of the core (or not implemented in @wordpress/create-blocks webpack setup).

After switching to wordpress 5.5 Gutenberg branch version of image block, everything was fine.