Make WordPress Core

Opened 2 years ago

Closed 20 months ago

Last modified 20 months ago

#54188 closed defect (bug) (fixed)

Different theme screenshot sizes are displayed in the customizer preview

Reported by: poena's profile poena Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version: 3.9
Component: Themes Keywords: has-patch has-testing-info assigned-for-commit commit
Focuses: Cc:

Description (last modified by poena)

On the Add themes page in the WordPress admin you can select "Live Preview" or "Preview" to preview themes in the customizer.

In the preview, the customizer sidebar shows a screenshot of the theme.
This screenshot is displayed in different sizes depending on the aspect ratio of the screenshot that is in the theme folder.

The screenshot size should be enforced and the screenshot should be consistent and displayed in the same size for all themes.

Related meta ticket:

Attachments (3)

customizer-preview-theme-installation.png (72.7 KB) - added by poena 2 years ago.
Different image sizes in the customizer preview
54188.diff (1.1 KB) - added by karpstrucking 2 years ago.
54188.2.diff (1.2 KB) - added by costdev 20 months ago.
Patch refreshed against trunk.

Download all attachments as: .zip

Change History (20)

2 years ago

Different image sizes in the customizer preview

#1 @poena
2 years ago

  • Description modified (diff)

2 years ago

#2 @karpstrucking
2 years ago

  • Keywords has-patch added; needs-patch removed

took a stab at this, basically just a mimic of the approach used on /wp-admin/themes.php

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

2 years ago

#4 @audrasjb
2 years ago

  • Keywords needs-unit-tests needs-testing added
  • Milestone changed from 5.9 to 6.0

As per today's bug scrub, it looks like this patch still needs testing and unit tests. Moving for 6.0 consideration.

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.

21 months ago

#6 @hellofromTonya
21 months ago

  • Keywords has-testing-info added

Marking as having has-testing-info as the instructions are in the description and screenshots.

#7 @hellofromTonya
21 months ago

  • Keywords needs-unit-tests removed

As this ticket addresses visual styling to hold the preview within a set sized container, A PHP unit test is not useful for this patch. Why? While it could capture the output buffer to check if the HTML and CSS are expected, it cannot check the result to ensure the changes actually resolve the preview issue.

Removing the keyword.

#8 @Boniu91
21 months ago

@poena Could you tell us what is the 1st theme in the screenshot? Second theme is TwentyTwenty but I can't identify the other one.

#9 @poena
21 months ago

The theme is called c

The linked meta ticket lists a few other themes with different screenshot sizes.

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.

20 months ago

20 months ago

Patch refreshed against trunk.

#11 @costdev
20 months ago

  • Keywords commit added; needs-testing removed
  • Version set to 3.9

Test Report


  • Server: Apache (Linux)
  • WordPress: 6.0-beta1-53167-src
  • Browser: Chrome 100.0.4896.88
  • OS: Windows 10
  • Theme: Twenty Twenty-One
  • Plugins: None activated


  1. Navigate to /wp-admin/theme-install.php?theme=twentytwenty. Note the size of the screenshot
  2. Navigate to /wp-admin/theme-install.php?theme=c. Notice that the screenshot is a different size. ✅
  3. Apply 54188.2.diff.
  4. Repeat steps 1-2 (a hard refresh might be needed). Notice that the screenshots are now the same size. ✅


  1. Issue reproduced. ✅
  2. 54188.2.diff resolves the issue. ✅


  • Removing needs-testing.
  • Marking for commit consideration.

#12 @audrasjb
20 months ago

  • Keywords assigned-for-commit added
  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for commit.

#13 @audrasjb
20 months ago

  • Keywords needs-refresh added; commit removed

I'm not sure removing the version of the file is intended. Adding a new PR to re-add this for better cache refreshing.

This ticket was mentioned in PR #2599 on WordPress/wordpress-develop by audrasjb.

20 months ago

  • Keywords needs-refresh removed

#15 @audrasjb
20 months ago

  • Keywords commit added

PR added and tests are passing. Committing right now.

#16 @audrasjb
20 months ago

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

In 53191:

Themes: Use consistent thumbnail sizes in Customizer preview screen.

This ensures displaying theme thumbnails in consistent sizes in Customizer theme preview.

Props poena, karpstrucking, costdev, audrasjb.
Fixes #54188.

Note: See TracTickets for help on using tickets.