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

Link UI: Design Iteration #28755

Closed
wants to merge 36 commits into from
Closed

Link UI: Design Iteration #28755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
c47d4a7
Removing the settings. (For now.)
shaunandrews Feb 3, 2021
4dcce10
Updating the Nav block to use the G2 styles and position the popover …
shaunandrews Feb 3, 2021
70a0018
Updating inline links to use the G2 style popovers, and changing the …
shaunandrews Feb 3, 2021
1c75f7e
Simplifying the preview popover.
shaunandrews Feb 3, 2021
a8160fa
Refactoring. Sorry.
shaunandrews Feb 3, 2021
6d8de68
Swapping around the edit and visit buttons.
shaunandrews Feb 3, 2021
0fca65d
Not sure the VisuallyHidden text is needed if I just make it a self-c…
shaunandrews Feb 3, 2021
3417b4d
Adjusting the search placeholder.
shaunandrews Feb 3, 2021
f2474cc
Cleaning up some unneeded elements and reducing classnames.
shaunandrews Feb 3, 2021
2f022e1
Adding styles for the search input and submit button.
shaunandrews Feb 3, 2021
bc6c18b
Removing the URL link and ENTER text.
shaunandrews Feb 3, 2021
714e7c1
First stab at styles for the search results.
shaunandrews Feb 3, 2021
0720f44
Updating the loading message when creating a page.
shaunandrews Feb 4, 2021
59364b1
Linting.
shaunandrews Feb 4, 2021
730d64b
Only show the URL for non-URL results.
shaunandrews Feb 4, 2021
19b18b3
Linting.
shaunandrews Feb 4, 2021
a586f1b
More styles for search results and spinners.
shaunandrews Feb 4, 2021
27846d1
Making sure long titles and urls don't break the layout.
shaunandrews Feb 4, 2021
fb4d26d
Adding explicit edit and view buttons, and making the URL plain text.
shaunandrews Feb 4, 2021
d268cbb
Reconsidering the change in position for the link popover.
shaunandrews Feb 17, 2021
1c708fb
Bringing back the link settings when creating or editing a link.
shaunandrews Feb 17, 2021
d0e480e
Linting.
shaunandrews Feb 17, 2021
fb2b0b9
Adjust class names and order or elements for the create button.
shaunandrews Feb 17, 2021
cc17769
Linting.
shaunandrews Feb 17, 2021
d976f51
Adjusting the button text for the nav link create button.
shaunandrews Feb 17, 2021
de34fe3
Styling the create button and making sure to use the grid variables w…
shaunandrews Feb 17, 2021
98623d5
Making the linter happy.
shaunandrews Feb 17, 2021
b505086
More linting.
shaunandrews Feb 17, 2021
d276ff9
Replacing the icon button with a primary text button, and adjusting t…
shaunandrews Feb 18, 2021
399c8ed
Linking the URL text and removing the explicit Visit button.
shaunandrews Feb 18, 2021
45a95cc
Updating the test snapshot.
shaunandrews Feb 22, 2021
d061bc6
I think I fixed all the tests.
shaunandrews Feb 22, 2021
a1ab7f1
Maybe fixing another test. I don't know anymore.
shaunandrews Feb 22, 2021
6395bce
Linting, of course.
shaunandrews Feb 22, 2021
fb8708b
Update the Button block to use the G2-style dark borders for it's Lin…
shaunandrews Feb 23, 2021
224a8e9
Reversing the order of the visit and edit buttons so the edit button …
shaunandrews Feb 23, 2021
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
35 changes: 18 additions & 17 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { noop } from 'lodash';
* WordPress dependencies
*/
import { Button, Spinner, Notice } from '@wordpress/components';
import { keyboardReturn } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { useRef, useState, useEffect } from '@wordpress/element';
import { focus } from '@wordpress/dom';
Expand Down Expand Up @@ -200,13 +199,14 @@ function LinkControl( {
>
{ isCreatingPage && (
<div className="block-editor-link-control__loading">
<Spinner /> { __( 'Creating' ) }…
<Spinner />
{ __( 'Creating page' ) }…
</div>
) }

{ ( isEditingLink || ! value ) && ! isCreatingPage && (
<>
<div className="block-editor-link-control__search-input-wrapper">
<div className="block-editor-link-control__search">
<LinkControlSearchInput
currentLink={ value }
className="block-editor-link-control__search-input"
Expand All @@ -225,16 +225,17 @@ function LinkControl( {
createSuggestionButtonText
}
>
<div className="block-editor-link-control__search-actions">
<Button
type="submit"
label={ __( 'Submit' ) }
icon={ keyboardReturn }
className="block-editor-link-control__search-submit"
/>
</div>
<Button
isPrimary
type="submit"
label={ __( 'Done' ) }
className="block-editor-link-control__search-submit"
>
{ __( 'Done' ) }
</Button>
</LinkControlSearchInput>
</div>

{ errorMessage && (
<Notice
className="block-editor-link-control__search-error"
Expand All @@ -244,6 +245,12 @@ function LinkControl( {
{ errorMessage }
</Notice>
) }

<LinkControlSettingsDrawer
value={ value }
settings={ settings }
onChange={ onChange }
/>
</>
) }

Expand All @@ -253,12 +260,6 @@ function LinkControl( {
onEditClick={ () => setIsEditingLink( true ) }
/>
) }

<LinkControlSettingsDrawer
value={ value }
settings={ settings }
onChange={ onChange }
/>
</div>
);
}
Expand Down
33 changes: 15 additions & 18 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 @@ -7,7 +7,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, ExternalLink } from '@wordpress/components';
import { Button } from '@wordpress/components';
import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';

/**
Expand All @@ -24,31 +24,28 @@ export default function LinkPreview( { value, onEditClick } ) {
<div
aria-label={ __( 'Currently selected' ) }
aria-selected="true"
className={ classnames( 'block-editor-link-control__search-item', {
className={ classnames( 'block-editor-link-control__link', {
'is-current': true,
} ) }
>
<span className="block-editor-link-control__search-item-header">
<ExternalLink
className="block-editor-link-control__search-item-title"
href={ value.url }
>
{ ( value && value.title ) || displayURL }
</ExternalLink>
{ value && value.title && (
<span className="block-editor-link-control__search-item-info">
{ displayURL }
</span>
) }
</span>

<Button
isSecondary
isPrimary
label={ __( 'Edit link URL' ) }
onClick={ () => onEditClick() }
className="block-editor-link-control__search-item-action"
className="block-editor-link-control__link-edit"
>
{ __( 'Edit' ) }
</Button>

<Button
target="_blank"
label={ __( 'Visit URL in new tab' ) }
className="block-editor-link-control__link-current-url"
href={ value.url }
>
<span>{ displayURL }</span>
</Button>

<ViewerSlot fillProps={ value } />
</div>
);
Expand Down
16 changes: 8 additions & 8 deletions packages/block-editor/src/components/link-control/search-create-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const LinkControlSearchCreate = ( {
text = createInterpolateElement(
sprintf(
/* translators: %s: search term. */
__( 'Create: <mark>%s</mark>' ),
__( '"<mark>%s</mark>"' ),
searchTerm
),
{ mark: <mark /> }
Expand All @@ -48,16 +48,16 @@ export const LinkControlSearchCreate = ( {
) }
onClick={ onClick }
>
<span className="block-editor-link-control__search-create-label">
Create draft
</span>
<span className="block-editor-link-control__search-create-description">
{ text }
</span>
<Icon
className="block-editor-link-control__search-item-icon"
className="block-editor-link-control__search-create-icon"
icon={ plus }
/>

<span className="block-editor-link-control__search-item-header">
<span className="block-editor-link-control__search-item-title">
{ text }
</span>
</span>
</Button>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/search-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const LinkControlSearchInput = forwardRef(
className={ className }
value={ value }
onChange={ onInputChange }
placeholder={ placeholder ?? __( 'Search or type url' ) }
placeholder={ placeholder ?? __( 'Search or type a url…' ) }
__experimentalRenderSuggestions={
showSuggestions ? handleRenderSuggestions : null
}
Expand Down
20 changes: 2 additions & 18 deletions packages/block-editor/src/components/link-control/search-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
import { __ } from '@wordpress/i18n';
import { Button, TextHighlight } from '@wordpress/components';
import { Icon, globe } from '@wordpress/icons';

export const LinkControlSearchItem = ( {
itemProps,
Expand All @@ -30,29 +28,15 @@ export const LinkControlSearchItem = ( {
'is-entity': ! isURL,
} ) }
>
{ isURL && (
<Icon
className="block-editor-link-control__search-item-icon"
icon={ globe }
/>
) }
<span className="block-editor-link-control__search-item-header">
<span className="block-editor-link-control__search-item-title">
<TextHighlight
text={ suggestion.title }
highlight={ searchTerm }
/>
</span>
<span
aria-hidden={ ! isURL }
className="block-editor-link-control__search-item-info"
>
{ ! isURL &&
( filterURLForDisplay(
safeDecodeURI( suggestion.url )
) ||
'' ) }
{ isURL && __( 'Press ENTER to add this link' ) }
<span className="block-editor-link-control__search-item-info">
{ filterURLForDisplay( safeDecodeURI( suggestion.url ) ) }
</span>
</span>
{ shouldShowType && suggestion.type && (
Expand Down
8 changes: 8 additions & 0 deletions packages/block-editor/src/components/link-control/search-results.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,14 @@ export default function LinkControlSearchResults( {
return null;
}

if (
directLinkEntryTypes.includes(
suggestion.type.toLowerCase()
)
) {
return null;
}

return (
<LinkControlSearchItem
key={ `${ suggestion.id }-${ suggestion.type }` }
Expand Down
Loading