Anchor tags are returning null for custom ACF blocks

[brysonchiu]

I origonally opened this ticket, https://github.com/wp-graphql/wpgraphql-acf/issues/204, but Jason Bahl directed me to open one here instead.

Steps to reproduce

1. Create a ACF block type and enable anchor attribute in the block type settings under the "Supports" tab.
2. Add the block to a page and include an anchor to the block.
3. Query:

query NewQuery {
  page(id: "/[PAGE-PATH]", idType: URI) {
    editorBlocks {
      ... on [BLOCK] {
        attributes {
          anchor
        }
      }
    }
  }
}

Anchors work for core blocks, but not for ACF blocks

[EthanCPP]

In includes/Field/BlockSupports/Anchor.php::register the field is resolved by retrieving the HTML for the block and returning the ID attribute set by Wordpress. This is returning null.

Within the $block array you can access ['attrs']['anchor'] which gives us the anchor tag without the need for decomposing the block. To test this I have replaced the resolve function with:

return $block['attrs']['anchor'];

This seems to work.

As I don't like to overwrite plugin code I have defined a new field, blockAnchor in my theme's functions.php - this can be accessed the same way the standard anchor field would be.

register_graphql_field('BlockWithSupportsAnchor', 'blockAnchor', [
    'type'        => 'string',
    'description' => __('The anchor field for the block.', 'wp-graphql-content-blocks'),
    'resolve'     => static function ($block) {
        return $block['attrs']['anchor'] ?? null;
    }
]);

[colinmurphy]

Just noting this might be resolved in the future as per discussion in the PR #328

[theodesp]

@brysonchiu I think you need to add this to your block.json

supports: {
    anchor: true
}

Then you should be able to extract the "anchor" attribute from the Block.

Let us know if that worked.

[marco910]

@theodesp Even when the block.json contains supports.anchor=true and supports.id=true it didn't work in my project.

I had to add a PHP file to render the block (renderTemplate property). Inside the render template, the block anchor must be returned in an HTML. Some basic code like this is enough:

<?php

// Get block id/anchor and classname
$blockAnchor = isset($block['anchor']) ? $block['anchor'] : "";
$blockClassName = isset($block['className']) ? $block['className'] : "";

?>

<div id="<?php echo esc_attr($blockAnchor); ?>" class="<?php echo esc_attr($blockClassName); ?>"></div>

Only if the file looked like this and was added as renderTemplate in the block.json file, I got the block anchor returned in GraphQL. When removing the file or renderTemplate prop, the anchor wasn't returned anymore.

This seems to me like kind of a bug. It makes no sense to me how the anchor is related to the render template.