From d194326a56303c5e20b617a8c5778e8d2eaedfa6 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 22 Jun 2018 13:01:20 +0200 Subject: [PATCH 1/3] Fix text wrapping in Firefox. This PR, maybe, fixes #6049. CC: @SuperGeniusZeb. It is a one line code change, but this change is put into a highly unscoped and generic location, so I would appreciate both lots of testing and sanity checking that there are no adverse side-effects to doing this. For reference, this is what we're using: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap We could also have used https://developer.mozilla.org/en-US/docs/Web/CSS/word-break --- edit-post/assets/stylesheets/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index b9e76122550ad..d4d2d2265dbba 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -45,6 +45,7 @@ html.wp-toolbar { body.gutenberg-editor-page { background: $white; + overflow-wrap: break-word; #wpcontent { padding-left: 0; From 922466aee9f90350ae06d7be89e1e4b8b409cf24 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 25 Jun 2018 08:58:53 +0200 Subject: [PATCH 2/3] Scope to block list. --- edit-post/assets/stylesheets/main.scss | 1 - editor/components/block-list/style.scss | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index d4d2d2265dbba..b9e76122550ad 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -45,7 +45,6 @@ html.wp-toolbar { body.gutenberg-editor-page { background: $white; - overflow-wrap: break-word; #wpcontent { padding-left: 0; diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index a67b26bef41d5..a76f3fcce71c6 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -136,6 +136,9 @@ padding-left: $block-padding; padding-right: $block-padding; + // Break long spaceless words so they don't overflow the block. + overflow-wrap: break-word; + @include break-small() { // The block mover needs to stay inside the block to allow clicks when hovering the block padding-left: $block-padding + $block-side-ui-padding - $border-width; From 3ca0073a52cd0f4d803a725db2115ccf8208d01d Mon Sep 17 00:00:00 2001 From: "Matthew Riley MacPherson (tofumatt)" Date: Tue, 26 Jun 2018 10:32:46 +0100 Subject: [PATCH 3/3] docs: Tweak comment --- editor/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index a76f3fcce71c6..0bcaac46b62a4 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -136,7 +136,7 @@ padding-left: $block-padding; padding-right: $block-padding; - // Break long spaceless words so they don't overflow the block. + // Break long strings of text without spaces so they don't overflow the block. overflow-wrap: break-word; @include break-small() {