diff --git a/i18n/readme.md b/i18n/readme.md new file mode 100644 index 0000000..f14deba --- /dev/null +++ b/i18n/readme.md @@ -0,0 +1,216 @@ +# Translating Third-Party Breakdance Elements + +This guide explains how to add translation support to your custom Breakdance elements. + +**Note**: This translation system requires Breakdance X.X+. + +## Overview + +Breakdance provides a built-in translation system that automatically translates: +- Element names +- Control labels +- Dropdown/button bar item labels +- Preset section labels +- Placeholders + +Third-party developers can hook into this system to translate their custom elements. + +### Understanding the Workflow + +The translation workflow uses a **two-file system** to prevent overwriting manual translations: + +1. **`{domain}-builder.pot`** - Generated by WP-CLI from element files (for merging only) +2. **`{domain}.pot`** - Your main POT file (includes merged element strings) +3. **`{domain}-{locale}.po/mo`** - Your actual translation files (created from main POT) + +**Key Point:** The `-builder.pot` file is NOT used directly for translations. It must be merged into your main POT file first. This separation allows you to regenerate element strings without overwriting other manual translations in your plugin. + +## Setup + +### 1. Register Your Translations + +Add this code to your plugin's main file: + +```php + 'dropdown', + 'items' => [ + ['text' => 'Option One'], // ← 'text' values translated + ['text' => 'Option Two'], + ] +] +``` + +### Button Bar Labels +```php +[ + 'type' => 'button_bar', + 'items' => [ + ['label' => 'Left'], // ← 'label' values translated + ['label' => 'Center'], + ['label' => 'Right'], + ] +] +``` + +### Preset Section Labels +```php +getPresetSection( + "EssentialElements\\spacing_margin_y", + "Vertical Spacing", // ← This parameter translated + "design.spacing.margin_top", + "design.spacing.margin_bottom" +) +``` + +### Placeholders +```php +[ + 'type' => 'text', + 'placeholder' => 'Enter text' // ← Placeholder translated +] +``` + +## Translation Context + +All translations use context for better translation accuracy: + +- **Element names**: Context is `"Element name"` +- **Control labels**: Context is `"Control label"` +- **Item text**: Context is `"Item text"` +- **Item labels**: Context is `"Item label"` +- **Preset sections**: Context is `"Preset section label"` +- **Placeholders**: Context is `"Placeholder"` + +In your `.po` file, you'll see entries like: + +``` +#: elements/MyButton/element.php:45 +msgctxt "Control label" +msgid "Button Text" +msgstr "" +``` + +Use `_x()` function if you need to reference these strings in PHP: + +```php +_x( 'Button Text', 'Control label', 'my-plugin-elements' ); +``` + +## Troubleshooting + +**Translations not showing:** +- Check namespace matches element slugs exactly +- Verify `.mo` files are in correct `languages/` directory +- Ensure file naming: `{textdomain}-{locale}.mo` (not `{textdomain}-builder-{locale}.mo`) +- Confirm element strings were merged into main POT file +- Clear WordPress cache +- Regenerate and merge when adding new strings + +**POT generation issues:** +- Install WP-CLI or use Poedit as alternative +- Ensure element files are named `element.php` +- Check strings aren't in variables + +## Resources + +- [WordPress i18n Documentation](https://developer.wordpress.org/apis/handbook/internationalization/) +- [Poedit](https://poedit.net/) - Translation file editor +- [WP-CLI i18n](https://developer.wordpress.org/cli/commands/i18n/) - Official WP-CLI i18n commands +- [GlotPress](https://wordpress.org/plugins/glotpress/) - WordPress translation platform for your plugin.