From ab2cd6f03b591c773ae84db338d437d6cff376a4 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 15 Jul 2022 22:40:03 +0000 Subject: [PATCH] Permalinks: Label and describe permalink settings fields. Restructure the permalink settings fields so URL formats are communicated to screen readers through `aria-describedby` relationships, avoid the usage of implicitly labeled input fields, labeling the custom permalink format correctly, and clarifying values. Make settings `table` element presentational. Props rishishah, sabernhardt, kebbet. Fixes #55498. git-svn-id: https://develop.svn.wordpress.org/trunk@53706 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/forms.css | 35 ++++- src/wp-admin/options-permalink.php | 213 ++++++++++++++++------------- 2 files changed, 152 insertions(+), 96 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 364c588a40..55585dbfa5 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -1070,11 +1070,34 @@ table.form-table td .updated p { vertical-align: middle; } +.form-table.permalink-structure .available-structure-tags { + margin-top: 8px; +} + .form-table.permalink-structure .available-structure-tags li { float: left; margin-right: 5px; } +.form-table.permalink-structure .structure-selection .row { + margin-bottom: 16px; +} + +.form-table.permalink-structure .structure-selection .row > div { + max-width: calc(100% - 24px); + margin-left: 4px; + display: inline-flex; + flex-direction: column; +} + +.form-table.permalink-structure .structure-selection .row label { + font-weight: 600; +} + +.form-table.permalink-structure .structure-selection .row p { + margin-top: 0; +} + /*------------------------------------------------------------------------------ 21.0 - Network Admin ------------------------------------------------------------------------------*/ @@ -1577,14 +1600,20 @@ table.form-table td .updated p { } .form-table.permalink-structure td code { - margin-left: 32px; display: inline-block; } + .form-table.permalink-structure .structure-selection { + margin-top: 8px; + } + + .form-table.permalink-structure .structure-selection .row > div { + max-width: calc(100% - 36px); + width: 100%; + } + .form-table.permalink-structure td input[type="text"] { - margin-left: 32px; margin-top: 4px; - width: 96%; } .form-table input.regular-text { diff --git a/src/wp-admin/options-permalink.php b/src/wp-admin/options-permalink.php index 87191625c7..d80c551c70 100644 --- a/src/wp-admin/options-permalink.php +++ b/src/wp-admin/options-permalink.php @@ -235,103 +235,130 @@ $structures = array( 3 => $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/%post_id%', 4 => $prefix . '/%postname%/', ); + +$inputs = array( + 0 => array( + 'id' => 'plain', + 'label' => __( 'Plain' ), + 'example' => get_option( 'home' ) . '/?p=123', + 'value' => $structures[0], + ), + 1 => array( + 'id' => 'day-name', + 'label' => __( 'Day and name' ), + 'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . gmdate( 'd' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/', + 'value' => $structures[1], + ), + 2 => array( + 'id' => 'month-name', + 'label' => __( 'Month and name' ), + 'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/', + 'value' => $structures[2], + ), + 3 => array( + 'id' => 'day-numeric', + 'label' => __( 'Numeric' ), + 'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/123', + 'value' => $structures[3], + ), + 4 => array( + 'id' => 'post-name', + 'label' => __( 'Post name' ), + 'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/', + 'value' => $structures[4], + ), +); ?>

- - - - - - - - - - - - - - - - - - - - - - - -
/?p=123
- - - - -
-
- __( '%s (The year of the post, four digits, for example 2004.)' ), - /* translators: %s: Permalink structure tag. */ - 'monthnum' => __( '%s (Month of the year, for example 05.)' ), - /* translators: %s: Permalink structure tag. */ - 'day' => __( '%s (Day of the month, for example 28.)' ), - /* translators: %s: Permalink structure tag. */ - 'hour' => __( '%s (Hour of the day, for example 15.)' ), - /* translators: %s: Permalink structure tag. */ - 'minute' => __( '%s (Minute of the hour, for example 43.)' ), - /* translators: %s: Permalink structure tag. */ - 'second' => __( '%s (Second of the minute, for example 33.)' ), - /* translators: %s: Permalink structure tag. */ - 'post_id' => __( '%s (The unique ID of the post, for example 423.)' ), - /* translators: %s: Permalink structure tag. */ - 'postname' => __( '%s (The sanitized post title (slug).)' ), - /* translators: %s: Permalink structure tag. */ - 'category' => __( '%s (Category slug. Nested sub-categories appear as nested directories in the URL.)' ), - /* translators: %s: Permalink structure tag. */ - 'author' => __( '%s (A sanitized version of the author name.)' ), - ); + + + + + - +
+ />
+

+
+
+ __( '%s (The year of the post, four digits, for example 2004.)' ), + /* translators: %s: Permalink structure tag. */ + 'monthnum' => __( '%s (Month of the year, for example 05.)' ), + /* translators: %s: Permalink structure tag. */ + 'day' => __( '%s (Day of the month, for example 28.)' ), + /* translators: %s: Permalink structure tag. */ + 'hour' => __( '%s (Hour of the day, for example 15.)' ), + /* translators: %s: Permalink structure tag. */ + 'minute' => __( '%s (Minute of the hour, for example 43.)' ), + /* translators: %s: Permalink structure tag. */ + 'second' => __( '%s (Second of the minute, for example 33.)' ), + /* translators: %s: Permalink structure tag. */ + 'post_id' => __( '%s (The unique ID of the post, for example 423.)' ), + /* translators: %s: Permalink structure tag. */ + 'postname' => __( '%s (The sanitized post title (slug).)' ), + /* translators: %s: Permalink structure tag. */ + 'category' => __( '%s (Category slug. Nested sub-categories appear as nested directories in the URL.)' ), + /* translators: %s: Permalink structure tag. */ + 'author' => __( '%s (A sanitized version of the author name.)' ), + ); + + /** + * Filters the list of available permalink structure tags on the Permalinks settings page. + * + * @since 4.9.0 + * + * @param string[] $available_tags An array of key => value pairs of available permalink structure tags. + */ + $available_tags = apply_filters( 'available_permalink_structure_tags', $available_tags ); + + /* translators: %s: Permalink structure tag. */ + $structure_tag_added = __( '%s added to permalink structure' ); + + /* translators: %s: Permalink structure tag. */ + $structure_tag_already_used = __( '%s (already used in permalink structure)' ); + + if ( ! empty( $available_tags ) ) : + ?> +
+ +
    + $explanation ) : ?> +
  • + +
    • + +
+
+ +
+
+
+ + + +