WordPress.org

Make WordPress Core

Ticket #29872: 29872.5.diff

File 29872.5.diff, 7.6 KB (added by swissspidy, 14 months ago)
  • src/wp-admin/css/forms.css

    diff --git src/wp-admin/css/forms.css src/wp-admin/css/forms.css
    index f0b1b372ea..8f124d4c60 100644
    table.form-table td .updated p { 
    932932        vertical-align: middle;
    933933}
    934934
     935.form-table.permalink-structure .available-structure-tags li {
     936        float: left;
     937        margin-right: 5px;
     938}
     939
    935940/*------------------------------------------------------------------------------
    936941  21.0 - Network Admin
    937942------------------------------------------------------------------------------*/
  • src/wp-admin/js/common.js

    diff --git src/wp-admin/js/common.js src/wp-admin/js/common.js
    index 010a613f11..61a830d96c 100644
    $('.contextual-help-tabs').delegate('a', 'click', function(e) { 
    175175        panel.addClass('active').show();
    176176});
    177177
     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} );
     272
    178273$document.ready( function() {
    179274        var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions,
    180275                lastClicked = false,
  • src/wp-admin/options-permalink.php

    diff --git src/wp-admin/options-permalink.php src/wp-admin/options-permalink.php
    index 95c1a3e0ba..c7193f96a6 100644
    $structures = array( 
    206206                <td>
    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>
    211274</table>