Make WordPress Core

Opened 10 months ago

Closed 9 months ago

Last modified 9 months ago

#58716 closed defect (bug) (fixed)

Chrome opens Translate modal when opening a pattern from Manage Patterns

Reported by: eric7186's profile eric.7186 Owned by: isabel_brison's profile isabel_brison
Milestone: 6.3 Priority: high
Severity: normal Version:
Component: Editor Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (5)

Screenshot 2023-07-05 083314.png (131.5 KB) - added by eric.7186 10 months ago.
Screenshot of Manage Patterns Edit with Google Translate
chrome_detection_logs.png (38.2 KB) - added by wildworks 10 months ago.
Chrome detection logs
chrome_init_logs.png (50.8 KB) - added by wildworks 10 months ago.
Chrome init logs
h1-edit-pattern-translation-editor.png (136.9 KB) - added by ramonopoly 9 months ago.
H1 element in editor
screenshot-2023-07-11 1.35.43.png (66.6 KB) - added by Toro_Unit 9 months ago.
A translation from German to Japanese was proposed.

Download all attachments as: .zip

Change History (14)

@eric.7186
10 months ago

Screenshot of Manage Patterns Edit with Google Translate

#1 @audrasjb
10 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.3
  • Priority changed from normal to high

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

Pinging @isabel_brison and @ramonopoly as Editor Tech leads.

#2 @isabel_brison
10 months ago

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.

#3 @wildworks
10 months ago

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
10 months ago

Chrome detection logs

@wildworks
10 months ago

Chrome init logs

@ramonopoly
9 months ago

H1 element in editor

#4 @ramonopoly
9 months ago

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

#5 @Toro_Unit
9 months ago

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
9 months ago

A translation from German to Japanese was proposed.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


9 months ago

This ticket was mentioned in PR #4826 on WordPress/wordpress-develop by @andrewserong.


9 months ago
#7

  • Keywords has-patch added; needs-patch removed

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
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/14988353/c4de6bed-8637-42fd-b068-c21c47f39f80 https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/14988353/e113fab3-9418-44a8-82e7-564dc22817cc

## 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

#8 @isabel_brison
9 months ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

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.

@isabel_brison commented on PR #4826:


9 months ago
#9

Committed in r56200 / 444bdf4.

Note: See TracTickets for help on using tickets.