Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-28 07:45:02 +02:00
Code Issues Projects Releases Wiki Activity

Improve the UX and flow of the Image post format.

Browse Source 
* Drag-and-drop
* Textarea for HTML/URL hidden to start
* Bigger click target for entering Media modal
* Image preview height-contrained to 300 pixels
* Hid the alignment, size, etc options that didn't have an effect anyway
* Got wp-format-{format} into the <body> class

props DrewAPicture, aaroncampbell, markjaquith, azaozz. see #24291.

git-svn-id: http://core.svn.wordpress.org/trunk@24226 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2013-05-09 22:45:14 +00:00
parent 351fda2958
commit f63001eb2c
6 changed files with 190 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
wp-admin/admin-header.php
View File

@ -85,6 +85,17 @@ $admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-
$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' ); $admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );
$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) ); $admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
if ( false !== $post_format = get_post_format() ) {
if ( ! $post_format ) {
$post_format = 'standard';
if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
$post_format = $_REQUEST['format'];
}
$admin_body_class .= ' wp-format-' . $post_format;
}
if ( wp_is_mobile() ) if ( wp_is_mobile() )
$admin_body_class .= ' mobile'; $admin_body_class .= ' mobile';
@ -98,7 +109,7 @@ $admin_body_class .= ' no-customize-support';
</script> </script>
<?php <?php
// Make sure the customize body classes are correct as early as possible. // Make sure the customize body classes are correct as early as possible.
if ( current_user_can( 'edit_theme_options' ) ) if ( current_user_can( 'edit_theme_options' ) )
wp_customize_support_script(); wp_customize_support_script();
?> ?>

138
wp-admin/css/wp-admin.css
View File

@ -4004,19 +4004,19 @@ body .ui-slider-tooltip {
margin-bottom: 15px; margin-bottom: 15px;
} }
.wp-format-gallery .post-formats-fields, #post-body-content.wp-format-gallery .post-formats-fields,
.wp-format-image .post-formats-fields, #post-body-content.wp-format-image .post-formats-fields,
.wp-format-link .post-formats-fields, #post-body-content.wp-format-link .post-formats-fields,
.wp-format-quote .post-formats-fields, #post-body-content.wp-format-quote .post-formats-fields,
.wp-format-video .post-formats-fields, #post-body-content.wp-format-video .post-formats-fields,
.wp-format-audio .post-formats-fields, #post-body-content.wp-format-audio .post-formats-fields,
.wp-format-gallery .field.wp-format-gallery, #post-body-content.wp-format-gallery .field.wp-format-gallery,
.wp-format-image .field.wp-format-image, #post-body-content.wp-format-image .field.wp-format-image,
.wp-format-chat .field.wp-format-chat, #post-body-content.wp-format-chat .field.wp-format-chat,
.wp-format-link .field.wp-format-link, #post-body-content.wp-format-link .field.wp-format-link,
.wp-format-quote .field.wp-format-quote, #post-body-content.wp-format-quote .field.wp-format-quote,
.wp-format-video .field.wp-format-video, #post-body-content.wp-format-video .field.wp-format-video,
.wp-format-audio .field.wp-format-audio { #post-body-content.wp-format-audio .field.wp-format-audio {
display: block; display: block;
} }
@ -4032,9 +4032,9 @@ body .ui-slider-tooltip {
font-size: 1.2em; font-size: 1.2em;
} }
.wp-format-image label, #post-body-content.wp-format-image label,
.wp-format-video label, #post-body-content.wp-format-video label,
.wp-format-audio label { #post-body-content.wp-format-audio label {
float: left; float: left;
} }
@ -4043,25 +4043,84 @@ body .ui-slider-tooltip {
overflow: hidden; overflow: hidden;
width: 40%; width: 40%;
height: auto; height: auto;
padding: 55px 0 20px;
border: 1px dashed #dfdfdf; border: 1px dashed #dfdfdf;
background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%; background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
box-sizing: border-box;
position:relative;
} }
.wp-format-media-holder:hover { .wp-format-media-holder:hover {
background-color: #eee; background-color: #eee;
} }
.wp-format-media-preview { .wp-format-media-holder.drag-over {
margin-bottom: 20px; background: rgba( 0, 86, 132, 0.9 );
border-color:transparent;
} }
.wp-format-status #titlewrap, .wp-format-media-holder div {
.wp-format-image .wp-media-buttons .insert-media, display: none;
.wp-format-audio .wp-media-buttons .insert-media, }
.wp-format-video .wp-media-buttons .insert-media, .wp-format-media-holder.drag-over div {
.wp-format-aside .wp-media-buttons .insert-media, position: absolute;
.wp-format-status .wp-media-buttons .insert-media { top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px dashed #fff;
display:block;
}
#poststuff .wp-format-media-holder.drag-over div h3 {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY( -50% );
-moz-transform: translateY( -50% );
-ms-transform: translateY( -50% );
-o-transform: translateY( -50% );
transform: translateY( -50% );
font-size: 20px;
font-weight: 200;
color: #fff;
padding: 0;
text-align:center;
font-family: sans-serif;
}
#post-body-content.wp-format-image .wp-format-media-holder {
margin-top: 17px;
}
.wp-format-media-preview {
margin: 20px 0;
}
#image-preview img {
width: auto;
max-height: 300px;
}
#post-body-content .wp-format-image p.use-url-or-html {
padding-top: 10px;
clear: both;
width: 40%;
text-align: center;
}
body.wp-format-image .attachment-display-settings {
display: none;
}
body.wp-format-status #titlewrap,
body.wp-format-image .wp-media-buttons .insert-media,
body.wp-format-audio .wp-media-buttons .insert-media,
body.wp-format-video .wp-media-buttons .insert-media,
body.wp-format-aside .wp-media-buttons .insert-media,
body.wp-format-status .wp-media-buttons .insert-media {
display: none; display: none;
} }
@ -4072,7 +4131,8 @@ body .ui-slider-tooltip {
.wp-format-media-select { .wp-format-media-select {
display: block; display: block;
height: 200px; height: 20px;
padding: 55px 0 20px;
text-align: center; text-align: center;
} }
@ -4081,10 +4141,6 @@ body .ui-slider-tooltip {
max-height: 100%; max-height: 100%;
} }
.wp-format-media-select {
height: 20px;
}
.empty .wp-format-media-metaedit { .empty .wp-format-media-metaedit {
height: 20px; height: 20px;
display: block; display: block;
@ -4101,56 +4157,56 @@ body .ui-slider-tooltip {
#wp_format_video { #wp_format_video {
float: left; float: left;
margin-right: 23px; margin-right: 23px;
max-width: 50%; max-width: 40%;
min-height: 97px; min-height: 97px;
} }
#icon-edit.wp-format-standard, body.wp-format-standard #icon-edit,
.post-format-options .standard { .post-format-options .standard {
background: url(../images/post-formats32.png) no-repeat -3px -4px; background: url(../images/post-formats32.png) no-repeat -3px -4px;
} }
#icon-edit.wp-format-image, body.wp-format-image #icon-edit,
.post-format-options .image { .post-format-options .image {
background: url(../images/post-formats32.png) no-repeat -43px -4px; background: url(../images/post-formats32.png) no-repeat -43px -4px;
} }
#icon-edit.wp-format-gallery, body.wp-format-gallery #icon-edit,
.post-format-options .gallery { .post-format-options .gallery {
background: url(../images/post-formats32.png) no-repeat -83px -4px; background: url(../images/post-formats32.png) no-repeat -83px -4px;
} }
#icon-edit.wp-format-audio, body.wp-format-audio #icon-edit,
.post-format-options .audio { .post-format-options .audio {
background: url(../images/post-formats32.png) no-repeat -123px -4px; background: url(../images/post-formats32.png) no-repeat -123px -4px;
} }
#icon-edit.wp-format-video, body.wp-format-video #icon-edit,
.post-format-options .video { .post-format-options .video {
background: url(../images/post-formats32.png) no-repeat -163px -4px; background: url(../images/post-formats32.png) no-repeat -163px -4px;
} }
#icon-edit.wp-format-chat, body.wp-format-chat #icon-edit,
.post-format-options .chat { .post-format-options .chat {
background: url(../images/post-formats32.png) no-repeat -202px -4px; background: url(../images/post-formats32.png) no-repeat -202px -4px;
} }
#icon-edit.wp-format-status, body.wp-format-status #icon-edit,
.post-format-options .status { .post-format-options .status {
background: url(../images/post-formats32.png) no-repeat -242px -4px; background: url(../images/post-formats32.png) no-repeat -242px -4px;
} }
#icon-edit.wp-format-aside, body.wp-format-aside #icon-edit,
.post-format-options .aside { .post-format-options .aside {
background: url(../images/post-formats32.png) no-repeat -282px -4px; background: url(../images/post-formats32.png) no-repeat -282px -4px;
} }
#icon-edit.wp-format-quote, body.wp-format-quote #icon-edit,
.post-format-options .quote { .post-format-options .quote {
background: url(../images/post-formats32.png) no-repeat -322px -4px; background: url(../images/post-formats32.png) no-repeat -322px -4px;
} }
#icon-edit.wp-format-link, body.wp-format-link #icon-edit,
.post-format-options .link { .post-format-options .link {
background: url(../images/post-formats32.png) no-repeat -362px -4px; background: url(../images/post-formats32.png) no-repeat -362px -4px;
} }

19
wp-admin/includes/post-formats.php
View File

@ -38,20 +38,25 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
?> ?>
</div> </div>
<?php endif ?> <?php endif ?>
<label for="wp_format_image"><?php
if ( current_user_can( 'unfiltered_html' ) )
_e( 'Image HTML or URL' );
else
_e( 'Image URL' );
?></label>
<textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
<div data-format="image" class="wp-format-media-holder hide-if-no-js"> <div data-format="image" class="wp-format-media-holder hide-if-no-js">
<div><h3><?php _e( 'Drop image file to upload' ); ?></h3></div>
<a href="#" class="wp-format-media-select" <a href="#" class="wp-format-media-select"
data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>" data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
data-update="<?php esc_attr_e( 'Select Image' ); ?>"> data-update="<?php esc_attr_e( 'Select Image' ); ?>">
<?php _e( 'Select / Upload Image' ); ?> <?php _e( 'Select / Upload Image' ); ?>
</a> </a>
</div> </div>
<div class="wp-format-image-textarea hide-if-js">
<label for="wp_format_image"><?php
if ( current_user_can( 'unfiltered_html' ) )
_e( 'Image HTML or URL' );
else
_e( 'Image URL' );
?></label>
<textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
</div>
<p class="use-url-or-html hide-if-no-js"><span><?php printf( __( '(or %suse an image URL or HTML%s)' ), '<a href="#">', '</a>' ); ?></span>
<span style="display: none"><?php printf( __( '(or %sselect/upload an image%s)' ), '<a href="#">', '</a>' ); ?></span></p>
</div> </div>
<div class="field wp-format-link"> <div class="field wp-format-link">

74
wp-admin/js/post-formats.js
View File

@ -6,6 +6,7 @@ window.wp = window.wp || {};
"use strict"; "use strict";
var mediaFrame, insertMediaButton, container, icon, formatField, var mediaFrame, insertMediaButton, container, icon, formatField,
body,
lastMimeType, lastMimeType,
classRegex = /\s?\bwp-format-[^ ]+/g, classRegex = /\s?\bwp-format-[^ ]+/g,
shortHeight = 120, shortHeight = 120,
@ -17,16 +18,65 @@ window.wp = window.wp || {};
shortContentFormats = ['status', 'aside'], shortContentFormats = ['status', 'aside'],
noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery']; noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
function imageFormatUploadProgress( uploader, file ) {
var $bar = $( '#' + uploader.settings.drop_element + ' .media-progress-bar div' );
$bar.width( file.percent + '%' );
}
function imageFormatUploadStart( uploader ) {
$( '#' + uploader.settings.drop_element + ' .wp-format-media-select' ).append('<div class="media-progress-bar"><div></div></div>');
}
function imageFormatUploadError() {
$( '.media-progress-bar', $('.wp-format-media-holder[data-format=image]') ).remove();
}
function imageFormatUploadSuccess( attachment ) {
var $holder, $field, html = wp.media.string.image({
size : 'full',
align : false,
link : getUserSetting( 'urlbutton' )
}, attachment.attributes );
$holder = $('.wp-format-media-holder[data-format=image]');
$( '.media-progress-bar', $holder ).remove();
if ( 'image' !== attachment.attributes.type )
return;
$field = $( '#wp_format_' + $holder.data( 'format' ) );
// set the hidden input's value
$field.val( html );
$( '#image-preview' ).remove();
$holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
'<img src="', attachment.get('url'), '"',
attachment.get('width') ? ' width="' + attachment.get('width') + '"' : '',
attachment.get('height') ? ' height="' + attachment.get('height') + '"' : '',
' />',
'</div>'].join( '' ) );
}
var uploader = {
dropzone: $('.wp-format-media-holder[data-format=image]'),
success: imageFormatUploadSuccess,
error: imageFormatUploadError,
plupload: {},
params: {}
};
uploader = new wp.Uploader( uploader );
uploader.uploader.bind( 'BeforeUpload', imageFormatUploadStart );
uploader.uploader.bind( 'UploadProgress', imageFormatUploadProgress );
function switchFormatClass( format ) { function switchFormatClass( format ) {
formatField.val( format ); formatField.val( format );
container $.each( [ container, icon, body ], function(i, thing) {
.prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) ) thing.prop( 'className', thing.prop( 'className' ).replace( classRegex, '' ) )
.addClass( 'wp-format-' + format );
icon
.prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
.addClass( 'wp-format-' + format ); .addClass( 'wp-format-' + format );
});
} }
function resizeContent( format, noAnimate ) { function resizeContent( format, noAnimate ) {
@ -137,6 +187,7 @@ window.wp = window.wp || {};
} }
$(function () { $(function () {
body = $( 'body' );
container = $( '#post-body-content' ); container = $( '#post-body-content' );
icon = $( '.icon32' ); icon = $( '.icon32' );
formatField = $( '#post_format' ); formatField = $( '#post_format' );
@ -163,6 +214,13 @@ window.wp = window.wp || {};
switchFormat( $( e.currentTarget ) ); switchFormat( $( e.currentTarget ) );
} ); } );
// Toggle select/upload and URL/HTML for images
$( '.use-url-or-html' ).on( 'click', 'a', function(e) {
e.preventDefault();
$( '.wp-format-media-holder, .wp-format-image-textarea' ).toggle();
$(this).closest( 'p' ).find( 'span' ).toggle();
});
// Media selection // Media selection
$( '.wp-format-media-select' ).click( function (e) { $( '.wp-format-media-select' ).click( function (e) {
e.preventDefault(); e.preventDefault();
@ -242,8 +300,8 @@ window.wp = window.wp || {};
mediaPreview( attachment ); mediaPreview( attachment );
} else { } else {
html = wp.media.string.image({ html = wp.media.string.image({
align : getUserSetting( 'align' ), size: 'full',
size : getUserSetting( 'imgsize' ), align : false,
link : getUserSetting( 'urlbutton' ) link : getUserSetting( 'urlbutton' )
}, attachment); }, attachment);

4
wp-includes/post-formats.php
View File

@ -24,7 +24,7 @@ function get_post_format( $post = null ) {
$_format = get_the_terms( $post->ID, 'post_format' ); $_format = get_the_terms( $post->ID, 'post_format' );
if ( empty( $_format ) ) if ( empty( $_format ) )
return false; return '';
$format = array_shift( $_format ); $format = array_shift( $_format );
@ -1012,4 +1012,4 @@ function _post_formats_fix_empty_title( $data, $postarr ) {
$data['post_title'] = _post_formats_generate_title( $data['post_content'], $post_format ); $data['post_title'] = _post_formats_generate_title( $data['post_content'], $post_format );
return $data; return $data;
} }

2
wp-includes/script-loader.php
View File

@ -407,7 +407,7 @@ function wp_default_scripts( &$scripts ) {
'comma' => _x( ',', 'tag delimiter' ), 'comma' => _x( ',', 'tag delimiter' ),
) ); ) );
$scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 ); $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
$scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 ); $scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );