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

URL Input: Use Popover instead of custom positionning and custom modals #6911

Merged
merged 5 commits into from May 24, 2018

Conversation

Projects
None yet
5 participants
@youknowriad
Contributor

youknowriad commented May 23, 2018

This PR updates the URL Input and the format toolbar to use the Popover component to display the link modal. The Popover contain behavior to adapt the width and the position to the available space which will fix a lot of issues we have with link modals on mobile.

Testing instructions

  • Test the link inputs in the several places we use them (format toolbar, inline format toolbar, image block toolbar, button block...)

closes #3941 #4447 #6183 #6393 #6810

@youknowriad youknowriad self-assigned this May 23, 2018

@youknowriad youknowriad requested review from noisysocks, jasmussen and iseulde May 23, 2018

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented May 23, 2018

closes #3941 #4447 #6183 #6393 #6810

🤘

This is a big improvement.

I wish we could, like TinyMCE does, show a little shadow of what's selected in the text, even if your text focus is elsewhere. But that's for separate polish.

One thing: this doesn't seem to work when the toolbar is fixed to the top.

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented May 23, 2018

One thing: this doesn't seem to work when the toolbar is fixed to the top.

Good catch, I'll take a look

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented May 23, 2018

One thing: this doesn't seem to work when the toolbar is fixed to the top.

Actually, scratch that. I don't know what it was that I was seeing, but a hard reload made this work. Stellar work!

Can you move the popover upwards about 10px? that would make it feel more connected with the link.

@jasmussen

After the latest fix, this is cool from a design perspective.

return {
top: position.top - containerPosition.top + ( position.height ) + toolbarOffset.top,
left: position.left - containerPosition.left + ( position.width / 2 ) + toolbarOffset.left,
top: position.top - containerPosition.top + ( position.height ),

This comment has been minimized.

@iseulde

iseulde May 23, 2018

Member

Tiny thing: unsure why there are brackets here, but they were here before.

@iseulde

This comment has been minimized.

Member

iseulde commented May 23, 2018

Seeing the following error when adding the target attribute, and I don't see this error in master?

index.js:292 Uncaught Error: Invalid assumption: expected selection to be within the autocomplete container
    at Autocomplete.getCursor (index.js:292)
    at Autocomplete.search (index.js:443)
    at HTMLUnknownElement.callCallback (react-dom.cca5b42c.js:140)
    at Object.invokeGuardedCallbackDev (react-dom.cca5b42c.js:178)
    at Object.invokeGuardedCallback (react-dom.cca5b42c.js:227)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.cca5b42c.js:241)
    at executeDispatch (react-dom.cca5b42c.js:604)
    at executeDispatchesInOrder (react-dom.cca5b42c.js:626)
    at executeDispatchesAndRelease (react-dom.cca5b42c.js:724)
    at executeDispatchesAndReleaseTopLevel (react-dom.cca5b42c.js:735)
@youknowriad

This comment has been minimized.

Contributor

youknowriad commented May 23, 2018

@iseulde I'm seeing the same issue on master

@noisysocks

This comment has been minimized.

Member

noisysocks commented May 24, 2018

I wish we could, like TinyMCE does, show a little shadow of what's selected in the text, even if your text focus is elsewhere. But that's for separate polish.

There's an issue for that: #6156

@noisysocks

I love this ❤️

I see just one visual regression. Before there was a nice focus outline on the inline link input:

screen shot 2018-05-24 at 09 59 22

But now that's gone:

screen shot 2018-05-24 at 10 01 23

@@ -98,6 +100,7 @@ class FormatToolbar extends Component {
settingsVisible: false,
opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target,
linkValue: '',
popoverId: this.state.popoverId + 1,

This comment has been minimized.

@noisysocks

noisysocks May 24, 2018

Member

Could we re-use this.props.selectedNodeId instead of introducing more state? Note that RichText increments this in much the same way.

https://github.com/WordPress/gutenberg/blob/master/editor/components/rich-text/index.js#L708

Thanks for the review, I didn't notice the selectedNodeId. Good advice 👍👍

@youknowriad youknowriad merged commit 5ebefc3 into master May 24, 2018

2 checks passed

codecov/project 46.14% (+<.01%) compared to 7ad3fa4
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the update/link-modal branch May 24, 2018

@youknowriad youknowriad added this to the 3.0 milestone May 30, 2018

@@ -219,6 +220,7 @@ class Popover extends Component {
'is-' + xAxis,
{
'is-mobile': isMobile,
'no-arrow': noArrow,

This comment has been minimized.

@aduth

aduth Jul 30, 2018

Member

This is not very consistent with modifier class naming which are otherwise boolean-ish. I might have preferred something like has-no-arrow or is-without-arrow or is-no-arrow.

This comment has been minimized.

@youknowriad

youknowriad Jul 30, 2018

Contributor

I like how you see a comment from Andrew from time to time on old PRs :P

Anyway, I just pushed a fix to master (accidentally, I thought I was on a branch 😬 )

This comment has been minimized.

@youknowriad

This comment has been minimized.

@aduth

aduth Jul 30, 2018

Member

I enjoy to surf the git blame 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment