[Button Block] Allow for text to wrap

[jahvi]

This is my attempt to fix #2249

Single Line	Multi Line

I'm hardcoding the top and bottom padding because I'm not sure if there's a way to get this dynamically based on the $blocks-button__height and maybe the font size?

[anna-harrison]

The buttons in the screenshots above look ok to me design wise

/cc @karmatosed

[karmatosed]

@jahvi interesting, have you tried this on various browsers? My concern is depending on device/browser this may not hold up.

[jahvi]

@karmatosed Yes, it's a relatively simple change in its core so it looks good in all browser/devices, here's a quick report (I feel like the text should always be aligned to the center in the frontend though, not sure if there's a reason for it or just an oversight):

Comparison Screenshots

Chrome

Editor	Frontend

Firefox

Editor	Frontend

Safari

Editor	Frontend

Edge

Editor	Frontend

IE 11

Editor	Frontend

Mobile

Android 7	iOS 9

I also noticed the URL input component overlapped the button in the editor when it had more than one line so I fixed that as well.

My only thought is that the $blocks-button__height variable is only used to calculate the button's border radius now, not the height and line-height as before so I'm wondering if I should get rid of it entirely and hardcode its value.

[codecov]

Codecov Report

Merging #2502 into master will decrease coverage by 8.87%.
The diff coverage is n/a.

@@            Coverage Diff            @@
##           master   #2502      +/-   ##
=========================================
- Coverage   39.08%   30.2%   -8.88%     
=========================================
  Files         290     174     -116     
  Lines        6967    5270    -1697     
  Branches     1273     900     -373     
=========================================
- Hits         2723    1592    -1131     
+ Misses       3570    3121     -449     
+ Partials      674     557     -117

Impacted Files	Coverage Δ
components/panel/row.js	0% <0%> (-100%)	⬇️
blocks/block-controls/index.js	0% <0%> (-100%)	⬇️
blocks/url-input/button.js	0% <0%> (-100%)	⬇️
components/keyboard-shortcuts/index.js	0% <0%> (-85.72%)	⬇️
blocks/alignment-toolbar/index.js	16.66% <0%> (-83.34%)	⬇️
blocks/block-alignment-toolbar/index.js	33.33% <0%> (-55.56%)	⬇️
blocks/library/categories/index.js	3.22% <0%> (-36.78%)	⬇️
editor/utils/url.js	66.66% <0%> (-33.34%)	⬇️
blocks/library/latest-posts/index.js	10% <0%> (-30%)	⬇️
blocks/url-input/index.js	1.69% <0%> (-18.95%)	⬇️
... and 324 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8cc8cbb...997e551. Read the comment docs.

[youknowriad]

Rebased this, I think this is good to go 👍

[youknowriad]

Rebased this, I think this is good to go 👍