Changeset 24006 for trunk/wp-admin/includes/post-formats.php

Timestamp:

04/17/2013 04:08:46 AM (12 years ago)

Author:

markjaquith

Message:

New Post Format UI chooser treatment in response to testing.

• Bigger icons
• Format description under each
• UI hides after choice
• Saving without choosing implies "Standard"
• Helpful text, with "Change format" link

see #24046. props lessbloat, wonderboymusic.

File:

• trunk/wp-admin/includes/post-formats.php (modified) (6 diffs)

trunk/wp-admin/includes/post-formats.php

@@ -1 +1 @@
 <?php
 global $wp_embed;
+
 $format_meta = get_post_format_meta( $post_ID );
 
 ?>
-<div class="post-format-description"></div>
+<div class="post-format-change"><span class="icon <?php echo esc_attr( $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span> <a href="#"><?php _e('Change format'); ?></a></div>
 <div class="post-formats-fields">
 
@@ -19 +20 @@
     </div>
 
-    <?php
-    $image = false;
-    if ( ! empty( $format_meta['image'] ) && is_numeric( $format_meta['image'] ) ) {
-        $format_meta['image'] = absint( $format_meta['image'] );
-        $image = wp_get_attachment_url( $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'; ?>">
+        <?php if ( ! empty( $format_meta['image'] ) ) : ?>
+        <div id="image-preview" class="wp-format-media-preview">
+            <?php
+                if ( is_numeric( $format_meta['image'] ) ) {
+                    $format_meta['image'] = absint( $format_meta['image'] );
+                    $image = wp_get_attachment_url( $format_meta['image'] );
+                    printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
+                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['image'] ) ) {
+                    echo do_shortcode( $format_meta['image'] );
+                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['image'] ) ) {
+                    printf( '<img src="%s" alt="" />', esc_url( $format_meta['image'] ) );
+                } else {
+                    echo $format_meta['image'];
+                }
+            ?>
+        </div>
+        <?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="_wp_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">
             <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 )
-                        printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
-                    else
-                        _e( 'Select / Upload Image' );
-                ?>
+                <?php _e( 'Select / Upload Image' ); ?>
             </a>
         </div>
-        <input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_attr( $format_meta['image'] ); ?>" />
     </div>
 
@@ -47 +59 @@
     </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 class="field wp-format-video">
+        <?php if ( ! empty( $format_meta['video'] ) ): ?>
         <div id="video-preview" class="wp-format-media-preview">
             <?php
@@ -77 +86 @@
         ?></label>
         <textarea id="wp_format_video" type="text" name="_wp_format_video" 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'; ?>">
+        <div data-format="video" class="wp-format-media-holder hide-if-no-js">
             <a href="#" class="wp-format-media-select"
                 data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
@@ -86 +95 @@
     </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 class="field wp-format-audio">
+        <?php if ( ! empty( $format_meta['audio'] ) ): ?>
         <div id="audio-preview" class="wp-format-media-preview">
             <?php
@@ -115 +121 @@
                 _e( 'Audio URL' );
         ?></label>
-        <textarea id="wp_format_audio" name="_wp_format_audio" 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'; ?>">
+        <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] ); ?></textarea>
+        <div data-format="audio" class="wp-format-media-holder hide-if-no-js">
             <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' ) ?>