WDS BT v1.4.0-beta - Block Showcase & Performance Optimization

WDS BT v1.4.0-beta - Block Showcase & Performance Optimization

⚠️ BETA RELEASE
This is a beta release. Please test thoroughly before using in production. Report any issues via GitHub Issues.

Overview

This beta release introduces the Block Showcase development tool, automatic WebP image generation, performance optimizations to reduce render-blocking JavaScript, and accessibility enhancements for better color contrast compliance.

What's New:

• Block Showcase (admin-only) for block discovery and inspection
• WebP Uploads - Automatic WebP generation for uploaded images
• Performance optimizations reducing render-blocking JavaScript
• Accessibility improvements for link contrast compliance

---

Key Features and Enhancements

1. Block Showcase (Admin-Only)

A powerful development tool to discover, preview, and inspect all registered blocks with their attributes in an organized, interactive format.

• Admin-only access for security
• Interactive block previews with live rendering
• Detailed attribute inspection for each block
• Organized by categories for easy navigation
• Supports both core and third-party blocks

How to use:

1. Navigate to any page in the WordPress admin
2. Use the Block Showcase shortcode or template
3. Browse blocks by category
4. Click any block to view its attributes and preview

2. Performance Optimizations

Reduced Render-Blocking JavaScript

• Block variations script moved to editor-only (no longer loads on frontend)
• Main theme script now uses defer attribute for non-blocking execution
• Eliminated unnecessary WordPress core scripts (blocks.js, primitives.js, rich-text.js, data.js, warning.js, shortcode.js) from frontend pages
• Result: Significant reduction in render-blocking requests, improving First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics

Image Performance

• Dominant Color Images: Automatic calculation and storage of dominant colors for uploaded images, used as placeholders while images load
• Image Prioritizer: Automatically prioritizes above-the-fold images with fetchpriority="high" for improved page load performance

3. WebP Uploads

• Automatic generation of WebP versions when JPEG or PNG images are uploaded
• Server-side replacement via WordPress filters for seamless integration
• Client-side JavaScript fallback ensures WebP images are served even if server-side processing misses any
• Domain validation prevents external images (CDNs, other domains) from being incorrectly converted
• LCP image preloading automatically uses WebP URLs when available
• All image sizes are automatically converted, including thumbnails and responsive sizes
• WP-CLI command available for batch regeneration of WebP images

How it works:

1. When you upload a JPEG or PNG image, WebP versions are automatically generated
2. The theme serves WebP images to browsers that support them
3. Original images are kept as fallbacks for older browsers
4. Only local images are converted - external images are left untouched

4. Accessibility Enhancements

• Link underlines added to content links for better color contrast compliance (WCAG 2.1)
• Improved focus states with visible outlines for keyboard navigation
• Smart link styling: Navigation and button links remain without underlines (appropriate for their interactive contexts)
• Links now have visual distinction beyond color alone, meeting accessibility standards

5. Technical Improvements

• LCP image detection refactored to use parse_blocks() directly for better compatibility
• Enhanced error handling in block parsing functions
• Improved URL validation for WebP replacement in both PHP and JavaScript
• Better domain detection with is_local_url() helper function

---

Bug Fixes

• Fixed render-blocking JavaScript loading unnecessarily on frontend pages

---

Beta Testing Instructions

We're looking for feedback on:

1. Block Showcase functionality - Does it work as expected? Any missing blocks?
2. WebP Uploads - Test automatic WebP generation with various image formats and sizes
3. Performance improvements - Please test page load times and report any issues
4. Accessibility - Test with screen readers and keyboard navigation
5. Cross-browser compatibility - Test on Chrome, Firefox, Safari, Edge

How to test:

1. Pull the latest code from the main branch
2. Run composer install and npm install to ensure all dependencies are up to date
3. Clear any caching (object cache, browser cache, CDN cache)
4. Test the Block Showcase feature in the admin area
5. Test WebP Uploads: Upload new JPEG/PNG images and verify WebP versions are automatically generated
6. Verify that external images are not being converted to WebP (domain validation working correctly)
7. Test page load performance with browser DevTools
8. Verify accessibility with keyboard navigation and screen readers

Report issues:

• Open a GitHub Issue with the beta label
• Include steps to reproduce
• Include browser/WordPress/PHP versions
• Include any error messages or console logs

---

Known Issues

• None at this time, but please report any issues you encounter during testing

---

Testing & Validation

This beta release has been tested for:

• Performance: Reduced render-blocking JavaScript verified with Lighthouse audits
• WebP generation: Tested with both Imagick and GD libraries
• Accessibility: Color contrast compliance verified with accessibility audit tools
• Cross-browser compatibility: Tested on Chrome, Firefox, and Safari
• WordPress compatibility: Tested with WordPress 6.4+ and PHP 8.2+

---

Acknowledgments

Thank you to everyone involved in this release, especially the development team for their work on performance optimization and accessibility improvements.

---

Full Changelog: Compare previous version