WordPress.org

Make WordPress Core

Opened 12 days ago

Last modified 26 hours ago

#48780 new defect (bug)

Image Editor screen is scaled incorrectly

Reported by: fierevere Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Media Keywords: has-screenshots
Focuses: ui, administration Cc:
PR Number:

Description

With older WordPress we got just icon for tool buttons
Crop, Rotate Left, Rotate Right, Flip vertical, Flip horizontal, Undo, Redo

Everything looked right, with 100% browser view scale or other views.
See iedit-wp52.png

With WP 5.3 buttons have text, which can cause editor look weird, tool buttons sometimes cant fit on screen and are wrapped below the column of widgets (Scale,Crop,Thumbnail settings).
See iedit-eng-wp53-scale110.png
Problem appears with browser view scaled to 110% and more.

However, if localized text for buttons is longer than english original,
problem may appear even with 100% scale (default view!)
See iedit-rus-wp53.png

Attachments (11)

iedit-wp52.png (377.0 KB) - added by fierevere 12 days ago.
WordPress below 5.3 no text on buttons
iedit-eng-wp53-scale110.png (304.6 KB) - added by fierevere 12 days ago.
WordPress 5.3 scaled to 110%
iedit-rus-wp53.png (306.5 KB) - added by fierevere 12 days ago.
WordPress 5.3, 100% scale, localized text on buttons
48780.patch (354 bytes) - added by sathyapulse 12 days ago.
48780.patch
48780.1.patch (469 bytes) - added by sathyapulse 12 days ago.
48780.1.patch
Screenshot 2019-11-24 at 10.52.12 PM.png (375.5 KB) - added by sathyapulse 12 days ago.
Screenshot of the fix.
iedit-rus-patched-1.png (370.7 KB) - added by fierevere 12 days ago.
patched-1, still looks bad with long text on buttons
48780.2.diff (622 bytes) - added by sabernhardt 12 days ago.
adds min-width and max-width to image editor column
48780.3.patch (1.2 KB) - added by sathyapulse 12 days ago.
48780.3.patch
image editor on 5.2 at 1150.png (584.1 KB) - added by afercia 10 days ago.
testing.jpg (176.6 KB) - added by afercia 10 days ago.

Change History (26)

@fierevere
12 days ago

WordPress below 5.3 no text on buttons

@fierevere
12 days ago

WordPress 5.3 scaled to 110%

@fierevere
12 days ago

WordPress 5.3, 100% scale, localized text on buttons

#1 @SergeyBiryukov
12 days ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3.1

@sathyapulse
12 days ago

48780.patch

#2 @sathyapulse
12 days ago

Setting the width to auto fixes the issue for 110% scale but still, it breaks for 125%.

@sathyapulse
12 days ago

48780.1.patch

@sathyapulse
12 days ago

Screenshot of the fix.

#3 @sathyapulse
12 days ago

The second patch fixes the problem in all the browser scales.

#4 @fierevere
12 days ago

48780.1.patch
wraps one button to lower row, but still doesnt help if buttons have long text.
See: iedit-rus-patched-1.png

@fierevere
12 days ago

patched-1, still looks bad with long text on buttons

#5 @sabernhardt
12 days ago

Related: #47116 and #47136

The CSS portion of 47136.diff should take care of this issue, and the PHP part could fix the illogical markup order as well. If we're interested in only the CSS changes for a minor release (in case swapping column order might cause trouble with a plugin or something), I'll upload a patch here with that alone.

@sabernhardt
12 days ago

adds min-width and max-width to image editor column

#6 @fierevere
12 days ago

Attachment 48780.2.diff

Same as above with 48780.1.patch
buttons with localized text are still wrapped below middle column

@sathyapulse
12 days ago

48780.3.patch

#7 @sathyapulse
12 days ago

The last patch should fix the problem.

#8 @fierevere
11 days ago

Attachment 48780.3.patch​ added

no changes for localized editor :/

#9 @sathyapulse
11 days ago

@fierevere Did you run npm run build command after applying a patch? The fix worked for me even with long words.

#10 @fierevere
11 days ago

I use WP 5.3 installation and patch utility (GNU diffutils) to apply patches.

# patch -p1 < 48780.3.patch 
patching file wp-admin/css/media.css

then clearing browser cache.

Tried with Otter (blink engine, chrome-like) default settings on FHD (1920x1080) screen, looks good, but breaks at 120% scale.
My default FireFox has layout.css.devPixelsPerPx set to 1.25, which makes it look better on FHD display with bigger text and elements, thats why i have new media editor broken by default.

Last edited 11 days ago by fierevere (previous) (diff)

#11 follow-up: @afercia
10 days ago

@fierevere thanks for your feedback.

Worth noting the layout breakage in the Image Editor isn't new in WordPress 5.3. It always happened, depending on the edited image size and the viewport width. Not something related to the new buttons text. The new buttons just make this more evident, as the layout breaks a bit before when narrowing the screen.

See screenshot attached below, taken on WordPress 5.2 with Firefox and a viewport width around 1150 pixels. See that the layout breaks also with the old buttons. Can be reproduced on all the previous versions.

As pointed out in a previous comment, a fix was explored on #47116 and then postponed to #47136 because at some point it was clear that the Image Editor page needs a substantial refactoring. This page is also one of the oldest ones in the WordPress admin and it shows its age.

Not personally opposed to a partial, quick, improvement in the next minor release but strictly speaking this isn't a regression that needs to be addressed in 5.3.1 as it always happened on all the previous WordPress versions. I'd recommend everyone to focus their effort on #47136 which requires more work and more substantial improvements. Also, since this issue is already tracked on #47136, this ticket should be considered a duplicate.

#12 @afercia
10 days ago

  • Keywords needs-patch removed

Regarding the approach used on this ticket patches, setting a width or a min-width would produce the opposite effect. The edited image would overlap the column on the right, making impossible to use the interface. See screenshot attached below, taken with 48780.3.patch applied.

As similar fix was already tried on #47116 and then reverted in [46331] because of the overlapping. I'm afraid this approach can't really solve the issue and I'd suggest again to focus on a major refactoring on #47136.

@afercia
10 days ago

#13 @sabernhardt
8 days ago

@sathyapulse Thanks for trying another option.
While 48780.3.patch may cover more cases, it unfortunately introduces an overlap in the 2-column layout that was not there in previous versions at some screen sizes (at 100% zoom, about 1066-1150px wide, with an image wider than it is tall). In mine, I had set the entire column's min-width specifically to 400 pixels because the image can be (only) as wide as that, so the floating column would drop down if there isn't enough space for all 400 pixels.

My patch (48780.2.diff) clearly does not correct the problem as I had thought it would, but it still might be good enough as a partial fix in a minor version. In my tests it keeps the image's column at the top, as it had been in 5.2, in the 2-column layout when the screen/window is about 1168-1348px+ wide (100% zoom). If you're interested in a temporary fix, I'd appreciate more testing to ensure my option does not make the layout worse than 5.3.0 in any case (various languages and zoom levels, 1-column and 2-column layouts, expanding the auto-folded side menu at narrower widths, etc.). Note: the first row of five buttons is allowed to wrap to the next line(s), and the Undo and Redo buttons are on a separate line in 5.3.

(I purposely responded here instead of #47136, intending to keep further discussion of a temporary patch here, separate from the ticket that would address a real fix.)

And until a better layout is provided in a future (major) version, I'd encourage people using the editor to consider switching to the 1-column layout under Screen Options.

Last edited 8 days ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


31 hours ago

#15 in reply to: ↑ 11 @audrasjb
26 hours ago

  • Milestone changed from 5.3.1 to 5.4

Hi,
Let's move this ticket to the next major release as it's not a regression from WP 5.3 (see Andrea’s quotes below - comment 11). Not closing it for the moment as it may be good to ensure to keep some visibility on this particular issue.

Thanks,
Jb

Worth noting the layout breakage in the Image Editor isn't new in WordPress 5.3. It always happened, depending on the edited image size and the viewport width. Not something related to the new buttons text. The new buttons just make this more evident, as the layout breaks a bit before when narrowing the screen.

See screenshot attached below, taken on WordPress 5.2 with Firefox and a viewport width around 1150 pixels. See that the layout breaks also with the old buttons. Can be reproduced on all the previous versions.

Not personally opposed to a partial, quick, improvement in the next minor release but strictly speaking this isn't a regression that needs to be addressed in 5.3.1 as it always happened on all the previous WordPress versions. I'd recommend everyone to focus their effort on #47136 which requires more work and more substantial improvements. Also, since this issue is already tracked on #47136, this ticket should be considered a duplicate.

Note: See TracTickets for help on using tickets.