WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 4 weeks ago

#52809 reopened defect (bug)

Horizontal scrollbar problem in block editor

Reported by: withsalah Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.7
Component: Editor Keywords: needs-design-feedback needs-testing has-screenshots reporter-feedback
Focuses: ui, accessibility, css, rtl, administration Cc:

Description

After updating to WordPress 5.7. I noticed a small problem in the block editor. There is a horizontal scrollbar that makes the process of creating content messy.

&

In the previous versions, we could add blocks by clicking on the plus button between blocks. In the 5.7 version, The button goes to the left in the blank area.

Look at the following image that shows both bugs:
https://i.suar.me/Pgj8r/l

Attachments (3)

Horizontal scrollbar problem in block editor.png (84.1 KB) - added by withsalah 2 months ago.
Screenshot 2021-03-20 at 4.36.06 PM.png (2.3 MB) - added by quadthemes 8 weeks ago.
Add Block Button between two blocks shift to wrong side when using Gutenberg with RTL language.
Screenshot 2021-03-20 at 4.36.06 PM.2.png (535.9 KB) - added by quadthemes 8 weeks ago.
Add Block Button between two blocks shift to wrong side when using Gutenberg with RTL language.

Change History (13)

#1 @SergeyBiryukov
2 months ago

  • Focuses rtl added; coding-standards removed

Hi there, welcome to WordPress Trac! Thanks for the report.

Just linking to a ticket that might be related: #52565.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


8 weeks ago

#3 @quadthemes
8 weeks ago

  • Keywords reporter-feedback added

@withsalah
Hey there,
Welcome to WordPress Trac!
I am not able to reproduce the scrollbar issue by using RTL language on Chrome.
I was able to produce add block button issue.
Can you please give some more information like what browser (and which version) you're using, language, also what themes and plugins do you have installed.
It happens in some cases that some plugin/theme css broke the editor css.

Last edited 8 weeks ago by quadthemes (previous) (diff)

@quadthemes
8 weeks ago

Add Block Button between two blocks shift to wrong side when using Gutenberg with RTL language.

@quadthemes
8 weeks ago

Add Block Button between two blocks shift to wrong side when using Gutenberg with RTL language.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


5 weeks ago

#6 @quadthemes
4 weeks ago

@ryokuhi
There is one ticket related to position of add block on RTL languages on gutenberg repo: https://github.com/WordPress/gutenberg/issues/30867

I think this ticket can be closed now.
Also another issue seems to be more of specific browser issue or something to do with style overrides by any theme. Also I was not able to reproduce this on Chrome v89 and Firefox on Mac OS.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


4 weeks ago

#8 @ryokuhi
4 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Hello @withsalah,
the ticket was discussed today during the Accessibility Team's bug-scrub.
As one of the issues was reported in the Gutenberg repository and we're not able to reproduce the other, we're closing this ticket.
Feel free to reopen it if you have further feedback.

#9 @withsalah
4 weeks ago

  • Focuses administration added
  • Resolution reported-upstream deleted
  • Status changed from closed to reopened

Hello @ryokuhi and @quadthemes

I made a video that only explains the main problem. Leaving this problem unresolved causes other problems, and I have put two pictures that illustrate problems that occur that are not found in the video.

Video Link:
https://youtu.be/lp2R7h7_Mrg

Problems are not in the video.

1

The + button has disappeared under the left sidebar

https://i.suar.me/yxqyX/l

2

If the article has components other than texts, for example, pictures or videos, then when scrolling down the Horizontal scrollbar expands in a way that places the text badly. The following image from a real site.

https://i.suar.me/AAxm0/l


what I use:
Google Chrome Version 89.0.4389.128 (Official Build) (64-bit)
WordPress 5.7.1
Arabic version
Twenty Twenty-One theme
No plugins

#10 @quadthemes
4 weeks ago

@withsalah
I am still unable to reproduce the 2nd issue. @ryokuhi Can you please try that?

Like I said earlier I was able to reproduce the first issue.
One detail I forgot to mention earlier, scrollbar appears when add block insertor button is visible.
I tried many times to produce scrollbar issue with multiple types of blocks but was unable to do so. I am only seeing scrollbar when add insertor button is visible.

Also I was able to create a fix for the first issue and will be sending pull request to Gutenberg for the same.

Note: See TracTickets for help on using tickets.