Browse files

Post Format UI.

* Icons
* Selection
* Prompt text
* Special fields
* Styling
* Sparkles

This is going to need testing, polish, and love.

see #19570. props melchoyce, helen, wonderboymusic, lessbloat, rachelbaker, aaroncampbell, DrewAPicture, ryelle.

git-svn-id: http://core.svn.wordpress.org/trunk@23843 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information...
1 parent 3575abd commit c93e0231af38e65081f886d8583c3dd49c89d368 @markjaquith markjaquith committed Mar 29, 2013
View
28 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
@@ -967,6 +968,33 @@ table.diff td, table.diff th {
}
/*------------------------------------------------------------------------------
+ 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
------------------------------------------------------------------------------*/
View
211 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;
@@ -4066,6 +4132,151 @@ body .ui-tooltip {
}
/*------------------------------------------------------------------------------
+ 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
------------------------------------------------------------------------------*/
View
120 wp-admin/edit-form-advanced.php
@@ -130,6 +130,8 @@
$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 @@
$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 .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( sprintf( __( '%s Post' ), $slug ) ) . '"><div class="' . $slug . '"></div></a>';
+ }
+}
+
+$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 @@
?>
<div id="poststuff">
-
-<?php
-if ( post_type_supports( $post_type, 'post-formats' ) ) {
- $all_post_formats = get_post_format_strings();
-
- echo '<h2 class="nav-tab-wrapper post-format-select">';
-
- foreach ( $all_post_formats as $slug => $label ) {
- if ( $post_format == $slug )
- $class = 'nav-tab nav-tab-active';
- else
- $class = 'nav-tab';
-
- echo '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '">' . $label . '</a>';
- }
-
- echo '</h2>';
-}
-?>
-
<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
<div id="post-body-content"<?php echo $format_class; ?>>
+<?php if ( ! empty( $post_format_options ) ) : ?>
+<div class="post-format-options">
+ <span class="post-format-tip">Standard Post</span>
+ <?php echo $post_format_options; ?>
+</div>
+<?php endif; ?>
+
<?php if ( post_type_supports($post_type, 'title') ) { ?>
<div id="titlediv">
<div id="titlewrap">
@@ -373,10 +413,12 @@
if ( !empty($shortlink) )
$sample_permalink_html .= '<input id="shortlink" type="hidden" value="' . esc_attr($shortlink) . '" /><a href="#" class="button button-small" onclick="prompt(&#39;URL:&#39;, jQuery(\'#shortlink\').val()); return false;">' . __('Get Shortlink') . '</a>';
-if ( $post_type_object->public && ! ( 'pending' == get_post_status( $post ) && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { ?>
- <div id="edit-slug-box" class="hide-if-no-js">
+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;
+?>
+ <div id="edit-slug-box" class="hide-if-no-js<?php if ( ! $has_sample_permalink ) echo ' hidden' ?>">
<?php
- if ( $sample_permalink_html && 'auto-draft' != $post->post_status )
+ if ( $has_sample_permalink )
echo $sample_permalink_html;
?>
</div>
@@ -398,36 +440,8 @@
}
// post format fields
-if ( post_type_supports( $post_type, 'post-formats' ) ) {
- $format_meta = get_post_format_meta( $post_ID );
-?>
-<div class="post-formats-fields edit-form-section">
-
-<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
-
-<div class="field wp-format-quote">
- <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
- <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
-</div>
-
-<div class="field wp-format-quote">
- <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
- <input type="text" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" placeholder="<?php esc_attr_e( 'Quote source' ); ?>" class="widefat" />
-</div>
-
-<div class="field wp-format-link wp-format-quote">
- <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
- <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
-</div>
-
-<div class="field wp-format-audio wp-format-video">
- <label for="_wp_format_media" class="screen-reader-text"><?php _e( 'Embed code or URL' ); ?>:</label>
- <textarea name="_wp_format_media" placeholder="<?php esc_attr_e( 'Embed code or URL' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['media'] ); ?></textarea>
-</div>
-
-</div>
-<?php
-}
+if ( post_type_supports( $post_type, 'post-formats' ) )
+ require_once( './includes/post-formats.php' );
if ( post_type_supports($post_type, 'editor') ) {
?>
View
BIN wp-admin/images/post-formats32.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
114 wp-admin/includes/post-formats.php
@@ -0,0 +1,114 @@
+<?php
+global $wp_embed;
+$format_meta = get_post_format_meta( $post_ID );
+
+?>
+<div class="post-format-description"></div>
+<div class="post-formats-fields edit-form-section">
+
+ <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
+
+ <div class="field wp-format-quote">
+ <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
+ <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
+ </div>
+
+ <div class="field wp-format-quote">
+ <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
+ <input type="text" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" placeholder="<?php esc_attr_e( 'Quote source' ); ?>" class="widefat" />
+ </div>
+
+ <?php
+ $image = false;
+ if ( isset( $format_meta['image'] ) )
+ $image = is_numeric( $format_meta['image'] ) ? wp_get_attachment_url( $format_meta['image'] ) : $format_meta['image'];
+ ?>
+ <div class="field wp-format-image">
+ <div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
+ <a href="#" class="wp-format-media-select"
+ data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
+ data-update="<?php esc_attr_e( 'Select Image' ); ?>">
+ <?php
+ if ( $image )
+ echo '<img src="' . esc_url( $image ) . '" />';
+ else
+ _e( 'Select / Upload Image' );
+ ?>
+ </a>
+ </div>
+ <label for="_wp_format_image" class="screen-reader-text"><?php _e( 'Image URL' ); ?>:</label>
+ <input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_url( $format_meta['image'] ); ?>" placeholder="<?php esc_attr_e( 'Image URL' ); ?>" class="widefat" />
+ </div>
+
+ <div class="field wp-format-link wp-format-quote wp-format-image">
+ <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
+ <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
+ </div>
+
+ <?php
+ $show_video_preview = ! empty( $format_meta['video'] );
+ ?>
+ <div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview' ?>">
+ <?php if ( $show_video_preview ): ?>
+ <div id="video-preview" class="wp-format-media-preview">
+ <?php
+ if ( is_numeric( $format_meta['video'] ) ) {
+ $url = wp_get_attachment_url( $format_meta['video'] );
+ echo do_shortcode( sprintf( '[video src="%s"]', $url ) );
+ } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['video'] ) ) {
+ echo do_shortcode( $format_meta['video'] );
+ } elseif ( ! preg_match( '#<[^>]+>#', $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'];
+ }
+ ?>
+ </div>
+ <?php endif ?>
+ <label for="_wp_format_video" class="screen-reader-text"><?php _e( 'Video embed code or URL' ); ?>:</label>
+ <textarea id="wp_format_video" type="text" name="_wp_format_video" placeholder="<?php esc_attr_e( 'Video embed code or URL' ); ?>" class="widefat"><?php esc_html_e( $format_meta['video'] ); ?></textarea>
+ <div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
+ <a href="#" class="wp-format-media-select"
+ data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
+ data-update="<?php esc_attr_e( 'Select Video' ); ?>">
+ <?php _e( 'Select Video From Media Library' ) ?>
+ </a>
+ </div>
+ </div>
+
+ <?php
+ $show_audio_preview = ! empty( $format_meta['audio'] );
+ ?>
+ <div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
+ <?php if ( $show_audio_preview ): ?>
+ <div id="audio-preview" class="wp-format-media-preview">
+ <?php
+ if ( is_numeric( $format_meta['audio'] ) ) {
+ $url = wp_get_attachment_url( $format_meta['audio'] );
+ echo do_shortcode( sprintf( '[audio src="%s"]', $url ) );
+ } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['audio'] ) ) {
+ echo do_shortcode( $format_meta['audio'] );
+ } elseif ( ! preg_match( '#<[^>]+>#', $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'];
+ }
+ ?>
+ </div>
+ <?php endif ?>
+ <label for="_wp_format_audio" class="screen-reader-text"><?php _e( 'Audio embed code or URL' ); ?>:</label>
+ <textarea id="wp_format_audio" name="_wp_format_audio" placeholder="<?php esc_attr_e( 'Audio embed code or URL' ); ?>" class="widefat"><?php esc_html_e( $format_meta['audio'] );
+?></textarea>
+ <div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
+ <a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
+ <?php _e( 'Select Audio From Media Library' ) ?>
+ </a>
+ </div>
+ </div>
+</div>
View
2 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 ] ) )
View
8 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 '<div id="icon-' . esc_attr( $icon_id ) . '" class="' . $class . '"><br /></div>';
View
117 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( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
+ '<' + format + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
+ '<source type="' + mime + '" src="' + url + '" />' +
+ '</' + format + '></div>' );
+ $('.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('<img src="' + url + '" />');
+ $holder.removeClass('empty').show();
+ }
+ });
+
+ mediaFrame.open();
+ });
+})(jQuery);
View
8 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();
View
8 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();
}
}
View
24 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;
}
}
View
19 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;

0 comments on commit c93e023

Please sign in to comment.