Title: Headless Block Styles
Author: fusan
Published: <strong>2026-يىلى 21-ئىيۇل</strong>
Last modified: 2026-يىلى 21-ئىيۇل

---

قىستۇرما ئىزدە

![](https://s.w.org/plugins/geopattern-icon/headless-block-styles.svg)

# Headless Block Styles

 يازغۇچى [fusan](https://profiles.wordpress.org/fusan1/)

[چۈشۈر](https://downloads.wordpress.org/plugin/headless-block-styles.0.1.0.zip)

 * [تەپسىلاتلار](https://ug.wordpress.org/plugins/headless-block-styles/#description)
 * [باھالاشلار](https://ug.wordpress.org/plugins/headless-block-styles/#reviews)
 *  [ئورنىتىش](https://ug.wordpress.org/plugins/headless-block-styles/#installation)
 * [ئىجادىيەت](https://ug.wordpress.org/plugins/headless-block-styles/#developers)

 [قوللاش](https://wordpress.org/support/plugin/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](https://github.com/FuSan21/headless-block-styles)

## ئورنىتىش

 1. Upload the `headless-block-styles` folder to `/wp-content/plugins/`, or install
    via Plugins  Add New.
 2. Activate the plugin through the Plugins menu.
 3. Fetch `/wp-json/headless-block-styles/v1/stylesheet` from your frontend and inject
    the CSS, and read `block_data` from your post/page REST responses.

## FAQ

### Does this require WPGraphQL or any other plugin?

No. It only uses the built-in WordPress REST API and Style Engine.

### Are the endpoints public?

The stylesheet and theme endpoints are public, matching what WordPress already outputs
publicly on its own frontend. The `block_data` field follows the visibility of the
post it belongs to — private and password-protected content is not exposed.

### Does the stylesheet include the core block library CSS?

No, same as the WordPress global stylesheet itself. For full parity, import `@wordpress/
block-library` styles in your frontend or copy `wp-includes/css/dist/block-library/
style.css`.

## باھالاشلار

بۇ قىستۇرمىغا تېخى باھا يېزىلمىدى.

## تۆھپىكار ۋە ئىجادكار

«Headless Block Styles» كودى ئوچۇق يۇمشاق دېتال. تۆۋەندىكى كىشىلەر بۇ قىستۇرمىغا
تۆھپە قوشقان.

تۆھپىكار

 *   [ fusan ](https://profiles.wordpress.org/fusan1/)

[«Headless Block Styles» نى تىلىڭىزغا تەرجىمە قىلىڭ](https://translate.wordpress.org/projects/wp-plugins/headless-block-styles)

### ئىجادىيەتكە قىزىقامسىز؟

[كودقا كۆز يۈگۈرتۈپ](https://plugins.trac.wordpress.org/browser/headless-block-styles/)،
[SVN خەزىنە](https://plugins.svn.wordpress.org/headless-block-styles/) تەكشۈرۈپ 
ياكى [RSS](https://plugins.trac.wordpress.org/log/headless-block-styles/?limit=100&mode=stop_on_copy&format=rss)
ئارقىلىق [ئىجادىيەت خاتىرىسى](https://plugins.trac.wordpress.org/log/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.

## Meta

 *  Version **0.1.0**
 *  ئاخىرقى يېڭىلانغان ۋاقىت **1 ئاي بۇرۇن**
 *  ئاكتىپ ئورنىتىش سانى **10 دىن ئاز**
 *  WordPress نەشرى ** 6.1 ياكى يۇقىرى **
 *  **7.0.4** دا سىنالغان
 *  PHP نەشرى ** 7.4 ياكى يۇقىرى **
 *  تىل
 * [English (US)](https://wordpress.org/plugins/headless-block-styles/)
 * بەلگە
 * [blocks](https://ug.wordpress.org/plugins/tags/blocks/)[decoupled](https://ug.wordpress.org/plugins/tags/decoupled/)
   [gutenberg](https://ug.wordpress.org/plugins/tags/gutenberg/)[headless](https://ug.wordpress.org/plugins/tags/headless/)
   [rest-api](https://ug.wordpress.org/plugins/tags/rest-api/)
 *  [ئالىي كۆرۈنۈش](https://ug.wordpress.org/plugins/headless-block-styles/advanced/)

## دەرىجە

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/headless-block-styles/reviews/#new-post)

[بارلىق ئىنكاسنى كۆرسەت](https://wordpress.org/support/plugin/headless-block-styles/reviews/)

## تۆھپىكار

 *   [ fusan ](https://profiles.wordpress.org/fusan1/)

## قوللاش

چۈشەندۈرۈشىڭىز بارمۇ؟ ياردەم لازىممۇ؟

 [قوللاش مۇنبىرىنى كۆرسەت](https://wordpress.org/support/plugin/headless-block-styles/)