Skip to content

Improve LinkControl Edit UI #51712

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

Merged
priethor merged 33 commits into from
Jun 26, 2023
Merged

Improve LinkControl Edit UI #51712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
bd8b3fc
Move text above link
richtabor Jun 20, 2023
e79a678
Change "URL" label to "Link"
richtabor Jun 20, 2023
f76f8a9
Style tweaks
richtabor Jun 20, 2023
c0552f5
Add chevron based advanced settings button
richtabor Jun 20, 2023
87b47c5
Adapt logic for rendering actions and settings
richtabor Jun 20, 2023
671914b
Tweaks
richtabor Jun 20, 2023
11c0998
Add proper i18n
richtabor Jun 21, 2023
ada13cb
Remove commented out style
richtabor Jun 21, 2023
37dee3e
Use $button-size-next-default-40px
richtabor Jun 21, 2023
6c550c4
Add showSettings, combine with new logic
richtabor Jun 21, 2023
b277518
Add additional translation context to advanced
richtabor Jun 21, 2023
eec4bef
Update toggle drawer name in tests
getdave Jun 22, 2023
62ef07b
Standardise query for settings toggle
getdave Jun 22, 2023
5ab42eb
Update test to check for absence of cancel button during link creation
getdave Jun 22, 2023
8c03ac1
Fix cancellation tests
getdave Jun 22, 2023
1ebaba2
Ensure label is always “Link” but remains hidden when it’s the only v…
getdave Jun 22, 2023
f6619c3
Update tests to look for “Link” instead of “URL” name for input
getdave Jun 22, 2023
c12e3ce
Update empty value UI tests to only run for editing as opposed to cre…
getdave Jun 22, 2023
3cf9343
Fix e2e test tabbing order
getdave Jun 22, 2023
f6a7c1e
Use updated terms
getdave Jun 22, 2023
e1d1305
Select settings toggle by text not aria label
getdave Jun 22, 2023
fac61cc
Fix another tabbing order bug
getdave Jun 22, 2023
c1297e3
Fix one more tabbing issue in e2e tests
getdave Jun 22, 2023
8c9f1a8
Fix final tab ordering e2e test
getdave Jun 22, 2023
1bc002e
Decouple conditions for showing action buttons from settings
getdave Jun 23, 2023
a25340b
Tweak styling to account for action buttons when there are no setting…
getdave Jun 23, 2023
531ad75
Fix test
getdave Jun 23, 2023
b3cb16f
Fix e2e test
scruffian Jun 23, 2023
86898b2
Update name of the combobox
scruffian Jun 23, 2023
e1d499b
Fix test expecting Submit button on creation
getdave Jun 23, 2023
ffb0435
Fix test by testing under edit rather than creation conditions
getdave Jun 23, 2023
a78ba7e
Rename URL to Link and avoid triggering command centre
getdave Jun 26, 2023
389cb5a
move test earlier
scruffian Jun 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 32 additions & 28 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 @@ -292,7 +292,8 @@ function LinkControl( {
const shownUnlinkControl =
onRemove && value && ! isEditingLink && ! isCreatingPage;

const showSettings = !! settings?.length;
const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
const showActions = isEditingLink && hasLinkValue;

// Only show text control once a URL value has been committed
// and it isn't just empty whitespace.
Expand Down Expand Up @@ -322,6 +323,18 @@ function LinkControl( {
'has-text-control': showTextControl,
} ) }
>
{ showTextControl && (
<TextControl
__nextHasNoMarginBottom
ref={ textInputRef }
className="block-editor-link-control__field block-editor-link-control__text-content"
label={ __( 'Text' ) }
value={ internalControlValue?.title }
onChange={ setInternalTextInputValue }
onKeyDown={ handleSubmitWithEnter }
size="__unstable-large"
/>
) }
<LinkControlSearchInput
currentLink={ value }
className="block-editor-link-control__field block-editor-link-control__search-input"
Expand All @@ -339,19 +352,8 @@ function LinkControl( {
createSuggestionButtonText={
createSuggestionButtonText
}
useLabel={ showTextControl }
hideLabelFromVision={ ! showTextControl }
/>
{ showTextControl && (
<TextControl
__nextHasNoMarginBottom
ref={ textInputRef }
className="block-editor-link-control__field block-editor-link-control__text-content"
label={ __( 'Text' ) }
value={ internalControlValue?.title }
onChange={ setInternalTextInputValue }
onKeyDown={ handleSubmitWithEnter }
/>
) }
</div>
{ errorMessage && (
<Notice
Expand All @@ -376,9 +378,9 @@ function LinkControl( {
/>
) }

{ isEditing && (
{ showSettings && (
<div className="block-editor-link-control__tools">
{ showSettings && (
{ ! currentInputIsEmpty && (
<LinkControlSettingsDrawer
settingsOpen={ settingsOpen }
setSettingsOpen={ setSettingsOpen }
Expand All @@ -392,20 +394,22 @@ function LinkControl( {
/>
</LinkControlSettingsDrawer>
) }
</div>
) }

<div className="block-editor-link-control__search-actions">
<Button
variant="primary"
onClick={ isDisabled ? noop : handleSubmit }
className="block-editor-link-control__search-submit"
aria-disabled={ isDisabled }
>
{ __( 'Save' ) }
</Button>
<Button variant="tertiary" onClick={ handleCancel }>
{ __( 'Cancel' ) }
</Button>
</div>
{ showActions && (
<div className="block-editor-link-control__search-actions">
<Button
variant="primary"
onClick={ isDisabled ? noop : handleSubmit }
className="block-editor-link-control__search-submit"
aria-disabled={ isDisabled }
>
{ __( 'Save' ) }
</Button>
<Button variant="tertiary" onClick={ handleCancel }>
{ __( 'Cancel' ) }
</Button>
</div>
) }

Expand Down
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/link-control/search-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
suggestionsQuery = {},
withURLSuggestion = true,
createSuggestionButtonText,
useLabel = false,
hideLabelFromVision = false,
},
ref
) => {
Expand Down Expand Up @@ -120,15 +120,16 @@ const LinkControlSearchInput = forwardRef(
};

const inputClasses = classnames( className, {
'has-no-label': ! useLabel,
// 'has-no-label': ! hideLabelFromVision,
} );

return (
<div className="block-editor-link-control__search-input-container">
<URLInput
disableSuggestions={ currentLink?.url === value }
__nextHasNoMarginBottom
label={ useLabel ? 'URL' : undefined }
label={ __( 'Link' ) }
hideLabelFromVision={ hideLabelFromVision }
className={ inputClasses }
value={ value }
onChange={ onInputChange }
Expand Down
11 changes: 6 additions & 5 deletions packages/block-editor/src/components/link-control/settings-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import {
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
} from '@wordpress/components';
import { settings as settingsIcon } from '@wordpress/icons';
import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
import { useReducedMotion, useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { _x, isRTL } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';

function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
Expand All @@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
className="block-editor-link-control__drawer-toggle"
aria-expanded={ settingsOpen }
onClick={ () => setSettingsOpen( ! settingsOpen ) }
icon={ settingsIcon }
label={ __( 'Link Settings' ) }
icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
aria-controls={ settingsDrawerId }
/>
>
{ _x( 'Advanced', 'Additional link settings' ) }
</Button>
<MaybeAnimatePresence>
{ settingsOpen && (
<MaybeMotionDiv
Expand Down
115 changes: 60 additions & 55 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
Expand Up @@ -60,30 +60,18 @@ $preview-image-height: 140px;
.block-editor-link-control__field {
margin: $grid-unit-20; // allow margin collapse for vertical spacing.

// Element wrapping the label and input.
> .components-base-control__field {
display: flex;
align-items: center;
}

.components-base-control__label {
margin-right: $grid-unit-20;
margin-bottom: 0;
min-width: 29px; // align with search results.
}

input[type="text"],
// Specificity overide of URLInput defaults.
&.block-editor-url-input input[type="text"].block-editor-url-input__input {
@include input-control;
width: calc(100% - #{$grid-unit-20 * 2});
display: block;
padding: $grid-unit-10 $grid-unit-20;
margin: 0;
position: relative;
border: 1px solid $gray-600;
height: 40px;
border-radius: $radius-block-ui;
height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
margin: 0;
padding: $grid-unit-10 $grid-unit-20;
position: relative;
width: 100%;
}
}

Expand All @@ -96,9 +84,37 @@ $preview-image-height: 140px;
flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
justify-content: flex-start;
gap: $grid-unit-10;
padding: $grid-unit-10;
order: 20;
}

.block-editor-link-control__search-results-wrapper {
position: relative;

&::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 * 0.5;
top: 0;
bottom: auto;
}

&::after {
height: $grid-unit-20;
bottom: 0;
top: auto;
}
}

.block-editor-link-control__search-results {
margin-top: -$grid-unit-20;
padding: $grid-unit-10;
Expand Down Expand Up @@ -363,54 +379,18 @@ $preview-image-height: 140px;
display: flex; // allow for ordering.
flex-direction: column;
flex-basis: 100%; // occupy full width.
margin-top: $grid-unit-20;
padding-top: $grid-unit-20;
position: relative;

&::after {
content: "";
display: block;
height: 1px;
background-color: $gray-300;
position: absolute;
left: -$grid-unit-20;
right: -$grid-unit-20;
top: 0;
}
}

.block-editor-link-control__tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: $grid-unit-20;

// To hide the horizontal scrollbar on toggle.
// Margin and padding are needed to prevent cutoff of the toggle button focus outline.
// See: https://github.com/WordPress/gutenberg/pull/47986
margin-top: calc(var(--wp-admin-border-width-focus) * -1);
padding-top: var(--wp-admin-border-width-focus);
overflow: hidden;
}

.block-editor-link-control__unlink {
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;
}

.block-editor-link-control__settings {
flex: 1;
margin: 0;

.is-alternate & {
border-top: $border-width solid $gray-900;
}
}

.block-editor-link-control__setting {
margin-bottom: $grid-unit-20;
flex: 1;
padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;

// Cancel left margin inherited from WP Admin Forms CSS.
input {
Expand All @@ -422,6 +402,31 @@ $preview-image-height: 140px;
}
}

.block-editor-link-control__tools {
padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10;
margin-top: #{$grid-unit-20 * -1};

.components-button.block-editor-link-control__drawer-toggle {
padding-left: 0;
gap: 0;

// Point downwards when open (same as list view expander)
&[aria-expanded="true"] svg {
visibility: visible;
transition: transform 0.1s ease;
transform: rotate(90deg);
@include reduce-motion("transition");
}
// Point rightwards when closed (same as list view expander)
&[aria-expanded="false"] svg {
visibility: visible;
transform: rotate(0deg);
transition: transform 0.1s ease;
@include reduce-motion("transition");
}
}
}

.block-editor-link-control .block-editor-link-control__search-input .components-spinner {
display: block;

Expand Down
Loading