search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Block content (Custom HTML) overlaps with line numbers and left edge not visible #35499

Open francisbarton opened 3 years ago

francisbarton commented 3 years ago

Description

When editing a Custom HTML block*, the HTML is hard to read and work with because the line numbers are overlapping. Also, the left edge of the HTML is not visible. (See screenshot). There is a vertical scrollbar but no horizontal scrollbar.

Furthermore, (a separate issue) when I select a line of HTML and intend to Cut and Paste it elsewhere in the HTML, as soon as I use Ctrl+X to Cut, the whole widget gets removed rather than just the selected text!

I have had to resort to editing the HTML in an external editor. This issue is arising for me, using Firefox 94 on Windows 10.

*actually in Appearance > Widgets not in a Post or Page

Step-by-step reproduction instructions

  1. Go to Appearance > Widgets in the Wordpress dashboard
  2. Click on Custom HTML widget
  3. Click on visual representation/rendering of HTML in order to access the HTML itself
  4. Attempt to edit the HTML within the "Content" section.

Screenshots, screen recording, code snippet

image

Environment info

WordPress 5.8.1, Gutenberg version ???, theme - custom Browser - Firefox 94, on desktop Windows 10, viewport size ~ 1920x1200

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

noisysocks commented 2 years ago

Confirmed.

Note that the easiest way to reproduce this is to install the Classic Widgets plugin, add a Custom HTML widget, then deactivate the Classic Widgets plugin and browse to Appearance → Widgets.

It looks like it might be an issue with CSS cascading.