Skip to content

Conversation

@Infinite-Null
Copy link

@Infinite-Null Infinite-Null commented Jun 17, 2025

#63574

Before After
image image

@github-actions
Copy link

github-actions bot commented Jun 17, 2025

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 ankitkumarshah, sandeepdahiya.

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

@Infinite-Null Infinite-Null marked this pull request as draft June 17, 2025 06:45
@Infinite-Null Infinite-Null changed the title Posts, Post Types: Remove transparent color from action links for better visibility [WIP] Posts, Post Types: Remove transparent color from action links for better visibility Jun 17, 2025
@github-actions
Copy link

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.


.row-actions span {
.comment .row-actions span {
font-size: 0;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was introduced in changeset 60267. I’ve refined the selector to make it more specific so that it only applies to the Comments page and the comments displayed in the Dashboard widget.

Ticket: https://core.trac.wordpress.org/ticket/63277

@Infinite-Null Infinite-Null changed the title [WIP] Posts, Post Types: Remove transparent color from action links for better visibility Posts, Post Types: Remove transparent color from action links for better visibility Jun 17, 2025
@Infinite-Null Infinite-Null marked this pull request as ready for review June 17, 2025 07:15
Copy link

@iamsandeepdahiya iamsandeepdahiya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After this patch, I think the gap between the links is wider than the desktop view and the separator "|" is more shifted towards right :-

Screenshot 2025-06-17 125111

See the desktop view for the difference: -
Screenshot 2025-06-17 125258

Also, the patch is not working properly in comments page:-
Screenshot 2025-06-17 125209

I think you .comment .row-actions span { font-size: 0 } is the issue here.

@Infinite-Null
Copy link
Author

Infinite-Null commented Jun 19, 2025

Hi @iamsandeepdahiya, thank you for the feedback 🙌
The spacing issue is because of code here These are the fix for trac ticket https://core.trac.wordpress.org/ticket/63277 and was introduce in changeset 60267, The goal was to resolve the visual misalignment between comments and the Activity widget. The issue is in Approve/unapprove:

image
image

The root cause appears to be the use of the "| " prefix applied via the ::before pseudo-selector on the Approve/Unapprove actions, which introduces extra spacing. To address this, I’ve proposed the following patch:

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 309dd39ecf..11b20850e7 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -2075,10 +2075,6 @@ div.action-links,
 		gap: 8px;
 	}
 
-	.comment .row-actions span {
-		font-size: 0;
-	}
-
 	.row-actions span a,
 	.row-actions span .button-link {
 		display: inline-block;
@@ -2086,16 +2082,6 @@ div.action-links,
 		line-height: 1.5;
 	}
 
-	.row-actions span.approve:before,
-	.row-actions span.unapprove:before {
-		content: "| ";
-	}
-
 	/* Quick Edit and Bulk Edit */
 	#wpbody-content .quick-edit-row-post .inline-edit-col-left,
 	#wpbody-content .quick-edit-row-post .inline-edit-col-right,

image

This approach resolves the issue while maintaining visual consistency across the UI. I’ve implemented the change accordingly.

Would love to hear your thoughts or suggestions on this!

Copy link

@iamsandeepdahiya iamsandeepdahiya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@iamsandeepdahiya
Copy link

Dashboard: -
image

Posts and Pages: -
image(1)

Comments:-
5

This update looks as expected and provides an essential improvement for mobile users across posts, pages, and the comments section.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants