WordPress JSON api, Gutenberg styles

[ad_1]

WordPress: 6.5.3
Theme: Twenty Twenty-FourVersion: 1.1
No Plugins

I am trying to use WP as headless cms and render the content using Astro.

I am able to take the json: https://…/wp-json/wp/v2/pages/9 and render the html (content.rendered).

This html includes classes like ex:

`<div class=\”wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-2 wp-block-group-is-layout-flex\”>`

Since i want to render those classes with the propper Gutenberg styling, in my project i import:

import ‘@wordpress/block-library/build-style/common.css’;
import ‘@wordpress/block-library/build-style/style.css’;
import ‘@wordpress/block-library/build-style/theme.css’;

From the corresponding package: (https://github.com/WordPress/gutenberg/tree/90e3d4332e568297cabbb54dfe8d39ad30dadc4d/packages/block-library)

But, when this html is rendered, the flexbox arrangement is totally missing. For example, the class: `is-layout-flex` is not working. Does not have display flex applied and the whole post structure looks broken.

API return the HTML as you see it above. BUT `wordpress/block-library` package referrence this class `is-layout-flex` NOT in any of common.css, styles.css or theme.css (as it is described in the github docs), but in editor.css and ./group/editor.

And this is not the only problem.

When i include all the css files, where `is-layout-flex` is found, i still get broken layout structure, because in all of this css files, this class is referenced only in combination with other classes ex:

`./editor.css:.wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child {`

Why API does not include those classes in the content.rendered property?

And how can i use Gutenberg styles externally with headless WP?

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer