Updated code to display plugin settings link in the features screen and fix responsive layout for mobile

[ashwinparthasarathi]

Summary

Fixes #1137

Relevant technical choices

1. Made changes in the Performance Features admin page code.
2. Updated the plugin card rendering to display the plugin settings link if the plugin is active and if it has a settings page.

Result

1. Currently shows the Settings link for the 2 modules that have it, Speculative Loading & Modern Image Formats
   

Update: See #1208 (comment) for how the responsive layout is also fixed for mobile.

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

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @benoitfouc.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: benoitfouc.

Co-authored-by: ashwinparthasarathi <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: ju1ius <[email protected]>

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

[westonruter]

Could the Settings link be moved after the Learn More link? Since not all plugins have Settings links, this will allow the Learn More link to be consistently after the button.

[westonruter]

Something else to ponder: upon activating a plugin which has Settings, it would be a nice touch to do some yellow-fade or some other styling effect to highlight the fact that there is a Settings link now after the page reloaded which wasn't there before. Not sure what would be the most in-line with existing core designs.

[ashwinparthasarathi]

Could the Settings link be moved after the Learn More link? Since not all plugins have Settings links, this will allow the Learn More link to be consistently after the button.

Understood, made changes to move the link down as the last in the action items.

Something else to ponder: upon activating a plugin which has Settings, it would be a nice touch to do some yellow-fade or some other styling effect to highlight the fact that there is a Settings link now after the page reloaded which wasn't there before. Not sure what would be the most in-line with existing core designs.

If you could point me to a reference, I can figure out an appropriate design cue to highlight the settings link freshly added.

[westonruter]

In issue #1032, we're investigating the activation of all active plugins (whether stable or experimental). Consequently, we would need to refactor this code significantly. Do these code changes support the activation of multiple plugins?

@mukeshpanchal27 No, it doesn't support multiple plugin activation, since this screen doesn't support that yet. But I don't think it would be so relevant as then all of the settings links would appear together all at once. I think we can land this in 3.1.0 and then refactor as part of the bulk-activation and also Ajax activation.

[westonruter]

Just noticing this styling issue, where the Settings link is overflowing the card container:

[westonruter]

Fixed styling issue in c7ba02c:

Screen.recording.2024-05-16.10.59.14.webm

I also noticed a separate issue where the plugin cards fail to render properly on mobile, but I'll address that in a follow-up PR. Actually, I went ahead and did it here: 57e0f8e

[westonruter]

Great! This will really improve discoverability of the features' settings.

[westonruter]

With 57e0f8e, compare the responsive layout of the feature cards:

Before

Screen.recording.2024-05-16.11.45.09.webm

After

Screen.recording.2024-05-16.11.45.57.webm

Take note of the addition of the Settings link here, including how a divider appears when the links are presented horizontally.

[joemcgill]

This looks good to me. Nice job.