Skip to content

wordpress.md

Latest commit

 

History

History
99 lines (76 loc) · 2.63 KB

wordpress.md

File metadata and controls

99 lines (76 loc) · 2.63 KB
Raw

WordPress

Synced Flow can be used in WordPress themes and plugins without asking WordPress to resolve npm CSS imports in the browser.

Setup

pnpm add @syncedco/flow
pnpm exec synced-flow init --preset wordpress
pnpm flow:build

The WordPress preset:

  • scans templates, parts, patterns, blocks, inc, includes, src, and assets when those folders exist
  • scans PHP, HTML, JS, TS, JSX, TSX, Twig, Vue, Svelte, Astro, and MDX files
  • enables includeCore
  • writes assets/css/synced-flow.css
  • writes a theme.json palette that maps WordPress colour presets to Synced Flow semantic tokens

See examples/wordpress for a lean block theme style template with theme.json, template parts, PHP patterns, enqueue code, and an enqueue-ready generated CSS output.

Example Structure

examples/wordpress/
  functions.php
  theme.json
  synced-flow.config.mjs
  assets/css/synced-flow.css
  parts/header.html
  parts/footer.html
  templates/front-page.html
  templates/index.html
  patterns/landing-hero.php
  patterns/feature-grid.php
  patterns/contact-cta.php

Enqueue

wp_enqueue_style(
  'synced-flow',
  get_theme_file_uri('assets/css/synced-flow.css'),
  [],
  wp_get_theme()->get('Version')
);

For plugins, use plugins_url() or plugin_dir_url() instead of get_theme_file_uri().

WordPress Presets

WordPress emits editor preset classes such as .has-base-background-color, .has-primary-color, and .has-large-font-size with !important. Treat those classes as the editor's chosen design value.

Do not override .has-* preset classes in project CSS. Add or choose a better semantic preset instead, then use that preset on the block.

The generated theme.json maps common WordPress colour presets to Synced Flow tokens:

{
  "slug": "surface-elevated",
  "name": "Surface Elevated",
  "color": "var(--sf-colour-surface-elevated, var(--sf-colour-surface-raised))"
}

Use those presets for any block that needs an editor-visible design role:

  • base for page backgrounds
  • surface and surface-alt for standard panels
  • surface-elevated for chrome, mastheads, footers, sticky bars, and raised regions
  • primary and primary-foreground for branded actions

If a new visual role appears repeatedly, add it to synced-flow.config.mjs and expose it in theme.json; avoid adding !important overrides.

Dynamic Classes

Synced Flow generates utility CSS from complete class tokens. Keep class names complete in PHP and templates.

<section class="sf-section text-primary">

When a class is composed dynamically, add the full class to safelist.