Make WordPress Core

Opened 3 years ago

Closed 11 months ago

Last modified 11 months ago

#52809 closed defect (bug) (reported-upstream)

Horizontal scrollbar problem in block editor

Reported by: withsalah's profile withsalah Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.7
Component: Editor Keywords: needs-design-feedback needs-testing has-screenshots close
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 3 years ago.
Screenshot 2021-03-20 at 4.36.06 PM.png (2.3 MB) - added by quadthemes 3 years 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 3 years ago.
Add Block Button between two blocks shift to wrong side when using Gutenberg with RTL language.

Change History (17)

#1 @SergeyBiryukov
3 years 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.


3 years ago

#3 @quadthemes
3 years ago

  • Keywords reporter-feedback added

@withsalah
Hey there,
Welcome to WordPress Trac!
I am not able to reproduce the issue by using RTL language.
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.

Version 0, edited 3 years ago by quadthemes (next)

@quadthemes
3 years ago

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

@quadthemes
3 years 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.


3 years ago

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


3 years ago

#6 @quadthemes
3 years 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.


3 years ago

#8 @ryokuhi
3 years 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
3 years 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
3 years 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.

#11 @joedolson
13 months ago

  • Keywords close added

@withsalah Can you check and see whether this issue is still a problem? The related issue in Gutenberg was (https://github.com/WordPress/gutenberg/issues/30867) was fixed in 2021, and trying to confirm whether that resolved this issue, as well.

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


11 months ago

#13 @joedolson
11 months ago

  • Keywords reporter-feedback removed
  • Resolution set to fixed
  • Status changed from reopened to closed

To the best of our knowledge, this was fixed upstream in 2021, so we're closing this. However, since we don't have direct references to be able to demonstrate exactly when and how this was fixed, don't hesitate to reopen if needed.

#14 @SergeyBiryukov
11 months ago

  • Resolution changed from fixed to reported-upstream
Note: See TracTickets for help on using tickets.