mirror of
https://github.com/WordPress/WordPress.git
synced 2025-02-01 21:21:24 +01:00
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. Built from https://develop.svn.wordpress.org/trunk@53706 git-svn-id: http://core.svn.wordpress.org/trunk@53265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson
parent
35c65333bd
commit
1d101bada0
@ -1071,11 +1071,34 @@ table.form-table td .updated p {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-table.permalink-structure .available-structure-tags {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-table.permalink-structure .available-structure-tags li {
|
.form-table.permalink-structure .available-structure-tags li {
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: 5px;
|
margin-left: 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-right: 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
|
21.0 - Network Admin
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
@ -1578,14 +1601,20 @@ table.form-table td .updated p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-table.permalink-structure td code {
|
.form-table.permalink-structure td code {
|
||||||
margin-right: 32px;
|
|
||||||
display: inline-block;
|
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"] {
|
.form-table.permalink-structure td input[type="text"] {
|
||||||
margin-right: 32px;
|
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
width: 96%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-table input.regular-text {
|
.form-table input.regular-text {
|
||||||
|
|||||||
2
wp-admin/css/forms-rtl.min.css
vendored
2
wp-admin/css/forms-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1070,11 +1070,34 @@ table.form-table td .updated p {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-table.permalink-structure .available-structure-tags {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-table.permalink-structure .available-structure-tags li {
|
.form-table.permalink-structure .available-structure-tags li {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 5px;
|
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
|
21.0 - Network Admin
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
@ -1577,14 +1600,20 @@ table.form-table td .updated p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-table.permalink-structure td code {
|
.form-table.permalink-structure td code {
|
||||||
margin-left: 32px;
|
|
||||||
display: inline-block;
|
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"] {
|
.form-table.permalink-structure td input[type="text"] {
|
||||||
margin-left: 32px;
|
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
width: 96%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-table input.regular-text {
|
.form-table input.regular-text {
|
||||||
|
|||||||
2
wp-admin/css/forms.min.css
vendored
2
wp-admin/css/forms.min.css
vendored
File diff suppressed because one or more lines are too long
@ -235,103 +235,130 @@ $structures = array(
|
|||||||
3 => $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/%post_id%',
|
3 => $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/%post_id%',
|
||||||
4 => $prefix . '/%postname%/',
|
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],
|
||||||
|
),
|
||||||
|
);
|
||||||
?>
|
?>
|
||||||
<h2 class="title"><?php _e( 'Common Settings' ); ?></h2>
|
<h2 class="title"><?php _e( 'Common Settings' ); ?></h2>
|
||||||
<table class="form-table permalink-structure">
|
<table class="form-table permalink-structure" role="presentation">
|
||||||
<tr>
|
<tbody>
|
||||||
<th scope="row"><label><input name="selection" type="radio" value="" <?php checked( '', $permalink_structure ); ?> /> <?php _e( 'Plain' ); ?></label></th>
|
<tr>
|
||||||
<td><code><?php echo get_option( 'home' ); ?>/?p=123</code></td>
|
<th scope="row"><?php _e( 'Permalink structure' ); ?></th>
|
||||||
</tr>
|
<td>
|
||||||
<tr>
|
<fieldset class="structure-selection">
|
||||||
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[1] ); ?>" <?php checked( $structures[1], $permalink_structure ); ?> /> <?php _e( 'Day and name' ); ?></label></th>
|
<legend class="screen-reader-text"><?php _e( 'Permalink structure' ); ?></legend>
|
||||||
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . gmdate( 'd' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
|
<?php
|
||||||
</tr>
|
foreach ( $inputs as $structure_id => $structure_values ) {
|
||||||
<tr>
|
$input_markup = '<div class="row">';
|
||||||
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[2] ); ?>" <?php checked( $structures[2], $permalink_structure ); ?> /> <?php _e( 'Month and name' ); ?></label></th>
|
$input_markup .= '<input id="permalink-input-' . $structure_values['id'] . '" name="selection" aria-describedby="permalink-' . $structure_values['id'] . '" type="radio" value="' . $structure_values['value'] . '" ' . checked( $structure_values['value'], $permalink_structure, false ) . ' />';
|
||||||
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
|
$input_markup .= '<div><label for="permalink-input-' . $structure_values['id'] . '">' . $structure_values['label'] . '</label>';
|
||||||
</tr>
|
$input_markup .= '<p><code id="permalink-' . $structure_values['id'] . '">' . $structure_values['example'] . '</code></p>';
|
||||||
<tr>
|
$input_markup .= '</div>';
|
||||||
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[3] ); ?>" <?php checked( $structures[3], $permalink_structure ); ?> /> <?php _e( 'Numeric' ); ?></label></th>
|
$input_markup .= '</div>';
|
||||||
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/123'; ?></code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[4] ); ?>" <?php checked( $structures[4], $permalink_structure ); ?> /> <?php _e( 'Post name' ); ?></label></th>
|
|
||||||
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">
|
|
||||||
<label><input name="selection" id="custom_selection" type="radio" value="custom" <?php checked( ! in_array( $permalink_structure, $structures, true ) ); ?> />
|
|
||||||
<?php _e( 'Custom Structure' ); ?>
|
|
||||||
</label>
|
|
||||||
</th>
|
|
||||||
<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-structure-tags hide-if-no-js">
|
|
||||||
<div id="custom_selection_updated" aria-live="assertive" class="screen-reader-text"></div>
|
|
||||||
<?php
|
|
||||||
$available_tags = array(
|
|
||||||
/* translators: %s: Permalink structure tag. */
|
|
||||||
'year' => __( '%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.)' ),
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
echo $input_markup;
|
||||||
* 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 ) ) :
|
|
||||||
?>
|
?>
|
||||||
<p><?php _e( 'Available tags:' ); ?></p>
|
<div class="row">
|
||||||
<ul role="list">
|
<input id="custom_selection" name="selection" type="radio" value="custom" <?php checked( ! in_array( $permalink_structure, $structures, true ) ); ?> /><div><label for="custom_selection"><?php _e( 'Custom Structure' ); ?></label>
|
||||||
<?php
|
<p><label for="permalink_structure" class="screen-reader-text"><?php _e( 'Customize permalink structure by selecting available tags' ); ?></label><span class="code"><code id="permalink-custom"><?php echo get_option( 'home' ) . $blog_prefix; ?></code><input name="permalink_structure" id="permalink_structure" type="text" value="<?php echo esc_attr( $permalink_structure ); ?>" aria-describedby="permalink-custom" class="regular-text code" /></span></p>
|
||||||
foreach ( $available_tags as $tag => $explanation ) {
|
<div class="available-structure-tags hide-if-no-js">
|
||||||
?>
|
<div id="custom_selection_updated" aria-live="assertive" class="screen-reader-text"></div>
|
||||||
<li>
|
<?php
|
||||||
<button type="button"
|
$available_tags = array(
|
||||||
class="button button-secondary"
|
/* translators: %s: Permalink structure tag. */
|
||||||
aria-label="<?php echo esc_attr( sprintf( $explanation, $tag ) ); ?>"
|
'year' => __( '%s (The year of the post, four digits, for example 2004.)' ),
|
||||||
data-added="<?php echo esc_attr( sprintf( $structure_tag_added, $tag ) ); ?>"
|
/* translators: %s: Permalink structure tag. */
|
||||||
data-used="<?php echo esc_attr( sprintf( $structure_tag_already_used, $tag ) ); ?>">
|
'monthnum' => __( '%s (Month of the year, for example 05.)' ),
|
||||||
<?php echo '%' . $tag . '%'; ?>
|
/* translators: %s: Permalink structure tag. */
|
||||||
</button>
|
'day' => __( '%s (Day of the month, for example 28.)' ),
|
||||||
</li>
|
/* translators: %s: Permalink structure tag. */
|
||||||
<?php
|
'hour' => __( '%s (Hour of the day, for example 15.)' ),
|
||||||
}
|
/* translators: %s: Permalink structure tag. */
|
||||||
?>
|
'minute' => __( '%s (Minute of the hour, for example 43.)' ),
|
||||||
</ul>
|
/* translators: %s: Permalink structure tag. */
|
||||||
<?php endif; ?>
|
'second' => __( '%s (Second of the minute, for example 33.)' ),
|
||||||
</div>
|
/* translators: %s: Permalink structure tag. */
|
||||||
</td>
|
'post_id' => __( '%s (The unique ID of the post, for example 423.)' ),
|
||||||
</tr>
|
/* 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 ) ) :
|
||||||
|
?>
|
||||||
|
<fieldset>
|
||||||
|
<legend><?php _e( 'Available tags:' ); ?></legend>
|
||||||
|
<ul role="list">
|
||||||
|
<?php foreach ( $available_tags as $tag => $explanation ) : ?>
|
||||||
|
<li>
|
||||||
|
<button type="button"
|
||||||
|
class="button button-secondary"
|
||||||
|
aria-label="<?php echo esc_attr( sprintf( $explanation, $tag ) ); ?>"
|
||||||
|
data-added="<?php echo esc_attr( sprintf( $structure_tag_added, $tag ) ); ?>"
|
||||||
|
data-used="<?php echo esc_attr( sprintf( $structure_tag_already_used, $tag ) ); ?>">
|
||||||
|
<?php echo '%' . $tag . '%'; ?>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
</fieldset>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h2 class="title"><?php _e( 'Optional' ); ?></h2>
|
<h2 class="title"><?php _e( 'Optional' ); ?></h2>
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '6.1-alpha-53704';
|
$wp_version = '6.1-alpha-53706';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user