From f63001eb2cee7fe6a704df98a0682c8e61e1979f Mon Sep 17 00:00:00 2001 From: Mark Jaquith Date: Thu, 9 May 2013 22:45:14 +0000 Subject: [PATCH] Improve the UX and flow of the Image post format. * 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 class props DrewAPicture, aaroncampbell, markjaquith, azaozz. see #24291. git-svn-id: http://core.svn.wordpress.org/trunk@24226 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/admin-header.php | 13 ++- wp-admin/css/wp-admin.css | 138 ++++++++++++++++++++--------- wp-admin/includes/post-formats.php | 19 ++-- wp-admin/js/post-formats.js | 74 ++++++++++++++-- wp-includes/post-formats.php | 4 +- wp-includes/script-loader.php | 2 +- 6 files changed, 190 insertions(+), 60 deletions(-) diff --git a/wp-admin/admin-header.php b/wp-admin/admin-header.php index 8de0981782..9e15168527 100644 --- a/wp-admin/admin-header.php +++ b/wp-admin/admin-header.php @@ -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 .= ' 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() ) $admin_body_class .= ' mobile'; @@ -98,7 +109,7 @@ $admin_body_class .= ' no-customize-support'; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 1648ab70b7..5fea972861 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -4004,19 +4004,19 @@ body .ui-slider-tooltip { margin-bottom: 15px; } -.wp-format-gallery .post-formats-fields, -.wp-format-image .post-formats-fields, -.wp-format-link .post-formats-fields, -.wp-format-quote .post-formats-fields, -.wp-format-video .post-formats-fields, -.wp-format-audio .post-formats-fields, -.wp-format-gallery .field.wp-format-gallery, -.wp-format-image .field.wp-format-image, -.wp-format-chat .field.wp-format-chat, -.wp-format-link .field.wp-format-link, -.wp-format-quote .field.wp-format-quote, -.wp-format-video .field.wp-format-video, -.wp-format-audio .field.wp-format-audio { +#post-body-content.wp-format-gallery .post-formats-fields, +#post-body-content.wp-format-image .post-formats-fields, +#post-body-content.wp-format-link .post-formats-fields, +#post-body-content.wp-format-quote .post-formats-fields, +#post-body-content.wp-format-video .post-formats-fields, +#post-body-content.wp-format-audio .post-formats-fields, +#post-body-content.wp-format-gallery .field.wp-format-gallery, +#post-body-content.wp-format-image .field.wp-format-image, +#post-body-content.wp-format-chat .field.wp-format-chat, +#post-body-content.wp-format-link .field.wp-format-link, +#post-body-content.wp-format-quote .field.wp-format-quote, +#post-body-content.wp-format-video .field.wp-format-video, +#post-body-content.wp-format-audio .field.wp-format-audio { display: block; } @@ -4032,9 +4032,9 @@ body .ui-slider-tooltip { font-size: 1.2em; } -.wp-format-image label, -.wp-format-video label, -.wp-format-audio label { +#post-body-content.wp-format-image label, +#post-body-content.wp-format-video label, +#post-body-content.wp-format-audio label { float: left; } @@ -4043,25 +4043,84 @@ body .ui-slider-tooltip { overflow: hidden; width: 40%; height: auto; - padding: 55px 0 20px; border: 1px dashed #dfdfdf; background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%; + box-sizing: border-box; + position:relative; } .wp-format-media-holder:hover { background-color: #eee; } -.wp-format-media-preview { - margin-bottom: 20px; +.wp-format-media-holder.drag-over { + background: rgba( 0, 86, 132, 0.9 ); + border-color:transparent; } -.wp-format-status #titlewrap, -.wp-format-image .wp-media-buttons .insert-media, -.wp-format-audio .wp-media-buttons .insert-media, -.wp-format-video .wp-media-buttons .insert-media, -.wp-format-aside .wp-media-buttons .insert-media, -.wp-format-status .wp-media-buttons .insert-media { +.wp-format-media-holder div { + display: none; +} +.wp-format-media-holder.drag-over div { + position: absolute; + 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; } @@ -4072,7 +4131,8 @@ body .ui-slider-tooltip { .wp-format-media-select { display: block; - height: 200px; + height: 20px; + padding: 55px 0 20px; text-align: center; } @@ -4081,10 +4141,6 @@ body .ui-slider-tooltip { max-height: 100%; } -.wp-format-media-select { - height: 20px; -} - .empty .wp-format-media-metaedit { height: 20px; display: block; @@ -4101,56 +4157,56 @@ body .ui-slider-tooltip { #wp_format_video { float: left; margin-right: 23px; - max-width: 50%; + max-width: 40%; min-height: 97px; } -#icon-edit.wp-format-standard, +body.wp-format-standard #icon-edit, .post-format-options .standard { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { background: url(../images/post-formats32.png) no-repeat -362px -4px; } diff --git a/wp-admin/includes/post-formats.php b/wp-admin/includes/post-formats.php index 8e0bef85ed..1409098cb8 100644 --- a/wp-admin/includes/post-formats.php +++ b/wp-admin/includes/post-formats.php @@ -38,20 +38,25 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce' ?> - -
+

+
+ + +
+

', '' ); ?> + ', '' ); ?>

diff --git a/wp-admin/js/post-formats.js b/wp-admin/js/post-formats.js index 2775be84ae..b37bc0d91f 100644 --- a/wp-admin/js/post-formats.js +++ b/wp-admin/js/post-formats.js @@ -6,6 +6,7 @@ window.wp = window.wp || {}; "use strict"; var mediaFrame, insertMediaButton, container, icon, formatField, + body, lastMimeType, classRegex = /\s?\bwp-format-[^ ]+/g, shortHeight = 120, @@ -17,16 +18,65 @@ window.wp = window.wp || {}; shortContentFormats = ['status', 'aside'], 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('
'); + } + + 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( ['
', + '', + '
'].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 ) { formatField.val( format ); - container - .prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) ) - .addClass( 'wp-format-' + format ); - - icon - .prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) ) + $.each( [ container, icon, body ], function(i, thing) { + thing.prop( 'className', thing.prop( 'className' ).replace( classRegex, '' ) ) .addClass( 'wp-format-' + format ); + }); } function resizeContent( format, noAnimate ) { @@ -137,6 +187,7 @@ window.wp = window.wp || {}; } $(function () { + body = $( 'body' ); container = $( '#post-body-content' ); icon = $( '.icon32' ); formatField = $( '#post_format' ); @@ -163,6 +214,13 @@ window.wp = window.wp || {}; 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 $( '.wp-format-media-select' ).click( function (e) { e.preventDefault(); @@ -242,8 +300,8 @@ window.wp = window.wp || {}; mediaPreview( attachment ); } else { html = wp.media.string.image({ - align : getUserSetting( 'align' ), - size : getUserSetting( 'imgsize' ), + size: 'full', + align : false, link : getUserSetting( 'urlbutton' ) }, attachment); diff --git a/wp-includes/post-formats.php b/wp-includes/post-formats.php index 89fcfd0294..f5e90aef27 100644 --- a/wp-includes/post-formats.php +++ b/wp-includes/post-formats.php @@ -24,7 +24,7 @@ function get_post_format( $post = null ) { $_format = get_the_terms( $post->ID, 'post_format' ); if ( empty( $_format ) ) - return false; + return ''; $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 ); return $data; -} \ No newline at end of file +} diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 3f6250ae4c..786bffd861 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -407,7 +407,7 @@ function wp_default_scripts( &$scripts ) { '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 );