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.

Sign up for GitHub

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

Jump to bottom

Prefer primary buttons in block placeholders #20441

Merged
merged 2 commits into from
Feb 27, 2020
Merged

Prefer primary buttons in block placeholders #20441

merged 2 commits into from
Feb 27, 2020

Conversation

youknowriad
Copy link
Contributor

Refs #18667

Similarly to the MediaPlaceholder, this PR updates the block placeholders to use primary buttons.

Before

Capture d’écran 2020-02-25 à 4 39 43 PM

Capture d’écran 2020-02-25 à 4 39 49 PM

After

Capture d’écran 2020-02-25 à 4 39 13 PM

Capture d’écran 2020-02-25 à 4 39 21 PM

Notes

Seems like there's a small visual glitch on the RSS block placeholder.

@youknowriad youknowriad added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. labels Feb 25, 2020
@youknowriad youknowriad self-assigned this Feb 25, 2020
@github-actions
Copy link

github-actions bot commented Feb 25, 2020 •
edited
Loading

Size Change: +16 B (0%)

Total Size: 865 kB

Filename Size Change
build/block-library/index.js 116 kB +16 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 104 kB 0 B
build/block-editor/style-rtl.css 10.3 kB 0 B
build/block-editor/style.css 10.3 kB 0 B
build/block-library/editor-rtl.css 7.66 kB 0 B
build/block-library/editor.css 7.66 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.5 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 191 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.37 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.06 kB 0 B
build/edit-post/index.js 90.9 kB 0 B
build/edit-post/style-rtl.css 8.59 kB 0 B
build/edit-post/style.css 8.58 kB 0 B
build/edit-site/index.js 4.62 kB 0 B
build/edit-site/style-rtl.css 2.51 kB 0 B
build/edit-site/style.css 2.51 kB 0 B
build/edit-widgets/index.js 4.41 kB 0 B
build/edit-widgets/style-rtl.css 2.59 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 325 B 0 B
build/editor/editor-styles.css 327 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 4.01 kB 0 B
build/editor/style.css 4 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.48 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 879 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 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 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@davemart-in
Copy link

davemart-in commented Feb 25, 2020 •
edited
Loading

From my perspective, there are potentially two competing design principals here:

  1. Ideally, there's only one primary button on the screen at any time.
  2. Ideally, the primary button visually indicates the action that we think the user should take next on the screen.

If we turn these into primary buttons, it will violate item 1 since the publish button (in the top right corner) is already a primary button. On the other hand, if we do make them primary buttons, it likely satisfies item 2 better since completing the block setup is likely the thing they'd want to do next.

Question: For blocks like the image block, where there are multiple buttons, which would we select?

Image+2020-02-25+at+5 12 11+PM

I don't have an opinion here, but I call it out simply to identify one additional issue that would need to be worked out.

@youknowriad
Copy link
Contributor Author

youknowriad commented Feb 26, 2020 •
edited
Loading

@davemart-in That's exactly what this PR is doing, the placeholder you're sharing (the image one) is already updated in master to have a single primary button and two tertiary ones.

This PR does the same for the remaining placeholders.

@pablohoneyhoney
Copy link

  1. Publish is not always the primary action. Users go through various mindsets, tasks, and priorities when editing, so primary is contextual. Plus hierarchy or order of actions can be manifested not only through color and button style, also with position, the right taxonomy, and visual balance.

  2. While we want to guide users to the right paths within the placeholders, we can’t limit users to a single action we believe is primary. It’s a very diverse user type. We could create some hierarchy as explored below, to alleviate the cognitive load, while the system should be able to accommodate up to 3 CTAs.

Placeholder-1

Placeholder

Media bock

@youknowriad youknowriad force-pushed the update/primary-buttons-placeholders branch from a2c73dc to ed27e9c Compare February 26, 2020 13:49
@youknowriad
Copy link
Contributor Author

So should we merge this as a step towards these designs?

jasmussen
jasmussen approved these changes Feb 27, 2020
View reviewed changes
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Per the conversation, this is definitely good to test in the plugin.

@youknowriad youknowriad merged commit 7afad49 into master Feb 27, 2020
@youknowriad youknowriad deleted the update/primary-buttons-placeholders branch February 27, 2020 09:26
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 27, 2020
@jasmussen jasmussen mentioned this pull request Mar 6, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jasmussen jasmussen jasmussen approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

@Soean Soean Awaiting requested review from Soean

@talldan talldan Awaiting requested review from talldan

Assignees

@youknowriad youknowriad

Labels
Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 7.7
Development

Successfully merging this pull request may close these issues.
4 participants
@youknowriad @davemart-in @pablohoneyhoney @jasmussen