Twenty Fourteen: post content links are not underlined in the editor

[viralsampat]

Hello Team,

I have reviewed the "page list" block on "Twenty Fourteen" theme and found that its "font-size" and "a" tag "text decoration" are not same on editor side & front-end side.

Here, I have attached its screenshots for reference.

I think that it should be same on both(Editor & Front-end) sides.

Environment:

---

• WordPress version: WordPress 6.5.4 running,
• Themes:
  • Twenty Fourteen: Version: 3.9
• Browser: Google Chrome, Version 126.0.6478.56 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.5 (23F79)
• Gutenberg plugin: Version Version 18.5.0

Thanks,

[viralsampat]

Back-end

[viralsampat]

Front-end

[sabernhardt]

adds underline to links when in the post editor (Classic or block)

[sabernhardt]

In addition to the Page List block links, even common text links within a Paragraph block are not underlined within the post editor context. The front end underlines them within .entry-content and .page-content.

The missing underline is an issue in the Classic Editor too. I purposely put the styles for both editors within the same ruleset so the underline would override text-decoration: none just a few lines later, with the same specificity.

The 13px font size is a separate issue that needs to be fixed in the block editor reset styles.

[viralsampat]

Hello @sabernhardt,

Thank you so much for detailed updates,

I have reviewed the "Page List" block on many different themes and I have found that it's text decoration is not appear or not same on editor side & front-end side.

I already added this issue for "Twenty Fourteen" theme #61441, After that I have checked this issue for other themes.

I think that it should be same on both(Editor & Front-end) sides or the text-decoration should have be display based on requirement.

Here, I have provided it's screenshots:

• WordPress version: WordPress 6.5.4 running,
• Themes:
  • Twenty Eleven Version: 4.6
  • Twenty Twelve Version: 4.2
  • Twenty Thirteen Version: 4.1
  • Twenty Nineteen Version: 2.8
  • Twenty Twenty-One Version: 2.2
• Browser: Google Chrome, Version 126.0.6478.56 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.5 (23F79)
• Gutenberg plugin: Version Version 18.5.0

Thanks,

[sabernhardt]

@viralsampat I deleted the screenshots and proposed patches for other themes to reduce confusion. Those are not related to the issue in Twenty Fourteen, where the editor does not show the underline to match the links in the post content area on the front end.

• Twenty Eleven and Twenty Thirteen purposely removed the underline for links (it's too late to change that decision after more than a decade), and the editor already matches the front end for those.
• The Page List block does not have an href for its links in the editor, and browser default stylesheets underline links except when those elements do not have the href attribute. Themes that fall back to the browser default include Twenty Ten, Twenty Twelve, Twenty Nineteen, and Twenty Twenty-One. You could open an ​issue or PR on GitHub to edit the ​block library styles. I think it could work with a zero-specificity reset:

  :where(.wp-block-pages-list__item__link) {
    text-decoration: underline;
  }
  

[karmatosed]

Thank you, everyone, for your work on this. Unless I'm mistaken, we are in a position to commit at least the latest patch. This will 'add underline to links when in the post editor'.

I am going to look into doing that now and we can always look at the other pieces if needed.

[karmatosed]

In 58463:

Twenty Fourteen: Resolves post content links not being underlined.

In the page list block the text decoration was not the same on the front as the editor. This adds underline to links when in the post editor classic or block. This does not resolve the font size issue that needs to be fixed in block editor reset styles.

Props viralsampat, sabernhardt.
Fixes #61441.

[karmatosed]

I have now committed the patch but there is the outstanding possibility of the recommendation from @sabernhardt to open an issue within the editor repo.

[sabernhardt]

The issue to help with other themes is opened:
​https://github.com/WordPress/gutenberg/issues/62687