From c47d4a7e4f573a825c7c7ab61bb7618cc868db82 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 2 Feb 2021 23:38:59 -0500 Subject: [PATCH 01/36] Removing the settings. (For now.) --- .../block-editor/src/components/link-control/index.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index d2bac48450bb0..a02300938d55c 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -15,7 +15,6 @@ import { focus } from '@wordpress/dom'; /** * Internal dependencies */ -import LinkControlSettingsDrawer from './settings-drawer'; import LinkControlSearchInput from './search-input'; import LinkPreview from './link-preview'; import useCreatePage from './use-create-page'; @@ -103,7 +102,6 @@ import { ViewerFill } from './viewer-slot'; function LinkControl( { searchInputPlaceholder, value, - settings, onChange = noop, noDirectEntry = false, showSuggestions = true, @@ -253,12 +251,6 @@ function LinkControl( { onEditClick={ () => setIsEditingLink( true ) } /> ) } - - ); } From 4dcce10d300d03b28eeb05a71871ed94d6d7f2ca Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 2 Feb 2021 23:39:52 -0500 Subject: [PATCH 02/36] Updating the Nav block to use the G2 styles and position the popover to the right. --- packages/block-library/src/navigation-link/edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 3561576dffa1f..1925c3bb3bff4 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -466,7 +466,8 @@ export default function NavigationLinkEdit( { ) } { isLinkOpen && ( setIsLinkOpen( false ) } > Date: Tue, 2 Feb 2021 23:40:24 -0500 Subject: [PATCH 03/36] Updating inline links to use the G2 style popovers, and changing the position to the right. --- packages/format-library/src/link/inline.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 4c78c9d1475a9..ba8d84e31950f 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -134,7 +134,8 @@ function InlineLinkUI( { anchorRef={ anchorRef } focusOnMount={ focusOnMount.current } onClose={ stopAddingLink } - position="bottom center" + position="bottom right" + isAlternate={ true } > Date: Tue, 2 Feb 2021 23:42:45 -0500 Subject: [PATCH 04/36] Simplifying the preview popover. Generally reducing the number of elements, and making the class names more obvious. Removing the external icon, and replaced the edit button with an icon. --- .../components/link-control/link-preview.js | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index ef6bd09fcf270..dd9130a5ce086 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -7,8 +7,9 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, ExternalLink } from '@wordpress/components'; +import { Button, VisuallyHidden } from '@wordpress/components'; import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url'; +import { edit } from '@wordpress/icons'; /** * Internal dependencies @@ -24,31 +25,31 @@ export default function LinkPreview( { value, onEditClick } ) {
- - - { ( value && value.title ) || displayURL } - - { value && value.title && ( - - { displayURL } - - ) } - + + +
+
); From a8160fa6ce0566fa98f518de906673105a21e805 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 2 Feb 2021 23:46:05 -0500 Subject: [PATCH 05/36] Refactoring. Sorry. --- .../src/components/link-control/style.scss | 318 +++--------------- 1 file changed, 47 insertions(+), 271 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 6650cb7c98f20..052ee9e69a1dc 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -1,292 +1,68 @@ -$block-editor-link-control-number-of-actions: 1; - +// The general wrapper, in which everything else resides. .block-editor-link-control { - position: relative; - min-width: $modal-min-width; - - .components-popover__content & { - min-width: auto; - width: 90vw; - max-width: $modal-min-width; - } -} - -// Provides positioning context for reset button. Without this then when an -// error notice is displayed the input's reset button is incorrectly positioned. -.block-editor-link-control__search-input-wrapper { - position: relative; -} - -// LinkControl popover. -.block-editor-link-control .block-editor-link-control__search-input { - // Specificity override. - &.block-editor-link-control__search-input input[type="text"] { - @include input-control; - 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-20; - position: relative; - border: 1px solid $gray-300; - border-radius: $radius-block-ui; - } - - .components-base-control__field { - margin-bottom: 0; - } -} - -.block-editor-link-control__search-error { - margin: -$grid-unit-20/2 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button -} - -.block-editor-link-control__search-actions { - position: absolute; - /* - * Actions must be positioned on top of URLInput, since the input will grow - * when suggestions are rendered. - * - * Compensate for: - * - Input margin ($grid-unit-20) - * - Border (1px) - * - Vertically, for the difference in height between the input (40px) and - * the icon buttons. - * - 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); -} - -.components-button .block-editor-link-control__search-submit .has-icon { - margin: -1px; -} - -.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; - } - - &::after { - height: $grid-unit-20; - bottom: 0; - top: auto; - } -} - -.block-editor-link-control__search-results-label { - padding: $grid-unit-20 $grid-unit-40 0; - display: block; - font-weight: 600; -} - -.block-editor-link-control__search-results { - margin: 0; - padding: $grid-unit-20/2 $grid-unit-20 $grid-unit-20/2; - max-height: 200px; - overflow-y: auto; // allow results list to scroll - - &.is-loading { - opacity: 0.2; - } + padding: 6px; } -.block-editor-link-control__search-item { - position: relative; +// Link Preview +// Once a link has been set this displays the URL +// along with buttons to visit and edit the link. +.block-editor-link-control__link { display: flex; align-items: center; - font-size: $default-font-size; - cursor: pointer; - background: $white; - width: 100%; - border: none; - text-align: left; - padding: $grid-unit-15 $grid-unit-20; - border-radius: 5px; - height: auto; - - &:hover, - &:focus { - background-color: $gray-300; - } - - // The added specificity is needed to override. - &:focus:not(:disabled) { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset; - } - - &.is-selected { - background: $gray-100; - - .block-editor-link-control__search-item-type { - background: $white; - } - } - - &.is-current { - background: transparent; - border: 0; - width: 100%; - cursor: default; - padding: $grid-unit-20; - padding-left: $grid-unit-30; - } - - .block-editor-link-control__search-item-header { - display: block; - margin-right: $grid-unit-10; - overflow: hidden; - white-space: nowrap; - } - - .block-editor-link-control__search-item-icon { - margin-right: 1em; - min-width: 24px; - } - - .block-editor-link-control__search-item-info, - .block-editor-link-control__search-item-title { - overflow: hidden; - text-overflow: ellipsis; - padding-right: $grid-unit-30; - - .components-external-link__icon { - position: absolute; - right: 0; - margin-top: 0; - } - } - - .block-editor-link-control__search-item-title { - display: block; - margin-bottom: 0.2em; - font-weight: 500; - position: relative; - - mark { - font-weight: 700; - color: $black; - background-color: transparent; - } - - span { - font-weight: normal; - } - } - - .block-editor-link-control__search-item-info { - display: block; - color: $gray-700; - font-size: 0.9em; - line-height: 1.3; - } - - .block-editor-link-control__search-item-type { - display: block; - padding: 3px 8px; - margin-left: auto; - font-size: 0.9em; - background-color: $gray-100; - border-radius: 2px; - } } -.block-editor-link-control__loading { - margin: $grid-unit-20; // when only loading control is shown it requires it's own spacing. - display: flex; - align-items: center; - - .components-spinner { - margin-top: 0; - } +.block-editor-link-control__link-url { + white-space: nowrap; + min-width: 80px; + max-width: 280px; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; } -// Separate Create button when following other suggestions. -.components-button + .block-editor-link-control__search-create { - overflow: visible; - padding: $grid-unit-15 $grid-unit-20; +.components-button.has-icon.has-text svg { + margin-right: 0; +} - // 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}; - left: 0; - display: block; - width: 100%; - } +.block-editor-link-control__link-visit.has-icon { + margin-right: 6px; } -// Specificity overide -.block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item { - padding: 10px; +.block-editor-link-control__link-divider { + width: 1px; + height: 48px; + margin: -6px 6px; + background: $gray-900; } -.block-editor-link-control__settings { - border-top: $border-width solid $gray-300; - margin: 0; - padding: $grid-unit-20 $grid-unit-30; +/* +// Selected Item +block-editor-link-control__search-item.is-current + a.block-editor-link-control__search-item-title + svg.components-external-link__icon - :last-child { - margin-bottom: 0; - } + button.block-editor-link-control__search-item-action - .is-alternate & { - border-top: $border-width solid $gray-900; - } -} + fieldset.block-editor-link-control__settings -.block-editor-link-control__setting { - margin-bottom: $grid-unit-20; +// Search UI +block-editor-link-control__search-input-wrapper + form + input.block-editor-link-control__search-input - :last-child { - margin-bottom: 0; - } -} + block-editor-link-control__search-results-wrapper + block-editor-link-control__search-results + button.block-editor-link-control__search-item.is-url + svg.block-editor-link-control__search-item-icon -.block-editor-link-control .block-editor-link-control__search-input .components-spinner { - display: block; + block-editor-link-control__search-item-header + block-editor-link-control__search-item-title + block-editor-link-control__search-item-info - &.components-spinner { // Specificity override. - position: absolute; - left: auto; - bottom: auto; - /* - * Position spinner to the left of the actions. - * - * Compensate for: - * - Input margin ($grid-unit-20) - * - Border (1px) - * - Vertically, for the difference in height between the input (40px) - * and the spinner. - * - Horizontally, adjust for the width occupied by the icon buttons, - * 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 ); - } -} + block-editor-link-control__search-item-type -.block-editor-link-control__search-item-action { - margin-left: auto; // push to far right hand side - flex-shrink: 0; -} + block-editor-link-control__search-actions + block-editor-link-control__search-submit + +*/ From 6d8de68fb069ac0121b93e9ef66668dffe4055df Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 15:25:46 -0500 Subject: [PATCH 06/36] Swapping around the edit and visit buttons. The edit button now displays the URL, and the visit button uses just an icon. --- .../components/link-control/link-preview.js | 23 +++++----- .../src/components/link-control/style.scss | 46 ++++--------------- 2 files changed, 21 insertions(+), 48 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index dd9130a5ce086..de34abcced79d 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { Button, VisuallyHidden } from '@wordpress/components'; import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url'; -import { edit } from '@wordpress/icons'; +import { external } from '@wordpress/icons'; /** * Internal dependencies @@ -30,24 +30,25 @@ export default function LinkPreview( { value, onEditClick } ) { } ) } >
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 052ee9e69a1dc..a72b7c43b9872 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -4,14 +4,16 @@ } // Link Preview -// Once a link has been set this displays the URL -// along with buttons to visit and edit the link. +// Once a link has been set this buttons edit or +// visit the URL. .block-editor-link-control__link { display: flex; align-items: center; } -.block-editor-link-control__link-url { +// A button that displays the URL. When pressed +// the UI switches to editing the URL. +.block-editor-link-control__link-edit { white-space: nowrap; min-width: 80px; max-width: 280px; @@ -21,48 +23,18 @@ display: inline-block; } +// Since the button's label is hidden, there's +// no need to have any margin on the icon SVG. .components-button.has-icon.has-text svg { margin-right: 0; } -.block-editor-link-control__link-visit.has-icon { - margin-right: 6px; -} +// The divider separates the edit button from +// the visit button. .block-editor-link-control__link-divider { width: 1px; height: 48px; margin: -6px 6px; background: $gray-900; } - -/* -// Selected Item -block-editor-link-control__search-item.is-current - a.block-editor-link-control__search-item-title - svg.components-external-link__icon - - button.block-editor-link-control__search-item-action - - fieldset.block-editor-link-control__settings - -// Search UI -block-editor-link-control__search-input-wrapper - form - input.block-editor-link-control__search-input - - block-editor-link-control__search-results-wrapper - block-editor-link-control__search-results - button.block-editor-link-control__search-item.is-url - svg.block-editor-link-control__search-item-icon - - block-editor-link-control__search-item-header - block-editor-link-control__search-item-title - block-editor-link-control__search-item-info - - block-editor-link-control__search-item-type - - block-editor-link-control__search-actions - block-editor-link-control__search-submit - -*/ From 0fca65df583d44b7342504e9ff78d40f9374b9ce Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 16:14:11 -0500 Subject: [PATCH 07/36] Not sure the VisuallyHidden text is needed if I just make it a self-closing button. --- .../block-editor/src/components/link-control/link-preview.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index de34abcced79d..867b907fc2788 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -47,9 +47,7 @@ export default function LinkPreview( { value, onEditClick } ) { showToolTip={ true } className="block-editor-link-control__link-visit" href={ value.url } - > - { __( 'Visit URL' ) } - + /> From 3417b4d179f0652f61c33c9aee410720ff603bf0 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 16:15:37 -0500 Subject: [PATCH 08/36] Adjusting the search placeholder. --- .../block-editor/src/components/link-control/search-input.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 c8ae882ae1aba..7b210200c69c3 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -123,7 +123,9 @@ 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 } From f2474cc4aec45b5a93690abb55fedf49179ce022 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 16:16:02 -0500 Subject: [PATCH 09/36] Cleaning up some unneeded elements and reducing classnames. --- .../src/components/link-control/index.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index a02300938d55c..c68cde03ab02e 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -204,7 +204,7 @@ function LinkControl( { { ( isEditingLink || ! value ) && ! isCreatingPage && ( <> -
+
-
-
+
{ errorMessage && ( From 2f022e1658b8784d0d9561e6eb97a403d392364b Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 16:19:38 -0500 Subject: [PATCH 10/36] Adding styles for the search input and submit button. --- .../src/components/link-control/style.scss | 49 ++++++++++++++++--- 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index a72b7c43b9872..74ca3fe85516b 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -3,7 +3,47 @@ padding: 6px; } -// Link Preview + +// ## Link Search +// When creating or editing a URL the primary UI +// is a search input. It pulls double duty allowing +// users to search site entities or type a URL. +.block-editor-link-control__search { + position: relative; + + .block-editor-link-control__search-input { + .components-base-control__field { + margin: 0; + } + + input.block-editor-url-input__input[type="text"] { + padding: $grid-unit-15; + border-radius: $radius-block-ui; + background: $gray-100; + + &:focus { + background: $white; + box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); + } + } + } + + .block-editor-link-control__search-submit { + position: absolute; + top: 4px; + right: 4px; + + // I think the submit icon is mis-aligned. + svg { + position: relative; + top: -2px; + right: 2px; + } + } +} + + +// ## Link Preview // Once a link has been set this buttons edit or // visit the URL. .block-editor-link-control__link { @@ -23,13 +63,6 @@ display: inline-block; } -// Since the button's label is hidden, there's -// no need to have any margin on the icon SVG. -.components-button.has-icon.has-text svg { - margin-right: 0; -} - - // The divider separates the edit button from // the visit button. .block-editor-link-control__link-divider { From bc6c18b7d222259131bf3e6b6be0835f4e266bc6 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 17:48:52 -0500 Subject: [PATCH 11/36] Removing the URL link and ENTER text. --- .../src/components/link-control/search-item.js | 9 --------- 1 file changed, 9 deletions(-) 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 804e5c95f05af..91ba1bff9550c 100644 --- a/packages/block-editor/src/components/link-control/search-item.js +++ b/packages/block-editor/src/components/link-control/search-item.js @@ -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, @@ -30,12 +28,6 @@ export const LinkControlSearchItem = ( { 'is-entity': ! isURL, } ) } > - { isURL && ( - - ) } { shouldShowType && suggestion.type && ( From 714e7c1dda9d132816ef1f9a3e10a235425ac538 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 17:49:46 -0500 Subject: [PATCH 12/36] First stab at styles for the search results. --- .../src/components/link-control/style.scss | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 74ca3fe85516b..c26684b06bba3 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -43,6 +43,53 @@ } +// ## Search Results +/* +block-editor-link-control__search-results-wrapper + block-editor-link-control__search-results-label + + block-editor-link-control__search-results + block-editor-link-control__search-item (is-url|is-entity) + block-editor-link-control__search-item-icon + + block-editor-link-control__search-item-header + block-editor-link-control__search-item-title + block-editor-link-control__search-item-info + + block-editor-link-control__search-item-type +*/ +.block-editor-link-control__search-results { + mark { + background: none; + font-weight: 600; + } +} + +.block-editor-link-control__search-item { + height: auto; + width: 100%; + text-align: left; + border-radius: $radius-block-ui; + padding: $grid-unit-15; + display: flex; +} + +.block-editor-link-control__search-item-header { + flex-grow: 1; +} + +.block-editor-link-control__search-item-title { + display: block; + font-size: 13px; +} + +.block-editor-link-control__search-item-info { + display: block; + font-size: 12px; + color: $gray-700; +} + + // ## Link Preview // Once a link has been set this buttons edit or // visit the URL. From 0720f44f1b563c84b72204e1cc4e3bc44a2dcc01 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 23:51:54 -0500 Subject: [PATCH 13/36] Updating the loading message when creating a page. --- 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 c68cde03ab02e..3f4c38bce1a87 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -198,7 +198,7 @@ function LinkControl( { > { isCreatingPage && (
- { __( 'Creating' ) }… + { __( 'Creating page' ) }…
) } From 59364b19aecc48e40e2a0c0b89c6cd65aa2b122a Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 23:52:09 -0500 Subject: [PATCH 14/36] Linting. --- packages/block-editor/src/components/link-control/index.js | 3 ++- 1 file changed, 2 insertions(+), 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 3f4c38bce1a87..aa7c13fe99c0f 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -198,7 +198,8 @@ function LinkControl( { > { isCreatingPage && (
- { __( 'Creating page' ) }… + + { __( 'Creating page' ) }…
) } From 730d64b6f8c79602b3b8dffa63b0d2c3636c91f3 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 23:52:59 -0500 Subject: [PATCH 15/36] Only show the URL for non-URL results. --- .../src/components/link-control/search-item.js | 7 +------ .../src/components/link-control/search-results.js | 4 ++++ 2 files changed, 5 insertions(+), 6 deletions(-) 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 91ba1bff9550c..def4d8f0b5911 100644 --- a/packages/block-editor/src/components/link-control/search-item.js +++ b/packages/block-editor/src/components/link-control/search-item.js @@ -36,14 +36,9 @@ export const LinkControlSearchItem = ( { /> - { ! isURL && - ( filterURLForDisplay( - safeDecodeURI( suggestion.url ) - ) || - '' ) } + { filterURLForDisplay( safeDecodeURI( suggestion.url ) ) } { shouldShowType && suggestion.type && ( diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js index cc24b81f18b17..65261810f1311 100644 --- a/packages/block-editor/src/components/link-control/search-results.js +++ b/packages/block-editor/src/components/link-control/search-results.js @@ -114,6 +114,10 @@ export default function LinkControlSearchResults( { return null; } + if ( directLinkEntryTypes.includes( suggestion.type.toLowerCase() ) ) { + return null; + } + return ( Date: Wed, 3 Feb 2021 23:53:13 -0500 Subject: [PATCH 16/36] Linting. --- .../block-editor/src/components/link-control/search-item.js | 4 +--- .../src/components/link-control/search-results.js | 6 +++++- 2 files changed, 6 insertions(+), 4 deletions(-) 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 def4d8f0b5911..d52c85d2a9655 100644 --- a/packages/block-editor/src/components/link-control/search-item.js +++ b/packages/block-editor/src/components/link-control/search-item.js @@ -35,9 +35,7 @@ export const LinkControlSearchItem = ( { highlight={ searchTerm } /> - + { filterURLForDisplay( safeDecodeURI( suggestion.url ) ) } diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js index 65261810f1311..cf2c700b4f0ca 100644 --- a/packages/block-editor/src/components/link-control/search-results.js +++ b/packages/block-editor/src/components/link-control/search-results.js @@ -114,7 +114,11 @@ export default function LinkControlSearchResults( { return null; } - if ( directLinkEntryTypes.includes( suggestion.type.toLowerCase() ) ) { + if ( + directLinkEntryTypes.includes( + suggestion.type.toLowerCase() + ) + ) { return null; } From a586f1bf5aacecc8f6ea7c145df491c8a89357b1 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 3 Feb 2021 23:54:16 -0500 Subject: [PATCH 17/36] More styles for search results and spinners. --- .../src/components/link-control/style.scss | 100 +++++++++++++----- 1 file changed, 72 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index c26684b06bba3..054a2df653003 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -14,12 +14,24 @@ .block-editor-link-control__search-input { .components-base-control__field { margin: 0; + + // A spinner appears while searching to let you + // know something is happening. + .components-spinner { + position: absolute; + top: 12px; + right: 42px; + z-index: 1; + } } input.block-editor-url-input__input[type="text"] { - padding: $grid-unit-15; border-radius: $radius-block-ui; background: $gray-100; + max-width: 50vw; + padding: 6px 42px 6px 12px; + font-size: 13px; + line-height: 24px; &:focus { background: $white; @@ -30,8 +42,8 @@ .block-editor-link-control__search-submit { position: absolute; - top: 4px; - right: 4px; + top: 1px; + right: 1px; // I think the submit icon is mis-aligned. svg { @@ -44,21 +56,19 @@ // ## Search Results -/* -block-editor-link-control__search-results-wrapper - block-editor-link-control__search-results-label - - block-editor-link-control__search-results - block-editor-link-control__search-item (is-url|is-entity) - block-editor-link-control__search-item-icon - - block-editor-link-control__search-item-header - block-editor-link-control__search-item-title - block-editor-link-control__search-item-info - - block-editor-link-control__search-item-type -*/ .block-editor-link-control__search-results { + // When the list of results gets too long + // make sure it can scroll. + max-height: 280px; + overflow-y: auto; + + // When loading (which should be rare) fade the results. + &.is-loading { + opacity: 0.2; + } + + // As you search your exact input will be highlighted + // with the mark tag. mark { background: none; font-weight: 600; @@ -70,23 +80,55 @@ block-editor-link-control__search-results-wrapper width: 100%; text-align: left; border-radius: $radius-block-ui; - padding: $grid-unit-15; + padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 $grid-unit-15; display: flex; + + &:first-child { + padding-top: $grid-unit-10; + } + + &.is-selected { + background: $gray-100; + } } .block-editor-link-control__search-item-header { flex-grow: 1; -} + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + max-width: 280px; + + .block-editor-link-control__search-item-title { + display: block; + font-size: 13px; + + .is-url &, + .is-url & mark { + font-weight: normal; + } + } -.block-editor-link-control__search-item-title { - display: block; - font-size: 13px; + .block-editor-link-control__search-item-info { + display: block; + font-size: 12px; + color: $gray-700; + } } -.block-editor-link-control__search-item-info { - display: block; +.block-editor-link-control__search-item-type { font-size: 12px; - color: $gray-700; + padding: 4px 8px; + background: $gray-100; + color: $gray-900; + border-radius: $radius-block-ui; + margin-left: $grid-unit-15; + text-transform: capitalize; + + .is-selected & { + background: $white; + } } @@ -102,12 +144,14 @@ block-editor-link-control__search-results-wrapper // the UI switches to editing the URL. .block-editor-link-control__link-edit { white-space: nowrap; - min-width: 80px; - max-width: 280px; - line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: inline-block; + max-width: 280px; + min-width: 180px; + text-align: left; + line-height: 24px; + background: $gray-100; } // The divider separates the edit button from From 27846d1b1cd365beda344566e17d31ed0e9a3323 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 4 Feb 2021 00:02:19 -0500 Subject: [PATCH 18/36] Making sure long titles and urls don't break the layout. --- .../src/components/link-control/style.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 054a2df653003..5db25f688f8f1 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -79,6 +79,7 @@ height: auto; width: 100%; text-align: left; + margin-top: $grid-unit-05; border-radius: $radius-block-ui; padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 $grid-unit-15; display: flex; @@ -94,15 +95,15 @@ .block-editor-link-control__search-item-header { flex-grow: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - max-width: 280px; .block-editor-link-control__search-item-title { display: block; font-size: 13px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; + min-width: 100%; .is-url &, .is-url & mark { @@ -114,6 +115,10 @@ display: block; font-size: 12px; color: $gray-700; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; } } From fb4d26d52faeea3deb5598b6df4d5524e96672eb Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 4 Feb 2021 14:39:32 -0500 Subject: [PATCH 19/36] Adding explicit edit and view buttons, and making the URL plain text. --- .../components/link-control/link-preview.js | 19 +++++++----- .../src/components/link-control/style.scss | 29 ++++++++----------- 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index 867b907fc2788..99681aad93439 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -7,9 +7,8 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, VisuallyHidden } from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url'; -import { external } from '@wordpress/icons'; /** * Internal dependencies @@ -29,25 +28,29 @@ export default function LinkPreview( { value, onEditClick } ) { 'is-current': true, } ) } > + + { displayURL } + + -
-
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 5db25f688f8f1..0514a22694077 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -1,6 +1,6 @@ // The general wrapper, in which everything else resides. .block-editor-link-control { - padding: 6px; + padding: ($grid-unit-15 / 2); } @@ -138,32 +138,27 @@ // ## Link Preview -// Once a link has been set this buttons edit or -// visit the URL. +// When clicking an existing link, the preview popover +// shows the current link with actions to edit and visit. .block-editor-link-control__link { display: flex; align-items: center; } -// A button that displays the URL. When pressed -// the UI switches to editing the URL. -.block-editor-link-control__link-edit { +.block-editor-link-control__link-current-url { + margin: 0 $grid-unit-20 0 $grid-unit-15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 280px; - min-width: 180px; - text-align: left; - line-height: 24px; - background: $gray-100; + cursor: default; +} + +.block-editor-link-control__link-edit { + margin-right: $grid-unit-05; } -// The divider separates the edit button from -// the visit button. -.block-editor-link-control__link-divider { - width: 1px; - height: 48px; - margin: -6px 6px; - background: $gray-900; +.block-editor-link-control__link-visit.components-button.is-tertiary { + padding: ($grid-unit-15 / 2) $grid-unit-15; } From d268cbbe00d50574d9aab3aa385db5ca4091d377 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 15:20:28 -0500 Subject: [PATCH 20/36] Reconsidering the change in position for the link popover. --- packages/format-library/src/link/inline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index ba8d84e31950f..766261702cf3c 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -134,7 +134,7 @@ function InlineLinkUI( { anchorRef={ anchorRef } focusOnMount={ focusOnMount.current } onClose={ stopAddingLink } - position="bottom right" + position="bottom center" isAlternate={ true } > Date: Wed, 17 Feb 2021 15:21:04 -0500 Subject: [PATCH 21/36] Bringing back the link settings when creating or editing a link. --- .../src/components/link-control/index.js | 9 +++++++++ .../src/components/link-control/style.scss | 15 +++++++++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index aa7c13fe99c0f..c0f9ef64199d7 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -15,6 +15,7 @@ import { focus } from '@wordpress/dom'; /** * Internal dependencies */ +import LinkControlSettingsDrawer from './settings-drawer'; import LinkControlSearchInput from './search-input'; import LinkPreview from './link-preview'; import useCreatePage from './use-create-page'; @@ -102,6 +103,7 @@ import { ViewerFill } from './viewer-slot'; function LinkControl( { searchInputPlaceholder, value, + settings, onChange = noop, noDirectEntry = false, showSuggestions = true, @@ -232,6 +234,7 @@ function LinkControl( { /> + { errorMessage && ( ) } + + ) } diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 0514a22694077..2b2c18fa7d3b9 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -3,7 +3,6 @@ padding: ($grid-unit-15 / 2); } - // ## Link Search // When creating or editing a URL the primary UI // is a search input. It pulls double duty allowing @@ -48,13 +47,12 @@ // I think the submit icon is mis-aligned. svg { position: relative; - top: -2px; - right: 2px; + top: -1px; + right: 4px; } } } - // ## Search Results .block-editor-link-control__search-results { // When the list of results gets too long @@ -136,6 +134,15 @@ } } +// ## Link Settings +// Links can be set to open in a new window +.block-editor-link-control__settings { + margin: 12px; + + .components-base-control__field { + margin: 0; + } +} // ## Link Preview // When clicking an existing link, the preview popover From d0e480ecd3a116b1584ed0c12c8267186cff4ddf Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 15:21:14 -0500 Subject: [PATCH 22/36] Linting. --- .../src/components/link-control/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index c0f9ef64199d7..b11b6ac97f4b9 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -103,7 +103,7 @@ import { ViewerFill } from './viewer-slot'; function LinkControl( { searchInputPlaceholder, value, - settings, + settings, onChange = noop, noDirectEntry = false, showSuggestions = true, @@ -245,11 +245,11 @@ function LinkControl( { ) } - + ) } From fb2b0b9029f292aa1cc9f29dd56088a53a220a30 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 16:45:32 -0500 Subject: [PATCH 23/36] Adjust class names and order or elements for the create button. --- .../components/link-control/search-create-button.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) 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 679c5df55c0fc..5281049dd07bf 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 @@ -30,7 +30,7 @@ export const LinkControlSearchCreate = ( { text = createInterpolateElement( sprintf( /* translators: %s: search term. */ - __( 'Create: %s' ), + __( '\"%s\"' ), searchTerm ), { mark: } @@ -48,16 +48,12 @@ export const LinkControlSearchCreate = ( { ) } onClick={ onClick } > + Create draft + { text } - - - - { text } - - ); }; From cc17769c0318676ad522ec351eb977ef42e9d6f2 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 16:48:16 -0500 Subject: [PATCH 24/36] Linting. --- .../components/link-control/search-create-button.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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 5281049dd07bf..025f3341e3985 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 @@ -30,7 +30,7 @@ export const LinkControlSearchCreate = ( { text = createInterpolateElement( sprintf( /* translators: %s: search term. */ - __( '\"%s\"' ), + __( '"%s"' ), searchTerm ), { mark: } @@ -48,8 +48,12 @@ export const LinkControlSearchCreate = ( { ) } onClick={ onClick } > - Create draft - { text } + + Create draft + + + { text } + Date: Wed, 17 Feb 2021 16:48:50 -0500 Subject: [PATCH 25/36] Adjusting the button text for the nav link create button. --- packages/block-library/src/navigation-link/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 1925c3bb3bff4..54ff8a0737cfe 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -487,12 +487,12 @@ export default function NavigationLinkEdit( { if ( type === 'post' ) { /* translators: %s: search term. */ format = __( - 'Create draft post: %s' + '"%s" (page)' ); } else { /* translators: %s: search term. */ format = __( - 'Create draft page: %s' + '"%s" (page)' ); } return createInterpolateElement( From de34fe3aa32a4241f7983a2af60b53a66ee4356f Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 16:49:13 -0500 Subject: [PATCH 26/36] Styling the create button and making sure to use the grid variables where applicable. --- .../src/components/link-control/style.scss | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 2b2c18fa7d3b9..130ed35967eb3 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -28,7 +28,7 @@ border-radius: $radius-block-ui; background: $gray-100; max-width: 50vw; - padding: 6px 42px 6px 12px; + padding: ($grid-unit-15/2) 42px ($grid-unit-15/2) $grid-unit-15; font-size: 13px; line-height: 24px; @@ -53,6 +53,17 @@ } } +// ## Suggestions Label +// When showing suggested results a label is displayed +// details what the suggestions are, like "Recent pages." +.block-editor-link-control__search-results-label { + display: block; + margin: $grid-unit-15 $grid-unit-15 0 $grid-unit-15; + text-transform: uppercase; + font-size: 11px; + color: $gray-700; +} + // ## Search Results .block-editor-link-control__search-results { // When the list of results gets too long @@ -134,10 +145,42 @@ } } +// ## Create New +// Some uses of the link control allow for creating a +// new post or pages directly from the search input. +.block-editor-link-control__search-create { + position: relative; + display: block; + + .block-editor-link-control__search-create-label { + display: block; + font-weight: 600; + font-size: 13px; + } + + .block-editor-link-control__search-create-description { + display: block; + font-size: 12px; + color: $gray-900; + + mark { + font-weight: normal; + } + } + + .block-editor-link-control__search-create-icon { + position: absolute; + top: 12px; + right: 8px; + } +} + // ## Link Settings // Links can be set to open in a new window .block-editor-link-control__settings { - margin: 12px; + padding: $grid-unit-15; + margin: ($grid-unit-15 / 2) (-$grid-unit-15/2) (-$grid-unit-15/2) (-$grid-unit-15/2); + border-top: 1px solid $gray-900; .components-base-control__field { margin: 0; From 98623d571c890a36d4679d1bcbd9e5eb432e89af Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 17:27:40 -0500 Subject: [PATCH 27/36] Making the linter happy. I just do what the computers tell me to do... --- .../block-editor/src/components/link-control/search-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7b210200c69c3..a434412a06f08 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -124,7 +124,7 @@ const LinkControlSearchInput = forwardRef( value={ value } onChange={ onInputChange } placeholder={ - placeholder ?? __( 'Search or type a url...' ) + placeholder ?? __( 'Search or type a url…' ) } __experimentalRenderSuggestions={ showSuggestions ? handleRenderSuggestions : null From b505086aba18ab964df2a668159d3c7179ce7b7e Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 17 Feb 2021 17:27:52 -0500 Subject: [PATCH 28/36] More linting. --- .../block-editor/src/components/link-control/search-input.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 a434412a06f08..b22d444d85eb6 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -123,9 +123,7 @@ const LinkControlSearchInput = forwardRef( className={ className } value={ value } onChange={ onInputChange } - placeholder={ - placeholder ?? __( 'Search or type a url…' ) - } + placeholder={ placeholder ?? __( 'Search or type a url…' ) } __experimentalRenderSuggestions={ showSuggestions ? handleRenderSuggestions : null } From d276ff9a57fa1df879cb20cf665443dc7cf1f3e0 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 18 Feb 2021 15:24:50 -0500 Subject: [PATCH 29/36] Replacing the icon button with a primary text button, and adjusting the hover color. --- .../src/components/link-control/index.js | 9 +++--- .../src/components/link-control/style.scss | 29 +++++++++++-------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index b11b6ac97f4b9..d16bd26d2b600 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -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'; @@ -227,11 +226,13 @@ function LinkControl( { } > diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 130ed35967eb3..42912b95d8292 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -18,8 +18,8 @@ // know something is happening. .components-spinner { position: absolute; - top: 12px; - right: 42px; + top: 9px; + right: 66px; z-index: 1; } } @@ -28,7 +28,7 @@ border-radius: $radius-block-ui; background: $gray-100; max-width: 50vw; - padding: ($grid-unit-15/2) 42px ($grid-unit-15/2) $grid-unit-15; + padding: ($grid-unit-15/2) 60px ($grid-unit-15/2) $grid-unit-15; font-size: 13px; line-height: 24px; @@ -41,15 +41,9 @@ .block-editor-link-control__search-submit { position: absolute; - top: 1px; - right: 1px; - - // I think the submit icon is mis-aligned. - svg { - position: relative; - top: -1px; - right: 4px; - } + top: 3px; + right: 3px; + height: 32px; } } @@ -81,6 +75,7 @@ mark { background: none; font-weight: 600; + color: inherit; } } @@ -100,6 +95,16 @@ &.is-selected { background: $gray-100; } + + &:hover { + .block-editor-link-control__search-item-title { + color: var(--wp-admin-theme-color); + } + + .block-editor-link-control__search-item-info { + color: $gray-900; + } + } } .block-editor-link-control__search-item-header { From 399c8ed6fc3a1c252737ceb79c49c368e486ded1 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 18 Feb 2021 16:28:24 -0500 Subject: [PATCH 30/36] Linking the URL text and removing the explicit Visit button. --- .../components/link-control/link-preview.js | 22 ++++++---------- .../src/components/link-control/style.scss | 25 ++++++++----------- 2 files changed, 18 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index 99681aad93439..b308a75d27918 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -28,9 +28,14 @@ export default function LinkPreview( { value, onEditClick } ) { 'is-current': true, } ) } > - - { displayURL } - + - ); diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 42912b95d8292..ad089c5ceb184 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -194,26 +194,21 @@ // ## Link Preview // When clicking an existing link, the preview popover -// shows the current link with actions to edit and visit. +// shows the current link and a button to edit. .block-editor-link-control__link { display: flex; align-items: center; } .block-editor-link-control__link-current-url { - margin: 0 $grid-unit-20 0 $grid-unit-15; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - max-width: 280px; - cursor: default; -} - -.block-editor-link-control__link-edit { - margin-right: $grid-unit-05; -} + margin-right: $grid-unit-10; -.block-editor-link-control__link-visit.components-button.is-tertiary { - padding: ($grid-unit-15 / 2) $grid-unit-15; + // An extra span is required as buttons normally display + // with inline-flex, but this doesn't support the truncation. + span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 280px; + } } From 45a95cc8b832580dafd6ccdfe1496017b0bedc09 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 22 Feb 2021 12:41:44 -0500 Subject: [PATCH 31/36] Updating the test snapshot. --- .../components/link-control/test/__snapshots__/index.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index dd0bc6f80877c..26ff6d4006ba1 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; From d061bc6289830dacb99ccdae6e0ab181011c89b8 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 22 Feb 2021 16:14:27 -0500 Subject: [PATCH 32/36] I think I fixed all the tests. --- .../src/components/link-control/test/index.js | 142 +++++------------- 1 file changed, 36 insertions(+), 106 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index c4feb75eca8e9..9fd55ec0e2124 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -3,7 +3,7 @@ */ import { render, unmountComponentAtNode } from 'react-dom'; import { act, Simulate } from 'react-dom/test-utils'; -import { queryByText, queryByRole } from '@testing-library/react'; +import { queryByText } from '@testing-library/react'; import { default as lodash, first, last, nth, uniqueId } from 'lodash'; /** * WordPress dependencies @@ -79,7 +79,7 @@ function getSearchResults() { function getCurrentLink() { return container.querySelector( - '.block-editor-link-control__search-item.is-current' + '.block-editor-link-control__link.is-current' ); } @@ -338,8 +338,8 @@ describe( 'Searching for a link', () => { const mockFetchSuggestionsFirstArg = mockFetchSearchSuggestions.mock.calls[ 0 ][ 0 ]; - // Given we're mocking out the results we should always have 4 mark elements. - expect( searchResultTextHighlightElements ).toHaveLength( 4 ); + // Given we're mocking out the results we should always have 3 mark elements. + expect( searchResultTextHighlightElements ).toHaveLength( 3 ); // Make sure there are no `mark` elements which contain anything other // than the trimmed search term (ie: no whitespace). @@ -378,26 +378,9 @@ describe( 'Searching for a link', () => { const searchResultElements = getSearchResults(); - const lastSearchResultItemHTML = last( searchResultElements ) - .innerHTML; - const additionalDefaultFallbackURLSuggestionLength = 1; - // We should see a search result for each of the expect search suggestions - // plus 1 additional one for the fallback URL suggestion expect( searchResultElements ).toHaveLength( - fauxEntitySuggestions.length + - additionalDefaultFallbackURLSuggestionLength - ); - - // The last item should be a URL search suggestion - expect( lastSearchResultItemHTML ).toEqual( - expect.stringContaining( searchTerm ) - ); - expect( lastSearchResultItemHTML ).toEqual( - expect.stringContaining( 'URL' ) - ); - expect( lastSearchResultItemHTML ).toEqual( - expect.stringContaining( 'Press ENTER to add this link' ) + fauxEntitySuggestions.length ); } ); @@ -456,23 +439,7 @@ describe( 'Manual link entry', () => { await eventLoopTick(); const searchResultElements = getSearchResults(); - - const firstSearchResultItemHTML = - searchResultElements[ 0 ].innerHTML; - const expectedResultsLength = 1; - - expect( searchResultElements ).toHaveLength( - expectedResultsLength - ); - expect( firstSearchResultItemHTML ).toEqual( - expect.stringContaining( searchTerm ) - ); - expect( firstSearchResultItemHTML ).toEqual( - expect.stringContaining( 'URL' ) - ); - expect( firstSearchResultItemHTML ).toEqual( - expect.stringContaining( 'Press ENTER to add this link' ) - ); + expect( searchResultElements[ 0 ] ).toBeUndefined(); } ); @@ -483,7 +450,7 @@ describe( 'Manual link entry', () => { [ '#internal-anchor', 'internal' ], ] )( 'should recognise "%s" as a %s link and handle as manual entry by displaying a single suggestion', - async ( searchTerm, searchType ) => { + async ( searchTerm ) => { act( () => { render( , container ); } ); @@ -502,23 +469,7 @@ describe( 'Manual link entry', () => { await eventLoopTick(); const searchResultElements = getSearchResults(); - - const firstSearchResultItemHTML = - searchResultElements[ 0 ].innerHTML; - const expectedResultsLength = 1; - - expect( searchResultElements ).toHaveLength( - expectedResultsLength - ); - expect( firstSearchResultItemHTML ).toEqual( - expect.stringContaining( searchTerm ) - ); - expect( firstSearchResultItemHTML ).toEqual( - expect.stringContaining( searchType ) - ); - expect( firstSearchResultItemHTML ).toEqual( - expect.stringContaining( 'Press ENTER to add this link' ) - ); + expect( searchResultElements[ 0 ] ).toBeUndefined(); } ); } ); @@ -584,7 +535,7 @@ describe( 'Default search suggestions', () => { expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled(); // - // Click the "Edit/Change" button and check initial suggestions are not + // Click the "Edit" button and check initial suggestions are not // shown. // const currentLinkUI = getCurrentLink(); @@ -604,8 +555,8 @@ describe( 'Default search suggestions', () => { // search input is set to the URL value expect( searchInput.value ).toEqual( fauxEntitySuggestions[ 0 ].url ); - // it should match any url that's like ?p= and also include a URL option - expect( searchResultElements ).toHaveLength( 5 ); + // it should match any url that's like ?p= + expect( searchResultElements ).toHaveLength( 4 ); expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' ); @@ -760,7 +711,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { const createButton = first( Array.from( searchResultElements ).filter( ( result ) => - result.innerHTML.includes( 'Create:' ) + result.innerHTML.includes( 'Create draft' ) ) ); @@ -803,9 +754,6 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { const currentLinkHTML = currentLink.innerHTML; - expect( currentLinkHTML ).toEqual( - expect.stringContaining( entityNameText ) - ); expect( currentLinkHTML ).toEqual( expect.stringContaining( '/?p=123' ) ); @@ -857,7 +805,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { const createButton = first( Array.from( searchResultElements ).filter( ( result ) => - result.innerHTML.includes( 'Create:' ) + result.innerHTML.includes( 'Create draft' ) ) ); @@ -873,9 +821,6 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { const currentLinkHTML = currentLink.innerHTML; - expect( currentLinkHTML ).toEqual( - expect.stringContaining( 'Some new page to create' ) - ); expect( currentLinkHTML ).toEqual( expect.stringContaining( '/?p=123' ) ); @@ -930,7 +875,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { const form = container.querySelector( 'form' ); const createButton = first( Array.from( searchResultElements ).filter( ( result ) => - result.innerHTML.includes( 'Create:' ) + result.innerHTML.includes( 'Create draft' ) ) ); @@ -1028,7 +973,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { ); const createButton = first( Array.from( searchResultElements ).filter( ( result ) => - result.innerHTML.includes( 'Create:' ) + result.innerHTML.includes( 'Create draft' ) ) ); @@ -1153,7 +1098,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { ); let createButton = first( Array.from( searchResultElements ).filter( ( result ) => - result.innerHTML.includes( 'Create:' ) + result.innerHTML.includes( 'Create draft' ) ) ); @@ -1217,17 +1162,10 @@ describe( 'Selecting links', () => { // TODO: select by aria role or visible text const currentLink = getCurrentLink(); - const currentLinkHTML = currentLink.innerHTML; const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` ); - expect( currentLinkHTML ).toEqual( - expect.stringContaining( selectedLink.title ) - ); - expect( - queryByRole( currentLink, 'button', { name: 'Edit' } ) - ).toBeTruthy(); expect( currentLinkAnchor ).not.toBeNull(); } ); @@ -1270,16 +1208,6 @@ describe( 'Selecting links', () => { describe( 'Selection using mouse click', () => { it.each( [ [ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // entity search - [ - 'url', - 'https://www.wordpress.org', - { - id: '1', - title: 'https://www.wordpress.org', - url: 'https://www.wordpress.org', - type: 'URL', - }, - ], // url ] )( 'should display a current selected link UI when a %s suggestion for the search "%s" is clicked', async ( type, searchTerm, selectedLink ) => { @@ -1321,7 +1249,7 @@ describe( 'Selecting links', () => { } ); const currentLink = container.querySelector( - '.block-editor-link-control__search-item.is-current' + '.block-editor-link-control__link.is-current' ); const currentLinkHTML = currentLink.innerHTML; const currentLinkAnchor = currentLink.querySelector( @@ -1329,9 +1257,6 @@ describe( 'Selecting links', () => { ); // Check that this suggestion is now shown as selected - expect( currentLinkHTML ).toEqual( - expect.stringContaining( selectedLink.title ) - ); expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Edit' ) ); @@ -1343,16 +1268,6 @@ describe( 'Selecting links', () => { describe( 'Selection using keyboard', () => { it.each( [ [ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // entity search - [ - 'url', - 'https://www.wordpress.org', - { - id: '1', - title: 'https://www.wordpress.org', - url: 'https://www.wordpress.org', - type: 'URL', - }, - ], // url ] )( 'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard', async ( type, searchTerm, selectedLink ) => { @@ -1446,7 +1361,7 @@ describe( 'Selecting links', () => { // Check that the suggestion selected via is now shown as selected const currentLink = container.querySelector( - '.block-editor-link-control__search-item.is-current' + '.block-editor-link-control__link.is-current' ); const currentLinkHTML = currentLink.innerHTML; const currentLinkAnchor = currentLink.querySelector( @@ -1458,9 +1373,6 @@ describe( 'Selecting links', () => { true ); - expect( currentLinkHTML ).toEqual( - expect.stringContaining( selectedLink.title ) - ); expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Edit' ) ); @@ -1559,6 +1471,15 @@ describe( 'Addition Settings UI', () => { render( , container ); } ); + // Click the "Edit" button to trigger into the editing mode. + const editButton = Array.from( + container.querySelectorAll( 'button' ) + ).find( ( button ) => button.innerHTML.includes( 'Edit' ) ); + + act( () => { + Simulate.click( editButton ); + } ); + const newTabSettingLabel = Array.from( container.querySelectorAll( 'label' ) ).find( @@ -1611,6 +1532,15 @@ describe( 'Addition Settings UI', () => { render( , container ); } ); + // Click the "Edit" button to trigger into the editing mode. + const editButton = Array.from( + container.querySelectorAll( 'button' ) + ).find( ( button ) => button.innerHTML.includes( 'Edit' ) ); + + act( () => { + Simulate.click( editButton ); + } ); + // Grab the elements using user perceivable DOM queries const settingsLegend = Array.from( container.querySelectorAll( 'legend' ) From a1ab7f1dcd69581b63a3fc95239a1a3157efbbae Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 22 Feb 2021 17:01:00 -0500 Subject: [PATCH 33/36] Maybe fixing another test. I don't know anymore. --- packages/e2e-tests/specs/editor/blocks/buttons.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js index 9253d29b1cbd4..ba9355bf57a24 100644 --- a/packages/e2e-tests/specs/editor/blocks/buttons.test.js +++ b/packages/e2e-tests/specs/editor/blocks/buttons.test.js @@ -47,7 +47,7 @@ describe( 'Buttons', () => { // Make sure that the dialog is still opened, and that focus is retained // within (focusing on the link preview). await page.waitForSelector( - ':focus.block-editor-link-control__search-item-title' + ':focus.block-editor-link-control__link' ); expect( await getEditedPostContent() ).toMatchSnapshot(); From 6395bce8017c9f5b77fb3a4ea78b049982a815c7 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 22 Feb 2021 17:01:17 -0500 Subject: [PATCH 34/36] Linting, of course. --- packages/e2e-tests/specs/editor/blocks/buttons.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js index ba9355bf57a24..eb302a3aa128f 100644 --- a/packages/e2e-tests/specs/editor/blocks/buttons.test.js +++ b/packages/e2e-tests/specs/editor/blocks/buttons.test.js @@ -46,9 +46,7 @@ describe( 'Buttons', () => { await page.keyboard.press( 'Enter' ); // Make sure that the dialog is still opened, and that focus is retained // within (focusing on the link preview). - await page.waitForSelector( - ':focus.block-editor-link-control__link' - ); + await page.waitForSelector( ':focus.block-editor-link-control__link' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); From fb8708b9c629f2e6947468218e8cce49749063f7 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Tue, 23 Feb 2021 15:56:28 -0500 Subject: [PATCH 35/36] Update the Button block to use the G2-style dark borders for it's Link UI. --- packages/block-library/src/button/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index fe32f2ab5d837..718f7df49e814 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -129,6 +129,7 @@ function URLPicker( { position="bottom center" onClose={ () => setIsURLPickerOpen( false ) } anchorRef={ anchorRef?.current } + isAlternate={ true } > Date: Tue, 23 Feb 2021 15:57:20 -0500 Subject: [PATCH 36/36] Reversing the order of the visit and edit buttons so the edit button gets focus first. --- .../components/link-control/link-preview.js | 18 +++++++++--------- .../src/components/link-control/style.scss | 1 + 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index b308a75d27918..4cf7622821919 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -28,15 +28,6 @@ export default function LinkPreview( { value, onEditClick } ) { 'is-current': true, } ) } > - - + ); diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index ad089c5ceb184..7176b19fb616b 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -198,6 +198,7 @@ .block-editor-link-control__link { display: flex; align-items: center; + flex-direction: row-reverse; } .block-editor-link-control__link-current-url {