Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#54809 closed defect (bug) (invalid)

UI issue on edit post

Reported by: sumitsingh's profile sumitsingh Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.8.3
Component: Editor Keywords: has-screenshots
Focuses: ui, css Cc:

Description

Hi,

Ui issue on edit post on mobile device. 3 dots and Exit code editor text not looking good. More information see SS.

Attachments (5)

WhatsApp Image 2022-01-13 at 6.34.24 PM.jpeg (48.2 KB) - added by sumitsingh 3 years ago.
1st SS
WhatsApp Image 2022-01-13 at 6.34.24 PM (1).jpeg (37.4 KB) - added by sumitsingh 3 years ago.
2nd SS
IMG_20220113_184145.jpg (200.4 KB) - added by sumitsingh 3 years ago.
Double dots
editor-top-bar-overflow-elementor-414.png (5.2 KB) - added by sabernhardt 3 years ago.
5.9 (RC2) with Elementor: "Edit with Elementor" button can crowd the other top bar elements, pushing them above and below the container
editor-top-bar-overflow-320.2.png (3.8 KB) - added by sabernhardt 3 years ago.
5.9 (RC2): top bar contents can wrap at narrow widths, but should stay within the top bar with only the standard elements

Download all attachments as: .zip

Change History (9)

@sumitsingh
3 years ago

Double dots

#1 @audrasjb
3 years ago

Hello and thank you for reporting this,

It looks like the issue is caused by Elementor. Could you please test without this plugin? Thank you.

@sabernhardt
3 years ago

5.9 (RC2) with Elementor: "Edit with Elementor" button can crowd the other top bar elements, pushing them above and below the container

@sabernhardt
3 years ago

5.9 (RC2): top bar contents can wrap at narrow widths, but should stay within the top bar with only the standard elements

#2 @sabernhardt
3 years ago

  • Component changed from Posts, Post Types to Editor
  • Focuses accessibility administration removed

Elementor's (and probably other page builders') authors need to know about this. WordPress 5.9 will have a fix for wrapping standard elements, but it does not work well with additional elements.

#3 @umesh84
3 years ago

As the issue is arising due to the button text. It is preferable to remove the text "Edit with elementor" and keep the icon. I am attaching the CSS for that

Here is the image:
https://prnt.sc/26grn3h

Here is the code:

@media only screen and (max-width: 767px) {

body .block-editor #elementor-switch-mode {

    margin: 0;
}
body .block-editor #elementor-switch-mode-button {

    min-height: 33px;
    padding: 0 10px;


}
 body .block-editor #elementor-switch-mode .elementor-switch-mode-off {
   
    font-size: 0;
}
body .block-editor #elementor-switch-mode .elementor-switch-mode-off i {

    font-size: 14px;
    padding: 0;
}
}

#4 @sabernhardt
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Elementor would need to change/remove the button, so please report this on their support forum.

I'll close the ticket here. If the block editor needs changing to accommodate elements like this button, however, please open an issue on the Gutenberg repo and link to that here. Then the resolution could be 'reported-upstream' instead of 'invalid' (not Core).

Note: See TracTickets for help on using tickets.