Admin Reskin: Cards #10862
Open
Admin Reskin: Cards #10862
+79
−44
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Update all card and postbox styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Base Card Styles:** - Background: #ffffff (white) - Border: 1px solid rgba(0,0,0,0.1) for subtle appearance - Border radius: 8px for dashboard widgets, plugin cards, theme cards, welcome panel - Border radius: 0 for post editor metaboxes (maintains existing behavior) - Padding: 16px for small cards, 16px 24px for medium cards **Dashboard Widgets:** - Border radius: 8px with rounded corners - Header padding: 12px vertical, 16px horizontal for compact appearance - Content padding: 16px (was 0 12px 12px) - "At a Glance" widget: 16px top padding for proper alignment - "Activity" widget: maintains 12px horizontal padding for layout compatibility - Welcome panel: 8px border radius, 24px padding (was 48px) **Drag and Drop Interactions:** - Gutenberg-style blue highlights using var(--wp-admin-theme-color) - Active drop zones: subtle blue background rgba(var(--wp-admin-theme-color--rgb), 0.04) - Sortable placeholder: 2px solid blue border with 8px border radius - Meta-box-sortables: 4px padding to reserve space for drag feedback - Container margins: adjusted to maintain original layout spacing - No dimensional changes during drag operations **Plugin Cards:** - Border radius: 8px with overflow hidden - Border: rgba(0,0,0,0.1) - Padding: 16px for top and bottom sections - Card bottom: updated border color for consistency **Theme Cards:** - Border radius: 8px with overflow hidden - Background: solid white (removed semi-transparent overlay) - Theme name: 16px padding, border-top instead of inset box-shadow - "Add New Theme" card: maintains transparent background and borderless style **Generic Card Component:** - Border radius: 8px - Padding: 16px 24px (was 0.7em 2em 1em) - Border: rgba(0,0,0,0.1) - Removed box-shadow for cleaner appearance **Post Editor Metaboxes:** - Maintains square corners (border-radius: 0) - Drag interactions: blue background tint, no border - 4px padding on sortables with compensating margins - Collapsed state: header border hidden See #64308. # Conflicts: # src/wp-admin/css/themes.css
fabiankaegy
force-pushed
the
admin-reskin/cards
branch
from
9443309 to
e0468b5
Compare
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
Member
mukeshpanchal27
left a comment
mukeshpanchal27
left a comment
There was a problem hiding this comment.
Look solid in playground. Keep it up
| min-height: 100px; | ||
| margin: 0 8px 20px; | ||
| min-height: 0; | ||
| margin: 0 8px 0 0; |
Member
There was a problem hiding this comment.
Suggested change
| margin: 0 8px 0 0; | |
| margin-right: 8px; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Trac ticket: https://core.trac.wordpress.org/ticket/64549
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.