Block: Button

[jwold]

Feature description

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Adding the button

• The block can be added from the block library, and should appear under Material Blocks
• The icon should be crop_7_5 from: material.io/resources/icons
• The description for the block: Buttons allow users to take actions, and make choices, with a single tap.
• Block preview: None
• By default the block will be set to Styles: Text, Container: Contained, Icon: None
• The editable label should default to saying Button

Editing the button

• Editing the label is done by selecting the label and typing into it.
• Setting the button link is done by selecting the block and editing the link below the button
• The link can be typed as a url, or you can search for an existing post/page on your site and it will find that.

Changing button settings

• Setting the link rel and whether it opens in a new tab is done via the block sidebar.
• In the block sidebar you can set whether the block is a button or an icon button.
• If it's set as a button you can choose between Text, Outlined, Raised, Unelevated as the options. Here's a demo to check against from the actual web component: https://material-components.github.io/material-components-web-catalog/#/component/button

Icons

• If button style is Text, you can add an icon at the beginning or end of the button by selecting Leading or Trailing. If you select one of those the button block should add the favorite icon immediately as an example, allowing you to then change it.
• From there you can't actually remove the icon from the icon picker, you can just turn it off by selecting Icon: None. But if you turn it back on it defaults to the last icon you used, or if you didn't use one, defaults to the Favorite icon.
• In the icon picker you can search for an icon by its name
• When you choose an icon you should see it selected in the icon list (highlighted with a blue background), and it should also appear beside the search input field, that way if you scroll past it you'll still know which icon you had selected.
• Icon style should match the icon style set in Customizer. Cannot be changed at the block level.

Colors

• By default the button block should respect the colors set in the Customizer for the Material Design Style, changing it here will alter only this button instance
• The default colors listed should reflect the main colors in the design style chosen, or the custom colors set in the Customizer.
• You can also choose a custom color from the Material color palettes by clicking on Color palette.
• You can also choose a custom color by selecting Custom Color, which shows a color wheel and allows entering a hex.
• You can then clear the color by selecting Clear
• Color palette borders correspond to darker variation of color (don't believe this is necessary)
• Background color only appears if container is outlined, raised, or unelevated
• If non accessible colors, display notice warning in sidebar

Rounded Corners

• Defaults to whatever is set by the design style chosen in Customizer
• If the button is set to Container: Outlined, Container: Raised, Container: Unelevated, then you should be able to change the corner style from 0 to 20 (screenshot from shape scheme tool: https://d.pr/i/Mkg1qN)

Prototype:

Figma link

Styles
Styles.zip

Icon
crop_7_5-24px.svg.zip

Implementation brief

• Icon picker:
  • Find (or create) a JSON list of all icons
  • Loop through this list and dynamically display all icons in a React component
  • Handle click event and set state (or attribute) with clicked icon. Add .active class appropriately.
  • Include component to the block settings
• Color picker:
  • @ravichdev
• Rest of the settings
  • Implement the rest of the settings, such as: buttons style, elevation, etc. These settings will potentially be separate React components so that they may be reused in other blocks.
  • These settings directly affect how the button looks in the editor
  • Use contentEditable to make the label of the button editable
  • Use TextControl component to allow for user to change target URL. Switch to advanced URL picker soon.
  • Button style applies a material class for: text, outlined, raised or unelevated
  • Icon gets placed in front of the text and behind it. Conditionally show one based on which option was selected.
  • Color pickers for background and text are basically inline styles being applied to the outest button container.
  • If the style of the button has a background, we'll display a ContrastChecker component, checking the contrast between background and text, displaying a warning appropriately.
  • The radius slider is a RangeControl component, which adjusts the inline styles of the outest button container to apply a border-radius
  • The "open in new tab" toggle is a ToggleControl which when checked, stores _blank as the attribute value. We then apply this directly on the anchor element.
  • The Link rel field is directly affected by the "open in new tab" toggle, having its value set to the appropriate new tab rel. User is able to override this as its a TextControl component.

QA testing instructions

Note 1: With most of these changes you'll also want to see if the frontend is working, and not just the Gutenberg preview. It's possible there are discrepancies.

Note 2: For now we're just testing with the theme set in the staging env, we'll need to come back later and test with the top five themes that we approve.

• Add a new button block and see if the suggested defaults all work as expected

• See if description and icon match AC

• Change the label

• Add a link, validate that it works when previewing block on frontend

• Change button styles and see if they match the web component: https://material-components.github.io/material-components-web-catalog/#/component/button

• See if opening link in new tab works

• Change the font in the Customizer, publish it, and see if the button font updates.

• Before you change the button color: Change the color in the Customizer, publish it, and see if the button color changes in the block to match Customizer (it should)

• After you change the button color in the block, goes to the Customizer and change it, then come back to the block and see if it matches the Customizer (it shouldn't)

• The colors shown as available should be the primary and secondary colors from the Customizer, but the primary should always be set by default. Ensure that these two colors match what's set in the Customizer.

• See if accessibility notices appear when colors aren't accessible, and verify those notices match with the color tool https://material.io/resources/color/#!/?view.left=0&view.right=0 (screenshot: https://d.pr/i/75qBjI)

• Change color from color palette, see if works as expected

• Change color by selecting custom color, see if works as expected.

• Try clearing color, when you clear it should revert to what is set in Customizer

• Try adding leading and trailing icons and see if that matches the material web component

• Ensure that the icon collection matches the style set in Customizer, try changing Customizer a few times to ensure that the icon collection updates in Gutenberg

• Rounded corners should be changeable and match the shape scheme tool in terms of constraints. Screenshot: https://d.pr/i/Rz76Gc, link: https://material.io/design/shape/about-shape.html#shape-customization-tool

Demo

Video: https://d.pr/v/EJWiyN

Changelog entry

[dugajean]

@jwold Where do you enter the link?

[jwold]

@dugajean I forgot to include that, just updated the GIF prototype. Thanks! It's now as a setting in the sidebar at the bottom.

[jwold]

AC and prototype have both been updated.

[dugajean]

@jwold Could you add individual screenshots for the larger components (icon picker, color picker)? I'm having a hard time seeing the icon picker design while it's moving so much 😄.

[jwold]

@dugajean I updated two of the subtasks, and saw that Ravi did the other! :)

[jwold]

@dugajean can you write the implementation brief for this? Thanks!

[dugajean]

@jwold Done. Let me know if that is what you expected.

[jwold]

@dugajean this looks really great! Thanks :)

[jwold]

@dugajean @ravichdev based on the Demo last week, we have some feedback. I put this on the parent issue for now, but can move to the child issues if we want to re-open them.

Rounded Corners:

• The default number that appears in the input field will be whatever the Material Theme in Customizer is set to
• Add clear button to revert back to theme default (Screenshot: https://d.pr/i/8Xf3Oa)

New SVG styles:

• SVGs Download.zip

Color Picker:

• By default let's use the top colors defined in the base Material Theme.
• Until Customizer is ready we can either use all colors from column 700, or just the default colors from the baseline design style.
• Here's a proposal for how it would work. Feedback welcome!

[jwold]

Discussion to add icon button to this. Thinking through how that would work.

[jwold]

Based on feedback in Slack we've been discussing extending this block to include Icon Button. I've been exploring how we could do that in a way that would compliment the experience currently. Would love feedback on this concept.

I realize it's a bit of a departure from what we had, so I'm guessing we'll need to add this to an issue for a future Sprint.

cc @dugajean and @ravichdev

[jwold]

Found a few issues in QA when reviewing the block on staging:

1. Can we set the favorite icon as a default? So when I choose Trailing or Leading, that icon will appear automatically, then I can just change it in the icon picker. cc @dugajean
2. Color palette picker - When I select a color and try to click out, I can't, I can only click on the color palette label link. Video: https://v.usetapes.com/gGi7QOCqVn
3. Rounded corners appears to not function: https://v.usetapes.com/SsE64Q40LE.
4. Rounded corners max goes to 36, I think it should be max 20: https://d.pr/i/GUY1wt
5. Found a minor issue with a sticky label. It appears when you first open the color palette https://d.pr/i/f87Zg1

cc @ravichdev

[csossi]

@jwold - should we have an "x"/"close" for the Color Palette and Custom Color popups?

[jwold]

Great question @csossi! This may be something to consider in the future. However, for now we're ok to go without the close indicators, since this is a pattern that already exists in WordPress.

[csossi]

@jwold - fyi, the following remain outstanding on staging site (per your comments above)

• "favourite" icon not appearing by default
• rounded corner slider not maxing at 20 (still at 36)

[jwold]

"favourite" icon not appearing by default

@csossi Great catch. I've verified that the favorite icon appears when I go to the icon button type first, then go back to the text button type. So I can confirm that this is a bug. Video: https://v.usetapes.com/BVCgmCIu9F

rounded corner slider not maxing at 20 (still at 36)

Oh interesting, you're right. I see that the corner ACTUALLY maxes at 20, but the slider lets you go further. That's a bug, but not necessarily a blocker. Will check with the team on that. Thanks!

[jwold]

I've opened a bug report for the two QA issues: #184