Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

link-control: implement onEdit mode #18225

Merged
merged 6 commits into from
Nov 5, 2019
Merged

Conversation

retrofox
Copy link
Contributor

@retrofox retrofox commented Oct 31, 2019

Description

It adds the idea of edit mode explicitly for the <LinkControl /> component.

Currently, this component changes its edit mode looking at the changes of currentLink property. This approach is used when it selects a new link from the link suggestions, and also when it clicks in the Change button.

The tricky part comes when:

  1. want to switch to edit mode
  2. populate the searcher input with the currentLink.title value

We need to change the currentLink to trigger the edit mode, but at the same time, we want to keep the currentLink value in order to populate the searcher input with its title.

This PR set the edit mode explicitly and internally, populating the title if it's defined.

How has this been tested?

It has been tested in this PR: #18062.

  1. Edit a Menu Item
  2. Start to edit the link
  3. Click on the Change button

The searcher input should be populated with the current link title.

Screenshots

link-control-02

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.

@retrofox retrofox added [Type] Enhancement A suggestion for improvement. [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Block] Navigation Affects the Navigation Block labels Oct 31, 2019
@retrofox retrofox requested a review from getdave October 31, 2019 19:37
@retrofox
Copy link
Contributor Author

Related comment #18062 (comment)

@retrofox
Copy link
Contributor Author

retrofox commented Nov 1, 2019

Adding another issue reference #18135

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Looks good but we're missing tests for this feature.

I'll write one. ✅ I've added one.

packages/block-editor/src/components/link-control/index.js Outdated Show resolved Hide resolved
@getdave
Copy link
Contributor

getdave commented Nov 5, 2019

@retrofox Actually just realised you need to update the README here.

@retrofox retrofox merged commit bb0529f into master Nov 5, 2019
@retrofox retrofox deleted the update/link-control-on-edit-mode branch November 5, 2019 17:49
@youknowriad youknowriad added this to the Gutenberg 6.9 milestone Nov 11, 2019
Comment on lines +95 to +99
// Populate input searcher whether
// the current link has a title.
if ( currentLink && currentLink.title ) {
setInputValue( currentLink.title );
}
Copy link
Member

Choose a reason for hiding this comment

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

If we need this to be an "initializer" for the input value, couldn't we instead provide this as the initial value for the input state?

In other words, instead of:

const [ inputValue, setInputValue ] = useState( '' );

Do:

const [ inputValue, setInputValue ] = useState( value.title );

Copy link
Member

Choose a reason for hiding this comment

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

See: #19737

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It makes totally sense to me, Andrew. I don't exactly the reason why we added this initializer, especially because this component has been significantly refactored lately.
Going to help to review at your PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants