neuro-wp-block-theme-design

Create a theme directory with style.css containing the theme header, functions.php for setup and enqueues, theme.json for the design system, and HTML templates in templates/ and parts/. Register custom blocks from the build directory using register_block_type on the init hook.

Scaffold the block with npx @wordpress/create-block, define metadata in block.json with apiVersion 3, write the editor component in edit.js using useBlockProps and InspectorControls, and provide save.js for static output or render.php for dynamic server-side rendering.

theme.json v3 is the single source of truth for a block theme's design system in WordPress 6.6+. It defines color palettes, fluid typography, spacing scales, and per-block styles, which WordPress automatically converts into CSS custom properties like --wp--preset--color--primary.

Yes, configure tailwind.config.js and PostCSS in the theme root, compile the output to assets/css, and enqueue it in functions.php with wp_enqueue_style. Use theme.json presets for editor styles so the Site Editor and frontend stay consistent.

Hardcoded values bypass the design system and prevent users from customizing styles in the Site Editor. Always reference generated CSS variables such as --wp--preset--font-size--large or --wp--custom--border-radius--md so settings in theme.json control the output.