Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Media Grid Attachment Details modal UI improvements: 

* Align better visually with the existing media modal and the post image edit modal.
* Add back a link to the full attachment edit screen (post.php).
* Add a title to the modal and move prev/next buttons next to the more-consistent close button.
* Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button.

Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup.

props ericlewis, helen, melchoyce. see #28844. fixes #28915.

Built from https://develop.svn.wordpress.org/trunk@29204


git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-07-17 03:55:15 +00:00
parent 95735cf298
commit b7445ec8a4
8 changed files with 402 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
wp-includes/css/media-views-rtl.css
View File

@ -1525,27 +1525,6 @@ video#inline-media-node {
margin-top: 14px;
}
.media-sidebar .settings-save-status {
background: #f5f5f5;
float: left;
text-transform: none;
z-index: 10;
}
.media-sidebar .settings-save-status .spinner {
margin: 0 5px 0;
}
.media-sidebar .settings-save-status .saved {
float: left;
display: none;
}
.media-sidebar .save-waiting .settings-save-status .spinner,
.media-sidebar .save-complete .settings-save-status .saved {
display: block;
}
/**
* Attachment Details
*/
@ -1554,6 +1533,26 @@ video#inline-media-node {
overflow: auto;
}
.attachment-details .settings-save-status {
float: left;
text-transform: none;
z-index: 10;
}
.attachment-details .settings-save-status .spinner {
margin: 0 5px 0;
}
.attachment-details .settings-save-status .saved {
float: left;
display: none;
}
.attachment-details.save-waiting .settings-save-status .spinner,
.attachment-details.save-complete .settings-save-status .saved {
display: block;
}
.attachment-info {
overflow: hidden;
min-height: 60px;
@ -1645,13 +1644,13 @@ video#inline-media-node {
display: block;
}
.attachment-info .delete-attachment,
.attachment-info .trash-attachment {
.media-modal .delete-attachment,
.media-modal .trash-attachment {
color: #bc0b0b;
}
.attachment-info .delete-attachment:hover,
.attachment-info .trash-attachment:hover {
.media-modal .delete-attachment:hover,
.media-modal .trash-attachment:hover {
color: red;
}
@ -2670,17 +2669,57 @@ video#inline-media-node {
*
* This should be OOCSS'd so both use a shared selector.
*/
.edit-attachment-frame .edit-media-header {
overflow: hidden;
}
.upload-php .media-modal-close .media-modal-icon:before {
content: '\f335';
font-size: 30px;
}
.upload-php .media-modal-close:hover .media-modal-icon:before,
.upload-php .media-modal-close:focus .media-modal-icon:before {
color: #fff;
}
.upload-php .media-modal-close .media-modal-icon {
margin-top: 13px;
width: 30px;
height: 30px;
}
.upload-php .media-modal-close,
.edit-attachment-frame .edit-media-header .left,
.edit-attachment-frame .edit-media-header .right {
cursor: pointer;
color: #777;
background-color: transparent;
height: 48px;
width: 54px;
float: right;
height: 56px;
width: 56px;
padding: 0;
position: absolute;
text-align: center;
border: 0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.upload-php .media-modal-close {
top: 0;
left: 0;
}
.edit-attachment-frame .edit-media-header .left {
left: 112px;
}
.edit-attachment-frame .edit-media-header .right {
left: 56px;
}
.edit-attachment-frame .media-frame-title {
right: 0;
left: 170px; /* leave space for prev/next/close */
}
.edit-attachment-frame .edit-media-header .right:before,
@ -2711,10 +2750,10 @@ video#inline-media-node {
cursor: inherit;
}
.edit-attachment-frame .edit-media-header .close:hover,
.upload-php .media-modal-close:hover,
.edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:hover,
.edit-attachment-frame .edit-media-header .close:focus,
.upload-php .media-modal-close:focus,
.edit-attachment-frame .edit-media-header .right:focus,
.edit-attachment-frame .edit-media-header .left:focus {
background: #0074a2;
@ -2729,6 +2768,7 @@ video#inline-media-node {
.edit-attachment-frame .media-frame-content {
border-bottom: none;
bottom: 0;
top: 56px;
}
/* Hiding this for the moment instead of removing it from the template. */
@ -2743,94 +2783,100 @@ video#inline-media-node {
bottom: 0;
left: 0;
right: 0;
-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
}
.edit-attachment-frame .attachment-media-view {
float: right;
width: 65%;
height: 100%;
}
.edit-attachment-frame .attachment-info {
border-bottom: 0;
border-left: 1px solid #ddd;
bottom: 0;
position: absolute;
top: 0;
right: 0;
left: 50%;
margin-bottom: 0;
padding: 2% 4% 0;
height: 98%; /* 100% - padding percentage above */
.edit-attachment-frame .attachment-media-view .thumbnail {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 16px;
height: 100%;
}
.edit-attachment-frame .attachment-info .thumbnail {
float: none;
max-width: none;
max-height: 70%;
margin-left: 0;
}
.edit-attachment-frame .attachment-info .thumbnail-image img {
margin: 0;
}
.edit-attachment-frame .attachment-info .thumbnail-image:after {
-webkit-box-shadow: none;
box-shadow: none;
}
.edit-attachment-frame .attachment-info .thumbnail img {
.edit-attachment-frame .attachment-media-view img {
display: block;
margin-bottom: 16px;
max-width: 100%;
max-height: 100%;
max-height: -webkit-calc( 100% - 42px );
max-height: calc( 100% - 42px ); /* leave space for actions underneath */
}
.edit-attachment-frame .attachment-info .details {
float: none;
.edit-attachment-frame .delete-attachment {
float: left;
margin-top: 7px;
}
.edit-attachment-frame .wp-media-wrapper {
margin-bottom: 12px;
}
.edit-attachment-frame .attachment-fields {
bottom: 0;
padding: 2% 4%;
position: absolute;
top: 0;
right: 50%;
left: 0;
.edit-attachment-frame .attachment-info {
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0;
padding: 12px 16px 0;
width: 35%;
height: 100%;
-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
border-bottom: 0;
border-right: 1px solid #ddd;
background: #f3f3f3;
}
.edit-attachment-frame .attachment-fields .setting {
.edit-attachment-frame .attachment-info .details,
.edit-attachment-frame .attachment-info .settings {
overflow: hidden;
float: none;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.edit-attachment-frame .attachment-info .setting {
display: block;
float: right;
width: 100%;
margin: 1px 0;
}
.edit-attachment-frame .attachment-fields .setting label {
.edit-attachment-frame .attachment-info .setting label {
display: block;
}
.edit-attachment-frame .attachment-fields .setting .link-to-custom {
.edit-attachment-frame .attachment-info .setting .link-to-custom {
margin: 3px 0;
}
.edit-attachment-frame .attachment-fields .setting .name {
.edit-attachment-frame .attachment-info .setting .name {
min-width: 30%;
margin-left: 4%;
font-size: 12px;
text-align: left;
}
.edit-attachment-frame .attachment-fields .setting select {
.edit-attachment-frame .attachment-info .setting select {
max-width: 65%;
}
.edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
.edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
.edit-attachment-frame .attachment-info .field input[type="checkbox"] {
width: 16px;
float: none;
margin: 8px 3px 0;
padding: 0;
}
.edit-attachment-frame .attachment-fields .setting span {
.edit-attachment-frame .attachment-info .setting span {
float: right;
min-height: 22px;
padding-top: 8px;
@ -2839,14 +2885,14 @@ video#inline-media-node {
color: #666;
}
.edit-attachment-frame .attachment-fields .setting input[type="text"],
.edit-attachment-frame .attachment-fields .setting input[type="password"],
.edit-attachment-frame .attachment-fields .setting input[type="number"],
.edit-attachment-frame .attachment-fields .setting input[type="search"],
.edit-attachment-frame .attachment-fields .setting input[type="email"],
.edit-attachment-frame .attachment-fields .setting input[type="url"],
.edit-attachment-frame .attachment-fields .setting textarea,
.edit-attachment-frame .attachment-fields .setting .value {
.edit-attachment-frame .attachment-info .setting input[type="text"],
.edit-attachment-frame .attachment-info .setting input[type="password"],
.edit-attachment-frame .attachment-info .setting input[type="number"],
.edit-attachment-frame .attachment-info .setting input[type="search"],
.edit-attachment-frame .attachment-info .setting input[type="email"],
.edit-attachment-frame .attachment-info .setting input[type="url"],
.edit-attachment-frame .attachment-info .setting textarea,
.edit-attachment-frame .attachment-info .setting .value {
margin: 1px;
width: 65%;
float: left;
@ -2856,12 +2902,12 @@ video#inline-media-node {
box-sizing: border-box;
}
.edit-attachment-frame .attachment-fields .setting textarea {
.edit-attachment-frame .attachment-info .setting textarea {
height: 62px;
resize: vertical;
}
.edit-attachment-frame .attachment-fields select {
.edit-attachment-frame .attachment-info select {
margin-top: 3px;
}

2
wp-includes/css/media-views-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

220
wp-includes/css/media-views.css
View File

@ -1525,27 +1525,6 @@ video#inline-media-node {
margin-top: 14px;
}
.media-sidebar .settings-save-status {
background: #f5f5f5;
float: right;
text-transform: none;
z-index: 10;
}
.media-sidebar .settings-save-status .spinner {
margin: 0 5px 0;
}
.media-sidebar .settings-save-status .saved {
float: right;
display: none;
}
.media-sidebar .save-waiting .settings-save-status .spinner,
.media-sidebar .save-complete .settings-save-status .saved {
display: block;
}
/**
* Attachment Details
*/
@ -1554,6 +1533,26 @@ video#inline-media-node {
overflow: auto;
}
.attachment-details .settings-save-status {
float: right;
text-transform: none;
z-index: 10;
}
.attachment-details .settings-save-status .spinner {
margin: 0 5px 0;
}
.attachment-details .settings-save-status .saved {
float: right;
display: none;
}
.attachment-details.save-waiting .settings-save-status .spinner,
.attachment-details.save-complete .settings-save-status .saved {
display: block;
}
.attachment-info {
overflow: hidden;
min-height: 60px;
@ -1645,13 +1644,13 @@ video#inline-media-node {
display: block;
}
.attachment-info .delete-attachment,
.attachment-info .trash-attachment {
.media-modal .delete-attachment,
.media-modal .trash-attachment {
color: #bc0b0b;
}
.attachment-info .delete-attachment:hover,
.attachment-info .trash-attachment:hover {
.media-modal .delete-attachment:hover,
.media-modal .trash-attachment:hover {
color: red;
}
@ -2670,17 +2669,57 @@ video#inline-media-node {
*
* This should be OOCSS'd so both use a shared selector.
*/
.edit-attachment-frame .edit-media-header {
overflow: hidden;
}
.upload-php .media-modal-close .media-modal-icon:before {
content: '\f335';
font-size: 30px;
}
.upload-php .media-modal-close:hover .media-modal-icon:before,
.upload-php .media-modal-close:focus .media-modal-icon:before {
color: #fff;
}
.upload-php .media-modal-close .media-modal-icon {
margin-top: 13px;
width: 30px;
height: 30px;
}
.upload-php .media-modal-close,
.edit-attachment-frame .edit-media-header .left,
.edit-attachment-frame .edit-media-header .right {
cursor: pointer;
color: #777;
background-color: transparent;
height: 48px;
width: 54px;
float: left;
height: 56px;
width: 56px;
padding: 0;
position: absolute;
text-align: center;
border: 0;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.upload-php .media-modal-close {
top: 0;
right: 0;
}
.edit-attachment-frame .edit-media-header .left {
right: 112px;
}
.edit-attachment-frame .edit-media-header .right {
right: 56px;
}
.edit-attachment-frame .media-frame-title {
left: 0;
right: 170px; /* leave space for prev/next/close */
}
.edit-attachment-frame .edit-media-header .right:before,
@ -2711,10 +2750,10 @@ video#inline-media-node {
cursor: inherit;
}
.edit-attachment-frame .edit-media-header .close:hover,
.upload-php .media-modal-close:hover,
.edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:hover,
.edit-attachment-frame .edit-media-header .close:focus,
.upload-php .media-modal-close:focus,
.edit-attachment-frame .edit-media-header .right:focus,
.edit-attachment-frame .edit-media-header .left:focus {
background: #0074a2;
@ -2729,6 +2768,7 @@ video#inline-media-node {
.edit-attachment-frame .media-frame-content {
border-bottom: none;
bottom: 0;
top: 56px;
}
/* Hiding this for the moment instead of removing it from the template. */
@ -2743,94 +2783,100 @@ video#inline-media-node {
bottom: 0;
right: 0;
left: 0;
-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
}
.edit-attachment-frame .attachment-media-view {
float: left;
width: 65%;
height: 100%;
}
.edit-attachment-frame .attachment-info {
border-bottom: 0;
border-right: 1px solid #ddd;
bottom: 0;
position: absolute;
top: 0;
left: 0;
right: 50%;
margin-bottom: 0;
padding: 2% 4% 0;
height: 98%; /* 100% - padding percentage above */
.edit-attachment-frame .attachment-media-view .thumbnail {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 16px;
height: 100%;
}
.edit-attachment-frame .attachment-info .thumbnail {
float: none;
max-width: none;
max-height: 70%;
margin-right: 0;
}
.edit-attachment-frame .attachment-info .thumbnail-image img {
margin: 0;
}
.edit-attachment-frame .attachment-info .thumbnail-image:after {
-webkit-box-shadow: none;
box-shadow: none;
}
.edit-attachment-frame .attachment-info .thumbnail img {
.edit-attachment-frame .attachment-media-view img {
display: block;
margin-bottom: 16px;
max-width: 100%;
max-height: 100%;
max-height: -webkit-calc( 100% - 42px );
max-height: calc( 100% - 42px ); /* leave space for actions underneath */
}
.edit-attachment-frame .attachment-info .details {
float: none;
.edit-attachment-frame .delete-attachment {
float: right;
margin-top: 7px;
}
.edit-attachment-frame .wp-media-wrapper {
margin-bottom: 12px;
}
.edit-attachment-frame .attachment-fields {
bottom: 0;
padding: 2% 4%;
position: absolute;
top: 0;
left: 50%;
right: 0;
.edit-attachment-frame .attachment-info {
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0;
padding: 12px 16px 0;
width: 35%;
height: 100%;
-webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
border-bottom: 0;
border-left: 1px solid #ddd;
background: #f3f3f3;
}
.edit-attachment-frame .attachment-fields .setting {
.edit-attachment-frame .attachment-info .details,
.edit-attachment-frame .attachment-info .settings {
overflow: hidden;
float: none;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.edit-attachment-frame .attachment-info .setting {
display: block;
float: left;
width: 100%;
margin: 1px 0;
}
.edit-attachment-frame .attachment-fields .setting label {
.edit-attachment-frame .attachment-info .setting label {
display: block;
}
.edit-attachment-frame .attachment-fields .setting .link-to-custom {
.edit-attachment-frame .attachment-info .setting .link-to-custom {
margin: 3px 0;
}
.edit-attachment-frame .attachment-fields .setting .name {
.edit-attachment-frame .attachment-info .setting .name {
min-width: 30%;
margin-right: 4%;
font-size: 12px;
text-align: right;
}
.edit-attachment-frame .attachment-fields .setting select {
.edit-attachment-frame .attachment-info .setting select {
max-width: 65%;
}
.edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
.edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
.edit-attachment-frame .attachment-info .setting input[type="checkbox"],
.edit-attachment-frame .attachment-info .field input[type="checkbox"] {
width: 16px;
float: none;
margin: 8px 3px 0;
padding: 0;
}
.edit-attachment-frame .attachment-fields .setting span {
.edit-attachment-frame .attachment-info .setting span {
float: left;
min-height: 22px;
padding-top: 8px;
@ -2839,14 +2885,14 @@ video#inline-media-node {
color: #666;
}
.edit-attachment-frame .attachment-fields .setting input[type="text"],
.edit-attachment-frame .attachment-fields .setting input[type="password"],
.edit-attachment-frame .attachment-fields .setting input[type="number"],
.edit-attachment-frame .attachment-fields .setting input[type="search"],
.edit-attachment-frame .attachment-fields .setting input[type="email"],
.edit-attachment-frame .attachment-fields .setting input[type="url"],
.edit-attachment-frame .attachment-fields .setting textarea,
.edit-attachment-frame .attachment-fields .setting .value {
.edit-attachment-frame .attachment-info .setting input[type="text"],
.edit-attachment-frame .attachment-info .setting input[type="password"],
.edit-attachment-frame .attachment-info .setting input[type="number"],
.edit-attachment-frame .attachment-info .setting input[type="search"],
.edit-attachment-frame .attachment-info .setting input[type="email"],
.edit-attachment-frame .attachment-info .setting input[type="url"],
.edit-attachment-frame .attachment-info .setting textarea,
.edit-attachment-frame .attachment-info .setting .value {
margin: 1px;
width: 65%;
float: right;
@ -2856,12 +2902,12 @@ video#inline-media-node {
box-sizing: border-box;
}
.edit-attachment-frame .attachment-fields .setting textarea {
.edit-attachment-frame .attachment-info .setting textarea {
height: 62px;
resize: vertical;
}
.edit-attachment-frame .attachment-fields select {
.edit-attachment-frame .attachment-info select {
margin-top: 3px;
}

2
wp-includes/css/media-views.min.css vendored
View File

File diff suppressed because one or more lines are too long

120
wp-includes/js/media-grid.js
View File

@ -11,19 +11,18 @@
}
/**
* A state for editing (cropping, etc.) an image.
* A state for editing an attachment's metadata.
*
* @constructor
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
media.controller.EditImageNoFrame = media.controller.State.extend({
media.controller.EditAttachmentMetadata = media.controller.State.extend({
defaults: {
id: 'edit-attachment',
title: l10n.editImage,
title: l10n.attachmentDetails,
// Region mode defaults.
menu: false,
router: 'edit-metadata',
content: 'edit-metadata',
url: ''
@ -36,29 +35,23 @@
* include the regions expected there.
*/
_postActivate: function() {
this.frame.on( 'title:render:default', this._renderTitle, this );
this._title();
this._content();
this._router();
},
/**
* @access private
*/
_router: function() {
var router = this.frame.router,
mode = this.get('router'),
view;
this.frame.$el.toggleClass( 'hide-router', ! mode );
if ( ! mode ) {
return;
}
this.frame.router.render( mode );
view = router.get();
if ( view && view.select ) {
view.select( this.frame.content.mode() );
}
_title: function() {
this.frame.title.render( this.get('titleMode') || 'default' );
},
/**
* @access private
*/
_renderTitle: function( view ) {
view.$el.text( this.get('title') || '' );
},
_content: function() {
@ -286,6 +279,18 @@
media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
template: wp.template( 'attachment-details-two-column' ),
events: {
'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting',
'click .delete-attachment': 'deleteAttachment',
'click .trash-attachment': 'trashAttachment',
'click .edit-attachment': 'editAttachment',
'click .refresh-attachment': 'refreshAttachment',
'click .edit-image': 'handleEditImageClick'
},
initialize: function() {
if ( ! this.model ) {
return;
@ -322,6 +327,10 @@
media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
},
handleEditImageClick: function() {
this.controller.setState( 'edit-image' );
},
afterDelete: function( model ) {
if ( ! model.destroyed ) {
return;
@ -405,11 +414,11 @@
*
* Requires an attachment model to be passed in the options hash under `model`.
*/
media.view.MediaFrame.EditAttachments = media.view.Frame.extend({
media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
className: 'edit-attachment-frame',
template: media.template( 'edit-attachment-frame' ),
regions: [ 'router', 'content' ],
regions: [ 'title', 'content' ],
events: {
'click': 'collapse',
@ -440,8 +449,10 @@
this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
this.on( 'content:render:edit-image', this.editImageContentUgh, this );
this.on( 'close', this.detach );
this.on( 'router:create', this.createRouter, this );
this.on( 'router:render', this.browseRouter, this );
// Bind default title creation.
this.on( 'title:create:default', this.createTitle, this );
this.title.mode('default');
this.options.hasPrevious = this.hasPrevious();
this.options.hasNext = this.hasNext();
@ -474,23 +485,16 @@
* Add the default states to the frame.
*/
createStates: function() {
var editImageState = new media.controller.EditImage( { model: this.model } );
// Noop some methods.
editImageState._toolbar = function() {};
editImageState._router = function() {};
editImageState._menu = function() {};
this.states.add([
new media.controller.EditImageNoFrame( { model: this.model } )
]);
},
new media.controller.EditAttachmentMetadata( { model: this.model } ),
editImageState
/**
* @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
*/
render: function() {
// Activate the default state if no active state exists.
if ( ! this.state() && this.options.state ) {
this.setState( this.options.state );
}
/**
* call 'render' directly on the parent class
*/
return media.view.Frame.prototype.render.apply( this, arguments );
]);
},
/**
@ -530,42 +534,6 @@
view.loadEditor();
},
/**
* Create the router view.
*
* @param {Object} router
* @this wp.media.controller.Region
*/
createRouter: function( router ) {
router.view = new media.view.Router({
controller: this
});
},
/**
* Router rendering callback.
*
* @param media.view.Router view Instantiated in this.createRouter()
*/
browseRouter: function( view ) {
view.set({
'edit-metadata': {
text: l10n.editMetadata,
priority: 20
}
});
// Only need a tab to Edit Image for images.
if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
view.set({
'edit-image': {
text: l10n.editImage,
priority: 40
}
});
}
},
resetContent: function() {
this.modal.close();
wp.media( {

2
wp-includes/js/media-grid.min.js vendored
View File

File diff suppressed because one or more lines are too long

161
wp-includes/media-template.php
View File

@ -255,23 +255,18 @@ function wp_print_media_templates() {
<script type="text/html" id="tmpl-edit-attachment-frame">
<div class="edit-media-header">
<button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
<button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
</div>
<div class="media-frame-router"></div>
<div class="media-frame-title"></div>
<div class="media-frame-content"></div>
</script>
<script type="text/html" id="tmpl-attachment-details-two-column">
<h3>
<?php _e('Attachment Details'); ?>
<span class="settings-save-status">
<span class="spinner"></span>
<span class="saved"><?php esc_html_e('Saved.'); ?></span>
</span>
</h3>
<div class="attachment-info">
<div class="attachment-media-view">
<div class="thumbnail thumbnail-{{ data.type }}">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div></div></div>
@ -280,22 +275,43 @@ function wp_print_media_templates() {
<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
<img src="{{ data.icon }}" class="icon" draggable="false" />
<# } #>
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</audio>
</div>
<# } else if ( 'video' === data.type ) { #>
<div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
<video controls class="wp-video-shortcode" preload="metadata"
width="{{ data.width }}" height="{{ data.height }}"
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</video>
</div>
<# } #>
<div class="attachment-actions">
<# if ( 'image' === data.type && ! data.uploading ) { #>
<a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>
<?php if ( MEDIA_TRASH ): ?>
<a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
<?php else: ?>
<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
<?php endif; ?>
<# } #>
</div>
</div>
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</audio>
</div>
<# } else if ( 'video' === data.type ) { #>
<div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
<video controls class="wp-video-shortcode" preload="metadata"
width="{{ data.width }}" height="{{ data.height }}"
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
<source type="{{ data.mime }}" src="{{ data.url }}"/>
</video>
</div>
<# } #>
</div>
<div class="attachment-info">
<span class="settings-save-status">
<span class="spinner"></span>
<span class="saved"><?php esc_html_e('Saved.'); ?></span>
</span>
<div class="details">
<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
@ -321,66 +337,61 @@ function wp_print_media_templates() {
</div>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>
<?php if ( MEDIA_TRASH ): ?>
<a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
<?php else: ?>
<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
<?php endif; ?>
<# } #>
<div class="compat-meta">
<# if ( data.compat && data.compat.meta ) { #>
{{{ data.compat.meta }}}
<# } #>
</div>
</div>
</div>
<div class="attachment-fields">
<label class="setting" data-setting="url">
<span class="name"><?php _e('URL'); ?></span>
<input type="text" value="{{ data.url }}" readonly />
</label>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<label class="setting" data-setting="title">
<span class="name"><?php _e('Title'); ?></span>
<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
</label>
<# if ( 'audio' === data.type ) { #>
<?php foreach ( array(
'artist' => __( 'Artist' ),
'album' => __( 'Album' ),
) as $key => $label ) : ?>
<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
<span class="name"><?php echo $label ?></span>
<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
</label>
<?php endforeach; ?>
<# } #>
<label class="setting" data-setting="caption">
<span class="name"><?php _e('Caption'); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
</label>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name"><?php _e('Alt Text'); ?></span>
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
<div class="settings">
<label class="setting" data-setting="url">
<span class="name"><?php _e('URL'); ?></span>
<input type="text" value="{{ data.url }}" readonly />
</label>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<label class="setting" data-setting="title">
<span class="name"><?php _e('Title'); ?></span>
<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
</label>
<# if ( 'audio' === data.type ) { #>
<?php foreach ( array(
'artist' => __( 'Artist' ),
'album' => __( 'Album' ),
) as $key => $label ) : ?>
<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
<span class="name"><?php echo $label ?></span>
<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
</label>
<?php endforeach; ?>
<# } #>
<label class="setting" data-setting="caption">
<span class="name"><?php _e( 'Caption' ); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
</label>
<# if ( 'image' === data.type ) { #>
<label class="setting" data-setting="alt">
<span class="name"><?php _e( 'Alt Text' ); ?></span>
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
</label>
<# } #>
<label class="setting" data-setting="description">
<span class="name"><?php _e('Description'); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
</label>
<# } #>
<label class="setting" data-setting="description">
<span class="name"><?php _e('Description'); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
</label>
<label class="setting">
<span class="name"><?php _e( 'Uploaded By' ); ?></span>
<span class="value">{{ data.authorName }}</span>
</label>
<# if ( data.uploadedTo ) { #>
<label class="setting">
<span class="name"><?php _e('Uploaded To'); ?></span>
<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
<span class="name"><?php _e( 'Uploaded By' ); ?></span>
<span class="value">{{ data.authorName }}</span>
</label>
<# } #>
<# if ( data.uploadedTo ) { #>
<label class="setting">
<span class="name"><?php _e( 'Uploaded To' ); ?></span>
<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
</label>
<# } #>
</div>
<a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
</div>
</script>

3
wp-includes/media.php
View File

@ -2909,6 +2909,9 @@ function wp_enqueue_media( $args = array() ) {
'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
'warnDelete' => __( "You are about to permanently delete this item.\n 'Cancel' to stop, 'OK' to delete." ),
// Library Details
'attachmentDetails' => __( 'Attachment Details' ),
// From URL
'insertFromUrlTitle' => __( 'Insert from URL' ),