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

Jump to bottom

Revise LinkControl suggestions UI to use MenuItem #50978

Merged
merged 20 commits into from
Jun 23, 2023
Merged

Revise LinkControl suggestions UI to use MenuItem #50978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2f2880e
Use "link" instead of "URL" for URL_TYPE
richtabor May 25, 2023
c66912b
Use MenuItem for search create button
richtabor May 25, 2023
2fb870f
Use sentence case for "Create page"
richtabor May 25, 2023
536f12b
Use a MenuGroup for search results
richtabor May 25, 2023
523616f
Use MenuItem for search item
richtabor May 25, 2023
89f52ef
Refactoring styles (WIP)
richtabor May 25, 2023
eda558c
Preserve whitespace in results text
getdave Jun 8, 2023
6c7e881
Reinstate result item information including permalink
getdave Jun 8, 2023
96238c2
Remove debugging CSS code
getdave Jun 8, 2023
4fff51f
Reinstate CSS to control size of rich previews favicon
getdave Jun 8, 2023
83a1d3f
Remove other commented out CSS code
getdave Jun 8, 2023
27e8405
Reinstate selected styles
getdave Jun 8, 2023
78026d1
Remove more redundant CSS
getdave Jun 8, 2023
f2489e0
Add some basic results hover/focus styling.
getdave Jun 8, 2023
3005634
Improve icon alignment
getdave Jun 8, 2023
56b25f2
Update tests to handle wording changes
getdave Jun 8, 2023
3e5af3b
Remove inconsistent hover/focus style
richtabor Jun 20, 2023
a3fc1b6
Reinstate is-selected visual state
getdave Jun 21, 2023
e7a0a9d
Update test to make sense in context of #51011
getdave Jun 21, 2023
890dde8
Fix locator for result text
getdave Jun 23, 2023
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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
// order to handle it as a unique case.
export const CREATE_TYPE = '__CREATE__';
export const TEL_TYPE = 'tel';
export const URL_TYPE = 'URL';
export const URL_TYPE = 'link';
getdave marked this conversation as resolved.
Show resolved Hide resolved
export const MAILTO_TYPE = 'mailto';
export const INTERNAL_TYPE = 'internal';

Expand Down
34 changes: 8 additions & 26 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
@@ -1,21 +1,15 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { MenuItem } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { Icon, plus } from '@wordpress/icons';
import { plus } from '@wordpress/icons';

export const LinkControlSearchCreate = ( {
searchTerm,
onClick,
itemProps,
isSelected,
buttonText,
} ) => {
if ( ! searchTerm ) {
Expand All @@ -40,27 +34,15 @@ export const LinkControlSearchCreate = ( {
}

return (
<Button
<MenuItem
{ ...itemProps }
className={ classnames(
'block-editor-link-control__search-create block-editor-link-control__search-item',
{
'is-selected': isSelected,
}
) }
iconPosition="left"
icon={ plus }
className="block-editor-link-control__search-item"
onClick={ onClick }
>
<Icon
className="block-editor-link-control__search-item-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>
{ text }
</MenuItem>
);
};

Expand Down
64 changes: 21 additions & 43 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
@@ -1,14 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
import { __ } from '@wordpress/i18n';
import { Button, TextHighlight } from '@wordpress/components';
import { MenuItem, TextHighlight } from '@wordpress/components';
import {
Icon,
globe,
Expand All @@ -19,6 +13,7 @@ import {
file,
} from '@wordpress/icons';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';

const ICONS_MAP = {
post: postList,
Expand Down Expand Up @@ -52,50 +47,33 @@ function SearchItemIcon( { isURL, suggestion } ) {
export const LinkControlSearchItem = ( {
itemProps,
suggestion,
isSelected = false,
searchTerm,
onClick,
isURL = false,
searchTerm = '',
shouldShowType = false,
} ) => {
const info = isURL
? __( 'Press ENTER to add this link' )
: filterURLForDisplay( safeDecodeURI( suggestion?.url ) );

return (
<Button
<MenuItem
{ ...itemProps }
info={ info }
iconPosition="left"
icon={
<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
}
onClick={ onClick }
className={ classnames( 'block-editor-link-control__search-item', {
'is-selected': isSelected,
'is-url': isURL,
'is-entity': ! isURL,
} ) }
shortcut={ shouldShowType && getVisualTypeName( suggestion ) }
className="block-editor-link-control__search-item"
>
<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />

<span className="block-editor-link-control__search-item-header">
<span className="block-editor-link-control__search-item-title">
<TextHighlight
// The component expects a plain text string.
text={ stripHTML( 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>
</span>
{ shouldShowType && suggestion.type && (
<span className="block-editor-link-control__search-item-type">
{ getVisualTypeName( suggestion ) }
</span>
) }
</Button>
<TextHighlight
// The component expects a plain text string.
text={ stripHTML( suggestion.title ) }
highlight={ searchTerm }
/>
</MenuItem>
);
};

Expand Down
94 changes: 48 additions & 46 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 @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { VisuallyHidden } from '@wordpress/components';
import { VisuallyHidden, MenuGroup } from '@wordpress/components';

/**
* External dependencies
Expand Down Expand Up @@ -72,59 +72,61 @@ export default function LinkControlSearchResults( {
className={ resultsListClasses }
aria-labelledby={ searchResultsLabelId }
>
{ suggestions.map( ( suggestion, index ) => {
if (
shouldShowCreateSuggestion &&
CREATE_TYPE === suggestion.type
) {
<MenuGroup>
{ suggestions.map( ( suggestion, index ) => {
if (
shouldShowCreateSuggestion &&
CREATE_TYPE === suggestion.type
) {
return (
<LinkControlSearchCreate
searchTerm={ currentInputValue }
buttonText={ createSuggestionButtonText }
onClick={ () =>
handleSuggestionClick( suggestion )
}
// Intentionally only using `type` here as
// the constant is enough to uniquely
// identify the single "CREATE" suggestion.
key={ suggestion.type }
itemProps={ buildSuggestionItemProps(
suggestion,
index
) }
isSelected={ index === selectedSuggestion }
/>
);
}

// If we're not handling "Create" suggestions above then
// we don't want them in the main results so exit early.
if ( CREATE_TYPE === suggestion.type ) {
return null;
}

return (
<LinkControlSearchCreate
searchTerm={ currentInputValue }
buttonText={ createSuggestionButtonText }
onClick={ () =>
handleSuggestionClick( suggestion )
}
// Intentionally only using `type` here as
// the constant is enough to uniquely
// identify the single "CREATE" suggestion.
key={ suggestion.type }
<LinkControlSearchItem
key={ `${ suggestion.id }-${ suggestion.type }` }
itemProps={ buildSuggestionItemProps(
suggestion,
index
) }
suggestion={ suggestion }
index={ index }
onClick={ () => {
handleSuggestionClick( suggestion );
} }
isSelected={ index === selectedSuggestion }
isURL={ LINK_ENTRY_TYPES.includes(
suggestion.type
) }
searchTerm={ currentInputValue }
shouldShowType={ shouldShowSuggestionsTypes }
isFrontPage={ suggestion?.isFrontPage }
/>
);
}

// If we're not handling "Create" suggestions above then
// we don't want them in the main results so exit early.
if ( CREATE_TYPE === suggestion.type ) {
return null;
}

return (
<LinkControlSearchItem
key={ `${ suggestion.id }-${ suggestion.type }` }
itemProps={ buildSuggestionItemProps(
suggestion,
index
) }
suggestion={ suggestion }
index={ index }
onClick={ () => {
handleSuggestionClick( suggestion );
} }
isSelected={ index === selectedSuggestion }
isURL={ LINK_ENTRY_TYPES.includes(
suggestion.type
) }
searchTerm={ currentInputValue }
shouldShowType={ shouldShowSuggestionsTypes }
isFrontPage={ suggestion?.isFrontPage }
/>
);
} ) }
} ) }
</MenuGroup>
</div>
</div>
);
Expand Down
Loading