Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Gutenberg editor: paragraph toolbar unusable in Cover blocks in Column blocks when multiple columns present #38102

Closed andreabadgley closed 4 years ago

andreabadgley commented 4 years ago

Steps to reproduce

  1. Start in the Calypso block editor for a page or post with any theme enabled: https://wordpress.com/block-editor/page/
  2. Add a column block with 3, 4, or 5 columns (this error also occurs in the edit screen for some themes when only 2 columns are present)
  3. Add a cover block to one of the columns
  4. Click into the paragraph block to add words and potentially edit them, for example, to add a link.

What I expected

I expected to have a full toolbar to edit the words on the cover block: full toolbar on cover block

What happened instead

The toolbar is obscured by the next column to the right when multiple columns are present, rendering options like B, I, linking, and additional options unusable.

Browser / OS version

Screenshots from Chrome 78.0.3904.108 on MacOS Catalina 10.15.1. This also happens in the desktop app and in Firefox 70.0.1.

Screenshot / Video

In Twenty Nineteen with three columns: Twenty Ninteen three columns

In Mayland with three columns: Mayland three columns

In Bard Pro theme with two columns: Two columns in Bard Pro theme

Context / Source

Originally raised by a #user-report in live chat in 16401673-hc. I notified them I would follow up in 2528348-zen if/when it's fixed.

andreabadgley commented 4 years ago

Another report of this in 17465052-hc.

Workaround: Expand column to full width in order to access toolbar to make formatting changes to text. When finished, click reset for the column width.

stale[bot] commented 4 years ago

This issue has been marked as stale and will be closed in seven days. This happened because:

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.