Admin reskin: Buttons #10754
Closed
Admin reskin: Buttons #10754
+1,441
−346
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
Introduces _tokens.scss with Sass variables derived from the WordPress Design System in Figma. These tokens provide consistent values for: - Spacing (4px grid units) - Border radius - Gray scale - Semantic colors (alerts/notices) - Typography scale - Elevation (box shadows) - Component sizing (buttons, inputs, checkboxes) The tokens are imported into _variables.scss and can be used across all admin stylesheets compiled via Sass. Note: These are Sass-only variables. No new CSS custom properties are exposed to maintain backward compatibility. The only CSS custom properties available remain those from wp-base-styles. Part of the WordPress 7.0 admin visual reskin initiative. See: https://core.trac.wordpress.org/ticket/64308
Update all button styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Sizing (aligned with Gutenberg's next-default-40px):** - Default buttons: 40px height (was 30px) - Compact buttons: 32px (new class for space-constrained contexts) - Small buttons: 24px (was 26px) - Hero buttons: 48px (was 46px) - Use min-height + line-height for accessibility with browser zoom **Visual updates:** - Border radius: 2px (was 3px) - Font weight: 500 (was 400/normal) - Transparent background for secondary/tertiary buttons **Focus states (Gutenberg-style outer ring):** - Primary: outer theme color ring + inner white ring for contrast - Secondary/Tertiary/Link: single outer theme color ring - Use var(--wp-admin-theme-color) for focus ring color **Hover/Active states:** - Secondary buttons: subtle rgba() background tint on hover/active - Use theme-color-darker-20 for hover text/border colors - Link buttons: theme-color-darker-20 on hover **Components updated:** - .button, .button-primary, .button-secondary - .button-link, .button-link-delete - .page-title-action (now uses secondary button pattern) See: https://core.trac.wordpress.org/ticket/64308
Update theme card buttons to work with the new design system sizing. **Button sizing:** - Use compact size (32px) for theme card buttons since they're in a space-constrained context - Set explicit min-height, line-height, and padding to match compact spec **Button visibility:** - Add white background to secondary buttons for visibility against the semi-transparent theme card overlay - Use :not(.button-primary) selector to preserve primary button styling - Adjust hover state to use #f0f0f0 background **Layout adjustments:** - Increase theme name vertical padding from 15px to 16px to accommodate taller buttons - Adjust active theme padding-right from 110px to 115px for button width - Reduce theme-actions horizontal padding from 15px to 12px See: https://core.trac.wordpress.org/ticket/64308
|
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. |
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. |
When no attributes are present, `wp_kses_hair()` should return an empty array, but when the refactor was merged, the code assumed there would be attributes. An alternative fix is to use null-coalescing to iterate over an empty array. This would produce a marginally smaller function and read slightly more cleanly, but there’s no need to enter the `foreach` loop when it’s known in advance that there’s nothing over which to iterate. Developed in: WordPress#10758 Discussed in: https://core.trac.wordpress.org/ticket/63724 Follow-up to [61467]. Props: dd32, dmsnell, jonsurrell. See: #63724. git-svn-id: https://develop.svn.wordpress.org/trunk@61499 602fd350-edb4-49c9-b593-d223f7449a82
…ources. Follow-up to [49478], [49574]. Props sabernhardt. Fixes #64526. git-svn-id: https://develop.svn.wordpress.org/trunk@61500 602fd350-edb4-49c9-b593-d223f7449a82
…n `wp_image_add_srcset_and_sizes()`. Follow-up to [35412]. Props debarghyabanerjee, sabernhardt, shanemac10, leedxw, MadtownLems, enravo, djsuperfive, westonruter. See #34430. Fixes #60480. git-svn-id: https://develop.svn.wordpress.org/trunk@61501 602fd350-edb4-49c9-b593-d223f7449a82
…n is not preferred. Developed in WordPress#10762 Follow-up to [61491]. Props mukesh27, wildworks, solankisoftware, westonruter. See #64470. Fixes #64529. git-svn-id: https://develop.svn.wordpress.org/trunk@61502 602fd350-edb4-49c9-b593-d223f7449a82
When `wp_kses_hair()` calls into the HTML API to parse an attribute string, it checks if the result might be `null` and returns early, skipping a few minor operations. It could also skip when the returned attribute count is zero. This patch adds the additional check and early-return. Developed in: WordPress#10764 Discussed in: https://core.trac.wordpress.org/ticket/63724 Follow-up to [61499]. Props dd32, dmsnell, jonsurrell. See #63724. git-svn-id: https://develop.svn.wordpress.org/trunk@61503 602fd350-edb4-49c9-b593-d223f7449a82
The work in [61438] for Core-64393 removed the block parser classes from Core, which caused numerous scripts to fail because they were missing. Conditional checks were added in [61492] which left WordPress in an inoperable state. This patch restores the block parser in Core, in preparation for work to remove it from Gutenberg (in a separate patch). Ironically, the files were removed because the new build was copying them over from Gutenberg and the intent was to avoid having two sources of truth, but this was previously the existing mechanism, so having done nothing to the parser files would have left the status quo. This patch removes the problems originally created by removing the files. They will not be copied from Gutenberg any more and the only source of truth will be Core. Until removed from Gutenberg, because of the build changes, any changes made on the Gutenberg side will be lost unless manually copied over. Developed in: WordPress#10761 Discussed in: https://core.trac.wordpress.org/ticket/64521 Follow-up to [61438], [61492]. Props dmsnell, mcsf, mukesh27, youknowriad. Fixes #64521. git-svn-id: https://develop.svn.wordpress.org/trunk@61504 602fd350-edb4-49c9-b593-d223f7449a82
The parameter name is optional in PHPStan but not supported by Psalm. While neither tools are officially supported, this removes the parse error that Psalm users otherwise see. See php-stubs/wordpress-stubs#410 for some external discussion. Props farhad0, marian1 See #64224 git-svn-id: https://develop.svn.wordpress.org/trunk@61505 602fd350-edb4-49c9-b593-d223f7449a82
- Replace `https.request()` with native `fetch()` in `log-results.js`. - Drop www. from host name used to avoid redirects. Props mcsf. Fixes #64534. git-svn-id: https://develop.svn.wordpress.org/trunk@61507 602fd350-edb4-49c9-b593-d223f7449a82
…e()`. Follow-up to [10204], [32652]. Props rejaulalomkhan, huzaifaalmesbah. See #64224. git-svn-id: https://develop.svn.wordpress.org/trunk@61508 602fd350-edb4-49c9-b593-d223f7449a82
The behavior of WP_Block_Processor::extract_full_block_and_advance() should produce an identical output to what parse_blocks() would return on the same substring of input. Unfortunately, when HTML spans followed inner blocks, they were being omitted in the output parse tree. This was due to an omission in the original code which would look for those blocks before advancing again after calling `extract_full_block_and_advance()` recursively. This patch adds the missing check and resolves the discrepancy. Developed in: WordPress#10769 Discussed in: https://core.trac.wordpress.org/ticket/64538 Follow-up to [60939]. Props dmsnell, jonsurrell, jorbin. Fixes #64537. git-svn-id: https://develop.svn.wordpress.org/trunk@61509 602fd350-edb4-49c9-b593-d223f7449a82
Changes the color on items added to menus in the Customizer from `#8c8f94` (a contrast ratio of 3.24:1) to `#646970` (a contrast ratio of 5.53:1). Props joedolson, sabernhardt, wilcosky, showravhasan, emptyopssphere, ozgursar. Fixes #64013. git-svn-id: https://develop.svn.wordpress.org/trunk@61511 602fd350-edb4-49c9-b593-d223f7449a82
Follow-up to [14760]. Props rejaulalomkhan, huzaifaalmesbah, westonruter, SergeyBiryukov. See #64224. git-svn-id: https://develop.svn.wordpress.org/trunk@61512 602fd350-edb4-49c9-b593-d223f7449a82
Adds styles for responsive grid layouts and fixes a block gap bug and a max column width bug. Props isabel_brison, aaronrobertshaw. Fixes #64532. git-svn-id: https://develop.svn.wordpress.org/trunk@61513 602fd350-edb4-49c9-b593-d223f7449a82
Webkit-based browsers add a cancel button to search inputs. This input uses the default cursor standard to buttons and inputs, but the WordPress admin applies the `pointer` cursor to buttons and inputs. Apply the WordPress standard pointer to this pseudoelement for UI consistency. Props sumitsingh, manhphucofficial, joedolson, sabernhardt, dhruvang21. Fixes #64382. git-svn-id: https://develop.svn.wordpress.org/trunk@61514 602fd350-edb4-49c9-b593-d223f7449a82
Remove the autofocus script in Twenty Ten that forced a bypass of the navigation, main heading, and explanation on the 404 error page. Props sabernhardt, ravichudasama01, joedolson. Fixes #64064. git-svn-id: https://develop.svn.wordpress.org/trunk@61515 602fd350-edb4-49c9-b593-d223f7449a82
Checks that the value passed to add_declaration is a string to prevent fatal errors due to malformed block attributes. Props andrewserong. Fixes #64545. git-svn-id: https://develop.svn.wordpress.org/trunk@61516 602fd350-edb4-49c9-b593-d223f7449a82
Introduces _tokens.scss with Sass variables derived from the WordPress Design System in Figma. These tokens provide consistent values for: - Spacing (4px grid units) - Border radius - Gray scale - Semantic colors (alerts/notices) - Typography scale - Elevation (box shadows) - Component sizing (buttons, inputs, checkboxes) The tokens are imported into _variables.scss and can be used across all admin stylesheets compiled via Sass. Note: These are Sass-only variables. No new CSS custom properties are exposed to maintain backward compatibility. The only CSS custom properties available remain those from wp-base-styles. Part of the WordPress 7.0 admin visual reskin initiative. See: https://core.trac.wordpress.org/ticket/64308
Update all button styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Sizing (aligned with Gutenberg's next-default-40px):** - Default buttons: 40px height (was 30px) - Compact buttons: 32px (new class for space-constrained contexts) - Small buttons: 24px (was 26px) - Hero buttons: 48px (was 46px) - Use min-height + line-height for accessibility with browser zoom **Visual updates:** - Border radius: 2px (was 3px) - Font weight: 500 (was 400/normal) - Transparent background for secondary/tertiary buttons **Focus states (Gutenberg-style outer ring):** - Primary: outer theme color ring + inner white ring for contrast - Secondary/Tertiary/Link: single outer theme color ring - Use var(--wp-admin-theme-color) for focus ring color **Hover/Active states:** - Secondary buttons: subtle rgba() background tint on hover/active - Use theme-color-darker-20 for hover text/border colors - Link buttons: theme-color-darker-20 on hover **Components updated:** - .button, .button-primary, .button-secondary - .button-link, .button-link-delete - .page-title-action (now uses secondary button pattern) See: https://core.trac.wordpress.org/ticket/64308
Update theme card buttons to work with the new design system sizing. **Button sizing:** - Use compact size (32px) for theme card buttons since they're in a space-constrained context - Set explicit min-height, line-height, and padding to match compact spec **Button visibility:** - Add white background to secondary buttons for visibility against the semi-transparent theme card overlay - Use :not(.button-primary) selector to preserve primary button styling - Adjust hover state to use #f0f0f0 background **Layout adjustments:** - Increase theme name vertical padding from 15px to 16px to accommodate taller buttons - Adjust active theme padding-right from 110px to 115px for button width - Reduce theme-actions horizontal padding from 15px to 12px See: https://core.trac.wordpress.org/ticket/64308
…ss-develop into admin-reskin/buttons
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
8 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/64308
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.