Streamline translation of Views block titles, custom menu titles, etc.: Allow Interface Translation

I recently worked with translating a site and deploying the translations, and was finding that translating block titles and field names ("configuration") required too many manual steps, as opposed to interface translation, which automatically registers all t()-wrapped (PHP) or |trans-ending (Twig) strings, and can become part of deploy process, all contained in a single po-file.

So I checked out the options, and initially planned to use https://www.drupal.org/project/config_translation_po/. But it still wasn't great to add another slightly working step. So I instead experimented with adding |trans in the relevant Twig templates.

This turned out to work really well, and 99% percent of all translations are in a single .po file, one for each language. Only Site slogan, and some meta tags are still in language specific configuration files.

Translation Bliss

For a complete solution, check out the Translation Bliss contrib module, which solves the challenge of translating everything in Drupal very elegantly. The minimum of relevant strings are made available in a file for immediate translation and import, and all strings are made User Interface translatable, also otherwise "difficult" configuration elements such as these:

• A Metatag description
• A custom Views Block title
• The Site name

Problem/Motivation

Currently, translating Drupal is a combination of Interface Translation and Configuration Translation which is confusing.

• Interface Translation
  Translate strings marked up with t(), i.e. $this->t('Reset your password').
• Configuration Translation
  Translate strings in Views block titles, custom menu titles, etc.

The challenge is that some strings, such as Views block titles and custom menu titles are considered configuration elements, and not translatable via Interface Translation.

Steps to reproduce

Create multilingual Drupal site, and find the translation process difficult.

Proposed resolution

Ideally, all text strings should be translatable via a single method Interface Translation, and not using two different methods.

We could do this by making Views block titles and custom menu titles translatable, for example by adding |trans in the template files, or maybe some other way.

The MR shows an example, where Views block titles and custom menu items are made translatable in Olivero:

1. Install Drupal 11 with Olivero as theme
2. Install Language modules: drush in language content_translation locale
3. Allow relevant elements to be translatable, and translate a standard block and menu item ("Log in")
4. Create a Views block with a displayed title, and a custom menu item
5. See that they are not translatable under "User interface translation" (/admin/config/regional/translate)
6. Apply the MR
7. See that they are now picked up, and available under "User interface translation"

Workaround

Until or of this happens, here are the steps to do it:

Alternative solution: Make configuration elements translatable

Some strings, such as Views block titles and custom menu titles are considered configuration elements, and are not translatable via Interface Translation.

As an alternative to dealing with their translations through configuration, you can instead make the relevant strings translatable, by adding the Twig |trans function to labels and titles in Twig templates files.

For example, to make Views generated block titles and menu titles translatable, copy the template files to your custom theme (see below), and override the original mark up. Use Twig debug to check for the right file, and possible file names in the source.

There are two great benefits:

1. Configuration translation can be replaced with interface translation
2. All translations can be deployed from a .po file, using the method in How-to deploy Drupal interface translations.

Views block labels and menu titles will now automatically pick up any translations. Olivero theme files are used for examples.

• Views block titles via web/core/themes/olivero/templates/block/block.html.twig, line 47:

  <h2{{ title_attributes.addClass('block__title') }}>{{ label|render|striptags|trans }}</h2>

• Custom menu titles via /core/themes/olivero/templates/navigation/menu--primary-menu.html.twig line 87:

  <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-{{ menu_level + 1 }}">{{ item.title|trans }}</span>

From Translating configuration > Alternative solution: Make configuration elements translatable
https://www.drupal.org/docs/administering-a-drupal-site/multilingual-gui...

Contrib modules like Field Group and Facets

Also contrib modules such as Field Group and Facets could be made more easily translatable, here are some examples:

Field Group
Field group labels, via field_group/templates/field-group-html-element.html.twig:
<{{ title_element }}{{ title_attributes }}>{{ title|render|striptags|trans }}</{{ title_element }}>

See also #3114825: Document how to translate field group labels and descriptions.

Facets
Facets items, via facets/templates/facets-result-item.html.twig:
<span class="facet-item__value">{{ value|trans }}</span>

Facets Summary items, via facets/modules/facets_summary/templates/facets-summary-facet.html.twig:
{{ label|trans }}: {{ items|map(items => items|trans)|join(', ') }}

Views Flipped Table
Views Flipped Table headers via views-view-flipped-table.html.twig:
{{- header_column.content|trans }}{{ header_column.sort_indicator }}

Remaining tasks

User interface changes

API changes

Data model changes

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet