Adds always on display of media URL #19504

draganescu · 2020-01-08T10:20:50Z

Description

Implementation of one of the variants in #18992 about always showing the URL of the current media in the media replace control.

How has this been tested?

Tested locally.

Screenshots

Types of changes

Updated MediaReplaceFlow and LinkViewer.
This should eventually use the new LinkControl instead.

cc: @shaunandrews

packages/block-editor/src/components/media-replace-flow/index.js

shaunandrews · 2020-01-13T17:35:06Z

I like it. Two suggestions:

Use a button with a label (instead of a mysterious icon) for the edit action. This matches up with the Link UI, and is also more obvious and clear to users.
Just general cleanup around the layout/display for editing the image URL. Here's a mockup of what I would expect it to look like:

ItsJonQ · 2020-01-29T20:44:03Z

@draganescu Hai there! Thank you for working on this fix 🙌

I'm seeing some wonky UI from this PR. Just wanted to follow up to see if we were able to apply the changes suggested by @shaunandrews

I also noticed that the input looks invisible when it is no longer focused 😱

Thanks again!

draganescu · 2020-02-04T13:34:14Z

hi @ItsJonQ and thanks for testing!

Indeed, the URLInput component is raising some issues when used in this context. However now that the recent PRs that decoupled LinkControl from Popover are merged I will try to use that here in place of URLInput

draganescu · 2020-02-04T15:28:30Z

This now works as expected but I am not happy with the implementation, as it still uses the old LinkViewer and LinkEditor components directly instead of the new LinkControl. However, because of how this is intended to work LinkControl is not ready yet because:

it does not have a second "Apply" state
cannot be closed

cc @aduth @shaunandrews

aduth · 2020-02-04T15:49:09Z

Hi @draganescu , I'm not sure I follow what you mean by the specific requirements you list. What is the second "Apply" state, and how would a LinkControl be closed? Is this referring to the ability to have some option to "Cancel" out of the editing input and return to the preview state?

draganescu · 2020-02-04T15:56:28Z

Yes @aduth , I should have explained better. But briefly, if you look at the GIF up in the description of this PR, the interaction is in two steps:

you see the link
you edit the link

And this is very similar to how the LinkControl currently works, but except that in step 2, in this case we'd need to "Apply" the link edit and get back to step 1. Currently LinkControl doesn't allow that because it assumes you always want that suggestion drawer, so the input to edit a link does not have a button to "Apply" the edit.

Second, if I want to quit editig and get back to viewing the link, LinkControl does not allow this as it assumes that "quit" means unmounting it (via ESC or focusing somewhere else). In this context, we want the menu to remain open and the LinkControl to return to the view state.

getdave · 2020-02-05T14:24:55Z

Currently LinkControl doesn't allow that because it assumes you always want that suggestion drawer, so the input to edit a link does not have a button to "Apply" the edit.

I think we should add an explicit "Submit" (aka "Apply") UI. We could make this optional. It would sit next to the "Reset" button.

Second, if I want to quit editig and get back to viewing the link, LinkControl does not allow this as it assumes that "quit" means unmounting it (via ESC or focusing somewhere else). In this context, we want the menu to remain open and the LinkControl to return to the view state.

In this scenario you have (for example) clicked "Edit" but then decided you want to go back and not edit? But you can't do that. Would the Apply button solve this issue?

I think both the above are solvable but should be in a separate PR.

aduth · 2020-02-05T14:29:45Z

@draganescu Thanks for clarifying. These are things I'm very interested in as well.

And this is very similar to how the LinkControl currently works, but except that in step 2, in this case we'd need to "Apply" the link edit and get back to step 1. Currently LinkControl doesn't allow that because it assumes you always want that suggestion drawer, so the input to edit a link does not have a button to "Apply" the edit.

If I understand this correctly: The applied editing does exist as handled as a form submission, but there's nothing in the UI to indicate this (or to click on for submitting). It relies on the Enter key press to submit/apply.

If my interpretation is correct, I think this can serve as a testament that #19971 would be a good revision to pursue to improve this clarity.

Second, if I want to quit editig and get back to viewing the link, LinkControl does not allow this as it assumes that "quit" means unmounting it (via ESC or focusing somewhere else). In this context, we want the menu to remain open and the LinkControl to return to the view state.

There was some similar challenges for implementing this in the paragraph (#19462 (comment)). You might be interested in the discussion in #20007.

It might be tricky for your specific use-case. My first thought was that "Escape" could toggle the internal state of <LinkControl /> to "cancel" the edit, like one of the options you mention. However, I think it's also important that "Escape" would also close the currently visible popover. I'm not sure how best to deal with a scenario where both: (a) we have an editable state to cancel, and (b) that editable state is within a popover.

Using focus as a basis for the editing state might work, but it needs to account for the additional action buttons shown alongside the input (currently "Reset", maybe in the future "Submit" and/or "Advanced Settings").

There could also be an explicit Cancel button in here as well. The problems here are that: (a) the space is limited (related) and (b) the goals of #20007 might be such that we don't want the preview state to be reachable at least in the context of paragraph link editing workflows.

aduth · 2020-02-05T14:41:57Z

Thinking more about Cancel:

Is it even necessary? If you're not going to submit your changes, then there's not a practical difference between "cancel" vs. simply leaving the input in its editable state, unless the Preview included some critical information.
- To clarify, I don't feel strongly about this point, it's more a thought experiment.
Canceling edit in response to blur of the input and its controls could be a reasonable way to approach this, at least as a compromise to support a use-case like the one needed here.

shaunandrews

Had some visual tweaks for the CSS to help line up elements, along with cleaning up margins and paddings. Here's how it looks with the suggested updates:

packages/block-editor/src/components/media-replace-flow/style.scss

draganescu · 2020-02-06T17:12:13Z

Hi @shaunandrews I've added all your suggestions and it looks pretty neat. Let me know of any other tweaks :)

aduth · 2020-02-10T19:53:42Z

Per previous comments about LinkControl applicability here, not that as of #20052, at least one of the issues you mentioned should now be resolved (a "Submit" button is always shown in the editing state).

shaunandrews · 2020-02-10T20:46:55Z

Pushed a quick change to add some more spacing around the Media Library and Upload buttons. Here's how it looks:

🚢

draganescu · 2020-02-12T08:41:54Z

This is looking good now, but it does not use LinkControl, which is what I am working on :)

draganescu · 2020-02-13T17:22:02Z

@getdave @aduth I have implemented this UI using the LinkViewer but I had to add some changes to the component to work as needed in this situation. Therefore:

I added a showSuggestions prop to turn off suggestions showing (as in the case of media links we don't have media suggestions)
I disabled jsx-a11y/no-noninteractive-element-interactions for the form in the SearchInput component b/c I couldn't stop the key presses from propagating otherwise

Do you think these are good modifications? Is the LinkControl the correct control as this is not really a link? Should I go back to using LinkViewer and LinkEditor?

packages/block-editor/src/components/link-control/search-input.js

draganescu · 2020-02-20T14:42:12Z

@Soean could you re-review and see if everything works as expected? :D Thank you 💯

Soean · 2020-02-21T04:34:52Z

@draganescu
If I use a different language with a longer button text like "Bearbeiten" in (Deutsch / German), the button is not visible on mobile.

English

Deutsch / German

getdave

Nice work on updating this to use LinkControl. It's great that we're stress testing this component. I hope it wasn't too painful!?

I noticed a few things that caught my eye. Let me know if anything doesn't make sense.

packages/block-editor/src/components/link-control/index.js

getdave · 2020-02-24T13:11:08Z

packages/block-editor/src/components/link-control/search-input.js

+			onKeyPress={ ( event ) => {
+				const { keycode } = event;
+				if ( keycode === ENTER ) {
+					selectSuggestionOrCurrentInputValue();


This caught my eye. I'm sure this code got removed in earlier PRs on LinkControl. Does the action not get handled by the onSubmit handler?

If not then we could consider adding a comment here to indicate why we're having to double up here as it wasn't immediately apparent to me.

There is this comment in the URLInput component which made this neccessary:

// If the suggestions are not shown or loading, we shouldn't handle the arrow keys // We shouldn't preventDefault to allow block arrow keys navigation

As in this context we explicitly disable suggestions then we need to also handle stopping key propagation to observe typing. Otherwise The pop up closes.

Would you think there is a better way around this?

I would have to also take care of the Escape button as now tests are failing b/c the link editor is not being dismissed on ESC anymore :( ugh.

packages/block-editor/src/components/media-replace-flow/index.js

packages/block-editor/src/components/link-control/index.js

packages/block-editor/src/components/link-control/search-input.js

draganescu · 2020-02-25T12:20:52Z

@Soean good catch. After rebasing the new G2 UI was added and now it is a bit worse :) The button is not cut, the whole link editor is having an invisible scrollbar. I wonder what is the best solution here. I would simply hide the link on mobile, to make sure edit in all languages definitely fits. Another option would be to wrap the button ... but that raises other issues.

Soean

Looks great now!
We need to change $grid-size-large to $grid-unit-20, see #20529.

packages/block-editor/src/components/media-replace-flow/style.scss

Co-Authored-By: Andrew Duthie <[email protected]>

…react rendering

…scss Co-Authored-By: Sören Wrede <[email protected]>

… usage in a dropwdown for MediaFlow

…he new grid variables.

shaunandrews · 2020-03-11T18:43:52Z

I pushed some CSS changes. Here's how its looking now:

I'd be nice if the popover was left-aligned with the toggle button in the toolbar, but that might be something that needs to be done on the Dropdown level?

draganescu · 2020-03-12T09:50:10Z

Thank you @shaunandrews for the tidy up tweaks. I am so glad this is finally merged :)

noisysocks · 2020-03-24T04:54:37Z

Are we able to truncate the URL in the middle so that it appears as localhost…Climbing-Wall.jpg instead of localhost:8888/wp-content/…? It's not useful unless you can see the file name of the image. (Sorry if this has already been raised!)

draganescu · 2020-03-24T07:46:15Z

Good suggestion @noisysocks ! I'll open an issue with that in it.

draganescu · 2020-03-24T10:14:51Z

Done here it is: #21100

draganescu requested review from ellatrix, talldan and youknowriad as code owners January 8, 2020 10:20

Soean self-requested a review January 8, 2020 20:13

Soean reviewed Jan 8, 2020

View reviewed changes

packages/block-editor/src/components/media-replace-flow/index.js Outdated Show resolved Hide resolved

draganescu added Needs Design Feedback Needs general design feedback. and removed Needs Design Feedback Needs general design feedback. labels Jan 13, 2020

draganescu force-pushed the add/always-on-url-media-replace branch from b20a223 to 6d5209b Compare January 14, 2020 07:54

draganescu mentioned this pull request Jan 14, 2020

Try the link control in the link format #19462

Merged

draganescu mentioned this pull request Jan 22, 2020

How we can approach the introduction of a new link component within Gutenberg #18061

Closed

draganescu force-pushed the add/always-on-url-media-replace branch from 2cdbc0c to d41f1e3 Compare February 4, 2020 15:14

shaunandrews reviewed Feb 5, 2020

View reviewed changes

draganescu force-pushed the add/always-on-url-media-replace branch from 37681e7 to f160f8d Compare February 11, 2020 14:35

draganescu added [Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement. labels Feb 12, 2020

draganescu force-pushed the add/always-on-url-media-replace branch from f160f8d to cd5f1c6 Compare February 13, 2020 17:12

Soean reviewed Feb 19, 2020

View reviewed changes

packages/block-editor/src/components/link-control/search-input.js Outdated Show resolved Hide resolved

getdave reviewed Feb 24, 2020

View reviewed changes

Soean approved these changes Mar 2, 2020

View reviewed changes

draganescu and others added 10 commits March 9, 2020 09:52

rebased and addressed feedback review

240b54a

removed useless space in button label

ecfac01

use a correct type for empty settings

f24dd80

Co-Authored-By: Andrew Duthie <[email protected]>

fixes arrow keys navigation

3e86f49

adds sending null when suggestions are not needed as it is proper in …

3bb1578

…react rendering

fixes the ESCAPE key to close the dropdown menu

59d142a

Update packages/block-editor/src/components/media-replace-flow/style.…

6375198

…scss Co-Authored-By: Sören Wrede <[email protected]>

Update packages/block-editor/src/components/media-replace-flow/style.…

25ba5a9

…scss Co-Authored-By: Sören Wrede <[email protected]>

Update packages/block-editor/src/components/media-replace-flow/style.…

7d7d33e

…scss Co-Authored-By: Sören Wrede <[email protected]>

Update packages/block-editor/src/components/media-replace-flow/style.…

f24307d

…scss Co-Authored-By: Sören Wrede <[email protected]>

draganescu force-pushed the add/always-on-url-media-replace branch from 18497c4 to f24307d Compare March 9, 2020 07:52

draganescu and others added 5 commits March 9, 2020 10:00

removes deprecated mixing

a0ad771

moves keyboard capture outside of LinkControlto account only for it's…

504787f

… usage in a dropwdown for MediaFlow

Overriding the width, removing the hr, and cleaning up spacing with t…

6ee9dd7

…he new grid variables.

Adjusting the spacing around the input for editing the link URL.

7c06116

I'm not sure these are actually doing anything.

d8f3538

draganescu merged commit 07d751a into master Mar 12, 2020

draganescu deleted the add/always-on-url-media-replace branch March 12, 2020 09:49

github-actions bot added this to the Gutenberg 7.8 milestone Mar 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds always on display of media URL #19504

Adds always on display of media URL #19504

draganescu commented Jan 8, 2020 •

edited

Loading

shaunandrews commented Jan 13, 2020

ItsJonQ commented Jan 29, 2020 •

edited

Loading

draganescu commented Feb 4, 2020

draganescu commented Feb 4, 2020 •

edited

Loading

aduth commented Feb 4, 2020

draganescu commented Feb 4, 2020 •

edited

Loading

getdave commented Feb 5, 2020

aduth commented Feb 5, 2020

aduth commented Feb 5, 2020

shaunandrews left a comment

draganescu commented Feb 6, 2020

aduth commented Feb 10, 2020

shaunandrews commented Feb 10, 2020

draganescu commented Feb 12, 2020

draganescu commented Feb 13, 2020

draganescu commented Feb 20, 2020

Soean commented Feb 21, 2020

getdave left a comment

getdave Feb 24, 2020

draganescu Feb 25, 2020

draganescu Feb 25, 2020

draganescu commented Feb 25, 2020

Soean left a comment

shaunandrews commented Mar 11, 2020

draganescu commented Mar 12, 2020

noisysocks commented Mar 24, 2020

draganescu commented Mar 24, 2020

draganescu commented Mar 24, 2020

Adds always on display of media URL #19504

Adds always on display of media URL #19504

Conversation

draganescu commented Jan 8, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

shaunandrews commented Jan 13, 2020

ItsJonQ commented Jan 29, 2020 • edited Loading

draganescu commented Feb 4, 2020

draganescu commented Feb 4, 2020 • edited Loading

aduth commented Feb 4, 2020

draganescu commented Feb 4, 2020 • edited Loading

getdave commented Feb 5, 2020

aduth commented Feb 5, 2020

aduth commented Feb 5, 2020

shaunandrews left a comment

Choose a reason for hiding this comment

draganescu commented Feb 6, 2020

aduth commented Feb 10, 2020

shaunandrews commented Feb 10, 2020

draganescu commented Feb 12, 2020

draganescu commented Feb 13, 2020

draganescu commented Feb 20, 2020

Soean commented Feb 21, 2020

getdave left a comment

Choose a reason for hiding this comment

getdave Feb 24, 2020

Choose a reason for hiding this comment

draganescu Feb 25, 2020

Choose a reason for hiding this comment

draganescu Feb 25, 2020

Choose a reason for hiding this comment

draganescu commented Feb 25, 2020

Soean left a comment

Choose a reason for hiding this comment

shaunandrews commented Mar 11, 2020

draganescu commented Mar 12, 2020

noisysocks commented Mar 24, 2020

draganescu commented Mar 24, 2020

draganescu commented Mar 24, 2020

draganescu commented Jan 8, 2020 •

edited

Loading

ItsJonQ commented Jan 29, 2020 •

edited

Loading

draganescu commented Feb 4, 2020 •

edited

Loading

draganescu commented Feb 4, 2020 •

edited

Loading