Tradução assimétrica para páginas do Drupal Canvas

Uma página do Canvas mantém todo o seu design — cada componente e seu conteúdo — dentro de um único campo na entidade. Por padrão, o Canvas não tem conceito de traduções: ao ativar prefixos de idioma, o editor falha ao carregar, salvamentos em um idioma sobrescrevem outro, e as URLs de CSS com prefixo retornam 404. Canvas Multilingual patches those gaps and adds a language selector to the editor.

O que “assimétrica” significa aqui

Os sistemas de tradução vêm em dois tipos. A tradução simétrica força cada idioma a espelhar a mesma estrutura — os mesmos blocos na mesma ordem, apenas as palavras mudam. A tradução assimétrica permite que cada idioma tenha um layout completamente independente: componentes diferentes, uma ordem diferente, seções extras em um idioma que não existem em outro. Editar a página em espanhol nunca afeta a versão em inglês.

Requisitos e instalação

Instalar com Composer

O módulo precisa do Drupal Canvas (^1.3), além dos módulos do núcleo Language e Content Translation. Instale-o com Composer e depois habilite tudo com Drush:

composer require 'drupal/canvas_multilingual:^1.0@beta'

drush en language content_translation canvas_multilingual -y
O módulo language foi instalado.
O módulo content_translation foi instalado.
O módulo canvas_multilingual foi instalado.

drush cr
[success] Reconstrução do cache concluída.

① Adicionar um idioma

Adicionar espanhol ao site

Adicione um segundo idioma em Configuração → Região e idioma → Idiomas (ou com um único comando Drush). O inglês permanece como padrão; o espanhol passa a ser o idioma de destino da tradução.

drush language:add es -y
[success] Idioma espanhol adicionado

② Ativar tradução para páginas do Canvas

Tornar a entidade “Page” traduzível

Em Configuração → Região e idioma → Idioma e tradução do conteúdo, marque Page (a entidade de página do Canvas) e salve. É isso que permite que cada página do Canvas tenha uma árvore de componentes separada por idioma.

③ Editar no editor Canvas

O seletor de idiomas dentro do editor

Abra qualquer página do Canvas no editor e o módulo adiciona um seletor de idiomas à barra de ferramentas superior, ao lado de Visualizar. Ele mostra o idioma atual e permite pular para outro.

O resultado: dois idiomas, dois layouts independentes

Abaixo está a mesma página do Canvas renderizada em cada idioma. A versão em inglês e a versão em espanhol não são um template compartilhado com textos trocados — elas são árvores de componentes separadas vivendo em uma única entidade, cada uma editável sem afetar a outra. Observe o prefixo /es/ na URL em espanhol.

Inglês — padrão

https://site.local/page/1

Español — /es/

https://site.local/es/page/1

Tanto o título da página quanto o texto de cada componente são traduzidos de forma independente. Como a própria árvore de componentes é traduzível, você pode facilmente adicionar uma seção extra ao espanhol, remover uma ou reordená-las — o layout em inglês permaneceria exatamente como está.

Como funciona nos bastidores

O Canvas Multilingual é um conjunto de soluções direcionadas para o comportamento atual do Canvas. As mais importantes:

• Proteção de irmãos no autosave. O autosave do Canvas pode reconstruir a entidade do zero, o que apagaria outras traduções. Um hook entity presave detecta isso e restaura as traduções irmãs a partir do banco de dados e das entradas de autosave de outros idiomas — assim uma edição em um idioma não pode excluir silenciosamente outra.
• Resolução de API ciente de idioma. Um event subscriber resolve cada requisição da API do Canvas para a tradução correta do idioma ativo, e cria a tradução no primeiro GET (seguro) quando você abre o editor em um novo idioma.
• Exclusão com escopo de tradução. Excluir uma tradução não padrão remove somente aquele idioma (e seus dados de autosave), deixando o idioma padrão e os demais intactos. Excluir o idioma padrão ainda remove a página inteira.
• Solução para assets 404. Um pequeno interceptor de fetch remove o prefixo de idioma das URLs de assets de core/, themes/ e modules/ para que páginas com prefixo não retornem 404 em seus CSS/JS.

O módulo é explícito que essas são correções provisórias: o objetivo declarado do mantenedor é incorporá-las ao núcleo do Canvas, momento em que as soluções alternativas se tornam desnecessárias.

Bom saber

• O módulo está em beta (1.0.0-beta1). Toda criação instantânea de tradução é registrada para fins de auditoria.
• Se o seletor de idiomas não aparecer após a configuração, execute drush cr.
• O Canvas gerencia os aliases das páginas manualmente (o Pathauto está desativado para páginas do Canvas); cada tradução recebe seu próprio alias a partir do título.

Configuração em resumo