Uploaded plugin installation page: There is an extra <p> tag messing with a link

[seedsca]

update.php?action=upload-plugin shows the Activate Plugin button and Return to Plugin Installer link inside the same <p> tag.
This makes the link pop up when the button is active.

If they were both on their own <p> tags or the <p> tag wrapping them was removed, this would not happen.

I could not find where the <p> tag was added or I would have supplied a patch. Any guidance would be appreciated.

[mukesh27]

Hi @seedsca , welcome to WordPress Trac!

Thanks for the report, Can you please add steps to generate above issue and if possible add screenshot so we can understood it well.

[seedsca]

Sure thing!

In the admin page, go to Plugins > Add New > Upload Plugin.
Upload a plugin file and install.
You will then be taken to yoursite.com/wp-admin/update.php?action=upload-plugin

If you click on the Activate Plugin button:

You will notice the link to the right jumps up:

Hope that helps and again, I'd love to do this myself, but I couldn't fine where the paragraph tag gets added. :)

[pratikthink]

Possible fix

[seedsca]

/wp-includes/css/buttons.css line 267 has vertical-align:top set.
This does not seem necessary and it's messing with alignment.

I checked all 28 instances of .button-primary and found no changes at all.

Seems safe.

[seedsca]

Plugin activate button on regular state. Link looks normal.

[seedsca]

Plugin activate button on active state. Link moved up by vertical-align: top.

[mukesh27]

@seedsca 4836.2.diff is working fine for me. Let's wait for core developer response on above solution.

[ianbelanger]

Hi @seedsca and @pratikthink,

Thanks for your patches. I tested 4836.2.diff, which should probably be named 44836.2.diff, and it seems to work great as a solution to the "jumping" link issue. I didn't see any adverse changes to any other buttons that use the .button-primary class.

This looks good to merge in core.

[seedsca]

@ianbelanger and @SergeyBiryukov Thanks!
Should I change the diff file's name? Or are we all set?
Happy to help the community that's helped me so much :)

[ianbelanger]

I don't think that there's any need to change the name of the diff @seedsca, unless Sergey says differently.

[SergeyBiryukov]

Replying to seedsca:

Should I change the diff file's name? Or are we all set?

Thanks for the ticket and the patch :) It's generally helpful if the name of the diff is the same as the ticket number, but ultimately it doesn't matter that much, the patch is fine as is.

[joemcgill]

Punting this to a future release. Unless @SergeyBiryukov is still planning to review this, we should remove the assignment so someone else will pick it up.

[seedsca]

Correctly renamed the diff file and removed fixed the path inside by removing the /src/ directory. Now using: diff --git a/wp-includes/css/buttons.css b/wp-includes/css/buttons.css

[seedsca]

Seems I forgot to fully remove the /src/ directory from the paths of the diff file. Sorry for all the noice... This is the one :)

[seedsca]

@SergeyBiryukov anything else to do with this little patch? Seems simple enough.

[ianbelanger]

#46416 was marked as a duplicate.

[ianbelanger]

I retested the latest patch against trunk and it still applies just fine. I think this is all set to commit

[mukesh27]

I tested patch 44836.3.diff and it working fine in trunk version.

In current situation if we remove vertical-align: top; from below buttons.css then it will resolve the alignment issue and that active button state use .wp-core-ui p .button { vertical-align: baseline; } child css.

.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active {
    background: #0073aa;
    border-color: #006799;
    box-shadow: inset 0 2px 0 #006799;
    /*vertical-align: top;*/
}

Class button-primary is used in whole core buttons so can we replace vertical-align: top; to vertical-align: baseline; in above css?

@ianbelanger can you please check this.

[ianbelanger]

Hi @mukesh27,

Changing vertical-align: top; to vertical-align: baseline; for these selectors:

.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active

Would achieve the same result as simply removing vertical-align: top; from .wp-core-ui p .button, but I think that it is an unnecessary change, since there doesn't seem to be anywhere else in core that has this bug. I vote for leaving the patch as is.

[pento]

In 45150:

UI: Remove vertical alignment from active primary buttons.

This caused the post-plugin installation actions to jump around when the "Activate Plugin" primary button became active.

Props seedsca, pratikthink, ianbelanger, mukesh27.
Fixes #44836.