Edit screen UI for post formats: a first run for functionality.
* Adds a very basic tabbed interface for selecting a post format (requires JS). * Extra fields, which are post meta, are shown/hidden based on the selected format. * Introduce a helper function for retrieving formats-specific metadata: `get_post_format_meta()`. * Image selection uses the media modal, although without filtering or from URL support at the moment. props rachelbaker, wonderboymusic, aaroncampbell, helen. see #19570. git-svn-id: http://core.svn.wordpress.org/trunk@23449 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
parent
b59879bc6d
commit
ad85d07189
|
|
@ -747,7 +747,8 @@ input[readonly] {
|
|||
background-color: #eee;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
:-moz-placeholder,
|
||||
.wp-core-ui :-moz-placeholder {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
|
|
@ -3080,11 +3081,78 @@ input#link_url {
|
|||
margin: 2px 0 2px -2px;
|
||||
}
|
||||
|
||||
#post-status-select, #post-format {
|
||||
#post-status-select {
|
||||
line-height: 2.5em;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* Post formats form */
|
||||
#poststuff .post-format-select {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-formats-fields {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-format-standard .post-formats-fields,
|
||||
.wp-format-aside .post-formats-fields,
|
||||
.wp-format-chat .post-formats-fields,
|
||||
.wp-format-status .post-formats-fields {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-formats-fields .field {
|
||||
display: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.post-formats-fields input,
|
||||
.post-formats-fields textarea {
|
||||
padding: 5px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.wp-format-chat .field.wp-format-chat,
|
||||
.wp-format-gallery .field.wp-format-gallery,
|
||||
.wp-format-link .field.wp-format-link,
|
||||
.wp-format-image .field.wp-format-image,
|
||||
.wp-format-quote .field.wp-format-quote,
|
||||
.wp-format-video .field.wp-format-video,
|
||||
.wp-format-audio .field.wp-format-audio {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wp-format-image-holder {
|
||||
overflow: hidden;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 1px solid #dfdfdf;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
#wp-format-image-holder:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#wp-format-image-select {
|
||||
display: block;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#wp-format-image-select img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.empty #wp-format-image-select {
|
||||
padding-top: 120px;
|
||||
height: 80px;
|
||||
background: url(../images/media-button-2x.png) no-repeat center;
|
||||
}
|
||||
|
||||
/* Post Screen */
|
||||
#post-body #normal-sortables {
|
||||
min-height: 50px;
|
||||
|
|
|
|||
|
|
@ -112,9 +112,6 @@ if ( 'attachment' == $post_type ) {
|
|||
add_meta_box( 'submitdiv', __( 'Publish' ), 'post_submit_meta_box', null, 'side', 'core' );
|
||||
}
|
||||
|
||||
if ( current_theme_supports( 'post-formats' ) && post_type_supports( $post_type, 'post-formats' ) )
|
||||
add_meta_box( 'formatdiv', _x( 'Format', 'post format' ), 'post_format_meta_box', null, 'side', 'core' );
|
||||
|
||||
// all taxonomies
|
||||
foreach ( get_object_taxonomies( $post ) as $tax_name ) {
|
||||
$taxonomy = get_taxonomy($tax_name);
|
||||
|
|
@ -129,6 +126,17 @@ foreach ( get_object_taxonomies( $post ) as $tax_name ) {
|
|||
add_meta_box($tax_name . 'div', $label, 'post_categories_meta_box', null, 'side', 'core', array( 'taxonomy' => $tax_name ));
|
||||
}
|
||||
|
||||
// post format
|
||||
if ( post_type_supports( $post_type, 'post-formats' ) ) {
|
||||
wp_enqueue_script( 'post-formats' );
|
||||
$post_format = get_post_format();
|
||||
$format_class = '';
|
||||
if ( ! $post_format )
|
||||
$post_format = 'standard';
|
||||
|
||||
$format_class = " class='wp-format-{$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');
|
||||
|
||||
|
|
@ -321,8 +329,28 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
|
|||
|
||||
<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">
|
||||
<div id="post-body-content"<?php echo $format_class; ?>>
|
||||
|
||||
<?php if ( post_type_supports($post_type, 'title') ) { ?>
|
||||
<div id="titlediv">
|
||||
<div id="titlewrap">
|
||||
|
|
@ -356,6 +384,65 @@ wp_nonce_field( 'samplepermalink', 'samplepermalinknonce', false );
|
|||
|
||||
do_action( 'edit_form_after_title' );
|
||||
|
||||
// post format fields
|
||||
if ( post_type_supports( $post_type, 'post-formats' ) ) {
|
||||
$format_meta = get_post_format_meta( $post_ID );
|
||||
|
||||
if ( isset( $format_meta['image'] ) )
|
||||
$image = is_numeric( $format_meta['image'] ) ? wp_get_attachment_url( $format_meta['image'] ) : $format_meta['image'];
|
||||
else
|
||||
$image = false;
|
||||
?>
|
||||
<div class="post-formats-fields">
|
||||
|
||||
<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-image">
|
||||
<div id="wp-format-image-holder" class="hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
|
||||
<a href="#" id="wp-format-image-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 Image' );
|
||||
?>
|
||||
</a>
|
||||
</div>
|
||||
<label for="_wp_format_image" class="screen-reader-text"><?php _e( 'Image ID or URL' ); ?>:</label>
|
||||
<input type="text" name="_wp_format_image" id="wp_format_image" value="<?php echo esc_attr( $format_meta['image'] ); ?>" placeholder="<?php esc_attr_e( 'Image ID or URL' ); ?>" class="widefat hide-if-js" />
|
||||
</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>
|
||||
|
||||
<div class="field wp-format-gallery">
|
||||
<label for="_wp_format_gallery" class="screen-reader-text"><?php _e( 'Gallery shortcode' ); ?>:</label>
|
||||
<input type="text" name="_wp_format_gallery" id="wp_format_gallery" value="<?php echo esc_attr( $format_meta['gallery'] ); ?>" placeholder="<?php esc_attr_e( 'Gallery shortcode' ); ?>" 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, 'editor') ) {
|
||||
?>
|
||||
<div id="postdivrich" class="postarea">
|
||||
|
|
|
|||
|
|
@ -193,10 +193,18 @@ function edit_post( $post_data = null ) {
|
|||
|
||||
// Post Formats
|
||||
if ( isset( $post_data['post_format'] ) ) {
|
||||
if ( current_theme_supports( 'post-formats', $post_data['post_format'] ) )
|
||||
set_post_format( $post_ID, $post_data['post_format'] );
|
||||
elseif ( '0' == $post_data['post_format'] )
|
||||
set_post_format( $post_ID, false );
|
||||
set_post_format( $post_ID, $post_data['post_format'] );
|
||||
}
|
||||
|
||||
if ( isset( $post_data[ '_wp_format_url' ] ) ) {
|
||||
update_post_meta( $post_ID, '_wp_format_url', addslashes( esc_url_raw( stripslashes( $post_data['_wp_format_url'] ) ) ) );
|
||||
}
|
||||
|
||||
$format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'media' );
|
||||
|
||||
foreach ( $format_keys as $key ) {
|
||||
if ( isset( $post_data[ '_wp_format_' . $key ] ) )
|
||||
update_post_meta( $post_ID, '_wp_format_' . $key, wp_filter_post_kses( $post_data[ '_wp_format_' . $key ] ) );
|
||||
}
|
||||
|
||||
// Meta Stuff
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
window.wp = window.wp || {};
|
||||
|
||||
(function($){
|
||||
var imageFrame;
|
||||
|
||||
// Post formats selection
|
||||
$('.post-format-select a').on( 'click', function(e){
|
||||
e.preventDefault();
|
||||
var $this = $(this),
|
||||
format = $this.data('wpFormat');
|
||||
$('.post-format-select a.nav-tab-active').removeClass('nav-tab-active');
|
||||
$this.addClass('nav-tab-active').blur();
|
||||
$('#post_format').val(format);
|
||||
$('#post-body-content').attr('class', 'wp-format-' + format );
|
||||
});
|
||||
|
||||
// Image selection
|
||||
$('#wp-format-image-select').click( function( event ) {
|
||||
var $el = $(this),
|
||||
$holder = $('#wp-format-image-holder'),
|
||||
$field = $('#wp_format_image');
|
||||
event.preventDefault();
|
||||
|
||||
// If the media frame already exists, reopen it.
|
||||
if ( imageFrame ) {
|
||||
imageFrame.open();
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the media frame.
|
||||
imageFrame = wp.media.frames.formatImage = wp.media({
|
||||
// Set the title of the modal.
|
||||
title: $el.data('choose'),
|
||||
|
||||
// Tell the modal to show only images.
|
||||
library: {
|
||||
type: 'image'
|
||||
},
|
||||
|
||||
// Customize the submit button.
|
||||
button: {
|
||||
// Set the text of the button.
|
||||
text: $el.data('update')
|
||||
}
|
||||
});
|
||||
|
||||
// When an image is selected, run a callback.
|
||||
imageFrame.on( 'select', function() {
|
||||
// Grab the selected attachment.
|
||||
var attachment = imageFrame.state().get('selection').first(),
|
||||
imageUrl = attachment.get('url');
|
||||
|
||||
// set the hidden input's value
|
||||
$field.attr('value', attachment.id);
|
||||
|
||||
// Show the image in the placeholder
|
||||
$el.html('<img src="' + imageUrl + '" />');
|
||||
$holder.removeClass('empty');
|
||||
});
|
||||
|
||||
imageFrame.open();
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -1950,6 +1950,30 @@ function get_post_custom_values( $key = '', $post_id = 0 ) {
|
|||
return isset($custom[$key]) ? $custom[$key] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve post format metadata for a post
|
||||
*
|
||||
* @since 3.6.0
|
||||
*
|
||||
* @param int $post_id
|
||||
* @return null
|
||||
*/
|
||||
function get_post_format_meta( $post_id = 0 ) {
|
||||
$values = array(
|
||||
'quote' => '',
|
||||
'quote_source' => '',
|
||||
'image' => '',
|
||||
'url' => '',
|
||||
'gallery' => '',
|
||||
'media' => '',
|
||||
);
|
||||
|
||||
foreach ( $values as $key => $value )
|
||||
$values[$key] = get_post_meta( $post_id, '_wp_format_' . $key, true );
|
||||
|
||||
return $values;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if post is sticky.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -397,6 +397,8 @@ function wp_default_scripts( &$scripts ) {
|
|||
'comma' => _x( ',', 'tag delimiter' ),
|
||||
) );
|
||||
|
||||
$scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 );
|
||||
|
||||
$scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );
|
||||
|
||||
$scripts->add( 'comment', "/wp-admin/js/comment$suffix.js", array( 'jquery', 'postbox' ) );
|
||||
|
|
|
|||
Loading…
Reference in New Issue