Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Preview, Save and Switch to Draft button labels blue #24420

Merged
merged 1 commit into from
Aug 7, 2020

Conversation

shaunandrews
Copy link
Contributor

@shaunandrews shaunandrews commented Aug 6, 2020

Fixes #23890.

This PR aims to help resolve some issues around the Switch to Draft, Save, and Preview buttons in the editor's top toolbar, which were updated in #21192. In #23890 there are some concerns that these buttons now look like plain text. One suggestion brought up by the accessibility team was to switch the color to blue, and that's what this PR does.

Here's how they look in master today:

image

And here's how they look in this PR:

image

image

@shaunandrews shaunandrews added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta Needs Design Feedback Needs general design feedback. labels Aug 6, 2020
@jasmussen
Copy link
Contributor

Thank you for the PR! This is a very basic PR that removes 7 lines of code. That makes it very safe, very predictable, and it improves things. It also does not preclude further explorations. 👍 👍 from me.

@kellychoffman
Copy link
Contributor

Ship it.

@github-actions
Copy link

github-actions bot commented Aug 6, 2020

Size Change: -34 B (0%)

Total Size: 1.15 MB

Filename Size Change
build/edit-post/style-rtl.css 5.59 kB -17 B (0%)
build/edit-post/style.css 5.59 kB -17 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 125 kB 0 B
build/block-editor/style-rtl.css 10.6 kB 0 B
build/block-editor/style.css 10.6 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.59 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.76 kB 0 B
build/block-library/style.css 7.77 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.3 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Member

@ZebulanStanphill ZebulanStanphill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm the one who created #21192, which changed the "Save draft" button to look the way it does in master right now. Sorry for that, though to be fair, the "Preview" button was already using that style, albeit with a redundant chevron next to it.

I'm definitely approving this PR. It removes more special-case CSS, it makes the buttons more obvious, and it improves upon the consistency that I had wanted to achieve with my PR.

In the future I'd suggest trying to find a way to avoid coloring any buttons blue by default, simply because it feels weird to have the text buttons colored blue by default, but the icon buttons colored black. Maybe just add a black outline to the text buttons? But for now, this PR is a definite improvement over master.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚢

@draganescu draganescu merged commit 900c7f0 into master Aug 7, 2020
@draganescu draganescu deleted the update/edit-post-header-button-color branch August 7, 2020 07:36
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 7, 2020
whyisjake pushed a commit that referenced this pull request Aug 9, 2020
@youknowriad youknowriad removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback.
Projects
None yet
7 participants