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.

Sign up for GitHub

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

Merged
merged 8 commits into from
Jan 23, 2024
Merged

Improve LinkControl preview #57775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
026179d
Add offset to LinkControl Popover
richtabor Jan 11, 2024
a367b5e
Remove additionalControls from preview
richtabor Jan 11, 2024
41cd291
Simplify preview
richtabor Jan 11, 2024
33491f0
Remove unused test
richtabor Jan 11, 2024
416dcab
Revert "Remove unused test"
richtabor Jan 16, 2024
cd5bba4
Add back the new tab control
richtabor Jan 18, 2024
2f416a8
Tweak offset
richtabor Jan 23, 2024
3b43808
fix unit test
MaggieCabrera Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 11 additions & 54 deletions packages/block-editor/src/components/link-control/link-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
import {
Button,
ExternalLink,
__experimentalText as Text,
__experimentalTruncate as Truncate,
Tooltip,
} from '@wordpress/components';
import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
Expand Down Expand Up @@ -41,7 +41,7 @@ export default function LinkPreview( {
const hasRichData = richData && Object.keys( richData ).length;
Copy link
Contributor

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.

Copy link
Contributor

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.


const displayURL =
( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
( value && filterURLForDisplay( safeDecodeURI( value.url ), 24 ) ) ||
'';

// url can be undefined if the href attribute is unset
Expand Down Expand Up @@ -88,21 +88,21 @@ export default function LinkPreview( {
<span className="block-editor-link-control__search-item-details">
{ ! isEmptyURL ? (
<>
<Tooltip
text={ value.url }
placement="bottom-start"
>
<Tooltip text={ value.url }>
<ExternalLink
className="block-editor-link-control__search-item-title"
href={ value.url }
>
{ displayTitle }
<Truncate numberOfLines={ 1 }>
{ displayTitle }
</Truncate>
</ExternalLink>
</Tooltip>

{ value?.url && displayTitle !== displayURL && (
<span className="block-editor-link-control__search-item-info">
{ displayURL }
<Truncate numberOfLines={ 1 }>
{ displayURL }
</Truncate>
</span>
) }
</>
Expand All @@ -119,62 +119,19 @@ export default function LinkPreview( {
label={ __( 'Edit' ) }
className="block-editor-link-control__search-item-action"
onClick={ onEditClick }
iconSize={ 24 }
size="compact"
/>
{ hasUnlinkControl && (
<Button
icon={ linkOff }
label={ __( 'Unlink' ) }
className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
onClick={ onRemove }
iconSize={ 24 }
size="compact"
/>
) }
<ViewerSlot fillProps={ value } />
</div>

{ !! (
( hasRichData &&
( richData?.image || richData?.description ) ) ||
isFetching
) && (
<div className="block-editor-link-control__search-item-bottom">
{ ( richData?.image || isFetching ) && (
<div
aria-hidden={ ! richData?.image }
className={ classnames(
'block-editor-link-control__search-item-image',
{
'is-placeholder': ! richData?.image,
}
) }
>
{ richData?.image && (
<img src={ richData?.image } alt="" />
) }
</div>
) }

{ ( richData?.description || isFetching ) && (
<div
aria-hidden={ ! richData?.description }
className={ classnames(
'block-editor-link-control__search-item-description',
{
'is-placeholder': ! richData?.description,
}
) }
>
{ richData?.description && (
<Text truncate numberOfLines="2">
{ richData.description }
</Text>
) }
</div>
) }
</div>
) }

{ additionalControls && additionalControls() }
</div>
);
Expand Down
105 changes: 27 additions & 78 deletions packages/block-editor/src/components/link-control/style.scss
View file
Open in desktop
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% {
Expand Down Expand Up @@ -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.
Expand All @@ -191,6 +191,9 @@ $preview-image-height: 140px;
overflow-wrap: break-word;

.block-editor-link-control__search-item-info {
color: $gray-700;
Copy link
Contributor

Choose a reason for hiding this comment

The 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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AA is the requirement. I did base this off size/color from existing UI, to not introduce additional design patterns:

CleanShot 2024-01-23 at 11 58 55

CleanShot 2024-01-23 at 12 00 20

line-height: 1.1;
font-size: $helptext-font-size;
word-break: break-all;
}
}
Expand 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
}
}

Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/link-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2244,7 +2244,8 @@ describe( 'Rich link previews', () => {

const titlePreview = screen.getByText( selectedLink.title );

expect( titlePreview ).toHaveClass(
// eslint-disable-next-line testing-library/no-node-access
expect( titlePreview.parentElement ).toHaveClass(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test was failing because now we have an extra span wrapping the title in the preview because we are using <Truncate>. I don't know how to do this more cleanly! In all honesty, this same test file does this in another instance in the same way.

'block-editor-link-control__search-item-title'
);
} );
Expand Down
1 change: 1 addition & 0 deletions packages/format-library/src/link/inline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,7 @@ function InlineLinkUI( {
onClose={ stopAddingLink }
onFocusOutside={ () => stopAddingLink( false ) }
placement="bottom"
offset={ 10 }
shift
>
<LinkControl
Expand Down
Loading