How to query blocks

The WPGraphQL Content Blocks plugin extends the WPGraphQL schema with new graphql types and fields. This how to guide gives a brief overview of the different query strategies you can use.

EditorBlock

• An interface type which represents a single block that is available in the block editor.
• A base type for all other object block types.

Here is an example query:

GraphQL

fragment Paragraph on CoreParagraph {
    attributes {
        content
    }
}

query GetAllPostsWhichSupportBlockEditor {
    posts {
        edges {
            node {
                # editorBlocks field represents array of EditorBlock
                editorBlocks {
                    # fields from the interface
                    __typename
                    clientId
                    parentClientId
                    name
                    ...Paragraph
                }
            }
        }
    }
}

NodeWithEditorBlocks

• An interface type which represents a list of EditorBlock types.

Here is an example query:

GraphQL

fragment Paragraph on CoreParagraph {
    attributes {
        content
    }
}

query GetAllPostsWhichSupportBlockEditor {
    nodeByUri(uri: "/posts/hello-world") {
    ... on NodeWithEditorBlocks {
      editorBlocks {
        __typename
        clientId
        parentClientId
        name
        ...Paragraph
      }
    }
  }
}

and here is the result:

JSON

{
    "data": {
        "nodeByUri": {
            "editorBlocks": [
                {
                    "__typename": "CoreParagraph",
                    "clientId": "642d960f45c05",
                    "parentClientId": null,
                    "name": "core/paragraph",
                    "attributes": {
                        "content": "Welcome to WordPress. This is your first post. Edit or delete it, then start writing!"
                    }
                }
            ]
        }
    },
}

How to query posts associated with a specific Post type

The plugin also offers support for the allowed_block_types_all filter which controls which blocks are allowed in the block editor.

If you set a filter that returns a different list of blocks per post type the plugin will register a more specific set of interfaces for each post type.

PHP

add_filter( 'allowed_block_types_all', 'set_allowed_block_types', 10, 2 );
/**
 * Set allowed Gutenberg block types
 */
function set_allowed_block_types( $allowed_blocks, $editor_context ) {
    // return blocks types for type `Post`
    if ( isset( $editor_context->post ) && $editor_context->post instanceof WP_Post && 'post' === $editor_context->post->post_type ) {
        return  [
           'core/image',
           'core/paragraph'
        ];
     }
    // return blocks types for any other post type that supports the `editor` feature such as `Page`
    $allowed_blocks = array(
        'core/image',
        'core/columns',
        'core/column',
        'core/gallery',
        'core/paragraph'
    );
    return $allowed_blocks;
}

When you have the above filter enabled, the plugin will expose the following interfaces in the schema.

NOTE: We assume that your site has only two posts types that support the editor feature: Post and Page.

Here is an example video demostration of this feature in action:

In this clip, the user demostrates how to use the `allowed_block_types_all` filter to assign specific blocks per post type. It highlights type of the editorBlock field before and after using that filter.

PostEditorBlock

• A type that implements the EditorBlock interface and represents a single block that is available for the Post type.

Here is an example query:

GraphQL

fragment Paragraph on CoreParagraph {
    attributes {
        content
    }
}

query GetAllPostsWhichSupportBlockEditor {
    posts {
        edges {
            node {
                # editorBlocks field represents array of EditorBlock
                editorBlocks {
                    # fields from the interface
                    __typename
                    clientId
                    parentClientId
                    name
                    ...Paragraph
                }
            }
        }
    }
}

Notice that the query is exactly the same as before. However, now the type of the editorBlocks is different. Instead of [EditorBlock] it is [PostEditorBlock]. You can see the resolved type when you search for the type in the documentation section:

Expanding the PostEditorBlock interface docs, shows that the type only implements the two blocks we declared in the allowed_block_types_all filter:

PageEditorBlock

• A type that implements the EditorBlock interface and represents a single block that is available for the Page type.

Same as above, the PageEditorBlock implements the list of for five allowed block types:

NodeWithPostEditorBlocks

• An interface type which represents a list of PostEditorBlock types.

Here is an example query:

GraphQL

fragment Paragraph on CoreParagraph {
    attributes {
        content
    }
}

fragment Gallery on CoreGallery {
    attributes {
        images
    }
}

query GetAllPostsWhichSupportPostEditorBlocks {
    nodeByUri(uri: "/posts/hello-world") {
    ... on NodeWithPostEditorBlocks {
      editorBlocks {
        __typename
        clientId
        parentClientId
        name
        # query the CoreParagraph here since it is allowed
        ...Paragraph

        # We cannot query the CoreGallery block here because this block type is not allowed
        # ...Gallery
      }
    }
  }
}

NodeWithPageEditorBlocks

• An interface type which represents a list of PageEditorBlock types.

Here is an example query:

GraphQL

fragment Paragraph on CoreParagraph {
    attributes {
        content
    }
}

fragment Gallery on CoreGallery {
    attributes {
        images
    }
}

query GetAllPostsWhichSupportPageEditorBlocks {
    nodeByUri(uri: "/about") {
    ... on NodeWithPageEditorBlocks {
      editorBlocks {
        __typename
        clientId
        parentClientId
        name
        # query the CoreParagraph here since it is allowed
        ...Paragraph

        # Since the CoreGallery block here is allowed, we can query it as well
        ...Gallery
      }
    }
  }
}

BlockWithSupportsAnchor

• An interface type which represents a single block that supports an anchor field.
• This is registered for every block that contains the following supports config in their block.json.

block.json

supports: {
    anchor: true
}

Here is an example query:

GraphQL

nodeByUri(uri: "/posts/hello-world") {
    ... on NodeWithPostEditorBlocks {
      editorBlocks {
        name
        ... on BlockWithSupportsAnchor {
          anchor
        }
      }
    }
  }

And here is a result assuming that one paragraph has an anchor field set as "hello-world":

{
  "data": {
    "nodeByUri": {
      "editorBlocks": [
        {
          "name": "core/paragraph",
          "anchor": "hello-world"
        },
        {
          "name": "core/columns",
          "anchor": null
        },
        {
          "name": "core/column",
          "anchor": null
        },
        {
          "name": "core/paragraph",
          "anchor": null
        },
      ]
    }
  },
}

note

The BlockWithSupportsAnchor will be attached to both the block and the block attributes object, so you can request this field from both places as well:

editorBlocks {
    name
    ... on CoreParagraph {
        # Request from the block itself
        anchor
        attributes {
            # Request from the block attributes object
            anchor
        }
    }
}