WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#31250 closed defect (bug) (fixed)

Twenty Fifteen editor styles look weird on mobile

Reported by: iseulde Owned by:
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

It doesn't look at all like what the front-end looks like.
Text is padded too much to the right.
Images are not resized to fit which causes the iframe to expand (off screen). There's no way to scroll horizontally and the editor is completely useless.

Attachments (6)

IMG_0900.PNG (71.9 KB) - added by iseulde 6 years ago.
IMG_0901.PNG (85.5 KB) - added by iseulde 6 years ago.
image.jpg (82.9 KB) - added by iseulde 6 years ago.
31250.patch (1.6 KB) - added by lukecarbis 6 years ago.
Add media queries in the editor stylesheet, to better display lists and blockquotes.
fix.31250.patch (681 bytes) - added by jacklenox 6 years ago.
fix-v2.31250.patch (2.2 KB) - added by jacklenox 6 years ago.
Update to previous patch to include fixes for Twenty Fourteen and Twenty Thirteen

Download all attachments as: .zip

Change History (28)

@iseulde
6 years ago

@iseulde
6 years ago

@iseulde
6 years ago

#1 @lancewillett
6 years ago

  • Milestone changed from Future Release to 4.2

#2 @iseulde
6 years ago

Let's handle the images in #31253, which is a problem in all themes.

@lukecarbis
6 years ago

Add media queries in the editor stylesheet, to better display lists and blockquotes.

#3 @lukecarbis
6 years ago

  • Keywords has-patch added; needs-patch removed

Some small additions to the editor stylesheet. The only effected elements were lists and blockquotes.

I've tested with RTL, but that's important enough to test again.

Please take a look at my "Contents" style commenting for the media query section. I've implemented 9.0: Media Query and 9.1: Mobile Large. But since there's only one media query size required, is it better to just have 9.0: Media Query Mobile Large?

#4 @lancewillett
6 years ago

  • Keywords ui-feedback needs-testing added

#5 @iamtakashi
6 years ago

At the current state, the editor style is just for giving a nuance of how it'd look rather than pixel perfect replication of the front-end. If we really want to replicate the front-end, I think we'd need a quite lot of additional CSS. Issues I can think of right now are...

  • The width of the editor is not equal to the viewport so it won't be exact like a front-end editor.
  • On a tablet (larger than 783px viewport), the editor width varies if you have collapsed menu or not.

#6 @lancewillett
6 years ago

  • Keywords 2nd-opinion added; needs-testing removed

I think this needs more discussion. Which parts of editor styles aren't quite useful yet on mobile? Could we make a few small changes to make it better?

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


6 years ago

#8 @DrewAPicture
6 years ago

  • Keywords dev-feedback added; 2nd-opinion removed
  • Version set to 4.1

@iamtakashi @lancewillett: Is there a consensus here on whether this is something we should cover? I know the Press This team ran into similar issues when testing the editor, e.g. elements expanding beyond the viewport.

It's my understand they simply enforced responsive styles in the viewport, though @michael-arestad may have more information on the Press This implementation.

#9 @lancewillett
6 years ago

No consensus yet. Leaning toward closing as wontfix.

#10 @iseulde
6 years ago

Leaning toward closing as wontfix.

I would disagree. The font looks bigger and the text is indented in a way that makes it more difficult to edit the content.

#11 @iamtakashi
6 years ago

If we work on this, what would be the goal? There will always be cases like "too big text" or "too small text" compared with the front-end because of the issues I mentioned.

#12 @lancewillett
6 years ago

  • Milestone changed from 4.2 to Future Release

Let's table for this release. Goals for the changes need to more specific.

@jacklenox
6 years ago

#13 follow-up: @jacklenox
6 years ago

So the biggest problem here appears to be the content overflowing the width of the editor on mobile. The styling of lists is more subjective, but the width issue really does make the editor unusable.

The cause of this appears to be the fixed widths that are applied to the images and the HTML5 <dl> elements. This isn't just a problem with Twenty Fifteen, it's a potential problem for any theme, especially if it has HTML5 captions.

My patch above fixes two things. Below 660px it sets any width that has a max-width of 660px to 100%. This is arguably specific to Twenty Fifteen.

The second part is to force image and caption widths to be auto. This looks good to me because any image that is below the width of the viewport still looks as it should, and any image that is above the width is forced to fit in.

What do you folks thing of this approach? And given that the fixed widths on images and captions aren't necessarily incorrect, should we apply a variation of this to the editor for all themes?

#14 in reply to: ↑ 13 @lancewillett
6 years ago

Thanks, jacklenox. I agree with this approach to fix Twenty Fifteen (and maybe Twenty Fourteen and Thirteen).

Replying to jacklenox:

And given that the fixed widths on images and captions aren't necessarily incorrect, should we apply a variation of this to the editor for all themes?

CC @iseulde -- is there a method to load CSS rules for the editor (for any theme)?

@jacklenox
6 years ago

Update to previous patch to include fixes for Twenty Fourteen and Twenty Thirteen

#15 @lancewillett
6 years ago

In 31849:

Bundled themes: update editor styles to better display images and captions in small screens.

Props jacklenox, see #31250.

#16 @lancewillett
6 years ago

  • Keywords ui-feedback dev-feedback removed
  • Milestone changed from Future Release to 4.2
  • Resolution set to fixed
  • Status changed from new to closed

Closing since we addressed the actionable item of the width problem with big images. Feel free to open new tickets for other problems.

#17 @iseulde
6 years ago

  • Keywords has-patch removed
  • Milestone changed from 4.2 to Awaiting Review

Let's handle the images in #31253, which is a problem in all themes.

Closing since we addressed the actionable item of the width problem with big images. Feel free to open new tickets for other problems.

@lancewillett: Actually we should have handled the image problem in the other ticket. This ticket is more about the other issue.

#18 @iseulde
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#19 @jacklenox
6 years ago

@iseulde: But the other issue is surely subjective and design-related? Rather than related to actual usability.

If the theme designer doesn't want to make the changes that you're suggesting, will this ticket ever be addressed?

#20 @lancewillett
6 years ago

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

The other issue -- visual differences -- was addressed by Takashi above:

At the current state, the editor style is just for giving a nuance of how it'd look rather than pixel perfect replication of the front-end.

Please open new tickets if you have specific bugs to address, like the width issue that was fixed in r31849.

#21 @DrewAPicture
6 years ago

  • Milestone changed from Awaiting Review to 4.2

#22 @iseulde
5 years ago

In 33418:

Revert [31849] and [33351]

Also set the max-width of images in themes to 100%, not in pixels.

See #33022 and #31250.

Note: See TracTickets for help on using tickets.