diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index ba157f570d..e04fafd8cf 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/wp-admin/css/wp-admin-rtl.css @@ -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 ------------------------------------------------------------------------------*/ diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 7fb44bc2ab..5fd2a0726e 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -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 ------------------------------------------------------------------------------*/ diff --git a/wp-admin/edit-form-advanced.php b/wp-admin/edit-form-advanced.php index c7e8dc6554..6cb098fd86 100644 --- a/wp-admin/edit-form-advanced.php +++ b/wp-admin/edit-form-advanced.php @@ -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 .= ''; + } +} + +$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 ); ?>