fse-pattern-first-architecture

Pattern-first FSE architecture ensures images are served via reusable PHP pattern files rather than inline HTML, preventing PHP execution inside .html templates. This structure improves security and maintainability by keeping dynamic logic within dedicated pattern files referenced by templates.

Load images through reusable PHP pattern files referenced by FSE templates instead of inline HTML. A validation script automatically triggers during template creation to enforce this pattern-first structure, ensuring assets are correctly wired through PHP patterns.

Yes, this validation applies across the Figma-to-WordPress design handoff workflow. The enforcement hook integrates via scripts/figma-fse/validate-pattern-architecture.sh to ensure FSE templates and PHP pattern references maintain proper architecture from design to implementation.

FSE templates break because pattern-first architecture intentionally prevents PHP code from executing inside .html template files. Move dynamic logic and image loading into reusable PHP pattern files, then reference those patterns from your .html templates to resolve the issue.

A validation script is needed to maintain pattern-first FSE theme structure by ensuring images load through PHP patterns and templates reference them correctly. The script auto-triggers when creating FSE templates with images to enforce best practices automatically across the workflow.