Gutenberg: [4.3.0] CJK (multi-byte character) input issues using the List, Quote, Pullquote block with Firefox and Chrome

[inc2734]

Describe the bug
When Japanese is entered in the list block, conversion is decided automatically.
I also reproduced custom blocks set to multiline="li".

To Reproduce
Steps to reproduce the behavior:

1. Insert list block
2. Enter multi-byte characters
3. See error

Screenshots

on https://wordpress.org/gutenberg/

Desktop (please complete the following information):

• OS: macOS High Sierra
• Browser Chrome
• Version 70.0.3538.77

It also reproduced in Firefox, but it worked correctly in Safari.

Additional context
I use Gutenberg v4.3.
This problem does not occur in v4.2.

[shinyabw]

I tested with WordPress 4.9.8 and Gutenberg 4.3.0 and can confirm that Japanese text (double-byte character) is not usable (cannot type properly) in the list block. I also found the same issue exists with the quote and pullquote blocks.

[lqdjp]

I also found the same issue in the cover and button block.

[mongonta0716]

I also found the same issue.
Problems also occur in Google Chrome(70.0.3538.102) on Windows10 Pro 64bit(build 17134.345).
It also reproduces in Firefox(63.0.1).

It worked correctry in Microsoft Edge(42.17134.1.0).

[shinyabw]

@mongonta0716 Thank you. I tested further. I am using Mac OS 10.13.6. The issue exsists with Firefox 63.0.1 and Chrome 70.0.3538.102 (Official Build), but it worked fine on Safari 12.0.1.

@lqdjp I could not confirm the issue is the cover and button blocks.

[torounit]

Using <RichText multiline> will cause this problem.

[shinyabw]

@lqdjp I wonder if you are testing this issue on WordPress 5.0-beta4-43896.

[lqdjp]

@shinyabw Yes, I tested with WordPress 5.0-beta4-43896.

[waviaei]

Firefox console is given me this error. Not quire sure if it is related, but this is the only error message I get. It is linked to this document https://developer.mozilla.org/en-US/docs/Tools/Debugger/Source_map_errors

ソースマップエラー: TypeError: NetworkError when attempting to fetch resource.
リソース URL: moz-extension://20e5fbb1-ec98-5141-a675-4a657c2fcc84/node_modules/webextension-polyfill/dist/browser-polyfill.js
ソースマップ URL: browser-polyfill.js.map[詳細]

Desktop (please complete the following information):

• OS: macOS High Sierra
• Browser Firefox

• Version 63.0.1

  I use 5.0-beta4-43896.
  Only plugin activated is the Beta Tester.

[ellatrix]

Thanks for the report and I'm sorry for the problems you're having! I will need some more information to be able to fix the problem. It's strange that this only happens in the list and quote blocks.

• Is e.g. the paragraph entirely fine? No input issues at all?
• How do I reproduce the issue precisely? I know nothing about Japanese, so it's hard for me to test. I managed to install Japanese keyboard on my Mac, and I have three new options: Romaji, Hiragana and Katakana. I'm guessing the problem lies with both Hiragana and Katakana. When I try to input characters in e.g. the list block, only latin characters appear. Is this the problem? This seems to be a bit different fro the GIF you shared.

As mech information as possible would be really appreciated!

[ellatrix]

with Firefox and Chrome

Can you confirm this works properly in all other browsers?

[inc2734]

Is e.g. the paragraph entirely fine? No input issues at all?

Yes, there is nothing wrong with the paragraph block.

Can you confirm this works properly in all other browsers?

I have only Mac, so IE, Edge can not be confirmed. Sorry.
It does not seem to be a problem with Mac's Safari.

[ellatrix]

Could you elaborate more on what is supposed to happen versus what actually happens? I don't know enough about Japanese to understand the problem fully. Thanks!

[ellatrix]

Also, was this a problem before 4.3, or did this only happen after you updated to 4.3?

[torounit]

@lqdjp after 4.3. not happen this problem 4.3.

[inc2734]

I have three new options: Romaji, Hiragana and Katakana. I'm guessing the problem lies with both Hiragana and Katakana.

I may also be wrong because I am not familiar with the keyboard. I use Romaji mode. I did not know how to use Hiragana mode and Katakana mode, but I think that problems will probably occur even in those modes.

When I try to input characters in e.g. the list block, only latin characters appear. Is this the problem? This seems to be a bit different fro the GIF you shared.

To enter Japanese, press the full-width / half-width switch button and enter romaji.

For example, I would like to enter "にほん" (nihonn).

1. Click the full-width / half-width switch button
2. I type "nihonn"
3. Click the conversion button

But, Gutenberg v4.3,

1. Click the full-width / half-width switch button
2. I type "ni" (に)

At this stage the conversion is forcibly finalized.

[inc2734]

There was a problem also in the paragraph block !
The same problem is placed in strong, italic, and link in the paragraph block.

[torounit]

@iseulde

https://github.com/WordPress/gutenberg//compare/v4.2.0...v4.3.0#diff-e373e566d15f8f4196eb0b3998adbdd7L437

back to this line. not happen.

@inc2734 Please Test!!!

[ellatrix]

I think this in fixed by #11908 as well. Could someone confirm?

[mongonta0716]

I think this in fixed by #11908 as well. Could someone confirm?

@iseulde I can check it if you have a plugin zip file. However, the environment is Windows 10 only.

[waviaei]

@iseulde Yes, I can confirm for fixed for Mojave. Checked in Chrome, Firefox and Safari in same way as written in https://github.com/WordPress/gutenberg/pull/11908#issuecomment-439089679

[torounit]

@iseulde Works well on Chrome for Mojave.

[mongonta0716]

@iseulde I updated to version 4.4.0 and confirmed it.

Environment
OS:Windows 10 Pro 64bit
Browsers:
Google Chrome
Firefox
Microsoft Edge

[inc2734]

It worked with Gutenberg v4.4. Thank you very much !!

[lqdjp]

Works well on Chrome for High Sierra.

[ellatrix]

Thanks for testing!