Support

Account

Home Forums Gutenberg block.json with translated title and description (i18n & L10n) Reply To: block.json with translated title and description (i18n & L10n)

  • Hi! I tried your solution but I found an easier way! For this to work you should have wp-cli installed on your machine. The wp-cli commandos I list here I run through my package.json which makes it even easier.

    Step 1.
    Make sure your block.json files have the text domain you use in your theme/plugin as well.

    Example block.json file, note the textdomain.

    {
        "$schema": "https://schemas.wp.org/trunk/block.json",
        "name": "acf/accordion",
        "title": "Accordion",
        "description": "Accordion (formerly known as FAQ)",
        "category": "wp-lemon-blocks",
        "icon": "lightbulb",
        "keywords": ["FAQ", "frequently", "asked", "questions", "accordion", "toggle", "collapsible", "expand", "collapse"],
        "apiVersion": 2,
        "style": "file:./index.css",
        "script": "file:./index.js",
        "textdomain": "wp-lemon",
        "acf": {
            "mode": "preview"
        },
        "supports": {
            "mode": false
        }
    }
    

    Step 2.
    Run the following command to create your pot translation base file. Make sure you set the path correctly to your preffered translation directory and have the name of the file the same as your text domain.

    wp i18n make-pot . resources/languages/wp-lemon.pot --slug=wp-lemon --domain=wp-lemon --exclude=node_modules,vendor

    Step 3.
    Create a translation file from the pot file. I used Poedit to create a nl_NL.po file in my resources/languages/ directory. Translate some first string to test. Once you save your translated .po file, poedit will also create a .mo file

    Step 4.
    Load your translation files. I added the following in my functions.php

    function theme_initialize()
    {
    	load_theme_textdomain('wp-lemon', get_template_directory() . '/resources/languages/');
    }
    add_action('after_setup_theme', 'theme_initialize');

    Step 5.
    Profit?

    Additional
    If you update a string or add a new block for example, run the make-pot command first and the update-po afterwards. Now run poedit on your po files and translate the files again. Make sure the .mo files are updated as well on save.