Image Editor screen is scaled incorrectly

[fierevere]

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

[fierevere]

WordPress below 5.3 no text on buttons

[fierevere]

WordPress 5.3 scaled to 110%

[fierevere]

WordPress 5.3, 100% scale, localized text on buttons

[sathyapulse]

48780.patch

[sathyapulse]

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

[sathyapulse]

48780.1.patch

[sathyapulse]

Screenshot of the fix.

[sathyapulse]

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

[fierevere]

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]

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

[sabernhardt]

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]

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

[fierevere]

Attachment 48780.2.diff

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

[sathyapulse]

48780.3.patch

[sathyapulse]

The last patch should fix the problem.

[fierevere]

Attachment 48780.3.patch​ added

no changes for localized editor :/

[sathyapulse]

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

[fierevere]

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.

[afercia]

@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.

[afercia]

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.

[sabernhardt]

@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.

[audrasjb]

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]

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

[sabernhardt]

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.

[afercia]

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.

[sabernhardt]

@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).

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

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.

[sabernhardt]

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).

[kirasong]

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.

[johnbillion]

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

[sabernhardt]

refresh of adjusted float drop option, with #poststuff

[kirasong]

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.

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.