A headless architecture is only successful if the content creators love using it. To ensure articles copy-paste perfectly from WordPress to the headless frontend without breaking styles, we established a few ground rules:
Stick to Standard Gutenberg Blocks: We strictly use standard blocks (Paragraphs, Headings, Lists, Images). WPGraphQL processes these blocks into clean, structured HTML that our Gatsby CSS easily targets.
Avoid Builder-Specific Shortcodes: Page-builder shortcodes (like [my_custom_slider]) rely on server-side PHP processing. In a headless setup, these often render as plain, broken text.
Style Globally: We write global CSS in Gatsby that targets default WordPress block classes (like .wp-block-image or .wp-block-quote), ensuring editors can write naturally in WordPress and trust the frontend output.
