BlockAttributes should return all attributes

[dChiamp]

BlockAttributes is not returning all attributes set in blocks.

You can see in graphiQL that the title's textAlign is properly returning "center", but textColor is not "red". (see attached images)

ideally all blocks would include these default attributes:

     ... on BlockAttributes {
              content
              textAlign
              fontSize
              textColor
              className
              backgroundColor
            }

[rsm0128]

As you can see in the screenshots, the textColor, backgroundColor works for the blocks including heading block.

But in your test case, the color is not applied to the heading. Instead it is applied to the child span. You can confirm it in Code editor view.

In my example, the markup code is <h2 class="has-text-align-center custom-class has-vivid-red-color has-pale-pink-background-color has-text-color has-background has-medium-font-size"><span>Ths is heading block</span>.</h2> As you can see all the classes appended to the h2 tag. But you should have color classes attached to the span in your markup.

[rsm0128]

Here is the better example.

1. Difference In Visual editor

2. Difference in Code editor

3. Difference in WP-GraphQL

[drewbaker]

I can confirm this not working correctly:

<!-- wp:heading {"style":{"color":{"text":"#ef275c","background":"#0d0921"}}} -->
<h2 class="has-text-color has-background" style="background-color:#0d0921;color:#ef275c">Test heading</h2>
<!-- /wp:heading -->

query MyQuery {
  page(id: "example-page", idType: URI) {
    blocks {
      ... on CoreHeadingBlock {
        name
        attributes {
          ... on CoreHeadingBlockAttributes {
            content
            fontSize
            backgroundColor
            textColor
          }
        }
      }
    }
  }
}

  "data": {
    "page": {
      "blocks": [
        {},
        {
          "name": "core/heading",
          "attributes": {
            "content": "Test heading",          
            "fontSize": "",
            "backgroundColor": "",
            "textColor": ""
          }
        },
        {}
      ]
    }
  }

[rsm0128]

I can see it doesn't work with custom values. Let me handle the case.

[rsm0128]

@drewbaker @dChiamp I fixed it and pushed to dev branch. Please check and let me know opinion. Thanks

[dChiamp]

That update is working!

Is it possible for the preset color options to return a hex like the custom colors? You can see the custom background color is a hex while the preset option returns the name string of the color:

[drewbaker]

Or better yet, textColor.name and textColor.code?

[rsm0128]

Please check the latest commit. I added backgroundColorCode, textColorCode, and fontSizeValue attribute

[drewbaker]

Please check the latest commit. I added backgroundColorCode, textColorCode, and fontSizeValue attribute

Is this on all blocks that support font/background color? Like paragraph, heading? (I think maybe blockquote too?)

[rsm0128]

Yes, it supports all the blocks with backgroundColor, textColor and fontSize setting

[dChiamp]

awesome! tested and confirmed its working: ![Uploading Screen Shot 2021-04-19 at 1.52.23 PM.png…]()