{"id":342688,"date":"2026-07-21T11:07:18","date_gmt":"2026-07-21T11:07:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/headless-block-styles\/"},"modified":"2026-07-21T11:06:48","modified_gmt":"2026-07-21T11:06:48","slug":"headless-block-styles","status":"publish","type":"plugin","link":"https:\/\/am.wordpress.org\/plugins\/headless-block-styles\/","author":16967028,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.1.0","stable_tag":"0.1.0","tested":"7.0.2","requires":"6.1","requires_php":"7.4","requires_plugins":null,"header_name":"Headless Block Styles","header_author":"Fuad Hasan","header_description":"Exposes Gutenberg block inline styles and the global stylesheet over the WordPress REST API for any headless (e.g. Next.js) frontend.","assets_banners_color":"","last_updated":"2026-07-21 11:06:48","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/FuSan21\/headless-block-styles","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":46,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.1.0":{"tag":"0.1.0","author":"fusan1","date":"2026-07-21 11:06:48"}},"upgrade_notice":[],"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.1.0"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[4121,181897,148076,141196,23853],"plugin_category":[],"plugin_contributors":[272617],"plugin_business_model":[],"class_list":["post-342688","plugin","type-plugin","status-publish","hentry","plugin_tags-blocks","plugin_tags-decoupled","plugin_tags-gutenberg","plugin_tags-headless","plugin_tags-rest-api","plugin_contributors-fusan1","plugin_committers-fusan1"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/headless-block-styles.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>Headless Block Styles brings full Gutenberg block styling to any headless frontend (e.g. Next.js) using the WordPress REST API \u2014 no WPGraphQL required.<\/p>\n\n<p>It does two things:<\/p>\n\n<ol>\n<li><strong>Serves the global stylesheet<\/strong> (<code>wp_get_global_stylesheet()<\/code>): all <code>--wp--preset--*<\/code> CSS variables, preset classes (<code>has-*-color<\/code>, <code>has-*-font-size<\/code>, \u2026), and theme\/user styles \u2014 the CSS WordPress would normally enqueue on its own frontend.<\/li>\n<li><strong>Computes per-block inline styles on the server<\/strong> with the WordPress Style Engine and adds a <code>block_data<\/code> field to post REST responses, so your frontend receives ready-to-spread React style objects instead of deriving them from raw block attributes in JavaScript.<\/li>\n<\/ol>\n\n<h4>REST API<\/h4>\n\n<p><strong><code>GET \/wp-json\/headless-block-styles\/v1\/stylesheet<\/code><\/strong><\/p>\n\n<ul>\n<li><code>types<\/code> \u2014 comma-separated subset of <code>variables,presets,styles,base-layout-styles<\/code>. Omit for all.<\/li>\n<li><code>format<\/code> \u2014 <code>json<\/code> (default) or <code>css<\/code> (raw CSS, usable directly in a <code>&lt;link&gt;<\/code> tag).<\/li>\n<\/ul>\n\n<p><strong><code>GET \/wp-json\/headless-block-styles\/v1\/theme<\/code><\/strong><\/p>\n\n<p>Returns merged <code>theme.json<\/code> settings (<code>wp_get_global_settings()<\/code>) \u2014 color palette, font sizes, layout sizes.<\/p>\n\n<p><strong><code>block_data<\/code> field on posts and pages<\/strong><\/p>\n\n<p>Every REST-enabled post type response gains a <code>block_data<\/code> field: the parsed block tree where each block carries <code>inlineStyles<\/code> (camelCase, ready for a React <code>style<\/code> prop), <code>classNames<\/code> (editor-parity <code>has-*<\/code> classes), <code>attributes<\/code>, <code>innerHTML<\/code>, and recursive <code>innerBlocks<\/code>.<\/p>\n\n<pre><code>inlineStyles covers the `style` attribute (spacing, borders, typography, colors \u2014 via the WP Style Engine), preset attributes (`backgroundColor`, `textColor`, `gradient`, `borderColor`, `fontSize`, `fontFamily`), and layout (`width`, `height`, `layout.contentSize\/wideSize\/justifyContent`).\n<\/code><\/pre>\n\n<p><strong><code>rendered_blocks<\/code> field on posts and pages<\/strong><\/p>\n\n<p>For rendering WordPress's HTML faithfully: returns <code>html<\/code>, <code>css<\/code>, and <code>svg<\/code> \u2014 the rendered block markup together with the block-support CSS WordPress generates at render time (layout container rules, element link\/button colors, duotone filters) and the duotone SVG definitions. On a normal WordPress frontend this CSS is printed in a <code>&lt;style&gt;<\/code> tag and never reaches REST consumers; here it is captured from the same render as the returned HTML so the generated class names always match.<\/p>\n\n<p>Not needed on a request? Exclude fields: <code>\/wp\/v2\/posts?_fields=id,title,content<\/code>.<\/p>\n\n<h4>Filters<\/h4>\n\n<ul>\n<li><code>headless_block_styles_block_inline_styles<\/code> \u2014 modify a block's computed style object. Args: <code>$styles<\/code>, <code>$attrs<\/code>.<\/li>\n<li><code>headless_block_styles_block_class_names<\/code> \u2014 modify a block's computed class names. Args: <code>$classnames<\/code>, <code>$attrs<\/code>.<\/li>\n<li><code>headless_block_styles_post_types<\/code> \u2014 which post types get the <code>block_data<\/code> field.<\/li>\n<\/ul>\n\n<p>Full documentation and Next.js usage examples: <a href=\"https:\/\/github.com\/FuSan21\/headless-block-styles\">github.com\/FuSan21\/headless-block-styles<\/a><\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>headless-block-styles<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install via Plugins \u2192 Add New.<\/li>\n<li>Activate the plugin through the Plugins menu.<\/li>\n<li>Fetch <code>\/wp-json\/headless-block-styles\/v1\/stylesheet<\/code> from your frontend and inject the CSS, and read <code>block_data<\/code> from your post\/page REST responses.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20require%20wpgraphql%20or%20any%20other%20plugin%3F\"><h3>Does this require WPGraphQL or any other plugin?<\/h3><\/dt>\n<dd><p>No. It only uses the built-in WordPress REST API and Style Engine.<\/p><\/dd>\n<dt id=\"are%20the%20endpoints%20public%3F\"><h3>Are the endpoints public?<\/h3><\/dt>\n<dd><p>The stylesheet and theme endpoints are public, matching what WordPress already outputs publicly on its own frontend. The <code>block_data<\/code> field follows the visibility of the post it belongs to \u2014 private and password-protected content is not exposed.<\/p><\/dd>\n<dt id=\"does%20the%20stylesheet%20include%20the%20core%20block%20library%20css%3F\"><h3>Does the stylesheet include the core block library CSS?<\/h3><\/dt>\n<dd><p>No, same as the WordPress global stylesheet itself. For full parity, import <code>@wordpress\/block-library<\/code> styles in your frontend or copy <code>wp-includes\/css\/dist\/block-library\/style.css<\/code>.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial release: global stylesheet and theme settings REST endpoints, <code>block_data<\/code> REST field with server-computed inline styles and class names, <code>rendered_blocks<\/code> REST field capturing render-time block-support CSS and duotone SVG.<\/li>\n<\/ul>","raw_excerpt":"Exposes Gutenberg block inline styles and the global stylesheet over the REST API for headless frontends like Next.js.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/342688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=342688"}],"author":[{"embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/fusan1"}],"wp:attachment":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=342688"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=342688"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=342688"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=342688"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=342688"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=342688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}