[2.0.0-rc1] Test with multilingual websites

Hi guys!

I tested the UIP2 (beta6) a bit with multilingual locally.
My local env. is Drupal 11.0.9, PHP8.3. I also installed but did not enable the UI Suite DaisyUI (4.0alpha) theme which includes many ready components for testing.
For translation, I used Core Multilingual modules with installed Ukrainian as a second language (around 95% of interface translation is available by default)

I tested the layout builder, views, and blocks (as a plugin in block layout).
The translation generally works fine if the user sets translate pairs in the User interface translation page (/admin/config/regional/translate).

I noticed a few things:

Not all props titles have a translation possibility e.g. "Attributes" because they are not wrapped by the translate function (/ui_patterns/src/ComponentPluginManager.php:261).
Meanwhile, descriptions, sources, and help text are translatable there (I added a Cyrillic word beside the English origin one to show that in the screenshots).

Props properties titles and descriptions implemented as a component in UI Suite DaisyUI (e.g. /ui_suite_daisyui/components/button/button.component.yml:87) can not be translated via the User interface translation page. E.g. the "Block?" title and nested "It is possible to display button as a block?" description text.
At the same time category, label, and description names in DaisyUI classes (/ui_suite_daisyui/ui_suite_daisyui.ui_styles.yml) are translatable.

Translation in the Views and Blocks has the same behavior.

I haven't tested layout builder overrides with symmetric and asymmetric translation yet because related contribs modules don't support Drupal 11. I need to set up the Drupal 10 environment for the test.

I assume we need to double-check Source plugins and add translations to titles and descriptions where it is possible.

Florent, are some Sviatoslav's feedbacks overlapping with 💬 Components metadata translation questions/ideas Active ?

Hi,

Props properties titles and descriptions implemented as a component in UI Suite DaisyUI (e.g. /ui_suite_daisyui/components/button/button.component.yml:87) can not be translated via the User interface translation page

For me it is the same subject as #3481491-7: [2.0.0-rc1] Make components metadata translatable → .

At the same time category, label, and description names in DaisyUI classes are translatable.

Because it is from UI Styles: https://git.drupalcode.org/project/ui_styles/-/blob/8.x-1.x/src/StylePlu...

I tested the UIP2 (beta6) a bit with multilingual locally.
My local env. is Drupal 11.0.9, PHP8.3. I also installed but did not enable the UI Suite DaisyUI (4.0alpha) theme which includes many ready components for testing.
For translation, I used Core Multilingual modules with installed Ukrainian as a second language (around 95% of interface translation is available by default)

User Interface translation

Not all props titles have a translation possibility e.g. "Attributes" because they are not wrapped by the translate function (/ui_patterns/src/ComponentPluginManager.php:261).
Meanwhile, descriptions, sources, and help text are translatable there (I added a Cyrillic word beside the English origin one to show that in the screenshots).

Props properties titles and descriptions implemented as a component in UI Suite DaisyUI (e.g. /ui_suite_daisyui/components/button/button.component.yml:87) can not be translated via the User interface translation page. E.g. the "Block?" title and nested "It is possible to display button as a block?" description text.
At the same time category, label, and description names in DaisyUI classes (/ui_suite_daisyui/ui_suite_daisyui.ui_styles.yml) are translatable.

Translation in the Views and Blocks has the same behavior.

As said by Grimreaper, this is the scope of another UI Patterns issue 💬 Components metadata translation questions/ideas Active .

It is also covered by this Core issue ✨ Props have no (translatable) labels Active

Config translation

I haven't tested layout builder overrides with symmetric and asymmetric translation yet because related contribs modules don't support Drupal 11. I need to set up the Drupal 10 environment for the test.

Indeed:

• https://www.drupal.org/project/layout_builder_at → is Drupal 10 only
• https://www.drupal.org/project/layout_builder_st → is Drupal 10 only

We need to test that, testign in a Drupal 10.3 or 10.4 environment. I may do it if I have time, but the task is open to anybody willing to take it.

I have also tested the Drupal 10 version (Core 10.4, PHP 8.3, UIP2 beta6).
With enabled default Core multilingual modules translations works as in Drupal 11.

Installed and enabled Layout Builder Symmetric Translations (1.0-alpha3) and disabled Core Configuration Translation module.
Translation for Component titles as block titles still doesn't work as with the Core Configuration Translation module.
I can't translate titles via User interface translation because titles of components (e.g. Accordion, Avatar) don't exist there.

Disabled Layout Builder Symmetric Translations and installed and enabled Layout Builder Asymmetric Translation. (v. 2.13)
I am not sure that Layout Builder Asymmetric Translation works properly with UIP2.

When I tried to manage display of my custom block type via Layout Builder for secondary translation language ( in my case: /uk/admin/structure/block-content/manage/test_block/display ) I got these errors.
When I disabled the Layout Builder Asymmetric Translation I didn't catch these errors.

Let me know if I need to check anything else.
In my point of view, the best way to use UIP2 with multilingual is by using Core modules for translation.

Translation for Component titles as block titles still doesn't work as with the Core Configuration Translation module.
I can't translate titles via User interface translation because titles of components (e.g. Accordion, Avatar) don't exist there.

If my understanding is right, this is lready covered by:

• 💬 Components metadata translation questions/ideas Active
• ✨ Props have no (translatable) labels Active

Let me know if I need to check anything else.

Is it possible to translate a slot or prop value using layout_builder_at and layout_builder_st?

For examples:

• I add a component as a layout, can i different slot & props values according to languages? If there some different behaviours according to prop types?
• Same for component as a block and component in field formatters?

Nice to have: Same analysis for views.

When I tried to manage display of my custom block type via Layout Builder for secondary translation language ( in my case: /uk/admin/structure/block-content/manage/test_block/display ) I got these errors.
When I disabled the Layout Builder Asymmetric Translation I didn't catch these errors.

Which errors?

I tested translations with the enabled layout_builder_at and layout_builder_st modules (separated enabled) and without them only Core modules (Language and User Translations).
My steps:
1. Installed and enabled UIP2 and its submodules, installed ui_suite_daisyui.
2. Enabled Core Language and Interface Translation.
3. Enabled Ukrainian as a second language.
4. Tried translating (via User Translations) labels and titles that use components like Props, Slots, Source, and Variant. Tried translating props values like "Attributes", "Data from a field" etc. Both times translations work as expected only with enabled Core modules. Checked via Layout Builder, Block Layout, Views, and components as a field formatter.
Labels of the props types like "Size", and "Modal ID" aren't translatable.
5. Installed, enabled, and tested layout_builder_at and layout_builder_st modules separately to avoid conflicts. I didn't find any extra possibility to translate anything that wasn't translable by Core modules via User Translations.

I am not familiar with the layout_builder_at and layout_builder_st modules well. Maybe I missed something and for these modules need to use something other/extra than User Translations. Let me know, please.

Currently testing with this config:

id: node.article.default
targetEntityType: node
bundle: article
mode: default
langcode: en
status: true
third_party_settings:
  layout_builder:
    enabled: true
    allow_custom: false
    sections:
      -
        layout_id: 'ui_patterns:ui_suite_dsfr:alert'
        layout_settings:
          label: ''
          context_mapping:
            entity: layout_builder.entity
          ui_patterns:
            component_id: null
            variant_id:
              source_id: select
              source:
                value: success
            props:
              attributes:
                source_id: attributes
                source:
                  value: ''
              dismissible:
                source_id: select
                source:
                  value: ''
              close_title:
                source_id: textfield
                source:
                  value: 'A traduire'
              title_tag:
                source_id: select
                source:
                  value: ''
            slots:
              slots: {  }
        components:
          2d71af7c-2a50-4079-99a9-e4db2d6b85be:
            uuid: 2d71af7c-2a50-4079-99a9-e4db2d6b85be
            region: title
            configuration:
              id: 'field_block:node:article:title'
              label: Title
              label_display: '0'
              provider: layout_builder
              context_mapping:
                entity: layout_builder.entity
                view_mode: view_mode
              formatter:
                type: string
                label: hidden
                settings:
                  link_to_entity: false
                third_party_settings: {  }
            weight: 0
            additional: {  }
          da4d8585-8ef3-4f1f-a842-1fc562674ade:
            uuid: da4d8585-8ef3-4f1f-a842-1fc562674ade
            region: message
            configuration:
              id: 'ui_patterns_entity:ui_suite_dsfr:button'
              label: Button
              label_display: '0'
              provider: ui_patterns_blocks
              context_mapping:
                entity: layout_builder.entity
              ui_patterns:
                component_id: null
                variant_id:
                  source_id: select
                  source:
                    value: ''
                props:
                  attributes:
                    source_id: attributes
                    source:
                      value: ''
                  title:
                    source_id: textfield
                    source:
                      value: ''
                  url:
                    source_id: url
                    source:
                      value: ''
                  target:
                    source_id: select
                    source:
                      value: ''
                  external:
                    source_id: checkbox
                  disabled:
                    source_id: checkbox
                  icon_position:
                    source_id: select
                    source:
                      value: ''
                  tooltip:
                    source_id: textfield
                    source:
                      value: ''
                  id:
                    source_id: textfield
                    source:
                      value: ''
                  social:
                    source_id: select
                    source:
                      value: ''
                  icon:
                    source_id: icon
                    source:
                      value: null
                slots:
                  label:
                    sources:
                      -
                        source_id: token
                        source:
                          value: 'A traduire'
                        _weight: '0'
            weight: 0
            additional: {  }

The 2 "A traduire" strings are the ones to tests:

• one is in a component prop source in a layout plugin
• one is in a component slot source in a block plugin

First test: config translation

There is no UI for entity displays.

Export the config (drush cex), create a French version (sync/language/fr/core.entity_view_display.node.article.default.yml) by changing "A traduire" by "Traduit en Français" and import (drush cim)

It works well. With an node:article content, when I switch the language, i see the translation in both layout prop & block slot.

Second test: content translation

I active Layout Builder override for my articles, and I activate node:article as translatable in /admin/config/regional/content-language

I translate my previous article, changing the title, and the result is OK: on article full page, in FR, i see both:

• the translation in both layout prop & block slot.
• the translation of the title field

Third test: content + symmetric layout translation

TODO

Fourth test: content + asymmetric layout translation

TODO

pdureau → credited just_like_good_vibes → .

Mikael has tested "1st test: config translation" and it is OK.

So, we are good enough for 2.0.0. let's close