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

Prefer primary buttons in block placeholders #20441

Merged
merged 2 commits into from Feb 27, 2020

Conversation

@youknowriad
Copy link
Contributor

youknowriad commented Feb 25, 2020

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.

@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Feb 25, 2020

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

This comment has been minimized.

Copy link

davemart-in commented Feb 25, 2020

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

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 26, 2020

@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

This comment has been minimized.

Copy link

pablohoneyhoney commented Feb 26, 2020

  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 Feb 26, 2020
@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 27, 2020

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

Copy link
Contributor

jasmussen left a comment

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

@youknowriad youknowriad merged commit 7afad49 into master Feb 27, 2020
3 checks passed
3 checks passed
build
Details
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@youknowriad youknowriad deleted the update/primary-buttons-placeholders branch Feb 27, 2020
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.