Make WordPress Core

Opened 6 months ago

Closed 6 months ago

Last modified 5 months ago

#61441 closed defect (bug) (fixed)

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

Reported by: viralsampat's profile viralsampat Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing commit
Focuses: css Cc:

Description

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,

Attachments (3)

Screenshot 2024-06-14 at 12.42.32 PM.png (411.1 KB) - added by viralsampat 6 months ago.
Back-end
Screenshot 2024-06-14 at 12.39.24 PM.png (440.5 KB) - added by viralsampat 6 months ago.
Front-end
61441.diff (551 bytes) - added by sabernhardt 6 months ago.
adds underline to links when in the post editor (Classic or block)

Download all attachments as: .zip

Change History (10)

@sabernhardt
6 months ago

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

#1 @sabernhardt
6 months ago

  • Focuses ui removed
  • Keywords has-patch added; dev-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Twenty Fourteen: The page list block font-size and text decoration not displaying properly on editor/front-end sides. to Twenty Fourteen: post content links are not underlined in the editor
  • Version 6.5.4 deleted

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.

#2 @viralsampat
6 months ago

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,

#3 @sabernhardt
6 months ago

@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;
    }
    

#4 @karmatosed
6 months ago

  • Keywords commit added
  • Milestone changed from Future Release to 6.6
  • Owner set to karmatosed
  • Status changed from new to assigned

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.

#5 @karmatosed
6 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#6 @karmatosed
6 months ago

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.

#7 @sabernhardt
5 months ago

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

Note: See TracTickets for help on using tickets.