Image Editor: Add Inline Edit Button

[msmithgu]

Regarding issue #8306 .

Clicking on an image in the post editor brings up an in-context menu:

This PR adds an edit icon (the pencil) to the in-context menu:

When we click on that the inline edit button, it brings up the gallery with the clicked on image pre-selected. I found when testing out usability that being able to swap the image with others was desirable and less confusing.

This completes #8306 .

To Test

1. Edit a post with an image.
2. Click on the image to see the in-context menu.
3. Click on the pencil icon to see the new behavior.

[jblz]

Context -- I started working on this independently from you in #14086 before I realized your PR existed, sorry I missed your comment!

[jblz]

I'd move this down 2 lines so the button appears next to the remove / delete button

[jblz]

I'd add in a line:
classes: 'toolbar-segment-start',

...such that the Edit button is "grouped" with the next button (as I mention in the other inline comment, I feel it's conceptually similar to Delete).

[msmithgu]

@jblz Got your changes in.

@gwwar I fixed the issue crop duplicate issue I found yesterday.

I think it's ready now. Need more eyes on it. At XL size now, I want to get this out.

[gwwar]

@msmithgu do you mind rebasing with master? There appear to be many unrelated commits in this branch.

[gwwar]

We're very close, I retested edit/edit vs edit/delete behavior.

I did notice an extra case, when the edited image is still uploading to the server, which creates a duplicate image in the dom.

To Reproduce:

• Insert an image
• Select it, click the edit pencil on the toolbar
• Click Edit, then edit the photo
• Make some changes in the image editor
• Save the image
• Before the image finishes updating, update the new value. (It may help to throttle your internet connection in dev tools).

[gwwar]

Interesting that this wraps the node with a <DT /> after editing an image.

[gwwar]

Whoops, I should have re-read #307 sooner. It does seem like jumping directly into the details view vs the list view would be much more helpful, especially when the user has a lot of media items.

cc @msmithgu @drw158

[gwwar]

We can set the view with an options object:

renderModal(
	{
		visible: true,
		labels: {
			confirm: i18n.translate( 'Update', { context: 'verb' } )
		}
	},
	{
		view: ModalViews.DETAIL
	}
);

[gwwar]

@msmithgu before merging I would recommend updating behavior to open in the detail view. We can probably open up another issue for the dup case for images that are still loading.

[gwwar]

I added #14233 so we can tackle that next

[gwwar]

Let's