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/script-loader.php

    r22361 r22362  
    328328        'cancel'      => __( 'Cancel' ),
    329329        'addImages'   => __( 'Add images' ),
     330        'selected'    => __( 'selected' ),
     332        // Upload
     333        'uploadFilesTitle' => __( 'Upload Files' ),
     334        'selectFiles'      => __( 'Select files' ),
    331336        // Library
    332         'mediaLibraryTitle'     => __( 'Media Library' ),
    333         'createNewGallery'      => __( 'Create a new gallery' ),
    334         'insertIntoPost'        => __( 'Insert into post' ),
    335         'addToGallery'          => __( 'Add to gallery' ),
     337        'mediaLibraryTitle' => __( 'Media Library' ),
     338        'createNewGallery'  => __( 'Create a new gallery' ),
     339        'insertIntoPost'    => __( 'Insert into post' ),
     340        'addToGallery'      => __( 'Add to gallery' ),
     342        // Embed
     343        'embedFromUrlTitle' => __( 'Embed From URL' ),
    337345        // Gallery
Note: See TracChangeset for help on using the changeset viewer.