Chrome opens Translate modal when opening a pattern from Manage Patterns

[eric.7186]

Bug Report

Description

Describe the bug.

Environment

• WordPress: 6.3-beta3
• PHP: 8.1.9
• Server: Apache/2.4.43 (Win32) mod_fcgid/2.3.9a
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.9)
• Browser: Chrome 114.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-Three 1.1
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.0

Steps to Reproduce

1. Appearance > Editor
2. Patterns > Manage all my patterns
3. Edit any pattern
4. 🐞 Google Translate modal opens in the window.

Expected Results

1. ✅ Google Translate should not open in the edit pattern window.

Actual Results

1. ❌ I can close the modal but if I refresh the browser it reappears.
2. Of course Firefox and Edge do not have this side effect.
3. I did login to another computer and tested in a newly installed Chrome browser and it produced the same result.

[eric.7186]

Screenshot of Manage Patterns Edit with Google Translate

[audrasjb]

Moving to 6.3 with high priority as it was probably introduced in this milestone.

Pinging @isabel_brison and @ramonopoly as Editor Tech leads.

[isabel_brison]

Thanks for the heads up @audrasjb ! It's been added to the tracking issue in Gutenberg: ​https://github.com/WordPress/gutenberg/issues/51948 and is being looked into.

[wildworks]

To investigate this issue, a translation language detection log may be helpful.

chrome://translate-internals/#detection-logs

After opening this page, accessing the page under test would be logged.

I tested the following four patterns in order

• New Post
• Edit Post
• New Pattern
• Edit Pattern

Curiously, when I open the last Pattern Edit page, it is indeed detected as German. I attach the logs of the Detection Logs and Init Logs tabs. Nothing else was logged on the other tabs.

[wildworks]

Chrome detection logs

[wildworks]

Chrome init logs

[ramonopoly]

H1 element in editor

[ramonopoly]

Could this be a Chrome bug I wonder?

I see there are two <h1 /> tags in the file that renders the translation (src/wp-admin/edit-form-blocks.php)

First h1: <h1 class="screen-reader-text hide-if-no-js"><?php echo esc_html( $title ); ?></h1>
Second h1: <h1 class="wp-heading-inline"><?php echo esc_html( $title ); ?></h1>

So the same string twice.

As far as I can tell, it's the first h1 that is triggering the de translation detection.

The following appears to prevent the false language detection:

• Removing the first h1
• Removing the text in the first h1
• Adding an extra string, e.g., ?>!</h1> after the php tag in the first h1
• Adding an extra string, e.g., </h1>! after the closing first h1 tag

Here's what I also tried that had no effect in my testing:

• Removed classnames on the first h1
• Changing the first h1 element to span
• Removing the text in the second h1
• Removing the second h1 completely
• Changing the second h1 to h2
• First h1 moved out of container <div class="block-editor">
• Removing esc_html from first h1
• Wrapping first h1 text in span

[Toro_Unit]

I am a Japanese user.
I reproduced the problem when I set the language setting of WordPress 6.3 to default (en_US).

When I access /wp-admin/post-new.php?post_type=wp_block, it suggests a translation from English to Japanese.

Save the appropriate string (e.g. 'a', 'hello') in the pattern TItle. Reload the file, and a translation from English to Japanese is proposed.

However, when I accessed the pattern I just created from /wp-admin/edit.php?post_type=wp_block, a translation from German was proposed.

[Toro_Unit]

A translation from German to Japanese was proposed.

Trac ticket: https://core.trac.wordpress.org/ticket/58716

Update the Pattern post type's edit_item label to be Edit Block Pattern instead of Edit Pattern to resolve an edge case in Google Chrome where Edit Pattern causes the browser to think that the page is in German, and therefore displays the translation popup.

After some digging, I couldn't work out why exactly Google Chrome thinks that the page is in German based on the string Edit Pattern, but my suspicion is that the server-rendered view of the block editor doesn't involve very many words, which could potentially contribute to it not recognising the language correctly (it appears to ignore the lang attribute set on the page). Updating to Edit Block Pattern appears to resolve the issue.

Before	After

## Testing instructions

1. Go to ​http://localhost:8889/wp-admin/edit.php?post_type=wp_block
2. Edit an existing pattern (if you don't have any patterns, you'll need to add one first, then go back to the list and click Edit)
3. With this PR applied, Google Chrome should no longer prompt to translate the page when the editor loads

[isabel_brison]

In 56200:

Editor: update string incorrectly marked for translation in Chrome.

Update the Pattern post type edit_item label to be Edit Block Pattern instead of Edit Pattern so Chrome doesn’t open the translation modal.

Props andrewserong _{ramonopoly, eric.7186, audrasjb, wildworks, Toro_Unit.
Fixes #58716.}

Committed in r56200 / ​444bdf4.