-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Improve LinkControl preview #57775
Improve LinkControl preview #57775
Changes from 4 commits
026179d
a367b5e
41cd291
33491f0
416dcab
cd5bba4
2f416a8
3b43808
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,4 @@ | ||
$block-editor-link-control-number-of-actions: 1; | ||
$preview-image-height: 140px; | ||
|
||
@keyframes loadingpulse { | ||
0% { | ||
|
@@ -183,6 +182,7 @@ $preview-image-height: 140px; | |
flex-direction: row; | ||
align-items: flex-start; | ||
margin-right: $grid-unit-10; | ||
gap: $grid-unit-10; | ||
|
||
// Force text to wrap to improve UX when encountering long lines | ||
// of text, particular those with no spaces. | ||
|
@@ -191,6 +191,9 @@ $preview-image-height: 140px; | |
overflow-wrap: break-word; | ||
|
||
.block-editor-link-control__search-item-info { | ||
color: $gray-700; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This does meet AA level for normal text, but fails at AAA. It is pretty hard to read at this color at such a small text size. Could we increase the contrast here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
line-height: 1.1; | ||
font-size: $helptext-font-size; | ||
word-break: break-all; | ||
} | ||
} | ||
|
@@ -209,17 +212,29 @@ $preview-image-height: 140px; | |
word-break: break-all; | ||
} | ||
|
||
.block-editor-link-control__search-item-details { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
gap: $grid-unit-05; | ||
} | ||
|
||
.block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon { | ||
background-color: $gray-100; | ||
width: $grid-unit-40; | ||
height: $grid-unit-40; | ||
border-radius: $radius-block-ui; | ||
} | ||
|
||
.block-editor-link-control__search-item-icon { | ||
position: relative; | ||
margin-right: $grid-unit-10; | ||
max-height: 24px; | ||
flex-shrink: 0; | ||
width: 24px; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
|
||
img { | ||
width: 16px; // favicons often have a source of 32px | ||
width: $grid-unit-20; // favicons often have a source of 32px | ||
} | ||
} | ||
|
||
|
@@ -230,10 +245,13 @@ $preview-image-height: 140px; | |
} | ||
|
||
.block-editor-link-control__search-item-title { | ||
display: block; | ||
font-weight: 500; | ||
position: relative; | ||
line-height: $grid-unit-30; | ||
border-radius: $radius-block-ui; | ||
line-height: 1.1; | ||
|
||
&:focus-visible { | ||
@include block-toolbar-button-style__focus(); | ||
text-decoration: none; | ||
} | ||
|
||
mark { | ||
font-weight: 600; | ||
|
@@ -249,58 +267,6 @@ $preview-image-height: 140px; | |
display: none; // specifically requested to be removed visually as well. | ||
} | ||
} | ||
|
||
.block-editor-link-control__search-item-description { | ||
padding-top: 12px; | ||
margin: 0; | ||
|
||
&.is-placeholder { | ||
margin-top: 12px; | ||
padding-top: 0; | ||
height: 28px; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-around; | ||
|
||
&::before, | ||
&::after { | ||
display: block; | ||
content: ""; | ||
height: 0.7em; | ||
width: 100%; | ||
background-color: $gray-100; | ||
border-radius: 3px; | ||
} | ||
} | ||
|
||
.components-text { | ||
font-size: 0.9em; | ||
} | ||
} | ||
|
||
.block-editor-link-control__search-item-image { | ||
display: flex; | ||
width: 100%; | ||
background-color: $gray-100; | ||
justify-content: center; | ||
height: $preview-image-height; // limit height | ||
max-height: $preview-image-height; // limit height | ||
overflow: hidden; | ||
border-radius: 2px; | ||
margin-top: 12px; | ||
|
||
&.is-placeholder { | ||
background-color: $gray-100; | ||
border-radius: 3px; | ||
} | ||
|
||
img { | ||
display: block; // remove unwanted space below image | ||
width: 100%; | ||
height: 100%; | ||
object-fit: contain; | ||
} | ||
} | ||
} | ||
|
||
.block-editor-link-control__search-item-top { | ||
|
@@ -310,24 +276,7 @@ $preview-image-height: 140px; | |
align-items: center; | ||
} | ||
|
||
.block-editor-link-control__search-item-bottom { | ||
transition: opacity 1.5s; | ||
width: 100%; | ||
} | ||
|
||
.block-editor-link-control__search-item.is-fetching { | ||
.block-editor-link-control__search-item-description { | ||
&::before, | ||
&::after { | ||
animation: loadingpulse 1s linear infinite; | ||
animation-delay: 0.5s; // avoid animating for fast network responses | ||
} | ||
} | ||
|
||
.block-editor-link-control__search-item-image { | ||
animation: loadingpulse 1s linear infinite; | ||
animation-delay: 0.5s; // avoid animating for fast network responses | ||
} | ||
|
||
.block-editor-link-control__search-item-icon { | ||
svg, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -257,6 +257,7 @@ function InlineLinkUI( { | |
onClose={ stopAddingLink } | ||
onFocusOutside={ () => stopAddingLink( false ) } | ||
placement="bottom" | ||
offset={ 8 } | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I prefer the previous offset that gave it a little bit more separation from the link, but not a sticking point for me. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
shift | ||
> | ||
<LinkControl | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we still need
hasRichData
? It adds an.is-rich
class, but that class is unused in the CSS.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, looks like it was only ever used for tests. Not going to rip that out right now.