There are a few steps to creating a new block. To make it simpler we leverage Hygen to generate a base implementation of a block.

To get started, create a block in DatoCMS and then run the following command:

npm run block {block-name}

This script will create some files and update some files and then try to sync the GraphQL codegen.

If the block wasn’t created in Dato yet this sync will fail, but the files are still created and modified. After you have fixed the block in Dato you should run npm run sync-gql-ts instead, otherwise your file modifications will be made twice.

Then all you have to do is modify your GraphQL query (src/graphql/fragments/blocks/{block-name}.graphql) and start building your block component (src/lib/framework/blocks/{block-name}/index.tsx)!