From 3487edf079376fc1b3c3a4ea2075edba52866147 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 8 Jul 2020 15:59:17 +0200 Subject: [PATCH 1/4] Adjust LinkControl --- .../src/components/link-control/index.js | 33 +++++++----- .../link-control/search-create-button.js | 18 +++---- .../components/link-control/search-input.js | 20 ++++--- .../components/link-control/search-item.js | 9 +--- .../src/components/link-control/style.scss | 53 +++++-------------- 5 files changed, 54 insertions(+), 79 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index bdf9112ef0153b..0dca57973c6a97 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -165,15 +165,18 @@ function LinkControl( { showInitialSuggestions, forceIsEditingLink, createSuggestion, + onlySuggestions = false, + inputValue: propInputValue = '', } ) { const cancelableOnCreate = useRef(); const cancelableCreateSuggestion = useRef(); const wrapperNode = useRef(); const instanceId = useInstanceId( LinkControl ); - const [ inputValue, setInputValue ] = useState( + const [ internalInputValue, setInternalInputValue ] = useState( ( value && value.url ) || '' ); + const currentInputValue = propInputValue || internalInputValue; const [ isEditingLink, setIsEditingLink ] = useState( forceIsEditingLink !== undefined ? forceIsEditingLink @@ -249,7 +252,7 @@ function LinkControl( { * @param {string} val Current value returned by the search. */ const onInputChange = ( val = '' ) => { - setInputValue( val ); + setInternalInputValue( val ); }; const handleDirectEntry = noDirectEntry @@ -283,10 +286,10 @@ function LinkControl( { const handleEntitySearch = async ( val, args ) => { let results = await Promise.all( [ + handleDirectEntry( val ), fetchSearchSuggestions( val, { ...( args.isInitialSuggestions ? { perPage: 3 } : {} ), } ), - handleDirectEntry( val ), ] ); const couldBeURL = ! val.includes( ' ' ); @@ -460,7 +463,7 @@ function LinkControl( { : sprintf( /* translators: %s: search term. */ __( 'Search results for "%s"' ), - inputValue + currentInputValue ); // VisuallyHidden rightly doesn't accept custom classNames @@ -492,7 +495,7 @@ function LinkControl( { ) { return ( { await handleOnCreate( suggestion.title @@ -534,7 +537,8 @@ function LinkControl( { isURL={ directLinkEntryTypes.includes( suggestion.type.toLowerCase() ) } - searchTerm={ inputValue } + searchTerm={ currentInputValue } + onlySuggestions={ onlySuggestions } /> ); } ) } @@ -558,11 +562,11 @@ function LinkControl( { { ( isEditingLink || ! value ) && ! isResolvingLink && ( { if ( CREATE_TYPE === suggestion.type ) { - await handleOnCreate( inputValue ); + await handleOnCreate( currentInputValue ); } else if ( ! noDirectEntry || Object.keys( suggestion ).length > 1 @@ -577,6 +581,7 @@ function LinkControl( { fetchSuggestions={ getSearchHandler } showInitialSuggestions={ showInitialSuggestions } errorMessage={ errorMessage } + onlySuggestions={ onlySuggestions } /> ) } @@ -617,11 +622,13 @@ function LinkControl( { ) } - + { ! onlySuggestions && ( + + ) } ); } diff --git a/packages/block-editor/src/components/link-control/search-create-button.js b/packages/block-editor/src/components/link-control/search-create-button.js index 5f9cb9406eed9e..751b7a17e8c176 100644 --- a/packages/block-editor/src/components/link-control/search-create-button.js +++ b/packages/block-editor/src/components/link-control/search-create-button.js @@ -6,9 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Button, Icon } from '@wordpress/components'; -import { createInterpolateElement } from '@wordpress/element'; export const LinkControlSearchCreate = ( { searchTerm, @@ -33,19 +32,16 @@ export const LinkControlSearchCreate = ( { > - { createInterpolateElement( - sprintf( - /* translators: %s: search term. */ - __( 'New page: %s' ), - searchTerm - ), - { mark: } - ) } + { searchTerm } + + + { __( 'Create a new page' ) } diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 305d2b00f51488..4f67b5d0cace61 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -19,6 +19,7 @@ const LinkControlSearchInput = ( { renderSuggestions, fetchSuggestions, showInitialSuggestions, + onlySuggestions, errorMessage, } ) => { const [ selectedSuggestion, setSelectedSuggestion ] = useState(); @@ -54,19 +55,22 @@ const LinkControlSearchInput = ( { placeholder={ placeholder ?? __( 'Search or type url' ) } __experimentalRenderSuggestions={ renderSuggestions } __experimentalFetchLinkSuggestions={ fetchSuggestions } + __experimentalOnlySuggestions={ onlySuggestions } __experimentalHandleURLSuggestions={ true } __experimentalShowInitialSuggestions={ showInitialSuggestions } /> -
-
+ { ! onlySuggestions && ( +
+
+ ) } { errorMessage && ( diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js index a7ef58e36d4911..a8e0e26ce3fc09 100644 --- a/packages/block-editor/src/components/link-control/search-item.js +++ b/packages/block-editor/src/components/link-control/search-item.js @@ -9,7 +9,6 @@ import classnames from 'classnames'; 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, @@ -29,12 +28,6 @@ export const LinkControlSearchItem = ( { 'is-entity': ! isURL, } ) } > - { isURL && ( - - ) } { suggestion.type && ( diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 338c93ee5d6c9a..89919147429622 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -22,11 +22,11 @@ $block-editor-link-control-number-of-actions: 1; // Specificity override. &.block-editor-link-control__search-input input[type="text"] { @include input-control; - width: calc(100% - #{$grid-unit-20*2}); + width: calc(100% - #{$grid-unit-05*2}); display: block; padding: 11px $grid-unit-20; padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons - margin: $grid-unit-20; + margin: $grid-unit-05; position: relative; border: 1px solid $gray-200; border-radius: $radius-block-ui; @@ -55,38 +55,13 @@ $block-editor-link-control-number-of-actions: 1; * - Horizontally, pad to the minimum of: default input padding, or the * equivalent of the vertical padding. */ - top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) / 2 ); - right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2); + top: $grid-unit-05 + 1px + ( ( 40px - $button-size ) / 2 ); + right: $grid-unit-05 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2); } .block-editor-link-control__search-results-wrapper { position: relative; - margin-top: -$grid-unit-20 + 1px; - - &::before, - &::after { - content: ""; - position: absolute; - left: -1px; - right: $grid-unit-20; // avoid overlaying scrollbars - display: block; - pointer-events: none; - z-index: 100; - } - - &::before { - height: $grid-unit-20/2; - top: 0; - bottom: auto; - background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); - } - - &::after { - height: $grid-unit-20; - bottom: 0; - top: auto; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); - } + margin-top: 1px; } .block-editor-link-control__search-results-label { @@ -97,7 +72,7 @@ $block-editor-link-control-number-of-actions: 1; .block-editor-link-control__search-results { margin: 0; - padding: $grid-unit-20/2 $grid-unit-20 $grid-unit-20/2; + padding: $grid-unit-05; max-height: 200px; overflow-y: auto; // allow results list to scroll @@ -116,8 +91,8 @@ $block-editor-link-control-number-of-actions: 1; width: 100%; border: none; text-align: left; - padding: 10px 15px; - border-radius: 5px; + padding: 6px 10px; + border-radius: 2px; height: auto; &:hover, @@ -215,16 +190,16 @@ $block-editor-link-control-number-of-actions: 1; // Separate Create button when following other suggestions. .components-button + .block-editor-link-control__search-create { - margin-top: 20px; + margin-top: $block-selected-child-margin*2; overflow: visible; - padding: 12px 15px; + //padding: 12px 15px; // Create fake border. We cannot use border because the button has a border // radius applied to it &::before { content: ""; position: absolute; - top: -#{$block-selected-child-margin*2}; + top: -#{$block-selected-child-margin}; left: 0; display: block; width: 100%; @@ -240,7 +215,7 @@ $block-editor-link-control-number-of-actions: 1; .block-editor-link-control__settings { border-top: 1px solid $gray-200; margin: 0; - padding: $grid-unit-20 $grid-unit-30; + padding: $grid-unit-20 15px; :last-child { margin-bottom: 0; @@ -274,8 +249,8 @@ $block-editor-link-control-number-of-actions: 1; * then artificially create spacing that mimics as if the spinner * were center-padded to the same width as an icon button. */ - top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) / 2 ); - right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 ); + top: $grid-unit-05 + 1px + ( ( 40px - $spinner-size ) / 2 ); + right: $grid-unit-05 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 ); } } From 67464b75bf7810736ca5fd95fa912116097e89fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 8 Jul 2020 16:15:32 +0200 Subject: [PATCH 2/4] Separate lite theme from regular theme --- .../src/components/link-control/index.js | 10 +- .../src/components/link-control/style.scss | 108 +++++++++++++++--- 2 files changed, 99 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 0dca57973c6a97..8dd96f1583808e 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -547,12 +547,12 @@ function LinkControl( { ); }; + const className = classnames( 'block-editor-link-control', { + 'is-lite': onlySuggestions || 1, + } ); + return ( -
+
{ isResolvingLink && (
{ __( 'Creating' ) }… diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 89919147429622..659389411047b6 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -22,11 +22,11 @@ $block-editor-link-control-number-of-actions: 1; // Specificity override. &.block-editor-link-control__search-input input[type="text"] { @include input-control; - width: calc(100% - #{$grid-unit-05*2}); + width: calc(100% - #{$grid-unit-20*2}); display: block; padding: 11px $grid-unit-20; padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons - margin: $grid-unit-05; + margin: $grid-unit-20; position: relative; border: 1px solid $gray-200; border-radius: $radius-block-ui; @@ -55,13 +55,38 @@ $block-editor-link-control-number-of-actions: 1; * - Horizontally, pad to the minimum of: default input padding, or the * equivalent of the vertical padding. */ - top: $grid-unit-05 + 1px + ( ( 40px - $button-size ) / 2 ); - right: $grid-unit-05 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2); + top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) / 2 ); + right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2); } .block-editor-link-control__search-results-wrapper { position: relative; - margin-top: 1px; + margin-top: -$grid-unit-20 + 1px; + + &::before, + &::after { + content: ""; + position: absolute; + left: -1px; + right: $grid-unit-20; // avoid overlaying scrollbars + display: block; + pointer-events: none; + z-index: 100; + } + + &::before { + height: $grid-unit-20/2; + top: 0; + bottom: auto; + background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); + } + + &::after { + height: $grid-unit-20; + bottom: 0; + top: auto; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); + } } .block-editor-link-control__search-results-label { @@ -72,7 +97,7 @@ $block-editor-link-control-number-of-actions: 1; .block-editor-link-control__search-results { margin: 0; - padding: $grid-unit-05; + padding: $grid-unit-20/2 $grid-unit-20 $grid-unit-20/2; max-height: 200px; overflow-y: auto; // allow results list to scroll @@ -91,8 +116,8 @@ $block-editor-link-control-number-of-actions: 1; width: 100%; border: none; text-align: left; - padding: 6px 10px; - border-radius: 2px; + padding: 10px 15px; + border-radius: 5px; height: auto; &:hover, @@ -178,6 +203,7 @@ $block-editor-link-control-number-of-actions: 1; } } + .block-editor-link-control__loading { margin: $grid-unit-20; // when only loading control is shown it requires it's own spacing. display: flex; @@ -190,16 +216,16 @@ $block-editor-link-control-number-of-actions: 1; // Separate Create button when following other suggestions. .components-button + .block-editor-link-control__search-create { - margin-top: $block-selected-child-margin*2; + margin-top: 20px; overflow: visible; - //padding: 12px 15px; + padding: 12px 15px; // Create fake border. We cannot use border because the button has a border // radius applied to it &::before { content: ""; position: absolute; - top: -#{$block-selected-child-margin}; + top: -#{$block-selected-child-margin*2}; left: 0; display: block; width: 100%; @@ -215,7 +241,7 @@ $block-editor-link-control-number-of-actions: 1; .block-editor-link-control__settings { border-top: 1px solid $gray-200; margin: 0; - padding: $grid-unit-20 15px; + padding: $grid-unit-20 $grid-unit-30; :last-child { margin-bottom: 0; @@ -249,12 +275,66 @@ $block-editor-link-control-number-of-actions: 1; * then artificially create spacing that mimics as if the spinner * were center-padded to the same width as an icon button. */ - top: $grid-unit-05 + 1px + ( ( 40px - $spinner-size ) / 2 ); - right: $grid-unit-05 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 ); + top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) / 2 ); + right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 ); } } + .block-editor-link-control__search-item-action { margin-left: auto; // push to far right hand side flex-shrink: 0; } + +.block-editor-link-control.is-lite { + .block-editor-link-control__search-input { + // Specificity override. + &.block-editor-link-control__search-input input[type="text"] { + width: calc(100% - #{$grid-unit-05*2}); + margin: $grid-unit-05; + } + } + + .block-editor-link-control__search-actions { + top: $grid-unit-05 + 1px + ( ( 40px - $button-size ) / 2 ); + right: $grid-unit-05 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2); + } + + .block-editor-link-control__search-input .components-spinner { + &.components-spinner { + top: $grid-unit-05 + 1px + ( ( 40px - $spinner-size ) / 2 ); + right: $grid-unit-05 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) / 2 ); + } + } + + .block-editor-link-control__settings { + padding: $grid-unit-20 15px; + } + + .block-editor-link-control__search-results-wrapper { + margin-top: 1px; + + &::before, + &::after { + display: none; + } + } + + .block-editor-link-control__search-results { + padding: $grid-unit-05; + } + + .block-editor-link-control__search-item { + padding: 6px 10px; + border-radius: 2px; + } + + .components-button + .block-editor-link-control__search-create { + margin-top: $block-selected-child-margin*2; + padding: inherit; + + &::before { + top: -#{$block-selected-child-margin}; + } + } +} From a6d66264d15c382d4dd43e238239c86b9453d5bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 8 Jul 2020 16:16:17 +0200 Subject: [PATCH 3/4] Remove || 1 dev artifact --- packages/block-editor/src/components/link-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 8dd96f1583808e..cdc76bf77c3fdc 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -548,7 +548,7 @@ function LinkControl( { }; const className = classnames( 'block-editor-link-control', { - 'is-lite': onlySuggestions || 1, + 'is-lite': onlySuggestions, } ); return ( From 1a8c76aa56a47621620e57da3fa6ab69ac9ac5a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 8 Jul 2020 16:36:57 +0200 Subject: [PATCH 4/4] Add support for onlySuggestions mode to URLInput --- .../src/components/link-control/index.js | 2 +- .../src/components/url-input/index.js | 67 +++++++++++-------- 2 files changed, 40 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index cdc76bf77c3fdc..a09856398254ef 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -482,7 +482,7 @@ function LinkControl( { return (
- { searchResultsLabel } + { ! onlySuggestions && searchResultsLabel }
- + { ! onlySuggestions && ( + + ) } { loading && }