IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New Post Format UI chooser treatment in response to testing.

Browse Source 
* 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.

git-svn-id: http://core.svn.wordpress.org/trunk@24006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith
2013-04-17 04:08:46 +00:00
parent 7ed04565bb
commit 56d5d62a19
7 changed files with 271 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
wp-admin/includes/post-formats.php
View File

@@ -1,9 +1,10 @@
<?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">
<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
@@ -18,27 +19,38 @@ $format_meta = get_post_format_meta( $post_ID );
<input type="text" id="wp_format_quote_source" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" class="widefat" />
</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>
<div class="field wp-format-link wp-format-quote wp-format-image">
@@ -46,11 +58,8 @@ $format_meta = get_post_format_meta( $post_ID );
<input type="text" id="wp_format_url" name="_wp_format_url" value="<?php echo esc_url( $format_meta['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 class="field wp-format-video">
<?php if ( ! empty( $format_meta['video'] ) ): ?>
<div id="video-preview" class="wp-format-media-preview">
<?php
if ( is_numeric( $format_meta['video'] ) ) {
@@ -76,7 +85,7 @@ $format_meta = get_post_format_meta( $post_ID );
_e( 'Video URL' );
?></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' ); ?>"
data-update="<?php esc_attr_e( 'Select Video' ); ?>">
@@ -85,11 +94,8 @@ $format_meta = get_post_format_meta( $post_ID );
</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 class="field wp-format-audio">
<?php if ( ! empty( $format_meta['audio'] ) ): ?>
<div id="audio-preview" class="wp-format-media-preview">
<?php
if ( is_numeric( $format_meta['audio'] ) ) {
@@ -114,9 +120,8 @@ $format_meta = get_post_format_meta( $post_ID );
else
_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' ) ?>
</a>