Update Jetpack button and card styles to match WordPress 5.3#13729
Update Jetpack button and card styles to match WordPress 5.3#13729
Conversation
This is an automated check which relies on |
keoshi
left a comment
There was a problem hiding this comment.
This is looking good! Below are some of the things I've noticed:
Set up Jetpack button
Not sure exactly what's the scope here, so don't know if this applies, but the green Jetpack button in the initial pre-connection banner has a border that the primary buttons in 5.3 don't (or are the same color as the bg to be exact). It also has the existing Jetpack :active styles, which make it look weird.
Buttons
:focus styles don't match what's in 5.3. Same goes for default buttons.
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
:active styles don't match what's in 5.3. Same goes for default buttons.
background: #00669B
Double borders
At least the Site Stats block appears to have a double border. It seems to be caused by a parent and child elements where both have a border property.
Border radii
The change in border radius seems to have some side effects, where adjacent cards have an undesired dip inside where they should be flush instead.
Margins
Some change in margins makes the external link detached from its card.
* fixed margins, border radius, visual display bugs, matched focus styles
|
I did some pretty major changes:
Suggestions for future updates and migration to WordPress components:
I apologize for whoever has to review this, but it's ready for another review. |
|
Scratch that. Found a bunch more styles that need updating in signup flows etc. |
|
Should be good now. Items to review:
|
|
Button style on the connection iframe doesn't match Jetpack's new style:
Since this is rendered on WPCOM, we could switch out button styles based on the jetpack_version flag passed in via the iframe URL. cc @Automattic/poseidon - this should be opened as a separate issue, not part of this PR. |
|
How do we feel about the iridescent green setup banner in this new style? Might be out of scope for this ticket since the color is an unrelated style change.
|
|
Consider this comment a 👍 on this change (I can't leave an actual approval since I still own the PR) |
|
@keoshi can you take another look and verify that @MichaelArestad fixed the issues you saw? |
We're going to leave it. At least for this PR. |
|
@MichaelArestad Tested all of the following on WordPress 5.3-RC1-46561 running Twenty Twenty/twentytwenty-master theme:
These are all looking great, but I caught a few minor things:
|
|
Can confirm that number 3 is a core issue that’s currently being worked on!
|
jeherve
left a comment
There was a problem hiding this comment.
This looks good to me, but we'll need to add some of those CSS files back.
I also have a few other questions and remarks, but I don't think any of them are blockers.
Should the non-active color be bright blue like this?
It does not seem in line with the rest of the CSS in wp-admin:
It seems there is a bit of padding missing here:
Maybe that's just me, but it feels odd to go from the closed dropdown with shadows to the flat borders of the open dropdown:
The blue border around the input fields seem to be bright blue. Is that the same color as Core?
| @@ -1,479 +0,0 @@ | |||
| /*! | |||
There was a problem hiding this comment.
We'll need those files on RTL sites, so I don't think we can delete them. If you do, you get 404 errors when we try to enqueue the file in wp-admin on sites using Hebrew or another RTL language.
There was a problem hiding this comment.
Hmm. I thought these were generated during build so we didn't want to sync them. I didn't specifically remove this one (at least not intentionally). I'll add it back.
* 7.9: Changelog * Update version number * Update stable tag and tested up to * Changelog: add #13530 * changelog: add #13578 * Changelog: add #13598 * Changelog: add entry for numerous block preview changes * Changelog: add #13599 * changelog: add #13541 * Changelog: add #13542 * Changelog: add #13331 * Changelog: add #13558 * Changelog: add #13409 * Changelog: add #13582 * Changelog: add #13600 * Changelog: add #13601 * Changelog: add #13595 * Changelog: add #12695 * Changelog: add #13009 * Changelog: add #13649 * Changelog: add #13450 * Changelog: add #13507 * Changelog: add #13658 * Changelog: add #13687 * changelog: add #13683 * Changelog: add #9323 * Changelog: add #13681 * Fix typos in readme * Add link to WordPress Beta Tester plugin * Changelog: add #13630 * Changelog: add #13695 * Changelog: add #13659 * Changelog: add #13716 * Changelog: add #13664 * Changelog: add #13682 * Changelog: add #13362 * Changelog: add #13563 * Add testing list for #13563 * Changelog: add #13735 * Changelog: add #13752 * Changelog: add #13624 * Changelog: add #13756 * Changelog: add #13745 * Changelog: add #13728 * Changelog: add #13779 * Changelog: add #13699 * Changelog: add #13804 * Changelog: add #13761 * Changelog: add #13637 * Changelog: add #13517 * Changelog: add #13521 * Changelog: add #13729 * Testing list: add testing instructions for #13729 * Changelog: add sync changes * Changelog: add #13807 * Changelog: add #13654 * Changelog: add #13795 * Changelog: add #13801 * Changelog: add #13818 * Changelog: add #13725 * Changelog: add #13831 * Changelog: add #13516 * Testing list: add Twenty Twenty instructions * Changelog: add #13799 * Changelog: add #13805 * Changelog: add #13688 * Changelog: add #13830
This is just an experiment I did to make the Jetpack buttons and borders look a bit closer to the "flat" styles coming in WordPress 5.3. They may, as a result, look a bit out of place on older versions of WordPress, but they already don't match those versions, so I think this is a net win.
I am not a designer, so I was really just eyeballing this and trying to make it look "closer", not perfect.
This also lays the groundwork for integrating
@wordpress/components into our Jetpack admin pages without a style mismatch.Changes proposed in this Pull Request:
Is this a new feature or does it add/remove features to an existing part of Jetpack?
Proposed changelog entry for your changes:
Screenshots
Here's a cropped before/after shot.
Before:
After:
A gallery of the WP 5.3 dash/posts, plus Jetpack before/after screenshots, is available here:
https://cloudup.com/czXdFjw6ykm