Headless Block Styles

Headless Block Styles is a WordPress plugin that exposes Gutenberg block styling to headless frontends through the REST API. It addresses the challenge of replicating WordPress block and theme styles in decoupled sites such as those built with Next.js without requiring WPGraphQL.

The plugin performs two core functions. It serves the global stylesheet generated by wp_get_global_stylesheet, which includes all CSS variables for presets, preset classes such as has--color and has--font-size, and theme or user styles that WordPress would normally enqueue on its frontend. It also uses the WordPress Style Engine to compute per-block inline styles on the server and injects them into post REST responses as a block_data field, supplying ready-to-use React style objects to the frontend.

A dedicated REST endpoint at /wp-json/headless-block-styles/v1/stylesheet accepts query parameters for types, allowing a comma-separated subset of variables, presets, styles, or base-layout-styles, or returns all when omitted. The format parameter supports json output. These capabilities allow frontend applications to receive styling information directly from WordPress without client-side derivation from raw block attributes.

The plugin is intended for developers building decoupled WordPress sites. It is delivered as a free plugin available through the official WordPress.org directory and installed directly within WordPress.