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.

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

URLInput: Replace input with InputControl #65158

Merged
merged 17 commits into from
Sep 18, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
30 changes: 17 additions & 13 deletions packages/block-editor/src/components/link-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -404,20 +404,24 @@ function LinkControl( {
createSuggestionButtonText
}
hideLabelFromVision={ ! showTextControl }
// Passing the Button component as a suffix prop
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
suffix={
showActions ? null : (
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
<Button
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
// TODO: Switch to true (40px size) if possible
__next40pxDefaultSize={ false }
onClick={
isDisabled ? noop : handleSubmit
}
label={ __( 'Submit' ) }
icon={ keyboardReturn }
className="block-editor-link-control__search-submit"
aria-disabled={ isDisabled }
/>
)
}
props
Copy link
Contributor

Choose a reason for hiding this comment

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

I just noticed this props here which looks like a typo — should we remove it? Was it meant to be something like `{...props} ? @mirka

Copy link
Contributor Author

@rahulharpal1603 rahulharpal1603 Sep 24, 2024

Choose a reason for hiding this comment

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

Yes, I think that this is a typo; "props" was never there in the first place.

Copy link
Member

Choose a reason for hiding this comment

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

Cleanup in #65650

/>
{ ! showActions && (
<div className="block-editor-link-control__search-enter">
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
onClick={ isDisabled ? noop : handleSubmit }
label={ __( 'Submit' ) }
icon={ keyboardReturn }
className="block-editor-link-control__search-submit"
aria-disabled={ isDisabled }
/>
</div>
) }
</div>
{ errorMessage && (
<Notice
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { URLInput } from '../';
import LinkControlSearchResults from './search-results';
import { CREATE_TYPE } from './constants';
import useSearchHandler from './use-search-handler';

rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
// Must be a function as otherwise URLInput will default
// to the fetchLinkSuggestions passed in block editor settings
// which will cause an unintended http request.
Expand Down Expand Up @@ -43,6 +42,7 @@ const LinkControlSearchInput = forwardRef(
withURLSuggestion = true,
createSuggestionButtonText,
hideLabelFromVision = false,
suffix = null,
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
},
ref
) => {
Expand Down Expand Up @@ -114,7 +114,6 @@ const LinkControlSearchInput = forwardRef(
);
}
};

return (
<div className="block-editor-link-control__search-input-container">
<URLInput
Expand Down Expand Up @@ -147,6 +146,7 @@ const LinkControlSearchInput = forwardRef(
}
} }
ref={ ref }
suffix={ suffix }
/>
{ children }
</div>
Expand Down
14 changes: 7 additions & 7 deletions packages/block-editor/src/components/url-input/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
import {
BaseControl,
Button,
__experimentalInputControl as InputControl,
Spinner,
withSpokenMessages,
Popover,
Expand All @@ -24,7 +25,6 @@ import {
} from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { isURL } from '@wordpress/url';

/**
* Internal dependencies
*/
Expand Down Expand Up @@ -235,7 +235,8 @@ class URLInput extends Component {
}

onChange( event ) {
this.props.onChange( event.target.value );
this.props.onChange( event );
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
// this.props.onChange( event.target.value );
}

onFocus() {
Expand Down Expand Up @@ -424,7 +425,7 @@ class URLInput extends Component {
value = '',
hideLabelFromVision = false,
} = this.props;

// console.log( 'Hello', this.props );
const {
loading,
showSuggestions,
Expand All @@ -443,7 +444,6 @@ class URLInput extends Component {
} ),
hideLabelFromVision,
};

const inputProps = {
id: inputId,
value,
Expand All @@ -464,15 +464,15 @@ class URLInput extends Component {
? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
: undefined,
ref: this.inputRef,
suffix: this.props.suffix,
};

if ( renderControl ) {
return renderControl( controlProps, inputProps, loading );
}

return (
<BaseControl __nextHasNoMarginBottom { ...controlProps }>
<input { ...inputProps } />
<InputControl { ...inputProps } __next40pxDefaultSize />
{ /* <input { ...inputProps } /> */ }
{ loading && <Spinner /> }
</BaseControl>
);
Expand Down
Loading