Fixed page list block text-decoration issue in various theme #62687

[viralsampat90]

What?

The "page list" block is not displaying text-decoration(Underline) on editor, front-end, or both sides. So, I have resolved the issue.

Why?

front-end, or both sides
I think that it should be on both side(Editor & Front-end)
So, I have resolved this issue and added PR.

How?

I have added all the necessary CSS into the block library styles.

Testing Instructions

• Type / to choose a block
• Select "Page List" block
• We can see the "text-decoration"( Underline) on editor side.
• Change them and then follow same steps or just refresh the editor side.

Testing Instructions for Keyboard

I have made this change on Gutenberg plugin file. After that I have added "block library styles" CSS manually into the inspect element for testing purpose and check this issue for all the themes. It looks good.

Screenshots or screencast

Twenty Ten Theme:

Twenty Twelve Theme:

Twenty Nineteen Theme:

Twenty Twenty-one Theme:

[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.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: viralsampat-multidots <mdviralsampat@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @viralsampat90! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[talldan]

I don't think it's a styling issue, it's more that in the editor the links are <a> tags that don't have an href attribute (so the browser doesn't apply an underline style), while on the front-end they do have an href (and the browser does apply an underline style.)

The main issue with adding an href is that click on the link should not to cause a page navigation in the editor. For example, if you take a look at how links in paragraphs work, they have an href but clicking on them doesn't take you to the link destination.

[talldan]

There are also some blocks that apply a fake href, for example the 'Next Page' block:

<a href="#post-navigation-pseudo-link">An example title</a>

So that's one way of handling it.

Thanks for the contribution and making the issue btw!