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.tsxblocks/projects/single-project-tile.tsxblocks/content/button-row.tsxACF fields can be attached to any block type. Use ACF fields for complex data.
ACF fields are passed directly to blocks — rather the ACF fields must be selected using GraphQL files. This may seem like a bunch of work, but it actually gives us the opportunity to pull the exact data we need — for example, we can pull metadata for posts directly from 'Post Object' fields. It also allows us to have great TypeScript support for all ACF fields attached to a block, automatically.
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.