WPGraphQL attributes missing with core/table array attributes

[alecgeatches]

WPGraphQL results for table attributes with array values have Array strings and are missing children.

Reproduction

1. Create a post containing a table, e.g.

   

   <!-- wp:table -->
   <figure class="wp-block-table"><table><tbody><tr><td>Header A</td><td>Header B</td></tr><tr><td>Value 1</td><td>Value 2</td></tr></tbody></table></figure>
   <!-- /wp:table -->

2. Using the created post's ID, query for blocks/innerBlocks data:

   query NewQuery {
     post(id: 431, idType: DATABASE_ID) {
       blocksData {
         blocks {
           attributes {
             name
             value
           }
           id
           name
           innerBlocks {
             attributes {
               name
               value
             }
             id
             name
             parentId
           }
         }
       }
     }
   }

3. See "Array" in results:

   {
     "data": {
       "post": {
         "blocksData": {
           "blocks": [
             {
               "attributes": [
                 /* ... */
                 {
                   "name": "head",
                   "value": "Array"
                 },
                 {
                   "name": "body",
                   "value": "Array"
                 },
                 {
                   "name": "foot",
                   "value": "Array"
                 }
               ],
               "name": "core/table",
               "innerBlocks": null
             }
           ]
         }
       }
     }
   }

   Note that the head, body, and foot attributes all have a value of "Array", rather than an actual array. It's not possible to reconstruct the table.

Expected results

The REST API returns array values as expected:

{
  "blocks": [
    {
      "name": "core/table",
      "attributes": {
        /* ... */
        "head": [],
        "body": [
          {
            "cells": [
              {
                "content": "Header A",
                "tag": "td"
              },
              {
                "content": "Header B",
                "tag": "td"
              }
            ]
          },
          {
            "cells": [
              {
                "content": "Value 1",
                "tag": "td"
              },
              {
                "content": "Value 2",
                "tag": "td"
              }
            ]
          }
        ],
        "foot": []
      }
    }
  ]
}

Fixing it

At the time of writing, WPGraphQL BlockAttribute is defined as a { name: String, value: String } combination:

register_graphql_object_type(
    'BlockAttribute',
    [
        'description' => 'Block attribute',
        'fields'      => [
            'name'  => [
                'type'        => [ 'non_null' => 'String' ],
                'description' => 'Block data attribute name',
            ],
            'value' => [
                'type'        => [ 'non_null' => 'String' ],
                'description' => 'Block data attribute value',
            ],
        ],
    ],
);

Possible fixes could be to make the value support multiple types (String|Array) if that's possible in GraphQL, or we could continue to use the String type and put complex data types as JSON, e.g.

"blocksData": {
  "blocks": [
    {
      "attributes": [
        /* ... */
        {
          "name": "head",
          "value": "[]"
        },
        {
          "name": "body",
          "value": "{\"cells\": [{\"content\": \"Header A\", \"tag\": \"td\"}, {\"content\": \"Header B\",\"tag\": \"td\"}]}"
        },
        {
          "name": "foot",
          "value": "[]"
        }
      ],
      "name": "core/table",
      "innerBlocks": null
    }
  ]
}

[james-tyner]

Just wanted to note here that we're having the same issue in our attempt to use this API at @sfstandard. It's a blocker for our use case.

[alecgeatches]

@james-tyner We'll look at getting a fix for table "Array" values released soon. Thanks for letting us know!

[james-tyner]

@alecgeatches great! I just want to be clear that this issue doesn't affect only tables -- it's any block with data in an array format. In our case, we're seeing issues with blocks on our homepage that come from https://github.com/alleyinteractive/wp-curate

[alecgeatches]

Thank you for the additional information, @james-tyner. If possible, could you provide the specific block you're having trouble with from the WP Curate plugin, or even a whole reproduction like the issue content above? Just want to make sure that our solution adequately covers your case. Thank you!

[alecgeatches]

I made an initial PR to solve the issue here: Fix "Array" values in GraphQL block array data #61. @james-tyner would JSON representation of array values work for your use-case? Thank you!

[james-tyner]

So fast! I'll pull in @Zamfi99 here who can take a look at the fix and our implementation