[FIXED] Expose default gutenberg block styles in WordPress rest API

Issue

We're using the WordPress REST API to power a static site. The site is "headless" in the sense that we don't use a WordPress theme; we rely on the content being exposed via the REST API.

Some of the default Gutenberg blocks - the Buttons block for instance - have styles with hashed class names associated with them that don't seem to be exposed in the API. This would be kind of ok if the class names were predictable but, since they aren't, we have no way of providing the styles on our end.

If we do render the blocks in a theme, the styles are rendered in the footer

Here's an example of the style block for the default Buttons block looks like in a WordPress theme

The Rest API endpoint exposes the markup in content.rendered (including the classnames) but no styles

Is this expected behavior for using Gutenberg and the WordPress REST API? If so, is the correct solution to expose the styles via a custom field (for lack of a better term) on the API?

Solution

The unique id (hash) in the classnames are randomly generated each time the blocks are parsed, even when directly calling the REST API. Unfortunately, the inline style attributes like .alignleft are absent from the content markup in the REST API. Being a REST API, it makes sense that style specific information isn't included; this keeps data and presentation of the data separate. It also prevents bloating the API by including style-specific information that would be rarely used outside of WordPress theme.

In your scenario, if you wish to style the resulting HTML content without worrying about the unique id, I'd suggest using css partial selectors, eg:

div[class*="wp-container-"] .wp-block-button{
    ...
}

Alternatively, as you mentioned, its possbile to extend the REST API to include the styles. While I haven't built a working example of this for styles, when blocks where introduced I ended up extended the REST API to include extra meta data. I'd suggest looking at render_block_data to handle adding in the styles into the content.

Eg. For the buttons block, the serialized content stored in the database as:

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

By using parse_blocks() you can obtain all the block properties into an array and get style information that way. I think this approach is do-able if you just add the generated classnames and not the inline styles. I am keen to know if you find a better way...

Answered By - S.Walsh