diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 72b0230..3ef5d82 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -518,6 +518,10 @@ form.initial-form.quickpress-open input#title { resize: none; } +#quick-press.is-saving .spinner { + visibility: inherit; +} + /* Dashboard Quick Draft - Drafts list */ .js #dashboard_quick_press .drafts { @@ -541,9 +545,43 @@ form.initial-form.quickpress-open input#title { margin: 0 12px; } +#dashboard_quick_press .drafts ul.is-placeholder li { + padding: 3px 0; + color: transparent; +} + +@keyframes loading-fade { + 0% { opacity: .5; } + 50% { opacity: 1; } + 100% { opacity: .5; } +} + +#dashboard_quick_press .drafts ul.is-placeholder li:before, +#dashboard_quick_press .drafts ul.is-placeholder li:after { + content: ''; + display: block; + height: 13px; + background: #eee; + animation: loading-fade 1.6s ease-in-out infinite; +} + +#dashboard_quick_press .drafts ul.is-placeholder li:before { + margin-bottom: 5px; + width: 40%; +} + +#dashboard_quick_press .drafts ul.is-placeholder li:after { + width: 80%; +} + #dashboard_quick_press .drafts li { margin-bottom: 1em; } + +#dashboard_quick_press .drafts li.is-new { + background-color: #fffbe5; +} + #dashboard_quick_press .drafts li time { color: #72777c; } diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php index 0ecf0a2..805798b 100644 --- a/src/wp-admin/includes/dashboard.php +++ b/src/wp-admin/includes/dashboard.php @@ -50,6 +50,7 @@ function wp_dashboard_setup() { if ( is_blog_admin() && current_user_can( get_post_type_object( 'post' )->cap->create_posts ) ) { $quick_draft_title = sprintf( '%1$s %2$s', __( 'Quick Draft' ), __( 'Drafts' ) ); wp_add_dashboard_widget( 'dashboard_quick_press', $quick_draft_title, 'wp_dashboard_quick_press' ); + add_action( 'admin_footer', 'wp_dashboard_print_recent_drafts_template' ); } // WordPress News @@ -494,46 +495,48 @@ function wp_dashboard_quick_press( $error_msg = false ) { $post_ID = (int) $post->ID; ?> -
- - -
- +
-
- +
-

- - - - +

+ 'save-post' ) ); ?>

+
+ +

+ +
'DESC' ); - /** - * Filters the post query arguments for the 'Recent Drafts' dashboard widget. - * - * @since 4.4.0 - * - * @param array $query_args The query arguments for the 'Recent Drafts' dashboard widget. - */ + /** This filter is documented in wp-includes/rest-api.php */ $query_args = apply_filters( 'dashboard_recent_drafts_query_args', $query_args ); $drafts = get_posts( $query_args ); @@ -586,6 +583,25 @@ function wp_dashboard_recent_drafts( $drafts = false ) { } /** + * Get the HTML template for the Quick Draft recent posts. + * + * @since 4.7.0 + * + * @return string The template HTML. + */ +function wp_dashboard_print_recent_drafts_template() { + ?> + + 0; + + jQuery( element ).siblings( '.prompt' ).toggleClass( 'screen-reader-text', ! visible || hasContent ); + }, + + showAllPrompts: function() { + this.$el.find( ':input' ).each( _.bind( function( i, input ) { + // Prompt toggling must be deferred because the reset event is + // fired before the input values have been cleared + _.defer( _.bind( this.togglePrompt, this, input, true ) ); + }, this ) ); + }, + + showPrompt: function( event ) { + this.togglePrompt( event.target, true ); + }, + + hidePrompt: function( event ) { + this.togglePrompt( event.target, false ); + }, + + hidePromptAndFocus: function( event ) { + this.togglePrompt( event.target, false ); + jQuery( ':input', event.target ).focus(); + }, + + setActiveEditor: function() { + wpActiveEditor = 'content'; + }, + + showSyncError: function( model, error ) { + try { + this.syncError = JSON.parse( error.responseText ).message; + } catch( e ) { + this.syncError = quickPress.l10n.error; + } + + this.render(); + }, + + submit: function( event ) { + var values; + + delete this.syncError; + event.preventDefault(); + + // jQuery's serializeArray returns an array of field tuples, which + // we need to transform into an object before sending to API + values = _.reduce( this.$el.serializeArray(), function( memo, field ) { + memo[ field.name ] = field.value; + return memo; + }, {} ); + + // Ensure that by setting these fields on model that it is valid + // before proceeding with save + this.model.set( values ); + if ( ! this.model.isValid() ) { + return; + } + + // Show a spinner during the callback. + this.$el.addClass( 'is-saving' ); + + this.model.save() + .always( _.bind( function() { + this.$el.removeClass( 'is-saving' ); + }, this ) ) + .success( _.bind( function() { + this.collection.add( this.model, { at: 0 } ); + this.model = new wp.api.models.Post(); + this.el.reset(); + }, this ) ); + }, + + render: function() { + var $error = this.$el.find( '.error' ), + errorText; + + if ( this.syncError ) { + // Error via API save failure + errorText = this.syncError; + } + + // Error notice is only visible if error text determined + $error.toggle( !! errorText ); + if ( errorText ) { + $error.html( jQuery( '

', { text: errorText } ) ); + } + } +} ); + +QuickPress.Views.DraftList = wp.Backbone.View.extend( { + + initialize: function() { + this.listenTo( this.collection, 'sync', this.onDraftsLoaded ); + }, + + onDraftsLoaded: function() { + this.listenTo( this.collection, 'add', this.renderNew ); + this.render(); + }, + + renderNew: function() { + // Display highlight effect to first (added) item for one second + var $newEl = this.render().$el.find( 'li:first' ).addClass( 'is-new' ); + setTimeout( function() { + $newEl.removeClass( 'is-new' ); + }, 1000 ); + }, + + render: function() { + // Hide drafts list if no drafts exist + this.$el.toggle( this.collection.length > 0 ); + + // "View All" link is visible if 5 or more drafts, since we only + // show a maximum of 5 drafts in the list + this.$el.find( '.view-all' ).toggle( this.collection.length > 0 ); + + // If after drafts load, this could be the first render, so remove + // placeholder effect and render the first four drafts + this.$el.find( '.drafts-list' ) + .removeClass( 'is-placeholder' ) + .html( _.map( this.collection.models, function( draft ) { + return new QuickPress.Views.DraftListItem( { + model: draft + } ).render().el; + } ) ); + + return this; + } +} ); + +QuickPress.Views.DraftListItem = wp.Backbone.View.extend( { + tagName: 'li', + + template: wp.template( 'item-quick-press-draft' ), + + render: function() { + var attributes = _.clone( this.model.attributes ); + attributes.formattedContent = wp.formatting.trimWords( attributes.content.rendered, 10 ); + attributes.formattedTitle = attributes.title.rendered.length > 0 ? attributes.title.rendered.length : quickPress.l10n.no_title; + // We can format dates using newer browser i18n features, but also + // provide a fallback to the not-as-nice Date#toLocaleDateString + date = new Date( wp.api.utils.parseISO8601( attributes.date + quickPress.timezoneOffset ) ); + if ( 'undefined' !== typeof Intl && Intl.DateTimeFormat ) { + attributes.formattedDate = new Intl.DateTimeFormat( undefined, { + month: 'long', + day: 'numeric', + year: 'numeric' + } ).format( date ); + } else { + attributes.formattedDate = date.toLocaleDateString(); + } + + this.$el.html( this.template( attributes ) ); + + return this; + } } ); + +QuickPress.init = function() { + wp.api.loadPromise.done( function() { + // Fetch drafts + draftsCollection = new wp.api.collections.Posts(); + draftsCollection.fetch( { + data: { + status: 'draft', + author: quickPress.currentUserId, + per_page: 4, + order_by: 'date', + 'quick-draft-post-list': true + } + } ); + + // Drafts list is initialized but not rendered until drafts load + new QuickPress.Views.DraftList( { + el: '#quick-press-drafts', + collection: draftsCollection + } ); + + new QuickPress.Views.Form( { + el: '#quick-press', + model: new wp.api.models.Post(), + collection: draftsCollection + } ).render(); + }) +} diff --git a/src/wp-includes/js/wp-util.js b/src/wp-includes/js/wp-util.js index 527441d..79ab07e 100644 --- a/src/wp-includes/js/wp-util.js +++ b/src/wp-includes/js/wp-util.js @@ -121,4 +121,50 @@ window.wp = window.wp || {}; } }; + // wp.formatting + // ------ + // + // Tools for formatting strings + wp.formatting = { + settings: settings.formatting || {}, + + /** + * Trims text to a certain number of words. + * + * @see wp_trim_words + * + * @param {string} text Text to trim. + * @param {?number} numWords Number of words (default: 55). + * @param {?string} more What to append if text needs to be trimmed (default: '…'). + * @return {string} Trimmed text. + */ + trimWords: function( text, numWords, more ) { + var words, separator; + + if ( 'undefined' === typeof numWords ) { + numWords = 55; + } + + if ( 'undefined' === typeof more ) { + more = wp.formatting.settings.trimWordsMore; + } + + text = text.replace( /[\n\r\t ]+/g, ' ' ).replace( /^ | $/g, '' ); + + if ( wp.formatting.settings.trimWordsByCharacter ) { + separator = ''; + } else { + separator = ' '; + } + + words = text.split( separator ); + + if ( words.length <= numWords ) { + return words.join( separator ); + } + + return words.slice( 0, numWords ).join( separator ) + more; + } + }; + }(jQuery)); diff --git a/src/wp-includes/rest-api.php b/src/wp-includes/rest-api.php index 3d0b7ee..3711e32 100644 --- a/src/wp-includes/rest-api.php +++ b/src/wp-includes/rest-api.php @@ -164,6 +164,37 @@ function rest_api_default_filters() { add_filter( 'rest_post_dispatch', 'rest_send_allow_header', 10, 3 ); add_filter( 'rest_pre_dispatch', 'rest_handle_options_request', 10, 3 ); + + // Legacy filter for Quick Draft recent posts. + add_filter( 'rest_post_query', 'rest_filter_quick_draft_query', 10, 2 ); +} + +/** + * Filter query args used by he Quick Draft recent posts list. + * + * @param array $args Key value array of query var to query value. + * @param WP_REST_Request $request The request used. + */ +function rest_filter_quick_draft_query( $query_args, $request ) { + + // Only modify Quick Draft queries. + $params = $request->get_query_params(); + + if ( ! isset( $params['quick-draft-post-list'] ) ) { + return $query_args; + } + + /** + * Filters the post query arguments for the 'Recent Drafts' dashboard widget. + * + * @since 4.4.0 + * + * @param array $query_args The query arguments for the 'Recent Drafts' dashboard widget. + */ + $query_args = apply_filters( 'dashboard_recent_drafts_query_args', $query_args ); + + return $query_args; + } /** diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index be32073..58df1ef 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -336,6 +336,15 @@ function wp_default_scripts( &$scripts ) { 'ajax' => array( 'url' => admin_url( 'admin-ajax.php', 'relative' ), ), + 'formatting' => array( + 'trimWordsMore' => __( '…' ), + /* + * translators: If your word count is based on single characters (e.g. East Asian characters), + * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'. + * Do not translate into your own language. + */ + 'trimWordsByCharacter' => strpos( _x( 'words', 'Word count type. Do not translate!' ), 'characters' ) === 0 && preg_match( '/^utf\-?8$/i', get_option( 'blog_charset' ) ), + ), ) ); $scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 ); @@ -721,7 +730,15 @@ function wp_default_scripts( &$scripts ) { 'current' => __( 'Current Color' ), ) ); - $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 ); + $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-api', 'wp-backbone' ), false, 1 ); + did_action( 'init' ) && $scripts->localize( 'dashboard', 'quickPress', array( + 'currentUserId' => get_current_user_id(), + 'l10n' => array( + 'error' => __( 'An error has occurred. Please reload the page and try again.' ), + 'no_title' => __( '(no title)' ), + ), + 'timezoneOffset' => ( get_option( 'gmt_offset' ) >= 0 ? '+' : '-' ) . date( 'H:i', abs( get_option( 'gmt_offset' ) * 3600 ) ), + ) ); $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );