Make WordPress Core

Opened 5 years ago

Last modified 2 months ago

#46262 new defect (bug)

Twenty Nineteen: odd content_width in theme

Reported by: nosilver4u's profile nosilver4u Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: needs-patch 2nd-opinion
Focuses: Cc:

Description

The global value $content_width is set to 640px in Twenty Nineteen. I can't see anywhere that this value even makes sense. Any text within an article is in a box 932px wide, and the posts themselves are in a container that is 1524px.

Now, what does it matter? The theme displays things correctly via CSS, but this value is used by image optimization features in Jetpack and EWWW Image Optimizer (possibly others). The result is that we have 640px images (roughly) displaying in containers that are at least 932px. Best I can tell, Twenty Nineteen will display them at whatever size the user chooses: large=1024px, while full-width is 1905px, and wide-width is 1404px.

Perhaps there is information from Gutenberg itself that can be leveraged by these plugins, but setting content_width to a more sensible default would be a good start.

Change History (2)

#1 @laurelfulford
5 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from odd content_width in Twenty Nineteen theme to Twenty Nineteen: odd content_width in theme

Thanks for this report, @nosilver4u!

I suspect the current 640px comes from the theme being based on Underscores, since that's the default there: https://github.com/Automattic/_s/blob/master/functions.php#L97

I agree that it should be updated to reflect actual widths in the theme.

#2 @sabernhardt
2 months ago

  • Keywords needs-patch 2nd-opinion added
  • Version changed from 5.0.3 to 5.0

Numbers in the description reflect a viewport width of (around) 1920 pixels. Twenty Nineteen's design does not have a maximum content width, so images (that line up with paragraphs) can be even wider than 932 pixels.

  • viewports up to 767px can show images as wide as 723 pixels (.entry-content has max-width:100%-2rem, image has max-width:100%)
  • viewports from 768px to 1167px show images up to 750 pixels wide (.entry-content max-width:80%, image max-width:66.7vw-28px)
  • viewports 1168px and wider can show images from 556 pixels wide to much larger (.entry-content has max-width:80%, image has max-width:50vw-28px)

Twenty Nineteen's $content_width variable was set to 640 at the theme's initial commit, and that matches the value Underscores had at the same time. For comparison, Twenty Twenty-One started with 750, which matched Seedlet's initial width but later Seedlet reduced it to 620.

Seedlet's change suggests that editing the value for Twenty Nineteen is feasible, though I am not eager to change it after five years. The theme has had the twentynineteen_content_width filter, and at least EWWW has a filter too.

Note: See TracTickets for help on using tickets.