diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index ba157f570d..e04fafd8cf 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/wp-admin/css/wp-admin-rtl.css @@ -23,6 +23,7 @@ TABLE OF CONTENTS: 11.1 - Custom Fields 11.2 - Post Revisions 11.3 - Featured Images + 11.4 - Post Format Selection 12.0 - Categories 13.0 - Tags 14.0 - Media Screen @@ -966,6 +967,33 @@ table.diff td, table.diff th { float: right; } +/*------------------------------------------------------------------------------ + 11.4 - Post format selection +------------------------------------------------------------------------------*/ + +.post-format-options a { + border-left: 1px solid #ebebeb; + border-right: none; +} + +.post-format-options a:first-child { + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.post-format-options a:last-child { + -webkit-border-bottom-right-radius: 3px; + -webkit-border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} + +.post-format-tip { + float: left; +} + /*------------------------------------------------------------------------------ 12.0 - Categories ------------------------------------------------------------------------------*/ diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 7fb44bc2ab..5fd2a0726e 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -24,6 +24,7 @@ TABLE OF CONTENTS: 11.1 - Custom Fields 11.2 - Post Revisions 11.3 - Featured Images + 11.4 - Post Format Selection 12.0 - Categories 13.0 - Tags 14.0 - Media Screen @@ -3150,10 +3151,14 @@ input#link_url { display: none; } +.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, @@ -3165,6 +3170,7 @@ input#link_url { .post-formats-fields .field { display: none; margin-bottom: 10px; + overflow: hidden; } .post-formats-fields input, @@ -3173,6 +3179,66 @@ input#link_url { font-size: 1.2em; } +.wp-format-media-holder { + float: left; + overflow: hidden; + width: 40%; + height: 200px; + border: 1px dashed #dfdfdf; + background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%; +} + +.wp-format-media-holder.empty { + height: auto; + padding: 55px 0 20px; +} + +.wp-format-media-holder:hover { + background-color: #eee; +} + +.wp-format-media-preview { + margin-bottom: 20px; +} + +.mejs-audio audio, +.mejs-video video { + display: block; +} + +.wp-format-media-select { + display: block; + height: 200px; + text-align: center; +} + +.wp-format-media-select img { + max-width: 100%; + max-height: 100%; +} + +.empty .wp-format-media-select { + height: 20px; +} + +.empty .wp-format-media-metaedit { + height: 20px; + display: block; + text-align: center; +} + +.edit-format-preview { + display: block; + margin: 5px 0; +} + +#wp_format_audio, #wp_format_video { + float: left; + margin-right: 23px; + max-width: 50%; + min-height: 97px; +} + /* Post Screen */ #post-body #normal-sortables { min-height: 50px; @@ -4065,6 +4131,151 @@ body .ui-tooltip { display: none; } +/*------------------------------------------------------------------------------ + 11.4 - Post format selection +------------------------------------------------------------------------------*/ + +#icon-edit.standard { + background: url(../images/post-formats32.png) no-repeat -3px -4px; +} + +#icon-edit.image { + background: url(../images/post-formats32.png) no-repeat -43px -4px; +} + +#icon-edit.gallery { + background: url(../images/post-formats32.png) no-repeat -83px -4px; +} + +#icon-edit.audio { + background: url(../images/post-formats32.png) no-repeat -123px -4px; +} + +#icon-edit.video { + background: url(../images/post-formats32.png) no-repeat -163px -4px; +} + +#icon-edit.chat { + background: url(../images/post-formats32.png) no-repeat -202px -4px; +} + +#icon-edit.status { + background: url(../images/post-formats32.png) no-repeat -242px -4px; +} + +#icon-edit.aside { + background: url(../images/post-formats32.png) no-repeat -282px -4px; +} + +#icon-edit.quote { + background: url(../images/post-formats32.png) no-repeat -322px -4px; +} + +#icon-edit.link { + background: url(../images/post-formats32.png) no-repeat -362px -4px; +} + +.post-format-description { + color: #666; + display: none; + margin: 10px 0; +} + +.post-format-options { + height: 29px; + background: #f9f9f9; + border: 1px solid #dfdfdf; + -webkit-border-radius: 3px; + border-radius: 3px; + margin: 0 0 9px 1px; + padding: 0; +} + +.post-format-options a { + border-right: 1px solid #ebebeb; + display: inline-block; + height: 16px; + width: 16px; + padding: 6px; + position: relative; + text-decoration: none; +} + +.post-format-options a:first-child { + -webkit-border-bottom-left-radius: 3px; + -webkit-border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} + +.post-format-options a.active, +.post-format-options a:focus, +.post-format-options a:hover { + background: #fff; + outline: none; + opacity: 1; +} + +.post-format-options a div { + height: 16px; + width: 16px; + opacity: 0.4; +} + +.post-format-options a.active div, +.post-format-options a:focus div, +.post-format-options a:hover div { + opacity: 1; +} + +.post-format-options .standard { + background: url(../images/post-formats.png) no-repeat -8px -8px; +} + +.post-format-options .image { + background: url(../images/post-formats.png) no-repeat -40px -8px; +} + +.post-format-options .gallery { + background: url(../images/post-formats.png) no-repeat -72px -8px; +} + +.post-format-options .audio { + background: url(../images/post-formats.png) no-repeat -104px -8px; +} + +.post-format-options .video { + background: url(../images/post-formats.png) no-repeat -136px -8px; +} + +.post-format-options .chat { + background: url(../images/post-formats.png) no-repeat -168px -8px; +} + +.post-format-options .status { + background: url(../images/post-formats.png) no-repeat -200px -8px; +} + +.post-format-options .aside { + background: url(../images/post-formats.png) no-repeat -232px -8px; +} + +.post-format-options .quote { + background: url(../images/post-formats.png) no-repeat -264px -8px; +} + +.post-format-options .link { + background: url(../images/post-formats.png) no-repeat -296px -8px; +} + +.post-format-tip { + color: #999; + font-size: 14px; + float: right; + padding: 6px 10px; + text-transform: capitalize; +} + /*------------------------------------------------------------------------------ 12.0 - Categories ------------------------------------------------------------------------------*/ diff --git a/wp-admin/edit-form-advanced.php b/wp-admin/edit-form-advanced.php index c7e8dc6554..6cb098fd86 100644 --- a/wp-admin/edit-form-advanced.php +++ b/wp-admin/edit-form-advanced.php @@ -130,6 +130,8 @@ foreach ( get_object_taxonomies( $post ) as $tax_name ) { $format_class = ''; if ( post_type_supports( $post_type, 'post-formats' ) ) { wp_enqueue_script( 'post-formats' ); + wp_enqueue_script( 'wp-mediaelement' ); + wp_enqueue_style( 'wp-mediaelement' ); $post_format = get_post_format(); if ( ! $post_format ) @@ -138,6 +140,57 @@ if ( post_type_supports( $post_type, 'post-formats' ) ) { $format_class = " class='wp-format-{$post_format}'"; } +if ( post_type_supports( $post_type, 'post-formats' ) ) { + $all_post_formats = array( + 'standard' => array ( + 'description' => __( 'Add a title and use the editor to compose your post.' ) + ), + 'image' => array ( + 'description' => __( 'Select or upload an image to use for your post.' ) + ), + 'gallery' => array ( + 'description' => __( 'Use the Add Media button to select or upload images for your gallery.' ) + ), + 'link' => array ( + 'description' => __( 'Add a link URL below.' ) + ), + 'video' => array ( + 'description' => __( 'Paste a video embed into the box, upload a video file, or choose one from your Media Library.' ) + ), + 'audio' => array ( + 'description' => __( 'Paste an audio embed into the box, upload an audio file, or choose one from your Media Library.' ) + ), + 'chat' => array ( + 'description' => __( 'Copy a chat or Q&A transcript into the editor.' ) + ), + 'status' => array ( + 'description' => __( 'Use the editor to compose a status update. What’s new?' ) + ), + 'quote' => array ( + 'description' => __( 'Copy a quotation into the box. Also add the source and URL if you have them.' ) + ), + 'aside' => array ( + 'description' => __( 'An aside is a quick thought or side topic. Use the editor to compose one.' ) + ) + ); + $post_format_options = ''; + + foreach ( $all_post_formats as $slug => $attr ) { + $class = ''; + if ( $post_format == $slug ) { + $class = 'class="active"'; + $active_post_type_slug = $slug; + $active_post_type_label = ucfirst( $slug ); + $active_post_format_description = $attr['description']; + } + + $post_format_options .= '
'; + } +} + +$current_post_format = array( 'currentPostFormat' => esc_html( $active_post_type_slug ) ); +wp_localize_script( 'post', 'postFormats', $current_post_format ); + if ( post_type_supports($post_type, 'page-attributes') ) add_meta_box('pageparentdiv', 'page' == $post_type ? __('Page Attributes') : __('Attributes'), 'page_attributes_meta_box', null, 'side', 'core'); @@ -337,29 +390,16 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false ); ?>
- -'; - - foreach ( $all_post_formats as $slug => $label ) { - if ( $post_format == $slug ) - $class = 'nav-tab nav-tab-active'; - else - $class = 'nav-tab'; - - echo '' . $label . ''; - } - - echo ''; -} -?> -
> + +
+ Standard Post + +
+ +
@@ -373,10 +413,12 @@ $shortlink = wp_get_shortlink($post->ID, 'post'); if ( !empty($shortlink) ) $sample_permalink_html .= '' . __('Get Shortlink') . ''; -if ( $post_type_object->public && ! ( 'pending' == get_post_status( $post ) && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { ?> -
+if ( $post_type_object->public && ! ( 'pending' == get_post_status( $post ) && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { + $has_sample_permalink = $sample_permalink_html && 'auto-draft' != $post->post_status; +?> + @@ -398,36 +440,8 @@ if ( has_action( 'edit_form_after_title' ) ) { } // post format fields -if ( post_type_supports( $post_type, 'post-formats' ) ) { - $format_meta = get_post_format_meta( $post_ID ); -?> -
- - - -
- - -
- -
- - -
- - - -
- - -
- -
- diff --git a/wp-admin/images/post-formats32.png b/wp-admin/images/post-formats32.png new file mode 100644 index 0000000000..9c1239a7b4 Binary files /dev/null and b/wp-admin/images/post-formats32.png differ diff --git a/wp-admin/includes/post-formats.php b/wp-admin/includes/post-formats.php new file mode 100644 index 0000000000..a1bf209597 --- /dev/null +++ b/wp-admin/includes/post-formats.php @@ -0,0 +1,114 @@ + +
+
+ + + +
+ + +
+ +
+ + +
+ + + + + + + +
+ +
+ ]+>#', $format_meta['video'] ) ) { + if ( strstr( $format_meta['video'], home_url() ) ) + echo do_shortcode( sprintf( '[video src="%s"]', $format_meta['video'] ) ); + else + echo $wp_embed->autoembed( $format_meta['video'] ); + } else { + echo $format_meta['video']; + } + ?> +
+ + + +
+ + + +
+
+ + +
+ +
+ ]+>#', $format_meta['audio'] ) ) { + if ( strstr( $format_meta['audio'], home_url() ) ) + echo do_shortcode( sprintf( '[audio src="%s"]', $format_meta['audio'] ) ); + else + echo $wp_embed->autoembed( $format_meta['audio'] ); + } else { + echo $format_meta['audio']; + } + ?> +
+ + + +
+ + + +
+
+
\ No newline at end of file diff --git a/wp-admin/includes/post.php b/wp-admin/includes/post.php index 6167b3e356..2bf7b2b2a5 100644 --- a/wp-admin/includes/post.php +++ b/wp-admin/includes/post.php @@ -200,7 +200,7 @@ function edit_post( $post_data = null ) { update_post_meta( $post_ID, '_wp_format_url', wp_slash( esc_url_raw( wp_unslash( $post_data['_wp_format_url'] ) ) ) ); } - $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'media' ); + $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'image', 'gallery', 'audio', 'video' ); foreach ( $format_keys as $key ) { if ( isset( $post_data[ '_wp_format_' . $key ] ) ) diff --git a/wp-admin/includes/screen.php b/wp-admin/includes/screen.php index 7103c8445d..b82134e1d8 100644 --- a/wp-admin/includes/screen.php +++ b/wp-admin/includes/screen.php @@ -142,11 +142,13 @@ function screen_icon( $screen = '' ) { * * @since 3.2.0 * + * @global $post_ID * @param string|WP_Screen $screen Optional. Accepts a screen object (and defaults to the current screen object) * which it uses to determine an icon HTML ID. Or, if a string is provided, it is used to form the icon HTML ID. * @return string HTML for the screen icon. */ function get_screen_icon( $screen = '' ) { + global $post_ID; if ( empty( $screen ) ) $screen = get_current_screen(); elseif ( is_string( $screen ) ) @@ -165,6 +167,12 @@ function get_screen_icon( $screen = '' ) { if ( $screen->post_type ) $class .= ' ' . sanitize_html_class( 'icon32-posts-' . $screen->post_type ); + + if ( $post_ID ) { + $format = get_post_format( $post_ID ); + if ( $format ) + $class .= ' ' . $format; + } } return '

'; diff --git a/wp-admin/js/post-formats.js b/wp-admin/js/post-formats.js index 75f7f9068a..4a1b52737f 100644 --- a/wp-admin/js/post-formats.js +++ b/wp-admin/js/post-formats.js @@ -1,19 +1,30 @@ -(function($){ +window.wp = window.wp || {}; + +(function($) { + var mediaFrame, lastMimeType, lastMenu, mediaPreview; // Post formats selection - $('.post-format-select a').on( 'click.post-format', function(e) { - var $this = $(this), - editor, - body, + $('.post-format-options a').on( 'click', function(e){ + var $this = $(this), editor, body, + parent = $this.parent(), format = $this.data('wp-format'), - container = $('#post-body-content'); + container = $('#post-body-content'), + description = $('.post-format-description'); - $('.post-format-select a.nav-tab-active').removeClass('nav-tab-active'); - $this.addClass('nav-tab-active').blur(); + parent.find('a.active').removeClass('active'); + $this.addClass('active'); + $('#icon-edit').removeClass(postFormats.currentPostFormat).addClass(format); $('#post_format').val(format); container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' ); container.addClass('wp-format-' + format); + $('#title').focus(); + + // Update description line + description.html($this.data('description')); + + if (description.not(':visible')) + description.slideDown('fast'); if ( typeof tinymce != 'undefined' ) { editor = tinymce.get('content'); @@ -25,7 +36,95 @@ } } + postFormats.currentPostFormat = format; + e.preventDefault(); + }).on('mouseenter focusin', function () { + $('.post-format-tip').html( $(this).prop('title') ); + }).on('mouseleave focusout', function () { + $('.post-format-tip').html( $('.post-format-options a.active').prop('title') ); }); -})(jQuery); + // Media selection + $('.wp-format-media-select').click(function (event) { + event.preventDefault(); + var $el = $(this), $holder, $field, mime = 'image', menu = '', + $holder = $el.closest('.wp-format-media-holder'), + $field = $( '#wp_format_' + $holder.data('format') ); + + switch ( $holder.data('format') ) { + case 'audio': + mime = 'audio'; + break; + case 'video': + mime = 'video'; + break; + } + + // If the media frame already exists, reopen it. + if ( mediaFrame && lastMimeType === mime && lastMenu === menu ) { + mediaFrame.open(); + return; + } + + lastMimeType = mime; + lastMenu = menu; + + // Create the media frame. + mediaFrame = wp.media.frames.formatMedia = wp.media({ + // Set the title of the modal. + title: $el.data('choose'), + + // Set the menu sidebar of the modal, if applicable + toolbar: menu, + + // Tell the modal to show only items matching the current mime type. + library: { + type: mime + }, + + // Customize the submit button. + button: { + // Set the text of the button. + text: $el.data('update') + } + }); + + mediaPreview = function (format, url, mime) { + $('#' + format + '-preview').remove(); + $holder.parent().prepend( '
' + + '<' + format + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' + + '' + + '
' ); + $('.wp-' + format + '-shortcode').mediaelementplayer(); + }; + + // When an image is selected, run a callback. + mediaFrame.on( 'select', function () { + // Grab the selected attachment. + var attachment = mediaFrame.state().get('selection').first(), mime, url, id; + + id = attachment.get('id'); + url = attachment.get('url'); + mime = attachment.get('mime'); + + if ( 0 === mime.indexOf('audio') ) { + $field.val(url); + // show one preview at a time + mediaPreview('audio', url, mime); + } else if ( 0 === mime.indexOf('video') ) { + $field.val(url); + // show one preview at a time + mediaPreview('video', url, mime); + } else { + // set the hidden input's value + $field.val(url); + // Show the image in the placeholder + $el.html(''); + $holder.removeClass('empty').show(); + } + }); + + mediaFrame.open(); + }); +})(jQuery); \ No newline at end of file diff --git a/wp-admin/js/post.js b/wp-admin/js/post.js index e84f388f6c..49f7a0c938 100644 --- a/wp-admin/js/post.js +++ b/wp-admin/js/post.js @@ -641,7 +641,13 @@ jQuery(document).ready( function($) { new_title: $('#title').val(), samplepermalinknonce: $('#samplepermalinknonce').val() }, function(data) { - $('#edit-slug-box').html(data); + var box = $('#edit-slug-box'); + box.html(data); + if (box.hasClass('hidden')) { + box.fadeIn('fast', function () { + box.removeClass('hidden'); + }); + } b.html(revert_b); real_slug.val(new_slug); makeSlugeditClickable(); diff --git a/wp-includes/js/autosave.js b/wp-includes/js/autosave.js index 43b2b4eb88..e185a60224 100644 --- a/wp-includes/js/autosave.js +++ b/wp-includes/js/autosave.js @@ -199,7 +199,13 @@ function autosave_update_slug(post_id) { }, function(data) { if ( data !== '-1' ) { - jQuery('#edit-slug-box').html(data); + var box = jQuery('#edit-slug-box'); + box.html(data); + if (box.hasClass('hidden')) { + box.fadeIn('fast', function () { + box.removeClass('hidden'); + }); + } makeSlugeditClickable(); } } diff --git a/wp-includes/media.php b/wp-includes/media.php index 9dbef91c3e..dfcb62cc35 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -2043,21 +2043,21 @@ function get_the_media( $type, &$post = null ) { if ( has_post_format( $type ) ) { $meta = get_post_format_meta( $post->ID ); - if ( ! empty( $meta['media'] ) ) { - if ( is_numeric( $meta['media'] ) ) { - $url = wp_get_attachment_url( $meta['media'] ); + if ( ! empty( $meta[$type] ) ) { + if ( is_integer( $meta[$type] ) ) { + $url = wp_get_attachment_url( $meta[$type] ); $shortcode = sprintf( '[%s src="%s"]', $type, $url ); - } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['media'] ) ) { - $shortcode = $meta['media']; - } elseif ( preg_match( '#<[^>]+>#', $meta['media'] ) ) { - $post->format_content = $meta['media']; + } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta[$type] ) ) { + $shortcode = $meta[$type]; + } elseif ( preg_match( '#<[^>]+>#', $meta[$type] ) ) { + $post->format_content = $meta[$type]; return $post->format_content; - } elseif ( 0 === strpos( $meta['media'], 'http' ) ) { - $post->split_content = str_replace( $meta['media'], '', $post->post_content, $count ); - if ( strstr( $meta['media'], home_url() ) ) { - $shortcode = sprintf( '[%s src="%s"]', $type, $meta['media'] ); + } elseif ( 0 === strpos( $meta[$type], 'http' ) ) { + $post->split_content = str_replace( $meta[$type], '', $post->post_content, $count ); + if ( strstr( $meta[$type], home_url() ) ) { + $shortcode = sprintf( '[%s src="%s"]', $type, $meta[$type] ); } else { - $post->format_content = $wp_embed->autoembed( $meta['media'] ); + $post->format_content = $wp_embed->autoembed( $meta[$type] ); return $post->format_content; } } diff --git a/wp-includes/post-formats.php b/wp-includes/post-formats.php index 86bcd74389..5c347748e1 100644 --- a/wp-includes/post-formats.php +++ b/wp-includes/post-formats.php @@ -84,7 +84,10 @@ function get_post_format_meta( $post_id = 0 ) { 'quote' => '', 'quote_source' => '', 'url' => '', - 'media' => '', + 'image' => '', + 'gallery' => '', + 'audio' => '', + 'video' => '', ); foreach ( $values as $key => $value ) @@ -351,13 +354,17 @@ function post_formats_compat( $content, $id = 0 ) { case 'video': case 'audio': - if ( ! has_shortcode( $post->post_content, $format ) && ! empty( $meta['media'] ) ) { + if ( ! has_shortcode( $post->post_content, $format ) && ! empty( $meta[$format] ) ) { + // the metadata is an attachment ID + if ( is_numeric( $meta[$format] ) ) { + $url = wp_get_attachment_url( $meta[$format] ); + $format_output .= sprintf( '[%s src="%s"]', $format, $url ); // the metadata is a shortcode or an embed code - if ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['media'] ) || preg_match( '#<[^>]+>#', $meta['media'] ) ) { - $format_output .= $meta['media']; - } elseif ( ! stristr( $content, $meta['media'] ) ) { + } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta[$format] ) || preg_match( '#<[^>]+>#', $meta[$format] ) ) { + $format_output .= $meta[$format]; + } elseif ( ! stristr( $content, $meta[$format] ) ) { // attempt to embed the URL - $format_output .= sprintf( '[embed]%s[/embed]', $meta['media'] ); + $format_output .= sprintf( '[embed]%s[/embed]', $meta[$format] ); } } break;