Twenty Sixteen: pre element has less padding in the editor

[pranitdugad]

In theme Twenty Sixteen, the verse block has different padding on frontend and backend.

[pranitdugad]

I have attached screenshot for better Understanding

[pranitdugad]

this is due different padding in pre tag for editor and frontend.

[pranitdugad]

this is due different padding in pre tag for editor and frontend. After applying this patch this issue is resolved

[sumitbagthariya16]

Test report ✅

I have tested the patch below and it is working as expected.

https://core.trac.wordpress.org/attachment/ticket/61306/61306.patch

Environment

OS: macOS Ventura 13.3
Web Server: Nginx
PHP: 8.0
WordPress: 6.5.3
Browser: Chrome
Theme: Twenty Sixteen - 3.2

Backend:
​https://prnt.sc/mYag5oNH0VY5

Front End:
​https://prnt.sc/CARfDvTZC1Ek

[Hitendra Chopda]

Test report

I have tested the patch below and it is working as expected.

https://core.trac.wordpress.org/attachment/ticket/61306/61306.3.patch

Environment

OS: macOS Sonoma 14.4
Web Server: Nginx
PHP: 8.0
WordPress: 6.6-alpha-58220
Browser: Safari 7.4 (macOS), Chrome Version 123.0.6312.106
Theme: Twenty Sixteen - 3.2

Screenshot: ​https://share.cleanshot.com/nKhQSwk7p1t8NqSmYtH4

Actual Result:

After applying the patch, the padding will be displayed the same on both sides.

Thank you.

[sabernhardt]

corrects pre padding in editor-style.css

[sabernhardt]

The pre element has had a padding of 1.75em on the front end since the first version (even in the ​initial commit). The editor needs to reflect that.

[huzaifaalmesbah]

Test Report

Description

Patch tested: 61306.3.patch​ Thanks For the Patch @sabernhardt.

Adjusted the pre element padding to 1.75em on both sides and resolved the issue with a patch.

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.6
• Server: nginx/1.25.5
• Database: mysqli (Server: 11.3.2-MariaDB / Client: mysqlnd 8.3.6)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Sixteen 3.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

After Apply Patch Editor	After Apply Patch Frontend

[shuvomohajan]

Test Report

Description

The patch successfully addresses the padding inconsistency for the pre element in the Twenty Sixteen theme editor.

Patch tested: 61306.3.patch

Environment

• WordPress: 6.6-alpha-58220
• PHP: 8.0.30-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 125.0.0.0
• OS: Linux
• Theme: Twenty Sixteen 3.2
• MU Plugins:
  • 0-sqlite.php
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

Befor apply patch

Editor	Frontend

After apply patch

Editor	Frontend

[hmbashar]

Test Report

Patch tested: 61306.3.patch​

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Sixteen 3.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Before

Editor	Frontend

After

Editor	Frontend

[karmatosed]

In 58239:

Twenty Sixteen: Fixes pre element having less padding in the editor.

The verse block has different padding between editor and frontend.

Props pranitdugad, sumitsingh, sumitbagthariya16, hitendra-chopda, sabernhardt, huzaifaalmesbah, shuvomohajan, hmbashar.
Fixes #61306.