Button: Wrap text

[harsh-barach]

Description

There was an issue(5628) on adding new Button block. When we add more text on button label then text on button was not wrapping.

How Has This Been Tested?

I have tested the issue after fixing it on my local environment.

Screenshots (jpeg or gifs if applicable):

Types of changes

I have added single line of css in main.scss. By adding this single line of css issue of non wrapping of text is solved now.

Checklist:

• [Yes] My code is tested.
• [Yes] My code follows the WordPress code style.
• [Yes] My code has proper inline documentation.

@maddisondesigns I have solved the issue.

[paulwilde]

This would be better in the stylesheet for that (particular block rather than the main stylesheet. Also you need a space between .wp-block-button__link and {.

See:
https://github.com/WordPress/gutenberg/blob/b8c91ae3fdfea3c67765ab506b4db4652861755a/blocks/library/button/style.scss

[harsh-barach]

@paulwilde I have updated the my code by moving the css to respected css of button block.

[mcsf]

Thanks for your contribution! I've left some comments to address. It's important to note that the Block button already has specific rules for wrapping:

https://github.com/harsh-barach/gutenberg/blob/a3776ed793a46204d2df6ebcf72c96c72d053ddf/blocks/library/button/style.scss#L21-L22

[mcsf]

This file should be reverted to reintroduce the newline at the end.

[harsh-barach]

I have reverted file.

[mcsf]

There already is an appropriate selector within this file, the white-space and word-break rules should be updated there directly. As for their merit, I'll loop in @jasmussen.

[harsh-barach]

Thanks @mcsf for suggesting more specific way to add css. I have added my css by your suggested way.

[mcsf]

Is height: auto needed?

[harsh-barach]

I think we can remove it because it does not affects the output.

[mcsf]

Missing newline at end of file.

[harsh-barach]

I have corrected that one.

[mcsf]

Hey, @harsh-barach, thanks for addressing the feedback. In order to be merge-ready, we're almost there! We need to clean up your Git history a little. For this, we need to:

• Restore the newline characters at the end of the files.
• Rebase the commits into something clean.

Here's what you can do:

• Make sure you're at the right commit and that the diff looks good.
• Reset your history while preserving your workdir:

git reset `git merge-base origin/master HEAD`
git checkout -p

• Now, inside checkout, you will reply n to the first hunk, and y to the two remaining ones.
• Done. Make sure the diff looks good, then commit. The commit message should be something concise like Button: Fix text wrap.
• Push your changes to GitHub. Since the history was rewritten, you'll have to use git push --force.

(If you make a mistake and want to start over, you can git checkout -f 2f77c8bf4bd58c51e3d25dae6aba3cac1970abf0.)

[harsh-barach]

I have pushed my changes to Github. But how can i found whether my changes will merge in main directory of Gutenburg?

[mcsf]

Closed in favor of #5662.