Resolved Missing Editor Translations for WooCommerce Blocks

Fixing i18n for Inner Blocks in Cart & Checkout Editor

Fixed an internationalization bug preventing Inner Block titles and descriptions from translating correctly in the WordPress editor inspector. (Skills: PHP, JS, WordPress i18n)

WordPressPHPJavaScriptGutenbergi18n
View Contribution
WooCommerce Block Editor after translations are fixed

Editor inspector panels now correctly display translations for Inner Block titles and descriptions.

Solving Internationalization Gaps in the Block Editor

Within the WooCommerce Blocks editor experience—especially for Cart & Checkout blocks—certain "Inner Blocks" (such as components for title and description) suffered from a critical internationalization issue. When these blocks were registered only on the client-side (JavaScript), translatable properties like title and description were not appearing translated in the editor inspector panel, even though translation files existed. This led to poor experience for non-English users configuring stores in the block editor.

My Role & Contributions

As the author of the solution (PR #6737), I analyzed the i18n system, refactored the registration approach, and delivered a robust architecture aligned with WordPress block development best practices.

  • Problem Analysis: Pinpointed the disconnect between client- and server-side block registration and how it impacted translation delivery
  • Solution Strategy: Shifted Inner Block registration to the server side, leveraging block.json metadata to mark fields as translatable
  • Implementation:
    • Generated block.json files for all affected Inner Blocks, marking properties (title, description, keywords) as translatable
    • Registered blocks server-side using PHP's register_block_type and the new metadata files
    • Introduced an AbstractInnerBlock PHP class to consolidate server-side registration, purposefully omitting editor_script for proper script handling
    • Ensured only minimal client-side settings are still registered in JS for block runtime behavior

Key Features

  • After: Inner Block titles/descriptions properly localized

Technical Implementation

Block Registration:
  • Generated block.json files for all affected Inner Blocks (title, description, keywords marked as translatable)
  • Refactored block registration to use PHP's register_block_type, following WordPress guidance
  • Introduced an AbstractInnerBlock class to consolidate server-side logic and avoid extraneous editor_script loading

✨ Highlights
  • Authored the fix that delivered proper translation support for all Inner Blocks in WooCommerce Blocks' editor UI
  • Aligned implementation with latest WordPress and Gutenberg recommended practices
  • Diagnosed and solved a long-standing i18n issue across PHP and JavaScript boundaries
🔍 Challenges
  • Deep-diving into WordPress and Gutenberg block i18n internals
  • Refactoring registration patterns to work server-side and maintain full JS functionality
  • Balancing code cleanliness (via AbstractInnerBlock) with upgrade safety and existing functionality
🛠️ Skills Demonstrated
  • WordPress Block Editor (Gutenberg) APIs: server and client registration
  • Internationalization (i18n) debugging and implementation
  • PHP: Writing server-side logic and registration patterns

Key Takeaways

  • Applied best practices for WordPress block development with full i18n support
  • Gained deeper insight into server- vs. client-side registration implications
  • Reinforced importance of block.json metadata for modern block development
  • Improved processes for triaging and resolving language-specific bugs in editor UI

Technologies Used

⚙️ Core Stack
  • WordPress
  • PHP
  • JavaScript
  • Gutenberg Blocks
  • block.json
📦 Libraries
  • WooCommerce Blocks
  • @wordpress/scripts
  • @wordpress/block-editor
  • @wordpress/i18n
  • @wordpress/components
🔧 Tools
  • GitHub
  • WordPress Local Environment
  • Poedit / .po/.mo files
  • VSCode
← Back to All ProjectsContact Me