Gutenberg 10.0 and 10.1 WSOD if language is RTL

[ockham]

Description

Both Gutenberg 10.0 and 10.1 produce a WSOD (White Screen of Death) when attempting to open the editor, if the current language is RTL.

The reason for this bug is in Gutenberg's G2 dependency: ItsJonQ/g2#266, which was fixed by ItsJonQ/g2#266. After the bug was found in GB 10.0, Gutenberg was then bumped to use the updated G2 version that's supposed to include the fix (#29224). The fix was cherry-picked to the release/10.0 branch, and v10.1 was released to include it. However, that didn't work -- the bug is still present in 10.1.

One theory is that the cherry-pick didn't update all instances of G2 packages in package-lock.json. A new attempt at fixing the issue can be found at #29241.

Step-by-step reproduction instructions

1. In the dashboard, go to Settings > General (wp-admin/options-general.php).
2. Locate the "Site Language" dropdown, and set it to an RTL language (e.g Arabic or Hebrew).
3. Try creating a new post (/wp-admin/post-new.php).

Expected behaviour

The editor to work.

Actual behaviour

A White Screen of Death.
The browser console has a number of errors. The relevant one is at the top:

{
  "name": "CssSyntaxError",
  "reason": "Unknown word",
  "source": "\n\tz-index:1000000;;\n\topacity: 1;\n\toutline: none;\n\ttransition: 40ms opacity linear;\n\ttransition-delay: 20ms; // Allows for the popover to reposition without being seen.\n",
  "line": 6,
  "column": 26,
  "message": "<css input>:6:26: Unknown word",
  "input": {
    "line": 6,
    "column": 26,
    "source": "\n\tz-index:1000000;;\n\topacity: 1;\n\toutline: none;\n\ttransition: 40ms opacity linear;\n\ttransition-delay: 20ms; // Allows for the popover to reposition without being seen.\n"
  }
}

WordPress information

• WordPress version: 5.6.2
• Gutenberg version: 10.0 and 10.1
• Are all plugins except Gutenberg deactivated? Yeah
• Are you using a default theme (e.g. Twenty Twenty-One)? Fo' sure

[WunderBart]

Fixed via #29256