Twenty Twenty: Letter spacing applied to Media & Text Block does not affect inner paragraph on editor side

[pitamdey]

In Theme Twenty Twenty,
The Letter spacing setting is not working on the editor side when we select the Media & Text Block and try to change the letter spacing value

[pitamdey]

Editor View

[pitamdey]

Frontend View

[pitamdey]

Patch for this issue

[sainathpoojary]

Hi @pitamdey,

I can confirm that I was able to reproduce the issue when selecting the Media & Text block. However, it worked correctly when I selected the paragraph tag inside the Media & Text block and then adjusted the letter spacing.

[SirLouen]

Test Report

Description

This report validates whether the indicated patch works as expected.

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

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 131.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

Test reproduction steps were not clear at first here are some:

1. After setting Twenty Twenty
2. Create a new Post
3. Add a Media & Text block
4. Put some text in the paragraph block from this Media & Text block
5. Click on the image (hence you are clicking on the whole Media & Text widget), go to styles, typography, add Letter spacing, for example 50.
6. Save the Post
7. Check the post in the Post Loop
8. ✅ Bug Occurs (you can see in the post loop the issue, but not in Gutenberg)

IMPORTANT: This only happens if you apply the Letter spacing to the whole block clicking on the image, not in the paragraph of the Media & Text block.

After applying the patch, I can confirm that the issue is solved, I can see the text is rendered correctly as expected in Gutenberg.

Supplemental Artifacts

After patch: ​https://i.imgur.com/J9LScml.png

[poena]

Hi

This change affects all paragraphs and list on the editor side, not only the Media & Text block. But because "normal" is the default value for letter-spacing, I think that removing it is probably safe.

In an earlier version of the theme, this style also existed in style.css and style-rtl.css.
​https://github.com/WordPress/twentytwenty/blob/master/style.css#L3489

In style.css it was moved from entry-content p to entry-content before the theme was merged in to WordPress, so the specificity was lowered. But it was not updated in the editor styles. This might just have been missed until now.

[poena]

I am unable to apply the patch, I am getting the message "Assertion failed".
Perhaps there is a merge conflict or maybe it is because the src directory is missing from the path.

[sabernhardt]

In style.css it was moved from entry-content p to entry-content

#49318 changed the front-end selector.

But because "normal" is the default value for letter-spacing, I think that removing it is probably safe.

Without letter-spacing: normal, then regular paragraphs and lists would have a negative letter spacing. Moving -0.015em to the .editor-styles-wrapper > * ruleset could be appropriate enough (in addition to 62678.patch), but another approach might be better:

1. Assign the Inter sans-serif font and negative letter-spacing to .editor-styles-wrapper (reflecting body on front).
2. Assign the Hoefler Text serif font and normal letter-spacing to .wp-block-post-content and .block-editor-block-list__layout > p (reflecting .entry-content and .widget_text p on front).

Previously: [55967] and [58908] made adjustments for the Quote and Pullquote blocks (only).

[sabernhardt]

assigning fonts, sizes and letter spacing to different selectors

[sabernhardt]

62678.changing-selectors.patch​ shows the alternative approach. It could still need work; at least the .wp-block-post-content required another class name (such as .edit-post-visual-editor) for older WordPress versions.

[poena]

It needs to be tested to make sure that it does not style any other parts of the editor interface.