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

Media+Text block: Remove `break-all` styling #15871

Merged
merged 1 commit into from Jun 4, 2019

Conversation

@mapk
Copy link
Contributor

commented May 28, 2019

Fixes #15870. Removes the from the editor.scss file allowing it to break at the word.

Description

In Firefox, the content of this block would break in the middle of a word. It shouldn't.

How has this been tested?

Tested locally.

Screenshots

mediatext-fix

Types of changes

Minor CSS change.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@mapk

This comment has been minimized.

Copy link
Contributor Author

commented May 28, 2019

To test this:

1. Text this in the Firefox browser.
2. Add a Media+Text block to your document.
3. Begin typing in the content area of this block until the text drops to a second line.
4. Observe whether or not the text broke in the middle of a word, or dropped the word down to the next line entirely.

The latter is the correct solution. It should drop the entire word to the second line and not break word in the middle.

@gziolo

This comment has been minimized.

Copy link
Member

commented May 29, 2019

Noting that it was added in #14951 by @marekhrabe to fix some other issues. So it should be retested in that context as well.

@gziolo gziolo requested a review from marekhrabe May 29, 2019

@mapk

This comment has been minimized.

Copy link
Contributor Author

commented May 29, 2019

Thanks @gziolo! I knew it was there for a reason but forgot.

@marekhrabe any thoughts on this? After reviewing it from a design perspective, I'd like to just break at whole words. It feels better and visually makes more sense. When breaking at letters, the breaks look very odd, especially when there's plenty of space in the content area of the block.

I'm willing to take the tradeoff of words expanding outside the block border in edge cases (really narrow text areas) over words breaking in the middle in more common width scenarios.

@marekhrabe

This comment has been minimized.

Copy link
Contributor

commented May 29, 2019

The problem was with the drag & drop resizing action: In some cases, words could overflow outside of the box and thus changing the width of the element. That caused a janking effect as the media width is defined as a percentage but the base size was also changing constantly. It was definitely an edge case and seemed to be browser specific so for greater good, I think we should probably give this issue a priority as it applies everywhere.

@jorgefilipecosta
Copy link
Member

left a comment

This works as expected and in accordance with @marekhrabe comment:

That caused a janking effect as the media width is defined as a percentage but the base size was also changing constantly. It was definitely an edge case and seemed to be browser specific so for greater good, I think we should probably give this issue a priority as it applies everywhere.

I think we should merge this change 👍

@mapk mapk merged commit 672599a into master Jun 4, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@mapk mapk added this to Done in Phase 2 via automation Jun 4, 2019

@mapk

This comment has been minimized.

Copy link
Contributor Author

commented Jun 4, 2019

@mapk mapk deleted the update/media-text-break-word branch Jun 4, 2019

@youknowriad youknowriad added this to the Gutenberg 5.9 milestone Jun 7, 2019

nicolad added a commit to nicolad/gutenberg that referenced this pull request Jun 15, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.