TS Types: registerBlockType signature not match the @wordpress/create-block scaffolded file invokation

Description

Trying typescript with custom block and some early error stopped coding.
Here is the first "obstacle"

Step-by-step reproduction instructions

Go to /plugins/ with command line
Scaffold a new custom block with npx @wordpress/create-block --variant dynamic my-new-block
Open block.json and ensure that "icon" equal to "smiley" (if not remember what it is and expect that as the correct icon)
Run npm start, launch a Block Editor page and add this block to the page, and check that the icon is correct
Stop dev server
Convert /my-new-block/src/index.js extension to .ts
Install used dependency npm i @wordpress/blocks
Install used dependency typings npm i -D @types/wordpress__blocks
Open index.ts
See the TS error in code editor

The Error goes away with this procedure:

Right click > Go to Definition on registerBlockStyle invocation (line 28 of screenshot)
- this should open this file: plugins/my-new-block/node_modules/@types/wordpress__blocks/api/registration.d.ts
- Get that we are using the overload 2 of the function signature
- If not using VsCode you must find your way to "see" the type definition of the registerBlockType
Read the TS error on the overload 2:
- Type '{ edit: () => WPElement; }' is missing the following properties from type 'Pick<Block<{}>, "attributes" | "category" | "title">': attributes, category, title
- So we miss "attributes", "category", "title"
Mutate index.ts like this

registerBlockType(metadata.name, {
	...metadata,
	edit: Edit,
});

Now the TS error for overload 2 is different:

Types of property 'icon' are incompatible.
Type 'string' is not assignable to type 'BlockIcon | undefined'.

Add also "icon: undefined":

registerBlockType(metadata.name, {
	...metadata,
	icon: undefined,
	edit: Edit,
});

No more error.
Run npm start, launch the Block Editor and look that now the block icon is not present anymore.
Remove the icon: undefined line of step 5
Re-do step 7 and check that icon of the block is now correct again
So icon can be a string, and TS types are wrong
Manually adjust types:

in plugins/my-new-block/node_modules/@types/wordpress__blocks/index.d.ts line 326, change

export type BlockConfiguration<T extends Record<string, any> = {}> = Partial<Omit<Block<T>, 'icon'>> &
    Pick<Block<T>, 'attributes' | 'category' | 'title'> & {
        icon?: BlockIcon | undefined;
    };

with

export type BlockConfiguration<T extends Record<string, any> = {}> = Partial<Omit<Block<T>, 'icon'>> &
    Pick<Block<T>, 'attributes' | 'category' | 'title'> & {
        icon?: BlockIcon | string | undefined;
    };

Update index.ts as

registerBlockType(metadata.name, {
	...metadata,
	edit: Edit,
});

Check that everything is ok

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 6.3
NO Gutenerberg Plugin

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

The definition for @wordpress/blocks types isn't maintained in the Gutenberg repository. It is outdated and it should get updated externally until it's tightly integrated with the package.

In the context of WordPress, it shouldn't be necessary to pass the full metadata object with registerBlockType if the block gets registered on the server with register_block_type pointing to the folder with the block.json file. If there is no block.json registration on the server, then:

registerBlockType(metadata.name, {
	...metadata,
	edit: Edit,
});

should be replaced with:

registerBlockType(metadata, {
	edit: Edit,
});

There was an attempt started in #48604 to add native support for TypeScript in @wordpress/blocks.

The issue only occurs when we spread metadata. It treats icon as string from json whereas icon has its own type def

Just for someone who is struggling like me this is the solution I used for now

registerBlockType(metadata.name, {
  title: metadata.title,
  description: metadata.description,
  category: metadata.category,
  icon: 'hammer',
  supports: {
    html: metadata.supports.html,
  },
  attributes: null,
  edit: Edit,
});

@sethstha

The solution by @sethstha should work, with registerBlockType overload 2 and all parameters fed individually.

But (only reiterating @gziolo here) I think a little less work is required by adding "attributes": {} to blocks.json, and then switching to overload 1 by simply removing the .name parameter. The function will get everything it needs from block.json, and additional settings other than edit and save are no longer necessary unless you want to override block.json (project-specific) defaults.

To be clear:

// index.ts
registerBlockType( metadata, {
	edit: Edit, // this could be simplified with "import {Edit as edit}"
	save,
} );

block.json:

{
	"everything else down to viewScript": "file:./view.js",
	"attributes": {} // new
}

So maybe to help close off this ticket for now, and until things stabilize, app/block developers can add an empty object "attributes" to block.json, and change from overload 2 to overload 1 on registerBlockType.

I don't want to conflate issues, but since TypeScript was brought up, I wasn't able to get this index file working as index.ts until I came up with the solution I documented here. That is, metadata wouldn't import from block.json until tsconfig.json allowed it ... within the context of this specific project type. YMMV

Navigation Menu

Repository navigation

TS Types: `registerBlockType` signature not match the `@wordpress/create-block` scaffolded file invokation #53605

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TS Types: registerBlockType signature not match the @wordpress/create-block scaffolded file invokation #53605

Description

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Activity

gziolo commented on Aug 31, 2023

gziolo commented on Aug 31, 2023

sethstha commented on Jan 23, 2024

TonyGravagno commented on Mar 2, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

TS Types: `registerBlockType` signature not match the `@wordpress/create-block` scaffolded file invokation #53605