Syncing Gutenberg Editor Styles with Headless Frontend (Next.js or anything)

[feroz39]

Hi Gutenberg Community,

I'm currently working on a headless WordPress project where the backend is powered by WordPress and the frontend is built using Next.js. One of the main challenges I'm facing is ensuring that the styles configured in the Gutenberg editor (e.g., font sizes, colors, and other block-specific styles) are reflected accurately on the frontend.

Challenges:

Gutenberg generates numerous utility classes like is-content-justification-center and wp-block-buttons-is-layout-flex. Replicating these manually is cumbersome and error-prone.
Inline styles and block-level attributes (e.g., typography, colors) are not easily accessible unless parsed and re-applied programmatically.
The theme.json file provides a great foundation for global styles, but translating its configuration into a frontend-compatible format requires additional work.

Questions for the Community:

Is there an existing method or tool for exposing all block styles (both default and custom) for headless frontends?
Has anyone successfully used the theme.json file to dynamically generate frontend styles?
Are there recommended approaches or best practices to achieve consistent styling between Gutenberg and a decoupled frontend?

What I’ve Tried So Far:

import {compileCSS} from '@wordpress/style-engine'
import themeJson from '@/lib/theme.json'

export const getStyleFromThemeJson = () => {
  let style: string = ''

  const settings = themeJson?.settings
  const styles = themeJson?.styles

  style += '/* Font Face */\n' + getFontFace(settings)
  style += '/* Preset */\n' + getPreset(settings)
  style += '/* Block Styles */\n' + getBlockStyles(styles?.blocks)
  style += '/* Preset Classes */\n' + getPresetClasses(settings)
  style += '/* Elements */\n' + getElements(styles?.elements)

  const globalStyles = compileCSS(themeJson?.styles)
  style += `body {${globalStyles}\n}`

  return style
}

const getFontFace = (settings: any) => {
  let style: string = ''

  if (settings?.typography && settings?.typography?.fontFamilies) {
    settings?.typography?.fontFamilies.forEach((fontFamily: {fontFace: any[]}) => {
      const fontFace = fontFamily.fontFace
        ? fontFamily.fontFace.map((font) => {
            return ` @font-face {\nfont-family: ${font.fontFamily};\nfont-weight: ${font.fontWeight};\nfont-style: ${font.fontStyle};\nsrc: '${settings?.themePath}${font.src[0].slice(6, -1)}';\n}\n`
          })
        : ''
      style += fontFace
    })
  }
  return style
}
const getPreset = (settings: any) => {
  const presets: string[] = []

  // colors
  if (settings?.color && settings?.color?.palette) {
    settings?.color?.palette.forEach((color: {color: string; slug: string; name: string}) => {
      presets.push(`--wp--preset--color--${color.slug}: ${color.color};`)
    })
  }

  // gradients
  if (settings?.color && settings?.color?.gradients) {
    settings?.color?.gradients.forEach((gradients: {gradient: string; slug: string; name: string}) => {
      presets.push(`--wp--preset--gradient--${gradients.slug}: ${gradients.gradient};`)
    })
  }

  // font sizes
  if (settings?.typography && settings?.typography?.fontSizes) {
    settings?.typography?.fontSizes.forEach((fontSize: {size: string; slug: string}) => {
      presets.push(`--wp--preset--font-size--${fontSize.slug}: ${fontSize.size};`)
    })
  }

  // font families
  if (settings?.typography && settings?.typography?.fontFamilies) {
    settings?.typography?.fontFamilies.forEach((fontFamily: {fontFamily: string; slug: string}) => {
      presets.push(`--wp--preset--font-family--${fontFamily.slug}: ${fontFamily.fontFamily};`)
    })
  }

  // spacing
  if (settings?.spacing && settings?.spacing?.spacingSizes) {
    settings?.spacing?.spacingSizes.forEach((spacingSize: {size: string; slug: string}) => {
      presets.push(`--wp--preset--spacing--${spacingSize.slug}: ${spacingSize.size};`)
    })
  }

  return `:root {\n  ${presets.join('\n  ')}\n}\n`
}
const getPresetClasses = (settings: any) => {
  let presetsClasses: string = ``

  // colors
  if (settings?.color && settings?.color?.palette) {
    settings?.color?.palette.forEach((color: {color: string; slug: string; name: string}) => {
      presetsClasses += `.has-${color.slug}-color {color: ${color.color};}\n.has-${color.slug}-background-color {background-color: ${color.color};}\n.has-${color.slug}-border-color {border-color: ${color.color};}\n.has-${color.slug}-link-color {color: ${color.color};}`
    })
  }

  // gradients
  if (settings?.color && settings?.color?.gradients) {
    settings?.color?.gradients.forEach((gradients: {gradient: string; slug: string; name: string}) => {
      presetsClasses += `\n.has-${gradients.slug}-gradient-background {background: ${gradients.gradient};}`
    })
  }

  // font sizes
  if (settings?.typography && settings?.typography?.fontSizes) {
    settings?.typography?.fontSizes.forEach((fontSize: {size: string; slug: string}) => {
      presetsClasses += `\n.has-${fontSize.slug}-font-size {font-size: ${fontSize.size};}`
    })
  }

  // spacing
  if (settings?.spacing && settings?.spacing?.spacingSizes) {
    settings?.spacing?.spacingSizes.forEach((spacingSize: {size: string; slug: string}) => {
      presetsClasses += `\n.has-${spacingSize.slug}-spacing {margin: ${spacingSize.size};}`
    })
  }

  return `${presetsClasses}\n`
}
const getElements = (elements: any) => {
  let style: string = ''
  const pseudoElements = ['hover', 'focus', 'visited', 'active', 'link', 'any-link']
  for (const element in elements) {
    let selector: string | string[] = element
    if (selector === 'button') {
      selector = ['.wp-element-button', '.wp-block-button__link']
    } else if (selector === 'caption') {
      selector = [
        '.wp-element-caption',
        '.wp-block-audio figcaption',
        '.wp-block-embed figcaption',
        '.wp-block-gallery figcaption',
        '.wp-block-image figcaption',
        '.wp-block-table figcaption',
        '.wp-block-video figcaption'
      ]
    } else if (selector === 'heading') {
      selector = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
    }
    for (const pseudoElement in elements[element]) {
      if (pseudoElements.includes(pseudoElement.slice(1))) {
        if (typeof selector === 'string') {
          style += compileCSS(elements[element][pseudoElement], {selector: `${selector}${pseudoElement}`}) + '\n'
        } else {
          for (const sel of selector) {
            style += compileCSS(elements[element][pseudoElement], {selector: `${sel}${pseudoElement}`}) + '\n'
          }
        }
      }
    }
    if (typeof selector === 'string') {
      style += compileCSS(elements[element], {selector: `${selector}`}) + '\n'
    } else {
      for (const sel of selector) {
        style += compileCSS(elements[element], {selector: `${sel}`}) + '\n'
      }
    }
  }
  return style
}
const getBlockStyles = (blocks: any) => {
  let style: string = ''
  if (blocks) {
    for (const blockName in blocks) {
      if (blocks.hasOwnProperty(blockName)) {
        const blockStyles = compileCSS(blocks[blockName], {selector: `.wp-block-${blockName.split('/')[1]}`})
        style += `${blockStyles}\n`
      }
    }
  }

  return style
}

Goal:

My ultimate goal is to allow non-technical users to make visual style changes in the WordPress editor (like font size or colors) and have those changes reflected on the frontend without manual intervention.

I’d love to hear about any solutions, ideas, or workflows you’ve implemented for similar setups. Looking forward to learning from your experience and expertise!

Thank you!

Best regards,
Feroz