search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.5k stars 4.2k forks source link

Way to convert theme.json to theme.css in Gutenberg Editor #49007

Closed salahtobok closed 7 months ago

salahtobok commented 1 year ago

Hi guys I'm salahtobok , I'm interested in developing a Blog websites using both using Headless approach which provided by Wordpress ( Rest Api ) & SPA Technologies ( ex : Angular ) ; So my request is the following ; if you can give me an idea to convert theme.json to theme.css, because that is so important for me when I start coding a ( blog post page ) using angular while I can't use theme.json directly to style ( post content component ) which its data was generated by Gutenberg Editor .

Note : in the previous version of Gutenberg Editor I easily was able to to code ( blog post page ) because the styles of Gutenberg Editor style-editor.css was originally generated with ( twentytwentyone theme ), but now with the new feature of theme.json , everything has changed, see the picture below .

WhatsApp Image 2023-03-11 at 9 58 29 AM

Thank you in advance .

tellthemachines commented 1 year ago

Interesting question! With theme.json things are a little more complex than they used to be, because now the CSS styles are generated dynamically from multiple sources: base core styles, theme styles and user configured styles (that can be set in the global styles interface in the site editor).

I guess it would be possible to extend the REST API to create an endpoint for global styles CSS that could then be used in a SPA front end.

If you're happy to use PHP, the wp_get_global_stylesheet function will output the merged core, theme and user styles in CSS format.

I hope this helps!