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

Remove Popover from LinkControl component #19638

Merged
merged 3 commits into from
Jan 14, 2020
Merged

Remove Popover from LinkControl component #19638

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bc21d78
Remove Popover from LinkControl component
youknowriad Jan 14, 2020
a47b7a7
Fix unit tests
youknowriad Jan 14, 2020
cc5b753
Fix popover position
youknowriad Jan 14, 2020
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
154 changes: 60 additions & 94 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 @@ -2,23 +2,14 @@
* External dependencies
*/
import classnames from 'classnames';
import { isFunction, noop, startsWith } from 'lodash';
import { noop, startsWith } from 'lodash';

/**
* WordPress dependencies
*/
import {
Button,
ExternalLink,
Popover,
} from '@wordpress/components';
import { Button, ExternalLink } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import {
useCallback,
useState,
Fragment,
} from '@wordpress/element';
import { useCallback, useState, Fragment } from '@wordpress/element';

import {
safeDecodeURI,
Expand All @@ -28,8 +19,8 @@ import {
getProtocol,
} from '@wordpress/url';

import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { useInstanceId } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
Expand All @@ -42,17 +33,19 @@ const MODE_EDIT = 'edit';
// const MODE_SHOW = 'show';

function LinkControl( {
className,
value,
settings,
fetchSearchSuggestions,
instanceId,
onClose = noop,
onChange = noop,
} ) {
// State
const instanceId = useInstanceId( LinkControl );
const [ inputValue, setInputValue ] = useState( '' );
const [ isEditingLink, setIsEditingLink ] = useState( ! value || ! value.url );
const { fetchSearchSuggestions } = useSelect( ( select ) => {
const { getSettings } = select( 'core/block-editor' );
return {
fetchSearchSuggestions: getSettings().__experimentalFetchLinkSuggestions,
};
}, [] );

// Handlers

Expand Down Expand Up @@ -83,11 +76,6 @@ function LinkControl( {
}
};

const closeLinkUI = () => {
resetInput();
onClose();
};

const resetInput = () => {
setInputValue( '' );
};
Expand Down Expand Up @@ -176,77 +164,55 @@ function LinkControl( {
};

return (
<Popover
className={ classnames( 'block-editor-link-control', className ) }
onClose={ closeLinkUI }
position="bottom center"
focusOnMount="firstElement"
Copy link
Member

Choose a reason for hiding this comment

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

Are these props no longer needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

They seem unnecessary in my testing.

>
<div className="block-editor-link-control__popover-inner">
<div className="block-editor-link-control__search">

{ ( ! isEditingLink ) && (
<Fragment>
<p className="screen-reader-text" id={ `current-link-label-${ instanceId }` }>
{ __( 'Currently selected' ) }:
</p>
<div
aria-labelledby={ `current-link-label-${ instanceId }` }
aria-selected="true"
className={ classnames( 'block-editor-link-control__search-item', {
'is-current': true,
} ) }
<div className="block-editor-link-control">
{ ( ! isEditingLink ) && (
<Fragment>
<p className="screen-reader-text" id={ `current-link-label-${ instanceId }` }>
{ __( 'Currently selected' ) }:
</p>
<div
aria-labelledby={ `current-link-label-${ instanceId }` }
aria-selected="true"
className={ classnames( 'block-editor-link-control__search-item', {
'is-current': true,
} ) }
>
<span className="block-editor-link-control__search-item-header">
<ExternalLink
className="block-editor-link-control__search-item-title"
href={ value.url }
>
<span className="block-editor-link-control__search-item-header">
<ExternalLink
className="block-editor-link-control__search-item-title"
href={ value.url }
>
{ value.title }
</ExternalLink>
<span className="block-editor-link-control__search-item-info">{ filterURLForDisplay( safeDecodeURI( value.url ) ) || '' }</span>
</span>

<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
{ __( 'Edit' ) }
</Button>
</div>
</Fragment>
) }

{ isEditingLink && (
<LinkControlSearchInput
value={ inputValue }
onChange={ onInputChange }
onSelect={ ( suggestion ) => {
setIsEditingLink( false );
onChange( { ...value, ...suggestion } );
} }
renderSuggestions={ renderSearchResults }
fetchSuggestions={ getSearchHandler }
onReset={ resetInput }
/>
) }

{ ! isEditingLink && (
<LinkControlSettingsDrawer value={ value } settings={ settings } onChange={ onChange } />
) }
</div>
</div>
</Popover>
{ value.title }
</ExternalLink>
<span className="block-editor-link-control__search-item-info">{ filterURLForDisplay( safeDecodeURI( value.url ) ) || '' }</span>
</span>

<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
{ __( 'Edit' ) }
</Button>
</div>
</Fragment>
) }

{ isEditingLink && (
<LinkControlSearchInput
value={ inputValue }
onChange={ onInputChange }
onSelect={ ( suggestion ) => {
setIsEditingLink( false );
onChange( { ...value, ...suggestion } );
} }
renderSuggestions={ renderSearchResults }
fetchSuggestions={ getSearchHandler }
onReset={ resetInput }
/>
) }

{ ! isEditingLink && (
<LinkControlSettingsDrawer value={ value } settings={ settings } onChange={ onChange } />
) }
</div>
);
}

export default compose(
withInstanceId,
withSelect( ( select, ownProps ) => {
if ( ownProps.fetchSearchSuggestions && isFunction( ownProps.fetchSearchSuggestions ) ) {
return;
}

const { getSettings } = select( 'core/block-editor' );
return {
fetchSearchSuggestions: getSettings().__experimentalFetchLinkSuggestions,
};
} )
)( LinkControl );
export default LinkControl;
4 changes: 2 additions & 2 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,10 +1,10 @@
.block-editor-link-control__search {
.block-editor-link-control {
position: relative;
min-width: $modal-min-width;
}

// LinkControl popover.
.block-editor-link-control__search .block-editor-link-control__search-input {
.block-editor-link-control .block-editor-link-control__search-input {
// Specificity override.
&.block-editor-link-control__search-input input[type="text"] {
width: calc(100% - #{$grid-size-large*2});
Expand Down
35 changes: 19 additions & 16 deletions packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
withFallbackStyles,
ToolbarButton,
ToolbarGroup,
Popover,
} from '@wordpress/components';
import {
BlockControls,
Expand Down Expand Up @@ -96,23 +97,25 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
setIsURLPickerOpen( true );
};
const linkControl = isURLPickerOpen && (
<LinkControl
className="wp-block-navigation-link__inline-link-input"
value={ { url, title, opensInNewTab } }
onChange={ ( { title: newTitle = '', url: newURL = '', opensInNewTab: newOpensInNewTab } ) => {
setAttributes( {
title: escape( newTitle ),
url: newURL,
} );
<Popover position="bottom center">
<LinkControl
className="wp-block-navigation-link__inline-link-input"
value={ { url, title, opensInNewTab } }
onChange={ ( { title: newTitle = '', url: newURL = '', opensInNewTab: newOpensInNewTab } ) => {
setAttributes( {
title: escape( newTitle ),
url: newURL,
} );

if ( opensInNewTab !== newOpensInNewTab ) {
onToggleOpenInNewTab( newOpensInNewTab );
}
} }
onClose={ () => {
setIsURLPickerOpen( false );
} }
/>
if ( opensInNewTab !== newOpensInNewTab ) {
onToggleOpenInNewTab( newOpensInNewTab );
}
} }
onClose={ () => {
setIsURLPickerOpen( false );
} }
/>
</Popover>
);
return (
<>
Expand Down
33 changes: 18 additions & 15 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
KeyboardShortcuts,
PanelBody,
Path,
Popover,
SVG,
TextareaControl,
TextControl,
Expand Down Expand Up @@ -164,21 +165,23 @@ function NavigationLinkEdit( {
] }
/>
{ isLinkOpen && (
<LinkControl
className="wp-block-navigation-link__inline-link-input"
value={ link }
onChange={ ( {
title: newTitle = '',
url: newURL = '',
opensInNewTab: newOpensInNewTab,
} = {} ) => setAttributes( {
title: escape( newTitle ),
url: newURL,
label: label || escape( newTitle ),
opensInNewTab: newOpensInNewTab,
} ) }
onClose={ () => setIsLinkOpen( false ) }
/>
<Popover>
Copy link
Member

Choose a reason for hiding this comment

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

Does it not need a position here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seemed to work without it, maybe it was the default, I'll check.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I restored this

<LinkControl
className="wp-block-navigation-link__inline-link-input"
value={ link }
onChange={ ( {
title: newTitle = '',
url: newURL = '',
opensInNewTab: newOpensInNewTab,
} = {} ) => setAttributes( {
title: escape( newTitle ),
url: newURL,
label: label || escape( newTitle ),
opensInNewTab: newOpensInNewTab,
} ) }
onClose={ () => setIsLinkOpen( false ) }
Copy link
Member

Choose a reason for hiding this comment

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

This should have been moved to the Popover. LinkControl no longer has an onClose prop with the changes from this pull request.

Fix at: #19885

/>
</Popover>
) }
</div>
<InnerBlocks
Expand Down