WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#36861 closed defect (bug) (fixed)

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

Reported by: tai Owned by: adamsilverstein
Milestone: 4.5.3 Priority: normal
Severity: normal Version: 4.5
Component: Media Keywords: has-patch commit fixed-major
Focuses: javascript Cc:
PR Number:

Description

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.

Attachments (3)

36861.diff (1.1 KB) - added by adamsilverstein 4 years ago.
36861.2.diff (624 bytes) - added by adamsilverstein 4 years ago.
36861.3.diff (669 bytes) - added by adamsilverstein 4 years ago.

Download all attachments as: .zip

Change History (28)

#1 @swissspidy
4 years ago

  • Component changed from General to Media
  • Focuses javascript added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.5.3
  • Version changed from 4.5.2 to 4.5

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

Would be great if we could get this into 4.5.3.

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


4 years ago

#3 @adamsilverstein
4 years ago

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

#4 @adamsilverstein
4 years ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned

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.

#5 @adamsilverstein
4 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

#6 @swissspidy
4 years ago

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();

This ticket was mentioned in Slack in #core-images by joemcgill. View the logs.


4 years ago

#8 @adamsilverstein
4 years ago

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].

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


4 years ago

#10 @philipjohn
4 years ago

Works nicely for me on Chrome 50 and Firefox 45

#11 @monikarao
4 years ago

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

#12 @almendron
4 years ago

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

Last edited 4 years ago by almendron (previous) (diff)

#13 @joemcgill
4 years ago

#36957 was marked as a duplicate.

#14 follow-up: @joemcgill
4 years ago

@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.

#15 @lukecavanagh
4 years ago

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

Last edited 4 years ago by lukecavanagh (previous) (diff)

#16 @adamsilverstein
4 years ago

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

This ticket was mentioned in Slack in #core-images by adamsilverstein. View the logs.


4 years ago

#18 @adamsilverstein
4 years ago

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

#19 in reply to: ↑ 14 @almendron
4 years ago

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".

#20 @monikarao
4 years ago

@joemcgill

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

This ticket was mentioned in Slack in #core-images by joemcgill. View the logs.


4 years ago

#22 @joemcgill
4 years ago

  • Keywords commit added; needs-testing removed

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.

#23 @joemcgill
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#24 @joemcgill
3 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#25 @swissspidy
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.