Add hooks to the wpeditimage tinymce plugin and to the image details portion of the media modal

[gcorne]

In order to extend the new image details media modal, there are some hooks that are needed both inside the wpeditimage tinymce plugin and also in media-template.php. This will allow us to bring back the border and padding in a plugin if needed and also allow plugin authors an opportunity to incorporate custom functionality.

[azaozz]

Patch looks good. Wondering if it would be better/easier to trigger custom jQuery events instead of TinyMCE events, and pass the editor instance. Something like:

if ( typeof window.jQuery !== 'undefined' ) {
  window.jQuery( document ).triggerHandler( 'WPImageData', { editor: editor, metadata: metadata, image: imageNode } );
}

Then that can be used without needing to make a TinyMCE plugin.

[gcorne]

Moving this ticket to the 3.9 milestone, although it may be punted in favor of #27706

In 27698-04.patch​, I have revised both what is used for the hooks and also several aspects of the image details modal works in order to create an unfinished plugin​ that demonstrates how a developer could hook in and add additional functionality. The plugin in its current form just adds a border to the image in a rough fashion.

Some notes about the patch that may warrant discussion:

• Adds wp.media.hooks which is intended to be a global media event bus. The idea is that it would make sense when in the context of media to have an event bus that third-party code can listen for events on. I think this is cleaner than using jQuery when in the context of media, and is a starting point for adding more places for developers to hook in to media.

• Adds a post-render event to the ImageDetails view that third-party code can leverage to add subviews. While incorporating this, I discovered a drawback with the Settings view and its magic, which is that the parent Settings view will still respond to events that occur as a result of user actions in the subview. This is magnified because the event bindings are quite generic. One way around this would be to break up the various blocks of settings into separate subviews.

• I now fully understand the relationship between the create region event and the render region event. There are places where she should be using create, which simplifies the code a bit and more importantly opens the door to 3rd-party developers being able to add render events that add subviews or override the view.

• The patch also adds a performance improvement change to how the PostImage model is initialized. If the user opens a modal referencing a image that has already been fetched, it is probably safe to just reuse the existing model instead of fetching again.

• Adds a bit more markup to the image details template to make it easier to add a view to the image portion of advanced options.

[azaozz]

27698-04.patch looks good.

[nacin]

I suggested to gcorne we rename hooks to events; he agreed. I think this is pretty much good to go.

Assigning to gcorne for tracking purposes.

[azaozz]

In 28095:

Add hooks to the wpeditimage tinymce plugin and to the image details portion of the media modal.

• Add wp.media.events which is intended to be a global media event bus.
• Add a post-render event to the ImageDetails view that third-party code can leverage to add subviews.
• Performance improvement for the initialization of the PostImage model.
• A bit more markup to the image details template to make it easier to add a view to the advanced options.

Props gcorne, fixes #27698