Blocks FAQ

"What if the block is missing some attributes?"

If the block does not have any attributes or has only a few of them declared in the block.json for that block (you can view the block.json file for the block at https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/), you can still try to extend the block API by declaring additional attributes for that block.

Follow the filters reference guide to create a block that uses the additional_block_attributes property. The attributes will then be available to query from that block.

class CoreCode extends WPGraphQL\ContentBlocks\Blocks\Block
{
    protected ?array $additional_block_attributes = array(
      // Write your attributes here
    );
}

"Can I style the block differently?""

Yes, you can style the block in many ways, choosing to ignore some of the attributes altogether. You can also use an external React Library to style the block, such as Material UI or ChakraUI.

Bear in mind that this will almost always result in a degraded user editing experience, as the styles in the WordPress block editor view won't match the styles of the rendered headless page.

"What if the block contains custom JavaScript assets?"

Some Core blocks include JavaScript assets that are injected into the WordPress page so they can run in the front view. Many dynamic blocks use this functionality to include user interactivity. Since React is not bundled as a dependency in the browser, the client-side code that WordPress ships to the frontend in traditional WordPress sites typically consists of plain JavaScript or jQuery.

To review and handle bundled JavaScript assets, consider these options:

• Include them in your code: This is not recommended, as React does not play well with plain JavaScript and jQuery, which may lead to compatibility issues.
• Rewrite them as React components: You can attempt to rewrite the code in React. If the bundled code can be understood and rewritten with low effort, then this could be a viable approach.
• Use an equivalent React Component from a library: A simpler alternative is to find a compatible React package and use it instead of replicating the block's interactivity. This can often free the developer from implementing the functionality from scratch.

Inevitably, this is a common challenge when using Blocks in a Headless Website setup, so it's up to you to weigh the pros and cons of each approach.