WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 5 weeks ago

#48780 closed defect (bug) (fixed)

Image Editor screen is scaled incorrectly

Reported by: fierevere Owned by: SergeyBiryukov
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Media Keywords: has-screenshots has-patch commit fixed-major
Focuses: ui, css, administration Cc:

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 (15)

iedit-wp52.png (377.0 KB) - added by fierevere 4 months ago.
WordPress below 5.3 no text on buttons
iedit-eng-wp53-scale110.png (304.6 KB) - added by fierevere 4 months ago.
WordPress 5.3 scaled to 110%
iedit-rus-wp53.png (306.5 KB) - added by fierevere 4 months ago.
WordPress 5.3, 100% scale, localized text on buttons
48780.patch (354 bytes) - added by sathyapulse 4 months ago.
48780.patch
48780.1.patch (469 bytes) - added by sathyapulse 4 months ago.
48780.1.patch
Screenshot 2019-11-24 at 10.52.12 PM.png (375.5 KB) - added by sathyapulse 4 months ago.
Screenshot of the fix.
iedit-rus-patched-1.png (370.7 KB) - added by fierevere 4 months ago.
patched-1, still looks bad with long text on buttons
48780.2.diff (622 bytes) - added by sabernhardt 4 months ago.
adds min-width and max-width to image editor column
48780.3.patch (1.2 KB) - added by sathyapulse 4 months ago.
48780.3.patch
image editor on 5.2 at 1150.png (584.1 KB) - added by afercia 4 months ago.
testing.jpg (176.6 KB) - added by afercia 4 months ago.
Edit Media 1366x768.png (72.2 KB) - added by sabernhardt 4 months ago.
English, 2-column layout, default zoom, full screen (1366x768), in Firefox
48780.4.diff (582 bytes) - added by sabernhardt 7 weeks ago.
adjusts the min-width and max-width within existing breakpoints
48780.adjusted-float-drop.diff (1.7 KB) - added by sabernhardt 7 weeks ago.
option enforces one-column layout on attachment editor screens up to 1200px
48780.5.diff (1.7 KB) - added by sabernhardt 5 weeks ago.
refresh of adjusted float drop option, with #poststuff

Change History (54)

@fierevere
4 months ago

WordPress below 5.3 no text on buttons

@fierevere
4 months ago

WordPress 5.3 scaled to 110%

@fierevere
4 months ago

WordPress 5.3, 100% scale, localized text on buttons

#1 @SergeyBiryukov
4 months ago

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

@sathyapulse
4 months ago

48780.patch

#2 @sathyapulse
4 months ago

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

@sathyapulse
4 months ago

48780.1.patch

@sathyapulse
4 months ago

Screenshot of the fix.

#3 @sathyapulse
4 months ago

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

#4 @fierevere
4 months 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
4 months ago

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

#5 @sabernhardt
4 months 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
4 months ago

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

#6 @fierevere
4 months ago

Attachment 48780.2.diff

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

@sathyapulse
4 months ago

48780.3.patch

#7 @sathyapulse
4 months ago

The last patch should fix the problem.

#8 @fierevere
4 months ago

Attachment 48780.3.patch​ added

no changes for localized editor :/

#9 @sathyapulse
4 months ago

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

#10 @fierevere
4 months 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 4 months ago by fierevere (previous) (diff)

#11 follow-up: @afercia
4 months 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
4 months 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
4 months ago

#13 @sabernhardt
4 months 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 4 months ago by sabernhardt (previous) (diff)

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


4 months ago

#15 in reply to: ↑ 11 @audrasjb
4 months 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.

@sabernhardt
4 months ago

English, 2-column layout, default zoom, full screen (1366x768), in Firefox

#16 @sabernhardt
4 months ago

Well, it is a regression for anyone who has used the Image Editor prior to 5.3 with a screen size, language and/or zoom level where the floating layout started to break in this version.

Now the column also drops down (off screen) on my standard 1366x768 laptop screen, in English, at default zoom, with default 2-column layout. So the image to edit no longer displayed where I expected to see it, as if it had disappeared ("below the fold").

Switching to the 1-column layout would be better for now, but that requires both knowing that there is another option and knowing how to adjust it.

Maybe my patch isn't good enough, and it's probably too late for adequate testing before the first minor release (also note: this ticket has no owner). However, I actually think we should push for a small fix on this before the next major release.

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


2 months ago

#18 @audrasjb
2 months ago

  • Keywords has-patch needs-testing added

#19 @afercia
2 months ago

  • Keywords needs-patch added; has-patch needs-testing removed

Let's try to get this in 5.4 :)

Re: 48780.2.diff

  • Please avoid to introduce one more media query breakpoint at 783px. This value isn't used anywhere in core. We should try to use existing breakpoints. I'd rather reverse the logic and set min-width / max-width by default, then reset them at a the breakpoint max-width 782px
  • The bottom margin is changed to 20px. It's best to not introduce unrelated changes. If a change is worth it, then please mention in a comment in the ticket the reasons why.
  • In my testing, with a large image and the 2-columns layout, the float drop happens anyways with a viewport width around 1160 pixels. This is more or less what always happened. Further improvements should preferably go in #47136 where a larger refactoring is being considered.

#20 @sabernhardt
2 months ago

@afercia Yes, thanks. The bottom padding change there is a remnant from when I tried putting the left column first, which would make it unnecessary here.

Also for the next patch:
The layout automatically changes from 2-column to 1-column at 850px currently. If we want to eliminate the float drop between there and about 1160, we could consider increasing that break point (1200px?) for each of the elements affected (including #wpbody-content #post-body.columns-2 #postbox-container-1, #wpbody-content #poststuff #post-body, and the .columns-prefs screen option).

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


8 weeks ago

@sabernhardt
7 weeks ago

adjusts the min-width and max-width within existing breakpoints

@sabernhardt
7 weeks ago

option enforces one-column layout on attachment editor screens up to 1200px

#22 @sabernhardt
7 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

48780.4.diff simply sets the min-width and max-width within existing breakpoints (with no padding change) to fix where the layout started to break in version 5.3.

The 48780.adjusted-float-drop.diff option also enforces one-column layout from 850-1200 pixels wide (or zoom equivalent) for attachment editor screens. This would change the screen for any attachment type, though, not just images that need editing. It repurposes the style set that enforces one-column layout for the (classic) post editor, and it leaves the post editor's current breakpoint at 850. There still is a range around 770-870 where expanding the side navigation can push the main image editor column down, but my attempts to fix that situation clearly made it worse.

Last edited 7 weeks ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #core-media by sabernhardt. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


7 weeks ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


6 weeks ago

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


6 weeks ago

#27 @SergeyBiryukov
6 weeks ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#28 @sabernhardt
5 weeks ago

Note: If the 48780.adjusted-float-drop.diff option is still being considered, it targets a .poststuff class (instead of the #poststuff ID that would be restored by reverting #46964).

#29 @mikeschroder
5 weeks ago

I don't know if I'm the best person to review the CSS portions here, but I tested 48780.adjusted-float-drop.diff and really like how much better usability is with a more narrow viewport.

#30 @mikeschroder
5 weeks ago

  • Focuses css added

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


5 weeks ago

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


5 weeks ago

#33 @johnbillion
5 weeks ago

  • Keywords needs-refresh added

This patch needs a minor refresh to switch from .poststuff to #poststuff following [47410].

@sabernhardt
5 weeks ago

refresh of adjusted float drop option, with #poststuff

#34 @sabernhardt
5 weeks ago

  • Keywords needs-refresh removed

#35 @mikeschroder
5 weeks ago

Thanks much @sabernhardt!

Just tested the refresh, and works as expected. Happy to be a +1 here, or handle a commit if that's desired.

#36 @mikeschroder
5 weeks ago

  • Keywords commit added; needs-testing removed

#37 @SergeyBiryukov
5 weeks ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 47418:

Media: Improve the appearance of image editor on small and medium screens.

This prevents the main area of Edit Media screen from being pushed down too far.

Props sabernhardt, afercia, fierevere, sathyapulse, mikeschroder, johnbillion.
Fixes #48780. See #47136.

#38 @SergeyBiryukov
5 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

While technically not a regression in 5.3, this became more prominent in that release, so let's backport [47418] to the 5.3 branch too.

#39 @SergeyBiryukov
5 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 47419:

Media: Improve the appearance of image editor on small and medium screens.

This prevents the main area of Edit Media screen from being pushed down too far.

Props sabernhardt, afercia, fierevere, sathyapulse, mikeschroder, johnbillion.
Merges [47418] to the 5.3 branch.
Fixes #48780. See #47136.

Note: See TracTickets for help on using tickets.