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]