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
This commit is contained in:
parent
3575abd055
commit
c93e0231af
|
@ -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
|
||||
|
@ -966,6 +967,33 @@ table.diff td, table.diff th {
|
|||
float: right;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
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
|
||||
------------------------------------------------------------------------------*/
|
||||
|
|
|
@ -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;
|
||||
|
@ -4065,6 +4131,151 @@ body .ui-tooltip {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
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
|
||||
------------------------------------------------------------------------------*/
|
||||
|
|
|
@ -130,6 +130,8 @@ foreach ( get_object_taxonomies( $post ) as $tax_name ) {
|
|||
$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 @@ if ( post_type_supports( $post_type, 'post-formats' ) ) {
|
|||
$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 @@ 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"<?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 @@ $shortlink = wp_get_shortlink($post->ID, 'post');
|
|||
if ( !empty($shortlink) )
|
||||
$sample_permalink_html .= '<input id="shortlink" type="hidden" value="' . esc_attr($shortlink) . '" /><a href="#" class="button button-small" onclick="prompt('URL:', 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 @@ if ( has_action( 'edit_form_after_title' ) ) {
|
|||
}
|
||||
|
||||
// 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') ) {
|
||||
?>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 70 KiB |
|
@ -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>
|
|
@ -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 ] ) )
|
||||
|
|
|
@ -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>';
|
||||
|
|
|
@ -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);
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue