How to Query Blocks

Faust.js™

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
                }
            }
        }
    }
}
Code language: PHP (php)

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
      }
    }
  }
}
Code language: JavaScript (javascript)

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!"
                    }
                }
            ]
        }
    },
}
Code language: JSON / JSON with Comments (json)

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;
}

Code language: PHP (php)

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
                }
            }
        }
    }
}
Code language: PHP (php)

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:

PostEditorBlock interface type implementations

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:

PageEditorBlock interface type implementations

NodeWithPostEditorBlocks

An interface type which represents a list of PostEditorBlock types.

Here is an example query:

// GraphQL
<em>fragment</em> Paragraph <em>on</em> CoreParagraph {
    attributes {
        content
    }
}

<em>fragment</em> Gallery <em>on</em> CoreGallery {
    attributes {
        images
    }
}

<em>query</em> GetAllPostsWhichSupportPostEditorBlocks {
    nodeByUri(uri: "/posts/hello-world") {
    ... <em>on</em> 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
      }
    }
  }
}Code language: HTML, XML (xml)

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
      }
    }
  }
}
Code language: PHP (php)

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
}Code language: JavaScript (javascript)

Here is an example query:

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

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
        },
      ]
    }
  },
}
Code language: JSON / JSON with Comments (json)

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
        }
    }
}
Code language: PHP (php)