Automattic / isolated-block-editor

Repackages Gutenberg's editor playground as a full-featured multi-instance editor that does not require WordPress.
343 stars 50 forks source link

CSS issues in multiple editor parts #160

Closed fernandomm closed 2 years ago

fernandomm commented 2 years ago

I was running this project locally and noticed some CSS issues that aren't present in the "original" Gutenberg editor.

Some examples:

  1. When a column is focused, the border is off

Captura de Tela 2022-06-16 às 10 52 12

  1. The close icon border has problems

Captura de Tela 2022-06-16 às 10 31 59

  1. When searching for a new block, horizontal scrollbars are created when cursor is hover an item

Captura de Tela 2022-06-16 às 10 50 37

  1. The inspector CSS seems to be missing

Captura de Tela 2022-06-16 às 10 58 27

At least the 3 first issues seems to be caused by this CSS https://github.com/Automattic/isolated-block-editor/blob/9451d68a4e002a39f9badbb6fdef4f247325a4c8/src/components/block-editor/style.scss#L40-L50

After removing it the 3 first issues were fixed without any noticeable side effects. Is it safe to remove these custom rules? I can submit a PR if you're ok with it.

johngodley commented 2 years ago

Sure, a PR would be great! It's likely this is old CSS that was relevant to a previous version of Gutenberg and may now be causing problems.

I was able to reproduce 1.

For 2 this is seen in core Gutenberg too. The icon shouldn't actually appear, and this was fixed in #157

I can't reproduce 3, but maybe there are some other local differences.

4 is probably worth splitting off into a separate issue.

johngodley commented 2 years ago

This will be fixed by #165 and #164

johngodley commented 2 years ago

This should be fixed now.