Make WordPress Core

11/04/2012 10:59:12 PM (8 years ago)

Streamlining media, part I.

The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.

This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.

The fine print follows.


  • Tightened padding around the modal to optimize for a smaller default screen size.
  • Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated upload state).
  • Add a size for hero buttons.
  • Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).



  • Don't fire activate and deactivate if attempting to switch to the current state.


  • Add a base state class to bind default methods (as not all states will inherit from the Library state).
  • On activate, fire activate(), menu(), content(), sidebar(), and toolbar().
  • The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's menu attribute.
  • menu() automatically fetches the state's menu attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's id.


  • Now inherits from wp.media.controller.State.


  • A new state to improve the upload experience.
  • Displays a large dropzone when empty (a UploaderInline view).
  • When attachments are uploaded, displays management interface (a library state restricted to attachments uploaded during the current session).


  • In menu(), content(), sidebar(), and toolbar(), only change the view if it differs from the current view. Also, ensure hide-* classes are properly removed.



  • A new container view used to sort and render child views by the priority property.
  • Used by wp.media.view.Sidebar and wp.media.view.Menu.
  • Next step: Use two instances to power wp.media.view.Toolbar.

wp.media.view.Menu and wp.media.view.MenuItem

  • A new PriorityList view that renders a list of views used to switch between states.
  • MenuItem instances have id attributes that are tied directly to states.
  • Separators can be added as plain Backbone.View instances with the separator class.
  • Supports any type of Backbone.View.


  • The landing menu for the 'insert media' workflow.
  • Includes an inactive link to an "Embed from URL" state.
  • Next steps: only use in select cases to allot for other workflows (such as featured images).


  • A container to render an Attachments view with accompanying UI controls (similar to what the Attachments view was when it contained the $list property).
  • Currently only renders a Search view as a control.
  • Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.


  • If the Attachments scroll buffer is not filled with Attachment views, continue loading more attachments.
  • Use this.model instead of this.controller.state() to allow Attachments views to have differing edge and gutter properties.
  • Add edge(), a method used to calculate the optimal dimensions for an attachment based on the current width of the Attachments container element.
  • edge() is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
  • Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.


  • Now generates a $browser element as the browse button (instead of a full UploaderInline view). Using a portable browse button prevents us from having to create a new wp.Uploader instance every time we want access to a browse button.


  • No longer directly linked to the UploaderWindow view or its wp.Uploader instance.
  • Used as the default upload state view.


  • An interactive representation of the selected Attachments.
  • Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of SelectionPreview.

see #21390.

1 edited


  • trunk/wp-includes/media.php

    r22345 r22362  
    13011301            <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
    13021302        </div>
    1303         <div class="media-modal-backdrop"></div>
     1303        <div class="media-modal-backdrop">
     1304            <div></div>
     1305        </div>
    13041306    </script>
    13121314    <script type="text/html" id="tmpl-uploader-inline">
    1313         <h3><?php _e( 'Drop files here' ); ?></h3>
    1314         <!--<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>-->
    1315         <a href="#" class="browser button-secondary"><?php _e( 'Select Files' ); ?></a>
    1316         <div class="media-progress-bar"><div></div></div>
    1317     </script>
    1319     <script type="text/html" id="tmpl-sidebar">
    1320         <h2 class="sidebar-title"><%- title %></h2>
    1321         <div class="sidebar-content"></div>
     1315        <div class="uploader-inline-content">
     1316            <h3><?php _e( 'Drop files anywhere to upload' ); ?></h3>
     1317            <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
     1318            <div class="media-progress-bar"><div></div></div>
     1319        </div>
    13221320    </script>
    13621360    <script type="text/html" id="tmpl-attachment-details">
     1361        <h3><?php _e('Edit Attachment Details'); ?></h3>
    13631362        <div class="attachment-preview attachment-details-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
    13641363            <% if ( uploading ) { %>
    13931392    </script>
     1394    <script type="text/html" id="tmpl-media-selection">
     1395        <div class="selection-info">
     1396            <span class="count"></span>
     1397            <% if ( clearable ) { %>
     1398                <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
     1399            <% } %>
     1400        </div>
     1401        <div class="selection-view"></div>
     1402    </script>
    13951404    <script type="text/html" id="tmpl-media-selection-preview">
    13961405        <div class="selected-img selected-count-<%- count %>">
    14871496        <style type="text/css" id="<%- id %>-css">
    14881497            #<%- id %> {
    1489                 padding: <%- gutter %>px;
     1498                padding: 0 <%- gutter %>px;
    14901499            }
Note: See TracChangeset for help on using the changeset viewer.