WordPress.org

Make WordPress Core

Changeset 23449


Ignore:
Timestamp:
02/18/2013 07:11:24 PM (9 years ago)
Author:
helen
Message:

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.

Location:
trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin.css

    r23441 r23449  
    748748}
    749749
    750 :-moz-placeholder {
     750:-moz-placeholder,
     751.wp-core-ui :-moz-placeholder {
    751752   color: #a9a9a9;
    752753}
     
    30813082}
    30823083
    3083 #post-status-select, #post-format {
     3084#post-status-select {
    30843085    line-height: 2.5em;
    30853086    margin-top: 3px;
     3087}
     3088
     3089/* Post formats form */
     3090#poststuff .post-format-select {
     3091    margin-top: 0;
     3092    padding-bottom: 0;
     3093}
     3094
     3095.post-formats-fields {
     3096    margin-bottom: 20px;
     3097}
     3098
     3099.wp-format-standard .post-formats-fields,
     3100.wp-format-aside .post-formats-fields,
     3101.wp-format-chat .post-formats-fields,
     3102.wp-format-status .post-formats-fields {
     3103    display: none;
     3104}
     3105
     3106.post-formats-fields .field {
     3107    display: none;
     3108    margin-bottom: 10px;
     3109}
     3110
     3111.post-formats-fields input,
     3112.post-formats-fields textarea {
     3113    padding: 5px;
     3114    font-size: 1.2em;
     3115}
     3116
     3117.wp-format-chat .field.wp-format-chat,
     3118.wp-format-gallery .field.wp-format-gallery,
     3119.wp-format-link .field.wp-format-link,
     3120.wp-format-image .field.wp-format-image,
     3121.wp-format-quote .field.wp-format-quote,
     3122.wp-format-video .field.wp-format-video,
     3123.wp-format-audio .field.wp-format-audio {
     3124    display: block;
     3125}
     3126
     3127#wp-format-image-holder {
     3128    overflow: hidden;
     3129    width: 300px;
     3130    height: 200px;
     3131    border: 1px solid #dfdfdf;
     3132    background: #f5f5f5;
     3133}
     3134
     3135#wp-format-image-holder:hover {
     3136    background-color: #eee;
     3137}
     3138
     3139#wp-format-image-select {
     3140    display: block;
     3141    height: 200px;
     3142    text-align: center;
     3143}
     3144
     3145#wp-format-image-select img {
     3146    max-width: 100%;
     3147    max-height: 100%;
     3148}
     3149
     3150.empty #wp-format-image-select {
     3151    padding-top: 120px;
     3152    height: 80px;
     3153    background: url(../images/media-button-2x.png) no-repeat center;
    30863154}
    30873155
  • trunk/wp-admin/edit-form-advanced.php

    r23416 r23449  
    113113}
    114114
    115 if ( current_theme_supports( 'post-formats' ) && post_type_supports( $post_type, 'post-formats' ) )
    116     add_meta_box( 'formatdiv', _x( 'Format', 'post format' ), 'post_format_meta_box', null, 'side', 'core' );
    117 
    118115// all taxonomies
    119116foreach ( get_object_taxonomies( $post ) as $tax_name ) {
     
    128125    else
    129126        add_meta_box($tax_name . 'div', $label, 'post_categories_meta_box', null, 'side', 'core', array( 'taxonomy' => $tax_name ));
     127}
     128
     129// post format
     130if ( post_type_supports( $post_type, 'post-formats' ) ) {
     131    wp_enqueue_script( 'post-formats' );
     132    $post_format = get_post_format();
     133    $format_class = '';
     134    if ( ! $post_format )
     135        $post_format = 'standard';
     136
     137    $format_class = " class='wp-format-{$post_format}'";
    130138}
    131139
     
    322330<div id="poststuff">
    323331
     332<?php
     333if ( post_type_supports( $post_type, 'post-formats' ) ) {
     334    $all_post_formats = get_post_format_strings();
     335
     336    echo '<h2 class="nav-tab-wrapper post-format-select">';
     337
     338    foreach ( $all_post_formats as $slug => $label ) {
     339        if ( $post_format == $slug )
     340            $class = 'nav-tab nav-tab-active';
     341        else
     342            $class = 'nav-tab';
     343
     344        echo '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '">' . $label . '</a>';
     345    }
     346
     347    echo '</h2>';
     348}
     349?>
     350
    324351<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
    325 <div id="post-body-content">
     352<div id="post-body-content"<?php echo $format_class; ?>>
     353
    326354<?php if ( post_type_supports($post_type, 'title') ) { ?>
    327355<div id="titlediv">
     
    356384
    357385do_action( 'edit_form_after_title' );
     386
     387// post format fields
     388if ( post_type_supports( $post_type, 'post-formats' ) ) {
     389    $format_meta = get_post_format_meta( $post_ID );
     390
     391if ( isset( $format_meta['image'] ) )
     392    $image = is_numeric( $format_meta['image'] ) ? wp_get_attachment_url( $format_meta['image'] ) : $format_meta['image'];
     393else
     394    $image = false;
     395?>
     396<div class="post-formats-fields">
     397
     398<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
     399
     400<div class="field wp-format-quote">
     401    <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
     402    <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
     403</div>
     404
     405<div class="field wp-format-quote">
     406    <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
     407    <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" />
     408</div>
     409
     410<div class="field wp-format-image">
     411    <div id="wp-format-image-holder" class="hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     412        <a href="#" id="wp-format-image-select"
     413            data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
     414            data-update="<?php esc_attr_e( 'Select Image' ); ?>">
     415            <?php
     416                if ( $image )
     417                    echo '<img src="' . esc_url( $image ) . '" />';
     418                else
     419                    _e( 'Select Image' );
     420            ?>
     421        </a>
     422    </div>
     423    <label for="_wp_format_image" class="screen-reader-text"><?php _e( 'Image ID or URL' ); ?>:</label>
     424    <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" />
     425</div>
     426
     427<div class="field wp-format-link wp-format-quote wp-format-image">
     428    <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
     429    <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
     430</div>
     431
     432<div class="field wp-format-gallery">
     433    <label for="_wp_format_gallery" class="screen-reader-text"><?php _e( 'Gallery shortcode' ); ?>:</label>
     434    <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" />
     435</div>
     436
     437<div class="field wp-format-audio wp-format-video">
     438    <label for="_wp_format_media" class="screen-reader-text"><?php _e( 'Embed code or URL' ); ?>:</label>
     439    <textarea name="_wp_format_media" placeholder="<?php esc_attr_e( 'Embed code or URL' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['media'] ); ?></textarea>
     440</div>
     441
     442</div>
     443<?php
     444}
    358445
    359446if ( post_type_supports($post_type, 'editor') ) {
  • trunk/wp-admin/includes/post.php

    r23416 r23449  
    194194    // Post Formats
    195195    if ( isset( $post_data['post_format'] ) ) {
    196         if ( current_theme_supports( 'post-formats', $post_data['post_format'] ) )
    197             set_post_format( $post_ID, $post_data['post_format'] );
    198         elseif ( '0' == $post_data['post_format'] )
    199             set_post_format( $post_ID, false );
     196        set_post_format( $post_ID, $post_data['post_format'] );
     197    }
     198
     199    if ( isset( $post_data[ '_wp_format_url' ] ) ) {
     200        update_post_meta( $post_ID, '_wp_format_url', addslashes( esc_url_raw( stripslashes( $post_data['_wp_format_url'] ) ) ) );
     201    }
     202
     203    $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'media' );
     204
     205    foreach ( $format_keys as $key ) {
     206        if ( isset( $post_data[ '_wp_format_' . $key ] ) )
     207            update_post_meta( $post_ID, '_wp_format_' . $key, wp_filter_post_kses( $post_data[ '_wp_format_' . $key ] ) );
    200208    }
    201209
  • trunk/wp-includes/post.php

    r23420 r23449  
    19521952
    19531953/**
     1954 * Retrieve post format metadata for a post
     1955 *
     1956 * @since 3.6.0
     1957 *
     1958 * @param int $post_id
     1959 * @return null
     1960 */
     1961function get_post_format_meta( $post_id = 0 ) {
     1962    $values = array(
     1963        'quote'        => '',
     1964        'quote_source' => '',
     1965        'image'        => '',
     1966        'url'          => '',
     1967        'gallery'      => '',
     1968        'media'        => '',
     1969    );
     1970
     1971    foreach ( $values as $key => $value )
     1972        $values[$key] = get_post_meta( $post_id, '_wp_format_' . $key, true );
     1973
     1974    return $values;
     1975}
     1976
     1977/**
    19541978 * Check if post is sticky.
    19551979 *
  • trunk/wp-includes/script-loader.php

    r23446 r23449  
    398398        ) );
    399399
     400        $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 );
     401
    400402        $scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );
    401403
Note: See TracChangeset for help on using the changeset viewer.