Index: wp-admin/js/post-formats.js =================================================================== --- wp-admin/js/post-formats.js (revision 23797) +++ wp-admin/js/post-formats.js (working copy) @@ -1,20 +1,25 @@ (function($){ - // Post formats selection - $('.post-format-select a').on( 'click.post-format', function(e) { + $('.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'); - $('.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 + $('.post-format-description').html($this.data('description')); + if ( typeof tinymce != 'undefined' ) { editor = tinymce.get('content'); @@ -25,7 +30,12 @@ } } + 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); Index: wp-admin/edit-form-advanced.php =================================================================== --- wp-admin/edit-form-advanced.php (revision 23797) +++ wp-admin/edit-form-advanced.php (working copy) @@ -138,6 +138,57 @@ $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 description for your post below.') + ), + 'image' => array ( + 'description' => __('Select an image using the Add Media button below.') + ), + 'gallery' => array ( + 'description' => __('Use the Add Media button below to select images for your gallery.') + ), + 'link' => array ( + 'description' => __('Add a link URL below.') + ), + 'video' => array ( + 'description' => __('Paste a video embed URL below, or click Add Media to upload a video.') + ), + 'audio' => array ( + 'description' => __('Paste an audio embed URL below, or click Add Media to upload an audio file.') + ), + 'chat' => array ( + 'description' => __('Paste a chat transcript below.') + ), + 'status' => array ( + 'description' => __('What are you up to? Enter your status message below.') + ), + 'quote' => array ( + 'description' => __('Enter a quote below.') + ), + 'aside' => array ( + 'description' => __('Enter a quick thought or side topic below.') + ) + ); + $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 +388,17 @@ ?>
- -'; - - 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 + +
+
+ +
Index: wp-admin/css/wp-admin-rtl.css =================================================================== --- wp-admin/css/wp-admin-rtl.css (revision 23797) +++ wp-admin/css/wp-admin-rtl.css (working copy) @@ -23,6 +23,7 @@ 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 @@ -964,6 +965,33 @@ } /*------------------------------------------------------------------------------ + 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 ------------------------------------------------------------------------------*/ Index: wp-admin/css/wp-admin.css =================================================================== --- wp-admin/css/wp-admin.css (revision 23797) +++ wp-admin/css/wp-admin.css (working copy) @@ -24,6 +24,7 @@ 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 @@ -4061,6 +4062,150 @@ } /*------------------------------------------------------------------------------ + 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; + 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 ------------------------------------------------------------------------------*/