Feature/WDSBT v1.3 theme font generator

[khleomix]

Closes

#WDSBT-188
#WDSBT-261

Link to test

Test Locally

Description

This PR adds an automated font management system with purpose-based organization and processing tools to streamline font integration in the WDS BT theme.

Key Features Added:

• Automated font detection and processing tools
• Purpose-based font organization (headline/, body/, mono/ folders)
• Automatic theme.json generation from font files
• Preload link generation for optimal performance
• Font CSS generation with @font-face declarations
• Standardized slug mapping (headline, body, mono) for consistent font family references

Technical Implementation:

• Enhanced tools/font-processor.php with comprehensive font processing capabilities
• Updated tools/generate-theme-json.php to use standardized font slugs
• Added font preload generation in inc/setup/font-preload.php
• Improved font detection and debugging tools
• Updated README.md with comprehensive font management documentation

Mobile & Desktop Screenshots/Recordings

WDS-BT-Theme.mp4

AI Assistance

• 🤖 This project was developed with the help of a LLM/AI such as Cursor, Gemini, etc.

Added to documentation?

• 📜 README.md
• 📓 ClickUp
• 🙅 No documentation needed

Added tests?

• 👍 Yes
• 🙅 No, because they aren't needed
• 🙋 No, because I need help

Testing Instructions

1. Font Organization Test:

   • Verify fonts are organized in assets/fonts/ by purpose:
     • headline/ for heading fonts
     • body/ for body text fonts
     • mono/ for monospace/code fonts

2. Font Processing Test:

   npm run fonts

   • Check that fonts are copied to build/fonts/ maintaining folder structure
   • Verify theme.json is updated with font family definitions
   • Confirm preload links are generated in inc/setup/font-preload.php

3. Font Detection Test:

   npm run fonts:detect

   • Verify all fonts are detected and listed correctly
   • Check that font properties (weight, style) are detected from filenames

4. Theme Integration Test:

   • Check that CSS custom properties are available:
     • var(--wp--preset--font-family--headline)
     • var(--wp--preset--font-family--body)
     • var(--wp--preset--font-family--mono)
   • Verify fonts load correctly on the frontend

5. Debug Information Test:

   • Enable WP_DEBUG = true in wp-config.php
   • Visit WDSBT Settings page in WordPress admin
   • Verify font detection debug information is displayed

6. Code Quality Test:

   npm run lint

   • Ensure all linting checks pass
   • Verify no PHP, JavaScript, or CSS linting errors

---

Reviewer's Testing Checklist

As a reviewer, please verify that the relevant testing criteria are fulfilled and confirmed before approving this Pull Request.

• Visual Regression Testing: No visual changes - backend tool enhancement only
• Cross-Browser Compatibility: Not applicable - development tools only
• Mobile Responsiveness: Not applicable - development tools only
• Theme Compatibility: Font management system enhances theme functionality without breaking existing features
• Linting: All code passes linting checks (PHPCS, ESLint, Stylelint)
• Accessibility Testing: Font system improves accessibility through proper font loading and organization
• Security Best Practices: Code follows WordPress security best practices with proper sanitization and validation
• Documentation: Comprehensive font management documentation added to README.md
• Post-Deployment Tasks: No post-deployment tasks required

Additional Reviewer Notes or Considerations?

Key Benefits of This Implementation:

• Developer Experience: Streamlines font integration workflow
• Performance: Automatic preload link generation for optimal font loading
• Maintainability: Purpose-based organization makes font management intuitive
• Standards Compliance: Follows WordPress block theme best practices
• Extensibility: Easy to add new fonts by simply placing them in appropriate folders

Testing Focus Areas:

• Verify font processing works with various font file formats (.woff2, .woff, .ttf, .otf)
• Confirm theme.json generation uses standardized slugs consistently
• Test font detection with different naming conventions
• Ensure preload links are properly generated and included in theme

This enhancement significantly improves the developer experience for font management while maintaining backward compatibility and following WordPress coding standards.

[thatmitchcanter]

Task linked: WDSBT-188 Stripped Down Version of BT for Unopiniated Styles

[thatmitchcanter]

Task linked: WDSBT-261 WP6.8 Testing and Fixes

[thatmitchcanter]

Approved - thanks @khleomix !