diff --git src/wp-admin/css/dashboard.css src/wp-admin/css/dashboard.css index 72b0230..3c7b618 100644 --- src/wp-admin/css/dashboard.css +++ 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,68 @@ form.initial-form.quickpress-open input#title { margin: 0 12px; } +#dashboard_quick_press .drafts ul.is-placeholder li { + padding: 3px 0; + color: transparent; +} + +@-webkit-keyframes loading-fade { + + 0% { + opacity: 0.5; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0.5; + } +} + +@keyframes loading-fade { + + 0% { + opacity: 0.5; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0.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; + -webkit-animation: loading-fade 1.6s ease-in-out infinite; + 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 src/wp-admin/includes/dashboard.php src/wp-admin/includes/dashboard.php index 0ecf0a2..299546b 100644 --- src/wp-admin/includes/dashboard.php +++ 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,47 @@ 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 +582,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 ); + }, + + // Show all of the field promts. + 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 ) ); + }, + + /** + * Show the prompt inside a field. + * + * @param {object} event The event triggering this show request. + */ + showPrompt: function( event ) { + this.togglePrompt( event.target, true ); + }, + + /** + * Hide the prompt inside a field. + * + * @param {object} event The event triggering this hide request. + */ + hidePrompt: function( event ) { + this.togglePrompt( event.target, false ); + }, + + /** + * Handle error conditions. + * + * {string} error The error condition, or false to reset. + */ + setErrorState: function( error ) { + + // Set or reset the app state error condition. + quickDraft.state.set( 'errorState', error ); + + if ( false !== error ) { + + // Alert screen readers that an error occurred. + wp.a11y.speak( error, 'assertive' ); + } + + }, + + /** + * Handle the form submission event. + * + * @param {object} event The form submission event. + */ + handleFormSubmission: function( event ) { + var values, + hasValuesToSave = false; + + // Prevent the browser's default form submission handling. + event.preventDefault(); + + if ( quickDraft.state.get( 'submitting' ) ) { + return false; + } + + quickDraft.state.set( 'submitting', true ); + + // Reset the error state. + this.setErrorState( false ); + + // Extract the form field values. + values = _.reduce( this.$el.serializeArray(), function( memo, field ) { + memo[ field.name ] = field.value; + return memo; + }, {} ); + + // Check to see if there are any values to save. + _.each( values, function( value ) { + if ( '' !== value ) { + hasValuesToSave = true; + } + }); + + // If the values are all blank, show an error. + if ( ! hasValuesToSave ) { + + // Set the error. + this.setErrorState( quickDraft.l10n.errorEmptyFields ); + return; + } + + // Save the new values to the model and confirm they are valid. + this.model.set( values ); + if ( ! this.model.isValid() ) { + return; + } + + // Show a spinner during the callback. + this.$el.addClass( 'is-saving' ); + + // Trigger the model save. + this.model.save() + + // Always remove the spinner. + .always( + _.bind( function() { + this.$el.removeClass( 'is-saving' ); + + // Refocus in the title field, hiding its prompt. + _.delay( function() { jQuery( '#quick-press input#title' ).focus(); }, 250 ); + + // Submission complete + quickDraft.state.set( 'submitting', false ); + + }, this ) + ) + + // Handle save success. + .success( + _.bind( function() { + // Success! Clear any previous error state. + this.render(); + + // Add the post model to the head of our collection. + this.collection.add( this.model, { at: 0 } ); + + // Create a new post model to contain the form data and reset the form. + this.model = new wp.api.models.Post(); + this.model.on( 'change:errorState', _.bind( this.render, this ) ); + + this.el.reset(); + }, this ) + ) + + // Handle save failure. + .error( + _.bind( function( model, error ) { + var message = ''; + + // Try to parse and use the response message. + try { + message = JSON.parse( error.responseText ).message; + } catch( e ) { + + // Fall back to a default error string if we parse fails. + message = quickDraft.l10n.error; + } + + // Set the app error condition. + this.setErrorState( message ); + }, this ) + ) + ; + }, + + // Render the form view. + render: function() { + var $error = this.$el.find( '.notice-alt' ), + errorText = quickDraft.state.get( 'errorState' ); + + // Error notice is only visible if error text is set. + $error.toggleClass( 'hidden', ! errorText ); + if ( errorText ) { + + // Note: The inner text transform prevents XSS via html(). + $error.html( jQuery( '

', { text: errorText } ) ); + } + } +} ); + +/** + * Set up a view object for the Quick Draft list of drafts. + * + * @since 4.7.0 + * + * @augments wp.Backbone.View + */ +QuickDraft.Views.DraftList = wp.Backbone.View.extend( { + + // Initialize the draft list view. + initialize: function() { + + // Render the view once the drafts have loaded. + this.listenTo( this.collection, 'sync', this.onDraftsLoaded ); + }, + + // Once the drafts have loaded, complete the setup. + onDraftsLoaded: function() { + + // Add a listener for new items added to the underlying (draft) post collection. + this.listenTo( this.collection, 'add', this.renderNew ); + + // Render the view! + this.render(); + }, + + // Handle a new item being added to the collection. + 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 ); + + // Alert screen readers that a new draft has been added. + wp.a11y.speak( quickDraft.l10n.newDraftCreated, 'assertive' ); + }, + + // Render the draft post list view. + render: function() { + + // Hide drafts list entirely if no drafts exist. + this.$el.toggle( this.collection.length > 0 ); + + // Display a 'View All' link if there are more drafts available. + this.$el.find( '.view-all' ).toggle( this.collection.hasMore() ); + + // Remove the placeholder class and render the models. + this.$el.find( '.drafts-list' ) + .removeClass( 'is-placeholder' ) + .html( + _.map( this.collection.models, function( draft ) { + return new QuickDraft.Views.DraftListItem( { + model: draft + } ).render().el; + } ) + ); + + return this; + } } ); + +/** + * Set up a view object an individual draft in the draft list. + * + * @since 4.7.0 + * + * @augments wp.Backbone.View + */ +QuickDraft.Views.DraftListItem = wp.Backbone.View.extend( { + tagName: 'li', + + // Render beased on the passed template. + template: wp.template( 'item-quick-press-draft' ), + + // Render a single draft list item. + render: function() { + + // Clone the original model attributes, so we can leave the model untouched. + var attributes = _.clone( this.model.attributes ); + + // Trim the content to 10 words. + attributes.formattedContent = wp.formatting.trimWords( attributes.content.rendered, 10 ); + + // If the title is missing entirely, add a no title placeholder. + attributes.formattedTitle = attributes.title.rendered.length > 0 ? attributes.title.rendered : quickDraft.l10n.noTitle; + + // Format the data using Intl.DateTimeFormat with a fallback to date.toLocaleDateString. + var date = new Date( wp.api.utils.parseISO8601( attributes.date + quickDraft.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(); + } + + // Output the rendered template. + this.$el.html( this.template( attributes ) ); + + // Continue the rendering chain. + return this; + } +} ); + + +/** + * Initialize the Quick Draft feature. + * + * @since 4.7.0 + * + */ +QuickDraft.init = function() { + + // Set up a state model to track the application state. + quickDraft.state = new Backbone.Model({ + 'errorState': false + }); + + // Wait for the wp-api client to initialize. + wp.api.loadPromise.done( function() { + + // Fetch up to 4 of the current user's recent drafts by extending wp.api.collections.Posts. + var draftsCollection = new wp.api.collections.Posts(); + draftsCollection.fetch( { + data: { + status: 'draft', + author: quickDraft.currentUserId, + per_page: 4, + order_by: 'date', + 'quick-draft-post-list': true /* flag passed for back end filters */ + } + } ); + + // Drafts list is initialized but not rendered until drafts load. + new QuickDraft.Views.DraftList( { + el: '#quick-press-drafts', + collection: draftsCollection + } ); + + new QuickDraft.Views.Form( { + el: '#quick-press', + model: new wp.api.models.Post(), + collection: draftsCollection + } ).render(); + }); +}; diff --git src/wp-includes/js/wp-util.js src/wp-includes/js/wp-util.js index 527441d..bdc7531 100644 --- src/wp-includes/js/wp-util.js +++ 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. Optional, default is 55. + * @param {string} more What to append if text needs to be trimmed. Optional, default is '…'. + * @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 src/wp-includes/rest-api.php src/wp-includes/rest-api.php index 3d0b7ee..3711e32 100644 --- src/wp-includes/rest-api.php +++ 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 src/wp-includes/script-loader.php src/wp-includes/script-loader.php index be32073..c10fa11 100644 --- src/wp-includes/script-loader.php +++ 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,17 @@ 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', 'wp-a11y', 'wp-util' ), false, 1 ); + did_action( 'init' ) && $scripts->localize( 'dashboard', 'quickDraft', array( + 'currentUserId' => get_current_user_id(), + 'l10n' => array( + 'error' => __( 'An error has occurred. Please reload the page and try again.' ), + 'newDraftCreated' => __( 'Success. A new draft was created.' ), + 'errorEmptyFields' => __( 'Error. All fields were empty.' ), + 'noTitle' => __( '(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" ); diff --git tests/qunit/index.html tests/qunit/index.html index 9a17ec2..baf0f46 100644 --- tests/qunit/index.html +++ tests/qunit/index.html @@ -61,6 +61,7 @@ +