Bundled Theme: Fix social links text decoration

[SainathPoojary]

This pull request fixes an issue in the Twenty Nineteen theme where social icons in the wp-block-social-links block appear without underlines in the editor but are incorrectly displayed with underlines on the frontend. This PR resolves the issue by adding a text-decoration: none; rule for anchor tags in the frontend, ensuring consistent styling with the editor.

Trac ticket: #61904

Before:

After:

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props sainathpoojary, sabernhardt, rinkalpagdar.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[rinkalpagdar]

Hello @SainathPoojary
I have tested this PR change, it's working fine.
Thanks

[sabernhardt]

Please update the comment, and consider reducing the specificity.

If you could run build to update the stylesheets in this PR, that would help people testing it (and would help pass GitHub actions).

[sabernhardt]

Suggested change

	//! wp-block-social-links
	//! Social Icons

Use the block name for the comment.

[sabernhardt]

This creates a high specificity with six classes:
.entry .entry-content .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor

An element selector (combined with .entry .entry-content) would be enough to override the underline in the post content:

Suggested change

	.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
	a:where(.wp-block-social-link-anchor) {

[SainathPoojary]

Hey @sabernhardt,

I have implemented the requested changes and rebased the branch. After rebasing, I noticed that there’s some extra margin on the social icon button. Should I open a issue for it?

Additionally, while running npm install, I encountered a deprecation issue related to node-sass. If this needs to be addressed, I’d be happy to work on it.

[sabernhardt]

The separate Social Icons block margin issue should be fixed in Gutenberg 20.4.

I have had node-sass deprecation warnings too. In a previous installation I fixed it with the rebuild command, but I have not solved it in my new environment yet. I tried replacing with sass last year, but I did not like how much it changed in the compiled stylesheets just with the package changes. (Adding special rules might help if the switch is necessary.)

[sabernhardt]

Thanks!

These screenshots are all with the patch.

Front end, in the post content, in both language directions:

The links were not underlined in the editor or in the widget context before the patch, but they still do not have the underline with the patch.

Post editor:

Widget editor:

Widget on the front end: