From 94b9b7942d14cce45c3e7bf5a035acf0934b0590 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 29 Jul 2021 11:17:43 +0100 Subject: [PATCH 1/2] Force link text to wrap --- .../block-editor/src/components/link-control/style.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index e6976e47a16c7..8a86664fbf377 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -168,7 +168,12 @@ $preview-image-height: 140px; align-items: flex-start; margin-right: $grid-unit-10; overflow: hidden; - white-space: nowrap; + + // Force text to wrap to improve UX when encountering long lines + // of text, particular those with no spaces. + // See: https://github.com/WordPress/gutenberg/issues/33586#issuecomment-888921188 + white-space: pre-wrap; + word-wrap: break-word; } &.is-preview .block-editor-link-control__search-item-header { From fdd09875c033493c1e9aef455f0aec222e4c761e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 30 Jul 2021 13:07:04 +0100 Subject: [PATCH 2/2] Align type indicator top and comment See https://github.com/WordPress/gutenberg/pull/33753#issuecomment-889788537 --- packages/block-editor/src/components/link-control/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 8a86664fbf377..15a271dd92e51 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -124,7 +124,7 @@ $preview-image-height: 140px; .block-editor-link-control__search-item { position: relative; display: flex; - align-items: center; + align-items: flex-start; // when link text is very long it is important this indicator remains visible and thus should be aligned top. font-size: $default-font-size; cursor: pointer; background: $white;