WordPress.org

Make WordPress Core

#21813 closed task (blessed) (fixed)

Attachment views in TinyMCE

Reported by: koopersmith Owned by: koopersmith
Milestone: 3.5 Priority: highest omg bbq
Severity: normal Version: 3.5
Component: Media Keywords:
Focuses: Cc:

Description

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.

Change History (19)

comment:1 koopersmith22 months ago

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.

comment:2 koopersmith22 months ago

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.

comment:3 koopersmith22 months ago

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

comment:4 koopersmith22 months ago

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.

comment:20 koopersmith22 months ago

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.

comment:21 deltafactory22 months ago

  • Cc jeff@… added

comment:22 nacin21 months ago

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

comment:23 koopersmith21 months ago

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.

comment:24 koopersmith21 months ago

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.

comment:25 koopersmith21 months ago

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.

comment:26 koopersmith21 months ago

In [22219]:

MCE Views: Add alignment styles for generic views.

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

see #21390, #21812, #21813.

comment:27 koopersmith21 months ago

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.

comment:28 koopersmith21 months ago

In [22221]:

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

comment:27 koopersmith21 months ago

In [22245]:

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

comment:28 koopersmith21 months ago

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.

comment:29 scribu21 months ago

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:

&nbsp;

<img width="300" height="206" src="http://wp.dev/wp-content/uploads/2012/09/363631-300x206.jpg" class="alignnone size-medium wp-image-247" />
Version 0, edited 21 months ago by scribu (next)

comment:30 nacin20 months ago

  • Priority changed from normal to highest omg bbq

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.

comment:31 nacin20 months ago

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

comment:32 koopersmith20 months ago

  • Owner set to koopersmith
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.