Renaming post formats after Gutenberg

The situation with changing strings in the block editor is complicated. There’s 2 problems here:

  1. The list of post formats used by the block editor (Gutenberg) is not filterable using JavaScript hooks, just as the list is not filterable in PHP.
  2. The JavaScript translation functions used by the block editor do not have equivalents of the gettext hooks that are available for the PHP translation functions eg. gettext_with_context.

So what can you do? Pascal Birchler has a very thorough overview of the state of localization in WordPress 5.0 here. In that article he notes that the gettext filters do not exist yet, but there is a PHP filter introduced in 5.0.2 called load_script_translations, which:

Filters script translations for the given file, script handle and text
domain. This way you can override translations after they have been
loaded from the translation file.

To use it, you need to know the handle of the script being translated, decode the JSON for the translation, then re-encode it as JSON.

In your case, the post format names are defined in the /packages/editor/src/components/post-format/index.js file in the block editor, which means that they are part of the “editor” package, which uses the handle wp-editor in WordPress (the script handles for JavaScript packages are available here).

So the way to use this filter to rename post formats would be:

add_filter(
    'load_script_translations',
    function( $translations, $file, $handle, $domain ) {
        /**
         * The post format labels used for the dropdown are defined in the
         * "wp-editor" script.
         */
        if ( 'wp-editor' === $handle ) {
            /**
             * The translations are formatted as JSON. Decode the JSON to modify
             * them.
             */
            $translations = json_decode( $translations, true );

            /**
             * The strings are inside locale_data > messages, where the original
             * string is the key. The value is an array of translations.
             *
             * Singular strings only have one value in the array, while strings
             * with singular and plural forms have a string for each in the array.
             */
            $translations['locale_data']['messages']['Aside']  = [ 'Breaking News' ];
            $translations['locale_data']['messages']['Status'] = [ 'Notice' ];

            /**
             * Re-encode the modified translations as JSON.
             */
            $translations = wp_json_encode( $translations );
        }

        return $translations;
    },
    10,
    4
);

One thing to keep in mind is that unlike the gettext filters, this filter is only filtering the translations for a specific script. So if the post format names are defined and used in another script, you will need to filter that script’s translations separately. You will also need to continue using the gettext filters to translate the post format names outside of the block editor.

Leave a Comment