Ticket #29872: 29872.4.diff

src/wp-admin/css/forms.css

@@ -925 +925 @@
         vertical-align: middle;
 }
 
+.form-table.permalink-structure .available-shortcode-tags li {
+        float: left;
+        margin-right: 5px;
+}
+
+.form-table.permalink-structure .available-shortcode-tags button {
+        background: none;
+        border: 1px solid transparent;
+        padding: 0;
+        outline: none;
+}
+
+.form-table.permalink-structure .available-shortcode-tags button:focus {
+        border-color: #5b9dd9;
+        -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+        box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+}
+
+.form-table.permalink-structure .available-shortcode-tags code {
+        margin: 0;
+        cursor: pointer;
+}
+
 /*------------------------------------------------------------------------------
   21.0 - Network Admin
 ------------------------------------------------------------------------------*/

src/wp-admin/js/common.js

@@ -175 +175 @@
         panel.addClass('active').show();
 });
 
+/**
+ * Update custom permalink structure via buttons.
+ */
+
+var permalinkStructureFocused = false;
+
+// See if the permalink structure input field has had focus at least one
+$( '#permalink_structure' ).on( 'focus', function( event ) {
+        permalinkStructureFocused = true;
+        $( this ).off( event );
+})
+
+$( '.form-table.permalink-structure .available-shortcode-tags button' ).on( 'click', function() {
+        var $permalinkStructure     = $( '#permalink_structure' ),
+            permalinkStructureValue = $permalinkStructure.val(),
+            selectionStart          = $permalinkStructure[ 0 ].selectionStart,
+            selectionEnd            = $permalinkStructure[ 0 ].selectionEnd,
+            textToAppend            = $( this ).find( 'code' ).text(),
+            textToAnnounce          = $( this ).attr( 'data-added' );
+
+        // Do not insert structure tag if already part of the structure.
+        if ( -1 !== permalinkStructureValue.indexOf( textToAppend ) ) {
+                return;
+        }
+
+        // Input field never had focus, move selection to end of input.
+        if ( ! permalinkStructureFocused && 0 === selectionStart && 0 === selectionEnd ) {
+                selectionStart = selectionEnd = permalinkStructureValue.length;
+        }
+
+        $( '#custom_selection' ).prop( 'checked', true );
+
+        // Prepend and append slashes if necessary.
+        if ( '/' !== permalinkStructureValue.substr( 0, selectionStart ).substr( -1 ) ) {
+                textToAppend = '/' + textToAppend;
+        }
+
+        if ( '/' !== permalinkStructureValue.substr( selectionEnd, 1 ) ) {
+                textToAppend = textToAppend + '/';
+        }
+
+        // Insert structure tag at the specified position.
+        $permalinkStructure.val( permalinkStructureValue.substr( 0, selectionStart ) + textToAppend + permalinkStructureValue.substr( selectionEnd ) );
+
+        // Announce change to screen readers.
+        $( '#custom_selection_updated' ).text( textToAnnounce );
+} )
+
 $document.ready( function() {
         var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions,
                 lastClicked = false,

src/wp-admin/options-permalink.php

@@ -206 +206 @@
                 <td>
                         <code><?php echo get_option('home') . $blog_prefix; ?></code>
                         <input name="permalink_structure" id="permalink_structure" type="text" value="<?php echo esc_attr($permalink_structure); ?>" class="regular-text code" />
+                        <div class="available-shortcode-tags hide-if-no-js">
+                                <div id="custom_selection_updated" aria-live="assertive" class="screen-reader-text"></div>
+                                <?php
+                                $available_tags = array(
+                                        '%year%'     => __( 'The year of the post, four digits, for example 2004' ),
+                                        '%monthnum%' => __( 'Month of the year, for example 05' ),
+                                        '%day%'      => __( 'Day of the month, for example 28' ),
+                                        '%hour%'     => __( 'Hour of the day, for example 15' ),
+                                        '%minute%'   => __( 'Minute of the hour, for example 43' ),
+                                        '%second%'   => __( 'Second of the minute, for example 33' ),
+                                        '%post_id%'  => __( 'The unique ID of the post, for example 423' ),
+                                        '%postname%' => __( 'The sanitized post title (slug)' ),
+                                        '%category%' => __( 'Category slug. Nested sub-categories appear as nested directories in the URI.' ),
+                                        '%author%'   => __( 'A sanitized version of the author name.' ),
+                                );
+
+                                /**
+                                 * Filters the list of available permalink structure tags on the Permalinks settings page.
+                                 *
+                                 * @since 4.7.0
+                                 *
+                                 * @param array $available_tags A key => value pair of available permalink structure tags.
+                                 */
+                                $available_tags = apply_filters( 'available_permalink_structure_tags', $available_tags );
+
+                                if ( ! empty( $available_tags ) ) :
+                                        ?>
+                                        <p><?php _e( 'Available tags:' ); ?></p>
+                                        <ul>
+                                                <?php
+                                                foreach ( $available_tags as $tag => $explanation ) {
+                                                        $notification = esc_attr( sprintf( __( '%s added to permalink structure' ), $tag ) );
+                                                        ?>
+                                                        <li>
+                                                                <button type="button" data-added="<?php echo esc_attr( sprintf( __( '%s added to permalink structure' ), $tag ) ); ?>">
+                                                                        <code><?php echo $tag; ?></code><span class="screen-reader-text"><?php echo esc_html( $explanation ); ?></span>
+                                                                </button>
+                                                        </li>
+                                                        <?php
+                                                }
+                                                ?>
+                                        </ul>
+                                <?php endif; ?>
+                        </div>
                 </td>
         </tr>
 </table>