Attachment views in TinyMCE

[koopersmith]

One of the main improvements in the new media workflow is the fact that it is unified. To that end, we need to override the default TinyMCE image handling to allow users to re-enter the WordPress media modal, or make minor adjustments, such as changing the size, alignment, or link URL.

This view should be backed by the new JS media models.

This should be developed in concert with #21812, which will hopefully make non-editable WordPress-based TinyMCE views better across the board.

See #21390 for the media umbrella ticket.

[koopersmith]

In [22004]:

Add JavaScript methods for handling shortcodes.

Adds wp.shortcode, a set of methods used for parsing shortcodes out of content. Also adds a default set of shortcode properties to wp.mce.view.

fixes #21996, see #21812, #21813, #21815.

[koopersmith]

In [22012]:

First pass on TinyMCE attachment in-editor UI.

• Adds in-editor UI for image attachments. Most of this UI should be able to migrate to all images in a future commit.
• Removes the wpeditimage TinyMCE plugin from the default plugins array.
• Add wp.media.fit, a helper method to constrain dimensions based upon a maximum width and/or height.
• Add html attribute parsing and string generation utilities (currently stored in mce-views).
• Calling remove on a TinyMCE views now ensures that the the parent and references are removed as well.
• Fixes a bug where we weren't sending the full array of results to matches in wp.mce.view.

see #21390, #21812, #21813.

[koopersmith]

Note that image attachments do not currently respect alignment settings when displayed in TinyMCE.

[koopersmith]

In [22023]:

Remove internal TinyMCE attributes when generating the HTML for attachment views.

Moves the HTML utility functions to the top of mce-views.js. Also adds wp.mce.view.removeInternalAttrs( attrs ) and wp.mce.view.attrs( content ).

see #21390, #21812, #21813.

[koopersmith]

In [22036]:

BUTTON.

Add a "Beta Media" button to the post editor. Currently, it is only capable of inserting images. Other attachment types and galleries need not apply... yet.

• Added wp.media.string.image( attachment, props ) for generating an image as a string from an attachment and relevant attachment display properties.
• Properly localized the gallery workflow.
• Added Workflow.update(), which closes the modal, triggers an update event, and resets the selection.
• Added wp.mce.media to manage the various media workflows for editors.

see #21813, #21814, #21390.

[nacin]

Still to do: sizes, alignment, etc., and the TinyMCE non-editable plugin.

[koopersmith]

In [22154]:

Improve styling and markup for gallery and attachment MCE views.

Attachment views can now inherit from the theme's editor-style.css — just have any rules that apply to the img tag apply to .editor-attachment as well.

Adds a non-functional edit button to gallery views.

see #21390, #21813, #21815.

[koopersmith]

In [22208]:

MCE Views: Add selection/deselection when a view is clicked.

These methods should be expanded to prevent content from being inserted into the view by blocking and rerouting keystrokes as appropriate as well as repositioning the caret before content is inserted.

see #21390, #21812, #21813, #21815.

[koopersmith]

In [22210]:

MCE Views: First pass at keystroke and insertion handling.

• When a MCE view is selected, normal keystrokes (those without command/control) are blocked.
• Backspace/delete will successfully remove the view.
• Arrow handling will be added at a later point.
• When a MCE view is selected and content is pasted or injected (e.g. when an attachment is added), the content is added to the first text node after the view. If the view is at the end of the document or the next element is another view, a text node is injected into the DOM immediately after the selected view.

see #21390, #21812, #21813, #21815.

[koopersmith]

In [22219]:

MCE Views: Add alignment styles for generic views.

Adds alignnone, aligncenter, alignleft, and alignright by default.

see #21390, #21812, #21813.

[koopersmith]

In [22220]:

Properly align MCE attachment views.

• Adds a $wrapper property to MCE views to allow them to manipulate the wrapper on render. This should be used sparingly — only for layout changes that cannot be accomplished through altering the wrapper's children — and likely only for adding/removing classes.
• Uses wp.html.string() in wp.mce.view.toView().

see #21390, #21812, #21813.

[koopersmith]

In [22221]:

Display gallery and attachment MCE views as inline blocks. Make gallery MCE view wrappers block level. see #21390, #21813, #21815.

[koopersmith]

In [22245]:

Add a down arrow button. see #21598, #21390, #21813.

[koopersmith]

In [22247]:

Add attachment display settings to the media modal.

• Add a media view for button groups.
• Add button dropdown containers.
• Add a dropdown property to the button media model.

fixes #22206, #21814, see #21390, #21813, #21598.

[scribu]

Having an image right at the beginning of the content:

<img width="300" height="206" src="http://wp.dev/wp-content/uploads/2012/09/363631-300x206.jpg" class="alignnone size-medium wp-image-247" />

After I switch to Visual Mode and then back to Text, I get this:

 

<img width="300" height="206" src="http://wp.dev/wp-content/uploads/2012/09/363631-300x206.jpg" class="alignnone size-medium wp-image-247" />

Edit: Happens in Firefox; doesn't happen in Chrome.

[nacin]

Pivot time: We're removing views.

They're great, but basically are only a nice-to-have given we didn't tackle dragging images into the editor. And it's just going to take us too long to shore them up. So we're going to go back to old caption and gallery handling. (Probably still leveraging the new shortcode JS API and a few other goodies.) Better the devil you know than the devil you don't.

Blocking bugs "fixed" by removing views: #22257, #22123, #22155, #22266.

[nacin]

Also, #22161 (caption editing in views), is essentially resolved with a revert.

[koopersmith]

In 22567:

Media: Restore 3.4 editor behavior and remove TinyMCE views.

• Reactivates the wpgallery and wpeditimage TinyMCE plugins. Deactivates the wpviews TinyMCE plugin.
• Moves still-relevant logic from mce-views.js to media-upload.js and shortcode.js.
• No longer include wp-includes/js/mce-views.js. This code will not be used in 3.5, and should be considered unstable.
• Currently, this is the real 3.4 experience; as such, editing triggers the old modals. Changing this is the next major step.

When reassessing views, we should look over all of these tickets and anticipate these bugs accordingly.

fixes #21813, #22123, #22155, #22161, #22257, #22266, #22318, #22407, see #21390.