Different theme screenshot sizes are displayed in the customizer preview

[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: ​https://meta.trac.wordpress.org/ticket/5834

[poena]

Different image sizes in the customizer preview

[karpstrucking]

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

[audrasjb]

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

[hellofromTonya]

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

[hellofromTonya]

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.

[Boniu91]

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

[poena]

The theme is called c
​https://wordpress.org/themes/c/

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

[costdev]

Patch refreshed against trunk.

[costdev]

Test Report

Environment

• 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

Steps

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

Results

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

Notes

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

[audrasjb]

Self assigning for commit.

[audrasjb]

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

Trac ticket: https://core.trac.wordpress.org/ticket/54188

[audrasjb]

PR added and tests are passing. Committing right now.

[audrasjb]

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.

Committed in https://core.trac.wordpress.org/attachment/ticket/54188/54188.2.diff