Title: Headless Block Styles
Author: fusan
Published: <strong>21 juillet 2026</strong>
Last modified: 21 juillet 2026

---

Recherche d’extensions

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

# Headless Block Styles

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

[Télécharger](https://downloads.wordpress.org/plugin/headless-block-styles.0.1.0.zip)

 * [Détails](https://fr.wordpress.org/plugins/headless-block-styles/#description)
 * [Avis](https://fr.wordpress.org/plugins/headless-block-styles/#reviews)
 *  [Installation](https://fr.wordpress.org/plugins/headless-block-styles/#installation)
 * [Développement](https://fr.wordpress.org/plugins/headless-block-styles/#developers)

 [Support](https://wordpress.org/support/plugin/headless-block-styles/)

## Description

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)

## Installation

 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`.

## Avis

Il n’y a aucun avis pour cette extension.

## Contributeurs/contributrices & développeurs/développeuses

« Headless Block Styles » est un logiciel libre. Les personnes suivantes ont contribué
à cette extension.

Contributeurs

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

[Traduisez « Headless Block Styles » dans votre langue.](https://translate.wordpress.org/projects/wp-plugins/headless-block-styles)

### Le développement vous intéresse ?

[Parcourir le code](https://plugins.trac.wordpress.org/browser/headless-block-styles/),
consulter le [SVN dépôt](https://plugins.svn.wordpress.org/headless-block-styles/),
ou s’inscrire au [journal de développement](https://plugins.trac.wordpress.org/log/headless-block-styles/)
par [RSS](https://plugins.trac.wordpress.org/log/headless-block-styles/?limit=100&mode=stop_on_copy&format=rss).

## Journal des modifications

#### 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.

## Méta

 *  Version **0.1.0**
 *  Dernière mise à jour **il y a 4 jours**
 *  Installations actives **Moins de 10**
 *  Version de WordPress ** 6.1 ou plus **
 *  Testé jusqu’à **7.0.2**
 *  Version de PHP ** 7.4 ou plus **
 *  Langue
 * [English (US)](https://wordpress.org/plugins/headless-block-styles/)
 * Étiquettes
 * [blocks](https://fr.wordpress.org/plugins/tags/blocks/)[decoupled](https://fr.wordpress.org/plugins/tags/decoupled/)
   [gutenberg](https://fr.wordpress.org/plugins/tags/gutenberg/)[headless](https://fr.wordpress.org/plugins/tags/headless/)
   [rest-api](https://fr.wordpress.org/plugins/tags/rest-api/)
 *  [Vue avancée](https://fr.wordpress.org/plugins/headless-block-styles/advanced/)

## Évaluations

Aucun avis n’a encore été envoyé.

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

[Voir tous les avis](https://wordpress.org/support/plugin/headless-block-styles/reviews/)

## Contributeurs

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

## Support

Quelque chose à dire ? Besoin d’aide ?

 [Voir le forum de support](https://wordpress.org/support/plugin/headless-block-styles/)