site-kit-wp: Fix console error thrown while using GTranslate widget and logged into website as admin.

Bug Description

This is a followup to fix the support issue captured in https://github.com/google/site-kit-wp/issues/5969.

Steps to reproduce

See the steps to reproduce on https://github.com/google/site-kit-wp/issues/5969, although note that I had to install an older version of the theme to get the Show in menu option to show anything (I switched to the Twenty Twenty-One theme).

Screenshots

This is the snippet of code provided via GTranslate that throws the error.

The argument it’s invoked with can be seen here:

And, the contemporaneous state of window.google can be seen here:

Additional Context

PHP Version: any
OS: any
Browser: any
Plugin Version: historical, but verified on 1.101.0
Device: any

As can be seen in the screenshots above, the code is throwing an error because it’s trying to deeply reference an object on window.google, but window.google is undefined.

It appears that this conflict is occurring as a result of Site Kit’s code where it intentionally initializes window.google to undefined:

https://github.com/google/site-kit-wp/blob/61a99f5ce7f0291e0095687dbda2ee0cd34223c7/assets/js/util/initialize-google-global.js#L19-L21

This itself was deliberately introduced as a result of https://github.com/google/site-kit-wp/issues/4074, so care needs to be taken not to reintroduce a problem with regard to this issue.

Preliminary investigation suggests a fix could be to initialize window.google to an empty object, rather that undefined - this appears to work both with GTranslate and with Site Kit’s own Google Charts. However, this needs to be thoroughly investigated for viability.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Site Kit should not prevent Google Translate from functioning
This includes integrations via the official browser extension, and the GTranslate plugin

Note: there are known stability issues with Google Translate related to React crashing due to DOM changes made by Google Translate – this is a separate issue which is out of scope here. This issue is specific to allowing Google Translate to function at all on the page when SK is present/active

Implementation Brief

Locate the file at assets/js/util/initialize-google-global.js
Update the value of global.google within the condition to be {} as opposed to undefined
The final block of code should look as follows:

if ( ! Object.prototype.hasOwnProperty.call( global, 'google' ) ) {
	global.google = {};
}

Test Coverage

No additional tests required.

QA Brief

Install GTranslate chrome extension and WordPress plugin - https://en-gb.wordpress.org/plugins/gtranslate/
Open dashboard, verify gtranslate extension works
Open website, and some page on frontend, and verify that gtranslate extension is translating page (working)
To test gtranslate plugin, you can add shortcode [gtranslate] into any page, and verify the gtranslate widget shows on that page and translation works
It would be also worth giving this a test with the Google Translate extension as well as GTranslate.
Lastly, it would also be worthwhile doing a regression test on the behaviour fixed in https://github.com/google/site-kit-wp/issues/4074 as mentioned in the bug description.

Changelog entry

Fix console error thrown while using Site Kit in conjunction with Google Translate.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 15

Most upvoted comments

I’ve update the issue with an estimate of 3, given that the change itself is minimal, as would be the QAB.

10upsimon on Sep 7, 2023

@techanvil I can confirm that using the Google Translate Extension is a success as well as using the GTranslate plugin. Both work when the default/fallback value is updated to {};

As for the snippet I was inserting, here it is:

const script = document.createElement('script');
script.src = 'https://www.gstatic.com/charts/loader.js';
document.body.appendChild( script );

function drawChart() {

        // Create the data table.
        var data = new window.google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new window.google.visualization.PieChart(document.getElementById('wpbody'));
        chart.draw(data, options);
      }

script.onload = () => {
    console.log('Script loaded successfuly');
    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
};

Here are the console errors that arise (in the SK dashboard) as a result:

It is an odd error given that new is clearly used in the code, but I also suspect this is somewhat totally disconnected to the SK app and somewhat irrelevant, it was merely an observation while testing.

10upsimon on Sep 7, 2023

@aaemnnosttv Sure, I can ask someone to pick this up for IB so I can try to get it into the next sprint – will depend on what kind of launch blockers we have from the KMW Bug Bash, though. Thanks!

bethanylang on Aug 10, 2023

@bethanylang this one is ready to start moving as soon as we have the capacity.

aaemnnosttv on Jun 30, 2023