Accessibility: Widgets: Further improve spacing between Widgets checkboxes and radio buttons in the admin interface.

Follow-up to [47598]:
- further improves the spacing after [47598] by better scoping the CSS to avoid layout glitches for custom widgets
- changes the RSS widget form to wrap the checkboxes in one single paragraph

Ideally, multiple related checkboxes and radio buttons should be grouped within a fieldset element with a legend. This will be addressed in a new Trac ticket.

Props mukesh27, SergeyBiryukov, sabernhardt.
Fixes #49228.

Built from https://develop.svn.wordpress.org/trunk@48389


git-svn-id: http://core.svn.wordpress.org/trunk@48158 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2020-07-07 17:29:04 +00:00
parent a5721358e1
commit bc15db7b97
6 changed files with 35 additions and 23 deletions

View File

@ -49,11 +49,6 @@
line-height: 1.23076923; line-height: 1.23076923;
} }
.widgets-holder-wrap .widget-inside label {
margin: 0.25em 0 0.5em;
display: inline-block;
}
.widget.widget-dirty .widget-control-close-wrapper { .widget.widget-dirty .widget-control-close-wrapper {
display: none; display: none;
} }
@ -797,6 +792,15 @@ ul.CodeMirror-hints {
/* =Media Queries /* =Media Queries
-------------------------------------------------------------- */ -------------------------------------------------------------- */
@media screen and (max-width: 782px) {
.widgets-holder-wrap .widget-inside input[type="checkbox"],
.widgets-holder-wrap .widget-inside input[type="radio"],
.editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */
.editwidget .widget-inside input[type="radio"] {
margin: 0.25rem 0 0.25rem 0.25rem;
}
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
div.widget-liquid-left { div.widget-liquid-left {
width: 100%; width: 100%;

File diff suppressed because one or more lines are too long

View File

@ -48,11 +48,6 @@
line-height: 1.23076923; line-height: 1.23076923;
} }
.widgets-holder-wrap .widget-inside label {
margin: 0.25em 0 0.5em;
display: inline-block;
}
.widget.widget-dirty .widget-control-close-wrapper { .widget.widget-dirty .widget-control-close-wrapper {
display: none; display: none;
} }
@ -796,6 +791,15 @@ ul.CodeMirror-hints {
/* =Media Queries /* =Media Queries
-------------------------------------------------------------- */ -------------------------------------------------------------- */
@media screen and (max-width: 782px) {
.widgets-holder-wrap .widget-inside input[type="checkbox"],
.widgets-holder-wrap .widget-inside input[type="radio"],
.editwidget .widget-inside input[type="checkbox"], /* Selectors for the "accessibility mode" page. */
.editwidget .widget-inside input[type="radio"] {
margin: 0.25rem 0.25rem 0.25rem 0;
}
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
div.widget-liquid-left { div.widget-liquid-left {
width: 100%; width: 100%;

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.5-alpha-48388'; $wp_version = '5.5-alpha-48389';
/** /**
* 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.

View File

@ -1642,17 +1642,21 @@ function wp_widget_rss_form( $args, $inputs = null ) {
} }
?> ?>
</select></p> </select></p>
<?php endif; if ( $inputs['show_summary'] ) : ?> <?php endif; if ( $inputs['show_summary'] || $inputs['show_author'] || $inputs['show_date'] ) : ?>
<p><input id="rss-show-summary-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_summary]" type="checkbox" value="1" <?php checked( $args['show_summary'] ); ?> /> <p>
<label for="rss-show-summary-<?php echo $esc_number; ?>"><?php _e( 'Display item content?' ); ?></label></p> <?php if ( $inputs['show_summary'] ) : ?>
<?php endif; if ( $inputs['show_author'] ) : ?> <input id="rss-show-summary-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_summary]" type="checkbox" value="1" <?php checked( $args['show_summary'] ); ?> />
<p><input id="rss-show-author-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_author]" type="checkbox" value="1" <?php checked( $args['show_author'] ); ?> /> <label for="rss-show-summary-<?php echo $esc_number; ?>"><?php _e( 'Display item content?' ); ?></label><br />
<label for="rss-show-author-<?php echo $esc_number; ?>"><?php _e( 'Display item author if available?' ); ?></label></p> <?php endif; if ( $inputs['show_author'] ) : ?>
<?php endif; if ( $inputs['show_date'] ) : ?> <input id="rss-show-author-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_author]" type="checkbox" value="1" <?php checked( $args['show_author'] ); ?> />
<p><input id="rss-show-date-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_date]" type="checkbox" value="1" <?php checked( $args['show_date'] ); ?>/> <label for="rss-show-author-<?php echo $esc_number; ?>"><?php _e( 'Display item author if available?' ); ?></label><br />
<label for="rss-show-date-<?php echo $esc_number; ?>"><?php _e( 'Display item date?' ); ?></label></p> <?php endif; if ( $inputs['show_date'] ) : ?>
<input id="rss-show-date-<?php echo $esc_number; ?>" name="widget-rss[<?php echo $esc_number; ?>][show_date]" type="checkbox" value="1" <?php checked( $args['show_date'] ); ?>/>
<label for="rss-show-date-<?php echo $esc_number; ?>"><?php _e( 'Display item date?' ); ?></label><br />
<?php endif; ?>
</p>
<?php <?php
endif; endif; // end of display options
foreach ( array_keys( $default_inputs ) as $input ) : foreach ( array_keys( $default_inputs ) as $input ) :
if ( 'hidden' === $inputs[ $input ] ) : if ( 'hidden' === $inputs[ $input ] ) :
$id = str_replace( '_', '-', $input ); $id = str_replace( '_', '-', $input );