Gutenberg Blocks

Blocks are primarily defined in a .tsx file inside the blocks/ folder. Blocks should be organised within subfolders, depending on their purpose and context.

For example:

• blocks/layout/section.tsx
• blocks/projects/single-project-tile.tsx
• blocks/content/button-row.tsx

ACF Fields

ACF fields can be attached to any block type. Use ACF fields for complex data.

ACF fields aren’t passed directly to blocks — rather the ACF fields must be selected using GraphQL files. This may seem like extra work, but it actually gives us the opportunity to pull the exact data we need on the frontend — for example, we can pull complex data about a post directly from a ‘Post Object’ ACF field. It also ensures that our block props are fully typed, thanks to GraphQL → TypeScript codegen.

Read more →

GraphQL

Each block can have a single .graphql file sitting alongside the .tsx file (eg. /blocks/sections/newsletter.tsx and /blocks/sections/newsletter.graphql)

The GraphQL file can query any data from the CMS, as well as any ACF fields attached to the block.

Read more →