WordPress.org

Make WordPress Core

Changeset 41182


Ignore:
Timestamp:
07/28/2017 05:43:00 PM (2 years ago)
Author:
swissspidy
Message:

Permalinks: Add buttons for the available structure tags to the admin UI.

Often times, it can be confusing to set a custom permalink structure. One has to double-check the documentation, make
sure to correctly insert the structure tag, and hope not to break their site.

With this addition, the available structure tags are being displayed as a list of easily clickable buttons that can be
used to insert tags to the custom structure input field and to remove them again.

Props kpdesign, swissspidy, joedolson, afercia.
Fixes #29872.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r41062 r41182  
    909909}
    910910
     911.form-table.permalink-structure .available-structure-tags li {
     912    float: left;
     913    margin-right: 5px;
     914}
     915
    911916/*------------------------------------------------------------------------------
    912917  21.0 - Network Admin
  • trunk/src/wp-admin/js/common.js

    r40648 r41182  
    175175    panel.addClass('active').show();
    176176});
     177
     178/**
     179 * Update custom permalink structure via buttons.
     180 */
     181
     182var permalinkStructureFocused = false,
     183    $permalinkStructure       = $( '#permalink_structure' ),
     184    $availableStructureTags   = $( '.form-table.permalink-structure .available-structure-tags button' );
     185
     186// Check if the permalink structure input field has had focus at least once.
     187$permalinkStructure.on( 'focus', function( event ) {
     188    permalinkStructureFocused = true;
     189    $( this ).off( event );
     190} );
     191
     192/**
     193 * Enables or disables a structure tag button depending on its usage.
     194 *
     195 * If the structure is already used in the custom permalink structure,
     196 * it will be disabled.
     197 *
     198 * @param {object} button Button jQuery object.
     199 */
     200function changeStructureTagButtonState( button ) {
     201    if ( -1 !== $permalinkStructure.val().indexOf( button.text().trim() ) ) {
     202        button.attr( 'data-label', button.attr( 'aria-label' ) );
     203        button.attr( 'aria-label', button.attr( 'data-used' ) );
     204        button.attr( 'aria-pressed', true );
     205        button.addClass( 'active' );
     206    } else if ( button.attr( 'data-label' ) ) {
     207        button.attr( 'aria-label', button.attr( 'data-label' ) );
     208        button.attr( 'aria-pressed', false );
     209        button.removeClass( 'active' );
     210    }
     211};
     212
     213// Check initial button state.
     214$availableStructureTags.each( function() {
     215    changeStructureTagButtonState( $( this ) );
     216} );
     217
     218// Observe permalink structure field and disable buttons of tags that are already present.
     219$permalinkStructure.on( 'change', function() {
     220    $availableStructureTags.each( function() {
     221        changeStructureTagButtonState( $( this ) );
     222    } );
     223} );
     224
     225$availableStructureTags.on( 'click', function() {
     226    var permalinkStructureValue = $permalinkStructure.val(),
     227        selectionStart          = $permalinkStructure[ 0 ].selectionStart,
     228        selectionEnd            = $permalinkStructure[ 0 ].selectionEnd,
     229        textToAppend            = $( this ).text().trim(),
     230        textToAnnounce          = $( this ).attr( 'data-added' );
     231
     232    // Remove structure tag if already part of the structure.
     233    if ( -1 !== permalinkStructureValue.indexOf( textToAppend ) ) {
     234        permalinkStructureValue = permalinkStructureValue.replace( textToAppend + '/', '' );
     235
     236        $permalinkStructure.val( '/' === permalinkStructureValue ? '' : permalinkStructureValue );
     237
     238        // Announce change to screen readers.
     239        $( '#custom_selection_updated' ).text( textToAnnounce );
     240
     241        // Disable button.
     242        changeStructureTagButtonState( $( this ) );
     243
     244        return;
     245    }
     246
     247    // Input field never had focus, move selection to end of input.
     248    if ( ! permalinkStructureFocused && 0 === selectionStart && 0 === selectionEnd ) {
     249        selectionStart = selectionEnd = permalinkStructureValue.length;
     250    }
     251
     252    $( '#custom_selection' ).prop( 'checked', true );
     253
     254    // Prepend and append slashes if necessary.
     255    if ( '/' !== permalinkStructureValue.substr( 0, selectionStart ).substr( -1 ) ) {
     256        textToAppend = '/' + textToAppend;
     257    }
     258
     259    if ( '/' !== permalinkStructureValue.substr( selectionEnd, 1 ) ) {
     260        textToAppend = textToAppend + '/';
     261    }
     262
     263    // Insert structure tag at the specified position.
     264    $permalinkStructure.val( permalinkStructureValue.substr( 0, selectionStart ) + textToAppend + permalinkStructureValue.substr( selectionEnd ) );
     265
     266    // Announce change to screen readers.
     267    $( '#custom_selection_updated' ).text( textToAnnounce );
     268
     269    // Disable button.
     270    changeStructureTagButtonState( $( this ) );
     271} );
    177272
    178273$document.ready( function() {
  • trunk/src/wp-admin/options-permalink.php

    r38720 r41182  
    207207            <code><?php echo get_option('home') . $blog_prefix; ?></code>
    208208            <input name="permalink_structure" id="permalink_structure" type="text" value="<?php echo esc_attr($permalink_structure); ?>" class="regular-text code" />
     209            <div class="available-structure-tags hide-if-no-js">
     210                <div id="custom_selection_updated" aria-live="assertive" class="screen-reader-text"></div>
     211                <?php
     212                $available_tags = array(
     213                    /* translators: %s: permalink structure tag */
     214                    'year'     => __( '%s (The year of the post, four digits, for example 2004.)' ),
     215                    /* translators: %s: permalink structure tag */
     216                    'monthnum' => __( '%s (Month of the year, for example 05.)' ),
     217                    /* translators: %s: permalink structure tag */
     218                    'day'      => __( '%s (Day of the month, for example 28.)' ),
     219                    /* translators: %s: permalink structure tag */
     220                    'hour'     => __( '%s (Hour of the day, for example 15.)' ),
     221                    /* translators: %s: permalink structure tag */
     222                    'minute'   => __( '%s (Minute of the hour, for example 43.)' ),
     223                    /* translators: %s: permalink structure tag */
     224                    'second'   => __( '%s (Second of the minute, for example 33.)' ),
     225                    /* translators: %s: permalink structure tag */
     226                    'post_id'  => __( '%s (The unique ID of the post, for example 423.)' ),
     227                    /* translators: %s: permalink structure tag */
     228                    'postname' => __( '%s (The sanitized post title (slug).)' ),
     229                    /* translators: %s: permalink structure tag */
     230                    'category' => __( '%s (Category slug. Nested sub-categories appear as nested directories in the URI.)' ),
     231                    /* translators: %s: permalink structure tag */
     232                    'author'   => __( '%s (A sanitized version of the author name.)' ),
     233                );
     234
     235                /**
     236                 * Filters the list of available permalink structure tags on the Permalinks settings page.
     237                 *
     238                 * @since 4.8.0
     239                 *
     240                 * @param array $available_tags A key => value pair of available permalink structure tags.
     241                 */
     242                $available_tags = apply_filters( 'available_permalink_structure_tags', $available_tags );
     243
     244                /* translators: %s: permalink structure tag */
     245                $structure_tag_added = __( '%s added to permalink structure' );
     246
     247                /* translators: %s: permalink structure tag */
     248                $structure_tag_already_used = __( '%s (already used in permalink structure)' );
     249
     250                if ( ! empty( $available_tags ) ) :
     251                    ?>
     252                    <p><?php _e( 'Available tags:' ); ?></p>
     253                    <ul role="list">
     254                        <?php
     255                        foreach ( $available_tags as $tag => $explanation ) {
     256                            ?>
     257                            <li>
     258                                <button type="button"
     259                                        class="button button-secondary"
     260                                        aria-label="<?php echo esc_attr( sprintf( $explanation, $tag ) ); ?>"
     261                                        data-added="<?php echo esc_attr( sprintf( $structure_tag_added, $tag ) ); ?>"
     262                                        data-used="<?php echo esc_attr( sprintf( $structure_tag_already_used, $tag ) ); ?>">
     263                                    <?php echo '%' . $tag . '%'; ?>
     264                                </button>
     265                            </li>
     266                            <?php
     267                        }
     268                        ?>
     269                    </ul>
     270                <?php endif; ?>
     271            </div>
    209272        </td>
    210273    </tr>
Note: See TracChangeset for help on using the changeset viewer.