Twenty Twelve: preformatted elements have hyphens on front-end

[viralsampat]

Hello Team,

I have reviewed the "Preformatted block" and found that the "hyphens" character is adding in text on front-end when we changed its "Letter spacing" from "Typography" setting.

So, I think that the editor side text & front-side text should be same.

Here, I have attached its screenshots and video for references.

Thanks,

[viralsampat]

Back-end:

[viralsampat]

Front-end:

[viralsampat]

Issue video:

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

After resolved issue Back-end:

[viralsampat]

After resolved issue front-end:

[sabernhardt]

(before patch) hyphens in post content and widget area, with the default font size and letter spacing

[sabernhardt]

Preformatted text can have automatic hyphens with the theme without adjusting the font size or letter spacing.

When using a modern browser, the patch removes the hyphens for any pre element within the post content area.

Additional changes to consider:

1. Twenty Twelve adds -webkit- and -moz- vendor prefixes for hyphens. The need for these may be rare, but including them would be consistent with the theme's styles for .site-content article and .widget-area .widget.
2. Preformatted blocks in a widget area can still hyphenate. The override could be added for any pre element (possibly placed at line 506, after the a:hover ruleset).

pre {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
}

[viralsampat]

I have updated my patch.

[sabernhardt]

According to ​coding standards, the prefixed properties belong before the unprefixed property.

	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;

[viralsampat]

As per coding standard, I have updated my patch.

[karmatosed]

I am going to test this and see about progressing this into a commit as the hyphens are now in as per @sabernhardt's suggestion. Thank you everyone.

[karmatosed]

I just tested this and I am unable to replicate the original issue. I am curious if others are today?

[shraddhagore]

Patch Report

---

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/61800/61800.3.patch

Environment:
WordPress: 6.8-alpha-59274-src
Theme: Twenty Twelve, 4.4
Browser: Google Chrome
OS: Windows 11

Screenshots:
Editor:
Site:

Comments:
The patch isn't working as expected. I tested it with the default settings and also adjusted the Typography settings for the preformatted block, but the hyphens are still appearing in the site content.

[viralsampat]

Latest Patch

[viralsampat]

Hello @shraddhagore

Thank you so much for your feedback. I have added latest patch for above mentioned issue. Can you please test it again from your end and share your feedback.

Patch: I have checked above-mentioned feedback and I have updated the patch.
https://core.trac.wordpress.org/attachment/ticket/61800/61800.4.patch

Environment:

WordPress: 6.7.2 running
Theme: Twenty Twelve, 4.4
Browser: Google Chrome, Version 133.0.6943.98 (Official Build) (arm64)
Device: MacBook Air M1
OS: macOS 15.3.1 (24D70)
Gutenberg plugin: Version Version 20.2.0

Screenshots:
Editor: https://core.trac.wordpress.org/attachment/ticket/61800/twentytwelve_pref_block_editor.png
Site: https://core.trac.wordpress.org/attachment/ticket/61800/twentytwelve_pref_block.png

Thanks,

[shraddhagore]

Patch Report

---

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/61800/61800.4.patch

Environment:
WordPress: 6.8-alpha-59274-src
Theme: Twenty Twelve, 4.4
Browser: Google Chrome
OS: Windows 11

Screenshots:
Editor: https://core.trac.wordpress.org/attachment/ticket/61800/after-editor-61800.4.png
Site: https://core.trac.wordpress.org/attachment/ticket/61800/after-site-61800.4.png

Comments:
The Patch 61800.4 is working as expected. ✅
Thank you, @viralsampat!

[avinashbhosale]

Test Report

Description

This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/61800/61800.4.patch

Environment

• WordPress: 6.8.1
• PHP: 8.2.27
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twelve 4.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

• Screenshots -
  • Before Patch - ​https://prnt.sc/HjrNkf1Epc0n
  • After Patch - ​https://prnt.sc/IqwMgpPjtS1M