The Insert into post button in the Edit Image window doesn't work.

[tai]

The Insert into post button in the Edit Image window doesn't work.

Steps to reproduce:

1. Open "Add New Post".
2. Open "Add Media".
3. Choose an image and click the "Edit Image" text link (screenshot 1).
4. Click the "Insert into post" button (screenshot 2).
5. Back to the post edit window, but the image link is not inserted.

screenshot 1: ​https://www.evernote.com/l/ACCqjc1fZTNJY5ephI7a5mf7E1vcVk9OgeE
screenshot 2: ​https://www.evernote.com/l/ACB0-GSdgcBOfKUIy36WkwCS3uhvhU3Ktw8

I've tried with WordPress 4.5.2, Twenty Sixteen, and no plugin activated.
Also tested with WordPress 4.6-alpha-37444 and the button doesn't work.

The button "Insert into post" was "Back" until WordPress 4.4.3.

[swissspidy]

Just tested it on trunk and I can confirm the behaviour.

Would be great if we could get this into 4.5.3.

[adamsilverstein]

As I suspected, this broke when we upgraded Backbone/Underscore in [36546]; I am working on tracking down the fix.

[adamsilverstein]

Debugging this media code is difficult because of the complexity with which events are both registered and triggered.

Since upgrading Backbone, the handler that updates the 'toolbar' at the bottom of the edit image view is never triggered, so the 'Insert into Post' button still shows (and doesn't work)... The toolbar is supposed to show the 'Back' button,

36861.diff​ fixes the issue by changing the way the toolbar render is triggered when switching into the image edit mode.

Previously activate/deactivate were being called when switching to this view and these attached and detached (respectively) handlers intended to be triggered by the switch to render the correct toolbar - the footer area where the back button shows. This is an initial patch and can be further cleaned by/simplified removing activate/deactivate entirely and calling the render method directly.

[swissspidy]

Patch works well so far, but could benefit from the suggested cleanup.

Also note that line 36 this.toolbar; doesn't work as it should be this.toolbar();

[adamsilverstein]

In 36861.2.diff​:

• Replace listenTo with on, similar to #36900
• Replace stopListening with off
• Fixes an issue where the handler was never called

This patch maintains the activate/deactivate pattern used throughout the media library, switching the listen method: listenTo doesn't work correctly in this context since [36546].

[philipjohn]

Works nicely for me on Chrome 50 and Firefox 45

[monikarao]

Just tested the patch on 4.5.2 and it doesn't work for me
OS: Windows 10
Browser: Chrome 50.0.2661.102 , Safari 5.1.7 , IE-11 , Firefox 46.0.1
WP 4.5.2
Server Environment : VVV

[almendron]

Step 4: Error. Replaced "back" to "Insert into post".

[joemcgill]

#36957 was marked as a duplicate.

[joemcgill]

@monikarao and @almendron thanks for testing and leaving feedback.

@monikarao – since you're using VVV, are you testing on ​http://src.wordpress-develop.dev or ​http://build.wordpress-develop.dev? If the latter, you may need to run grunt build first before the changes take affect.

@almendron – I'm not entirely clear on what error you're experiencing. If you're saying that once you applied the patch that the button in step 4 has been replaced with a "Back" button, then that's the expected behavior of this fix. If something else is happening, could you explain in more detail, or leave screenshots? Listing the OS/Browser version you are testing on is helpful as well.

[lukecavanagh]

The patch does not seem to work correctly on wordpress-trunk using

Browser: Chrome 50.0.2661.102 (64-bit) , 46.0 Mozilla Firefox for Ubuntu
WP: 4.5.2
OS: Ubuntu
Server Environment : VVV

[adamsilverstein]

@lukecavanagh are you still seeing the 'Insert into Post' button in the edit details view? You should see a 'Back' button.

[adamsilverstein]

36861.3.diff​ patch the source file instead of the built file

[almendron]

Replying to joemcgill:

@almendron – I'm not entirely clear on what error you're experiencing. If you're saying that once you applied the patch that the button in step 4 has been replaced with a "Back" button, then that's the expected behavior of this fix. If something else is happening, could you explain in more detail, or leave screenshots? Listing the OS/Browser version you are testing on is helpful as well.

Button "back" (version 4.4) in step 4 has been replaced with a "Insert into post" (version 4.5) button. The error is on the change button. Version 4.4 was "Back" and now "Insert into post".

[monikarao]

@joemcgill

Yes I am testing on ​http://src.wordpress-develop.dev/

[joemcgill]

36861.3.diff​ Looks good, but a note for other testers, you have to run grunt precommit so the media-views.js file gets rebuilt for this to take affect.

[joemcgill]

In 37678:

Media: Fix rendering of incorrect toolbar in the Edit view.

This switches event binding in wp.media.controller.EditImage to use on
instead of listenTo to restore rendering of the correct toolbar when the
toolbar:render:edit-image event fires. The existing listeners broke
when we upgraded Backbone in [36546].

Props adamsilverstein.
Fixes #36861 for trunk.

[swissspidy]

In 37813:

Media: Fix rendering of incorrect toolbar in the Edit view.

This switches event binding in wp.media.controller.EditImage to use on
instead of listenTo to restore rendering of the correct toolbar when the
toolbar:render:edit-image event fires. The existing listeners broke
when we upgraded Backbone in [36546].

Merge of [37678] to the 4.5 branch.

Props adamsilverstein.
Fixes #36861.