TMS-1237: Add a custom Google Translate functionality to navigation by eebbi · Pull Request #560 · devgeniem/tms-theme-base

eebbi · 2026-03-13T08:26:01Z

Project: Tampereen kaupunki, konsernihallinto / Tietohallintoyksikkö:
Project task: Tampereen kaupunki, konsernihallinto / Tietohallintoyksikkö Continuous development

Task: https://hiondigital.atlassian.net/browse/TMS-1237
Task title: Google translatorin ilmainen WP-lisäosa käyttöön

Description

Add a custom Google Translate functionality to navigation:

Custom js code for Google Translate script functionality
Dropdown-element in headers partial
Toggle-field for showing the translate dropdown in site settings

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Copilot

Pull request overview

Adds an optional Google Translate dropdown to the site header navigation, controlled via Site Settings, with supporting frontend controller, styles, icons, and localization updates.

Changes:

Adds a header dropdown UI for Google Translate plus a JS controller that loads the Google Translate API with Cookiebot-consent gating.
Introduces a Site Settings (ACF) toggle to enable/disable the translate dropdown.
Updates strings/translations and adds styling + icon assets for the new dropdown.

Reviewed changes

Copilot reviewed 16 out of 19 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
partials/ui/menu/language-nav.dust	Adds `notranslate` to prevent Google Translate from translating language nav UI.
partials/ui/menu/language-nav-dropdown.dust	Adds `notranslate` to prevent Google Translate from translating language nav UI.
partials/ui/menu/gtranslate-dropdown.dust	New translate dropdown markup in the header.
partials/shared/header-inner.dust	Renders the new dropdown when enabled via header model data.
models/strings.php	Adds a new header string for the translate trigger label.
models/shared/header.php	Adds `gtranslate_menu()` providing dropdown texts and current language + settings gate.
lib/ACF/Fields/Settings/HeaderSettingsTab.php	Adds an ACF Site Settings toggle (`enable_gtranslate_menu`).
lang/tms-theme-base.pot	Updates POT catalog; now includes new strings (and other extracted entries).
lang/sv_SE.po	Updates Swedish translations for new strings.
lang/sv_SE.mo	Adds/updates compiled Swedish MO.
lang/fi.po	Updates Finnish translations for new strings.
lang/fi.mo	Adds/updates compiled Finnish MO.
assets/styles/ui-components/index.scss	Includes the new gtranslate dropdown stylesheet.
assets/styles/ui-components/header/_gtranslate-dropdown.scss	Adds styling for the dropdown and Cookiebot messaging.
assets/scripts/theme.js	Registers the new global controller.
assets/scripts/gtranslate-dropdown.js	New controller: dropdown behavior + Cookiebot consent flow + API loading/init.
assets/icons/index.js	Registers the new translate icon in the sprite build.
assets/icons/icon-translate.svg	Adds the translate icon SVG asset.
CHANGELOG.MD	Documents the new feature under Unreleased.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T08:22:25Z

assets/scripts/gtranslate-dropdown.js

+        const script = document.createElement( 'script' );
+        script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+        script.setAttribute( 'data-cookieconsent', 'preferences' );
+        script.async = true;
+        document.head.appendChild( script );
+        this.isGoogleLoaded = true;
+
+        // Define the callback function globally
+        window.googleTranslateElementInit = this.initGoogleTranslate.bind( this );
+
+        // Check if the script loaded successfully after a short delay
+        setTimeout( () => {
+            this.checkGoogleTranslateLoaded();
+        }, this.gtranslateCheckDelay );


The Google Translate callback (window.googleTranslateElementInit) is assigned after the script tag is appended. Because the API script calls the cb= function as soon as it executes, there’s a race where the callback may be undefined. Define the global callback before appending the script (or set script.onload and initialize from there).

Copilot · 2026-03-26T08:22:26Z

models/shared/header.php

+        }
+
+        $current_lang = DPT_PLL_ACTIVE ? \pll_current_language() : \get_locale();
+


current_language is populated from get_locale() when Polylang is inactive; WordPress locales can include region (e.g. sv_SE), but Google Translate’s pageLanguage typically expects a language code (e.g. sv). Consider normalizing the locale (split on _/- and use the language part) so the widget initializes reliably across locales.

Suggested change

// When Polylang is inactive, get_locale() may return a locale with region (e.g. "sv_SE").

// Normalize this to a language code (e.g. "sv") for Google Translate compatibility.

if ( ! DPT_PLL_ACTIVE && is_string( $current_lang ) ) {

$parts = preg_split( '/[_-]/', $current_lang );

if ( ! empty( $parts ) && is_string( $parts[0] ) && $parts[0] !== '' ) {

$current_lang = $parts[0];

}

}

Copilot · 2026-03-26T08:22:26Z

assets/styles/ui-components/header/_gtranslate-dropdown.scss

+    .is-open {
+        display: block !important;
+    }


.is-open inside .gtranslate-wrapper is not used by the JS controller (it toggles is-hidden). This looks like dead/mismatched styling and the !important makes it harder to reason about. Either align the JS to toggle an is-open modifier or remove this rule and rely on the existing is-hidden toggling.

Suggested change

.is-open {

display: block !important;

}

Copilot · 2026-03-26T08:22:26Z

partials/ui/menu/gtranslate-dropdown.dust

+    <button class="gtranslate-trigger p-0 has-border-radius-small" aria-expanded="false" aria-haspopup="true" aria-controls="js-gtranslate-dropdown">
+        <span class="is-sr-only">{Strings.s.header.translate|html}</span>
+        {>"ui/icon" icon="icon-translate" class="icon--xlarge" /}
+    </button>
+
+    <div id="js-gtranslate-dropdown" class="gtranslate-dropdown p-4 is-hidden is-absolute" role="menu" aria-labelledby="gtranslate-trigger">
+        <div class="gtranslate-dropdown__content">


aria-labelledby="gtranslate-trigger" points to an element id that doesn't exist (the trigger button has no id). This breaks the ARIA relationship for assistive tech; add an id to the button and make aria-labelledby reference it (or remove/adjust the attribute if you don’t want a label-by relationship). Also consider whether role="menu" is appropriate here—if kept, the content should follow menu semantics; otherwise use a more suitable role or no explicit role.

lang/tms-theme-base.pot

Copilot · 2026-03-26T08:22:27Z

partials/ui/menu/gtranslate-dropdown.dust

+                <a href="javascript:Cookiebot.renew()" class="button is-primary">
+                    {Header.gtranslate_menu.accept_cookies|html}
+                </a>


Avoid href="javascript:..." URIs. They can conflict with CSP/hardening and are generally discouraged; use a real button/link and attach the Cookiebot renew action via JS (and/or guard for missing window.Cookiebot).

Suggested change

<a href="javascript:Cookiebot.renew()" class="button is-primary">

{Header.gtranslate_menu.accept_cookies|html}

</a>

<button type="button" class="button is-primary js-cookiebot-renew">

{Header.gtranslate_menu.accept_cookies|html}

</button>

eebbi added 12 commits March 5, 2026 10:37

TMS-1237: Add a custom Google Translate functionality to navigation

752897c

TMS-1237: Add notranslate to lang nav

87fb96c

TMS-1237: Add cookie check for translate menu

2df7420

TMS-1237: Add strings

8c5ae31

TMS-1237: Minor changes to the js file

53fde94

TMS-1237: Add cookiebot category to google translate script

ac661cf

TMS-1237: Update js to prevent script loads before cookies are accepted

767cfc6

TMS-1237: Add missing jsdoc description

8253067

TMS-1237: Small change to js code

31c5e23

TMS-1237: Allow dropdown to open without cookies

2c4f881

TMS-1237: Changes to dropdowns text visibility logic

0533cf7

TMS-1237: Change textx

1c4599a

eebbi requested a review from Copilot March 26, 2026 08:15

Copilot started reviewing on behalf of eebbi March 26, 2026 08:16 View session

Copilot AI reviewed Mar 26, 2026

View reviewed changes

TMS-1237: Small fixes

23c905d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TMS-1237: Add a custom Google Translate functionality to navigation#560

TMS-1237: Add a custom Google Translate functionality to navigation#560
eebbi wants to merge 13 commits intomasterfrom
TMS-1237

eebbi commented Mar 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		}

		$current_lang = DPT_PLL_ACTIVE ? \pll_current_language() : \get_locale();

+        // When Polylang is inactive, get_locale() may return a locale with region (e.g. "sv_SE").
+        // Normalize this to a language code (e.g. "sv") for Google Translate compatibility.
+        if ( ! DPT_PLL_ACTIVE && is_string( $current_lang ) ) {
+            $parts = preg_split( '/[_-]/', $current_lang );
+            if ( ! empty( $parts ) && is_string( $parts[0] ) && $parts[0] !== '' ) {
+                $current_lang = $parts[0];
+            }
+        }

Conversation

eebbi commented Mar 13, 2026

Description

Types of changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants