Headless Block Styles

Headless Block Styles brings full Gutenberg block styling to any headless frontend (e.g. Next.js) using the WordPress REST API — no WPGraphQL required. It does two things:

1. Serves the global stylesheet (wp_get_global_stylesheet()): all --wp--preset--* CSS variables, preset classes (has-*-color, has-*-font-size, …), and theme/user styles — the CSS WordPress would normally enqueue on its own frontend.
2. Computes per-block inline styles on the server with the WordPress Style Engine and adds a block_data 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.

REST API GET /wp-json/headless-block-styles/v1/stylesheet

• types — comma-separated subset of variables,presets,styles,base-layout-styles. Omit for all.
• format — json (default) or css (raw CSS, usable directly in a <link> tag).

GET /wp-json/headless-block-styles/v1/theme Returns merged theme.json settings (wp_get_global_settings()) — color palette, font sizes, layout sizes. block_data field on posts and pages Every REST-enabled post type response gains a block_data field: the parsed block tree where each block carries inlineStyles (camelCase, ready for a React style prop), classNames (editor-parity has-* classes), attributes, innerHTML, and recursive innerBlocks. inlineStyles covers the style attribute (spacing, borders, typography, colors — via the WP Style Engine), preset attributes (backgroundColor, textColor, gradient, borderColor, fontSize, fontFamily), and layout (width, height, layout.contentSize/wideSize/justifyContent). rendered_blocks field on posts and pages For rendering WordPress's HTML faithfully: returns html, css, and svg — 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 <style> 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. Not needed on a request? Exclude fields: /wp/v2/posts?_fields=id,title,content. Filters

• headless_block_styles_block_inline_styles — modify a block's computed style object. Args: $styles, $attrs.
• headless_block_styles_block_class_names — modify a block's computed class names. Args: $classnames, $attrs.
• headless_block_styles_post_types — which post types get the block_data field.

Full documentation and Next.js usage examples: github.com/FuSan21/headless-block-styles

0.1.0

• Initial release: global stylesheet and theme settings REST endpoints, block_data REST field with server-computed inline styles and class names, rendered_blocks REST field capturing render-time block-support CSS and duotone SVG.