Select one or more tags, then press “Search Plugins”

Find Plugin with any / all of the selected criteria
Search Plugin

Headless Block Styles Wordpress Plugin - Rating, Reviews, Demo & Download

Headless Block Styles Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

Plugin 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

Screenshots

No screenshots provided

Similar Plugins:

Rating Widget: Post Rating, 5 Star Rating, Reviews, Thumbs Up & Down, Reaction WordPress To PDF, Download As PDF Document Of Any WordPress Post Types, Download Post As PDF, PDF Viewer, PDF Block, View PDF On WordPress – Document Engine Default ThumbnailReviews And Rating – Google Reviews

Reviews & Comments