Integrate TinyMCE gallery views with the new media modal

[koopersmith]

Currently, galleries in TinyMCE are rigged up to the old media modal. We should integrate the view with the new media modal and improve it with a preview of the gallery (see #21585 for that). The 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 [22120]:

Use the new media modal to insert galleries into TinyMCE and the text editor.

Galleries

• Gallery insertion from the new media modal (into TinyMCE, the text editor, etc).
• Gallery previews in TinyMCE now use the wp.mce.views API.
• Disables the TinyMCE wpgallery plugin.
• Gallery previews consist of the first image of the gallery and the appearance of a stack. This will later be fleshed out to include more images/functionality (including editing the gallery, gallery properties, and showing the number of images in the gallery).
• Multiple galleries can be added to a single post.
• The gallery MCE view provides a bridge between the wp.shortcode and Attachments representation of a gallery, which allows the existing collection to persist when a gallery is initially created (preventing a request to the server for the query).

Shortcodes

• Renames wp.shortcode.Match to wp.shortcode to better expose the shortcode constructor.
• The wp.shortcode constructor now accepts an object of options instead of a wp.shortcode.regexp() match.
• A wp.shortcode instance can be created from a wp.shortcode.regexp() match by calling wp.shortcode.fromMatch( match ).
• Adds wp.shortcode.string(), which takes a set of shortcode parameters and converts them into a string.* Renames wp.shortcode.prototype.text() to wp.shortcode.prototype.string().
• Adds an additional capture group to wp.shortcode.regexp() that records whether or not the shortcode has a closing tag. This allows us to improve the accuracy of the syntax used when transforming a shortcode object back into a string.

Media Models

• Prevents media Query models from observing the central Attachments.all object when query args without corresponding filters are set (otherwise, queries quickly amass false positives).
• Adds post__in, post__not_in, and post_parent as acceptable JS attachment Query args.
• Attachments.more() always returns a $.promise object.

see #21390, #21809, #21812, #21815, #21817.

[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 [22155]:

Gallery editing in the media modal.

The edit button on gallery MCE views will open a new instance of the media modal. Images can be removed, uploaded, and reordered. However, the "Add images from media library" button is not yet functional.

see #21390, #21809, #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 [22221]:

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

[koopersmith]

In 22340:

Add gallery settings to the media modal.

• Abstracts wp.media.view.AttachmentDisplaySettings into wp.media.view.Settings for managing lists of settings with button groups and select boxes. Settings can optionally be tied to a user setting (i.e. using getUserSetting).
• Adds wp.media.view.Settings.AttachmentDisplay.
• Adds wp.media.view.Settings.Gallery.

see #21390, #21815.

[nacin]

#21585 was marked as a duplicate.