Skip to content

Commit

Permalink
Prototyping a new Link Nav Block Interaction
Browse files Browse the repository at this point in the history
Working on #28440

Co-authored-by: Kerry Liu <[email protected]>
  • Loading branch information
George Hotelling and Kerry Liu committed Feb 24, 2021
1 parent c19bd61 commit bfb6f10
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 19 deletions.
56 changes: 37 additions & 19 deletions packages/block-library/src/navigation-link/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { escape } from 'lodash';
import { createBlock } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import {
__experimentalInputControl as InputControl,
KeyboardShortcuts,
PanelBody,
Popover,
Expand Down Expand Up @@ -232,21 +233,21 @@ export default function NavigationLinkEdit( {
}, [ isSelected ] );

// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
useEffect( () => {
if ( isLinkOpen && url ) {
// Does this look like a URL and have something TLD-ish?
if (
isURL( prependHTTP( label ) ) &&
/^.+\.[a-z]+/.test( label )
) {
// Focus and select the label text.
selectLabelText();
} else {
// Focus it (but do not select).
placeCaretAtHorizontalEdge( ref.current, true );
}
}
}, [ url ] );
// useEffect( () => {
// if ( isLinkOpen && url ) {
// // Does this look like a URL and have something TLD-ish?
// if (
// isURL( prependHTTP( label ) ) &&
// /^.+\.[a-z]+/.test( label )
// ) {
// // Focus and select the label text.
// selectLabelText();
// } else {
// // Focus it (but do not select).
// placeCaretAtHorizontalEdge( ref.current, true );
// }
// }
// }, [ url ] );

/**
* Focus the Link label text and select it.
Expand Down Expand Up @@ -302,6 +303,7 @@ export default function NavigationLinkEdit( {
[ `has-${ textColor }-color` ]: !! textColor,
'has-background': !! backgroundColor || !! style?.color?.background,
[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
'is-missing-link': ! url,
} ),
style: {
color: style?.color?.text,
Expand Down Expand Up @@ -415,13 +417,31 @@ export default function NavigationLinkEdit( {
'core/image',
'core/strikethrough',
] }
onClick={ () => {
if ( ! url ) {
setIsLinkOpen( true );
}
} }
/>
{ isLinkOpen && (
<Popover
position="bottom center"
onClose={ () => setIsLinkOpen( false ) }
className="wp-block-navigation-link__popover-link-input"
>
<LinkControl
<InputControl
label={ __( 'Text' ) }
onChange={ ( label ) =>
setAttributes( { label } )
}
/>
<InputControl
label={ __( 'URL' ) }
onChange={ ( url ) =>
setAttributes( { url: encodeURI( url ) } )
}
/>
{ /* <LinkControl
className="wp-block-navigation-link__inline-link-input"
value={ link }
showInitialSuggestions={ true }
Expand All @@ -430,12 +450,10 @@ export default function NavigationLinkEdit( {
createSuggestionButtonText={ ( searchTerm ) => {
let format;
if ( type === 'post' ) {
/* translators: %s: search term. */
format = __(
'Create draft post: <mark>%s</mark>'
);
} else {
/* translators: %s: search term. */
format = __(
'Create draft page: <mark>%s</mark>'
);
Expand Down Expand Up @@ -482,7 +500,7 @@ export default function NavigationLinkEdit( {
id,
} )
}
/>
/> */ }
</Popover>
) }
</div>
Expand Down
11 changes: 11 additions & 0 deletions packages/block-library/src/navigation-link/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
}
}

// foo
.is-missing-link {
border: solid 1px red;
}

// Styles for submenu flyout
.has-child {
> .wp-block-navigation-link__content {
Expand Down Expand Up @@ -160,3 +165,9 @@
}
}
}

.wp-block-navigation-link__popover-link-input {
max-width: 360px;
min-width: auto;
width: 90vw;
}

0 comments on commit bfb6f10

Please sign in to comment.