Skip to content
This repository has been archived by the owner on Mar 9, 2024. It is now read-only.

Commit

Permalink
Rebuild widgets screen (and in Customizer) to use modern HTML (#240)
Browse files Browse the repository at this point in the history 
* Update widgets.php to use `details` and `summary` tags

This significantly improves accessibility while also updating the admin to use HTML5 and less JavaScript.

* Update widgets-form.php

* Update class-wp-customize-widgets.php to work with `details` and `summary` elements

* Update customize-widgets.js to work with more semantic markup

* Update media-widgets.js

Enables all the media widgets (image, audio, video, etc) to work with more semantic markup and the `details` and `summary` elements.

* Update text-widgets.js to work with more semantic markup

* Update custom-html-widgets.js to work with more semantic markup

* Update widgets.js to work with `details` and `summary` elements and more semantic  markup

* Update widgets.css so that changes to markup cause minimal visual differences.

* Update widgets.js to ensure chooser reamins available after dragging a widget

* Update widgets.js to ensure that `inert` attribute on widget contents is removed after dragging to sidebar.

* Update widgets.js to increment each new added widget's ID.

* Update widgets.js to ensure widget opens when added to sidebar.

* Update widgets.css to ensure available widgets sidebar description is visible.

* Update widgets.php to improve semantics of receiving sidebar

* Update widgets.js to have receiving sidebars open and close when widget dragged over or off them.

* Update customize-controls.css

* Update customize-widgets.css

* Update customize-widgets.css to ensure summary marker does not show in Safari

* Update widgets.css to enable custom `summary` marker

* Update widgets.php to reinstate `<h3>` header after feedback on dashboard widgets PR

* Update widgets.css to create custom markers for lists of widget

* Update widgets.php to reinstate `<h2>` headers

* Update widgets-form.php to reinstate `<h2>` headers

* Update widgets.css to account for reinstatement of `<h2>` headers

* Update widgets.css to maintain marker spacing

* Update widgets.css

* PHP Coding Standards

* PHPUnit fixes

* JSHint fixes

* Update widgets.js to address error message in console

* Update media-widgets.js to make widget open when added to sidebar

* Update widgets.css to use native disclosure widget marker, but enlarged

I have just read an article by Scott O'Hara (https://www.scottohara.me/blog/2022/09/12/details-summary.html), where he says that removing the native marker for the disclosure widget can cause accessibility problems because some assistive technology looks to the marker instead of the status of the `open` attribute to know whether the widget is open or not! Yes, it's completely crazy!

So this commit goes back to using the native marker but makes it bigger. Which, really, I suppose is what I should have done in the first place. I will submit a PR to make a similar change for the dashboard widgets, post metaboxes, and menu items that we've already included.

---------

Co-authored-by: mattyrob <[email protected]>
  • Loading branch information
@KTS915 @mattyrob
KTS915 and mattyrob authored Oct 12, 2023
1 parent e04f545 commit 396dabe
Show file tree
Hide file tree
Showing 13 changed files with 268 additions and 384 deletions.
2 changes: 1 addition & 1 deletion src/wp-admin/css/customize-controls.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2741,7 +2741,7 @@ body.adding-widget .add-new-widget:before,
#available-widgets .widget-tpl,
#available-menu-items .item-tpl {
position: relative;
padding: 15px 15px 15px 60px;
padding: 15px;
background: #fff;
border-bottom: 1px solid #dcdcde;
border-left: 4px solid #fff;
Expand Down
21 changes: 13 additions & 8 deletions src/wp-admin/css/customize-widgets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@

.widget-inside {
padding: 1px 10px 10px;
border-top: none;
border: 0;
border-top: 1px solid #c3c4c7;
line-height: 1.23076923;
}

Expand Down Expand Up @@ -249,11 +250,11 @@
border-left: 4px solid #2271b1;
}

#customize-controls .widget-title h3 {
#customize-controls summary.widget-title {
font-size: 1em;
}

#available-widgets .widget-title h3 {
#available-widgets summary.widget-title {
padding: 0 0 5px;
font-size: 14px;
}
Expand Down Expand Up @@ -289,16 +290,20 @@ body.adding-widget #customize-preview {

#available-widgets .widget-title {
position: relative;
list-style: none;
padding: 10px 0;
}

/* Fix for Safari */
#available-widgets summary::-webkit-details-marker {
display: none;
}

#available-widgets .widget-title:before {
content: "\f132";
position: absolute;
top: -3px;
right: 100%;
position: inline;
vertical-align: sub;
margin-right: 20px;
width: 20px;
height: 20px;
color: #2c3338;
font: normal 20px/1 dashicons;
text-align: center;
Expand Down
54 changes: 43 additions & 11 deletions src/wp-admin/css/widgets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
}

.widget-title h3,
.widget-title h4 {
.widget-title h4,
summary.widget-title {
margin: 0;
padding: 15px;
padding: 12px 15px 15px 10px;
font-size: 1em;
line-height: 1;
overflow: hidden;
Expand All @@ -41,12 +42,24 @@
user-select: none;
}

.widget-title h3 {
padding-left: 5px;
}

summary.widget-title::marker,
summary.widget-title::-webkit-details-marker {
font-size: 1.4em;
cursor: pointer;
}

.widgets-holder-wrap .widget-inside {
border-top: none;
border: 0;
border-top: 1px solid #c3c4c7;
padding: 1px 15px 15px;
line-height: 1.23076923;
}

#available-widgets .widget-inside,
.widget.widget-dirty .widget-control-close-wrapper {
display: none;
}
Expand Down Expand Up @@ -349,6 +362,20 @@
overflow: hidden;
white-space: normal;
line-height: 1.5;
font-size: 1em;
}

summary.sidebar-name {
padding: 15px 15px 15px 7px;
color: #1d2327;
font-size: 1.3em;
font-weight: 600;
}

summary.sidebar-name::marker,
summary.sidebar-name::-webkit-details-marker {
font-size: 1.2em;
cursor: pointer;
}

.widgets-holder-wrap .description {
Expand Down Expand Up @@ -559,6 +586,7 @@ div#widgets-right .closed .widgets-sortables {
padding: 0 15px;
line-height: 3.30769230;
border-left: 1px solid #dcdcde;
margin-top: -3.3em;
}

#widgets-left .widget-control-edit:hover,
Expand Down Expand Up @@ -589,6 +617,10 @@ div#widgets-right .closed .widgets-sortables {
margin-top: 20px;
}

#available-widgets .widget-control-actions {
display: none;
}

.js .widgets-holder-wrap.closed .widget,
.js .widgets-holder-wrap.closed .sidebar-description,
.js .widgets-holder-wrap.closed .remove-inactive-widgets,
Expand All @@ -601,14 +633,14 @@ div#widgets-right .closed .widgets-sortables {
display: block;
}

/* Hide Widget Settings by Default */
.widget-inside,
/* Hide Widget Description by Default */
.widget-description {
display: none;
}

.widget-inside {
background: #fff;
font-weight: 500;
}

.widget-inside select {
Expand All @@ -634,7 +666,6 @@ div#widgets-right .closed .widgets-sortables {
.widgets_access .widget-action,
.widgets_access .handlediv,
.widgets_access #access-on,
.widgets_access .widget-holder .description,
.no-js .widget-holder .description {
display: none;
}
Expand Down Expand Up @@ -679,7 +710,7 @@ div#widgets-right .closed .widgets-sortables {
div#widgets-right .widget-top:hover,
#widgets-left .widget-top:hover {
border-color: #8c8f94;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.widgets-chooser ul.widgets-chooser-sidebars {
Expand All @@ -693,8 +724,9 @@ div#widgets-right .widget-top:hover,
display: none;
}

.widgets-chooser ul {
border: 1px solid #c3c4c7;
#available-widgets .widgets-chooser {
display: block;
font-weight: 500;
}

.widgets-chooser li {
Expand Down Expand Up @@ -846,7 +878,7 @@ ul.CodeMirror-hints {
}

@media only screen and (min-width: 1250px) {
#widgets-left #available-widgets .widget {
#widgets-left #widget-list .widget {
width: 49%;
float: left;
}
Expand All @@ -855,7 +887,7 @@ ul.CodeMirror-hints {
min-width: 49%;
}

#widgets-left #available-widgets .widget:nth-child(even) {
#widgets-left #widget-list .widget:nth-child(even) {
float: right;
}

Expand Down
95 changes: 35 additions & 60 deletions src/wp-admin/includes/widgets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,36 +87,25 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {

$description = wp_sidebar_description( $sidebar );

echo '<div id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';
echo '<details>';

if ( $sidebar_name ) {
$add_to = sprintf(
/* translators: %s: Widgets sidebar name. */
__( 'Add to: %s' ),
$sidebar_name
);
?>
<div class="sidebar-name" data-add-to="<?php echo esc_attr( $add_to ); ?>">
<button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
<span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
</div>
<?php
}
echo '<summary class="sidebar-name"><h2>' . esc_html( $sidebar_name ) . '</h2></summary>';

if ( ! empty( $description ) ) {
?>
<div class="sidebar-description">
<p class="description"><?php echo $description; ?></p>
</div>
<?php

echo '<div class="sidebar-description">';
echo '<p class="description">' . $description . '</p>';
echo '</div>';

}

echo '<ul id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';

dynamic_sidebar( $sidebar );

echo '</div>';
echo '</ul>';

echo '</details>';
}

/**
Expand All @@ -130,16 +119,16 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
* @return array
*/
function wp_list_widget_controls_dynamic_sidebar( $params ) {
global $wp_registered_widgets;
global $wp_registered_widgets, $pagenow;
static $i = 0;
$i++;

$widget_id = $params[0]['widget_id'];
$id = isset( $params[0]['_temp_id'] ) ? $params[0]['_temp_id'] : $widget_id;
$hidden = isset( $params[0]['_hide'] ) ? ' style="display:none;"' : '';
$tag = $pagenow === 'customize.php' ? 'div' : 'li'; // use correct semantic tag according to whether in customizer or not

$params[0]['before_widget'] = "<div id='widget-{$i}_{$id}' class='widget'$hidden>";
$params[0]['after_widget'] = '</div>';
$params[0]['before_widget'] = "<{$tag} id='widget-{$i}_{$id}' class='widget'>";
$params[0]['after_widget'] = '</' . $tag . '>';
$params[0]['before_title'] = '%BEG_OF_TITLE%'; // Deprecated.
$params[0]['after_title'] = '%END_OF_TITLE%'; // Deprecated.

Expand Down Expand Up @@ -240,31 +229,15 @@ function wp_widget_control( $sidebar_args ) {

echo $sidebar_args['before_widget'];
?>
<div class="widget-top">
<div class="widget-title-action">
<button type="button" class="widget-action hide-if-no-js" aria-expanded="false">
<span class="screen-reader-text edit">
<?php
/* translators: Hidden accessibility text. %s: Widget title. */
printf( __( 'Edit widget: %s' ), $widget_title );
?>
</span>
<span class="screen-reader-text add">
<?php
/* translators: Hidden accessibility text. %s: Widget title. */
printf( __( 'Add widget: %s' ), $widget_title );
?>
</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">
<span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span>
<span class="add"><?php _ex( 'Add', 'widget' ); ?></span>
<span class="screen-reader-text"><?php echo $widget_title; ?></span>
</a>
</div>
<div class="widget-title"><h3><?php echo $widget_title; ?><span class="in-widget-title"></span></h3></div>
</div>
<details class="widget-top">
<summary class="widget-title"><h3><?php echo $widget_title; ?></h3></summary>
<div class="widget-title-action">
<a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>">
<span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span>
<span class="add"><?php _ex( 'Add', 'widget' ); ?></span>
<span class="screen-reader-text"><?php echo $widget_title; ?></span>
</a>
</div>

<div class="widget-inside">
<?php echo $before_form; ?>
Expand All @@ -282,13 +255,13 @@ function wp_widget_control( $sidebar_args ) {
}
?>
<?php echo $after_widget_content; ?>
<input type="hidden" name="widget-id" class="widget-id" value="<?php echo esc_attr( $id_format ); ?>" />
<input type="hidden" name="id_base" class="id_base" value="<?php echo esc_attr( $id_base ); ?>" />
<input type="hidden" name="widget-width" class="widget-width" value="<?php echo esc_attr( $width ); ?>" />
<input type="hidden" name="widget-height" class="widget-height" value="<?php echo esc_attr( $height ); ?>" />
<input type="hidden" name="widget_number" class="widget_number" value="<?php echo esc_attr( $widget_number ); ?>" />
<input type="hidden" name="multi_number" class="multi_number" value="<?php echo esc_attr( $multi_number ); ?>" />
<input type="hidden" name="add_new" class="add_new" value="<?php echo esc_attr( $add_new ); ?>" />
<input type="hidden" name="widget-id" class="widget-id" value="<?php echo esc_attr( $id_format ); ?>">
<input type="hidden" name="id_base" class="id_base" value="<?php echo esc_attr( $id_base ); ?>">
<input type="hidden" name="widget-width" class="widget-width" value="<?php echo esc_attr( $width ); ?>">
<input type="hidden" name="widget-height" class="widget-height" value="<?php echo esc_attr( $height ); ?>">
<input type="hidden" name="widget_number" class="widget_number" value="<?php echo esc_attr( $widget_number ); ?>">
<input type="hidden" name="multi_number" class="multi_number" value="<?php echo esc_attr( $multi_number ); ?>">
<input type="hidden" name="add_new" class="add_new" value="<?php echo esc_attr( $add_new ); ?>">

<div class="widget-control-actions">
<div class="alignleft">
Expand All @@ -301,11 +274,13 @@ function wp_widget_control( $sidebar_args ) {
<?php submit_button( __( 'Save' ), 'primary widget-control-save right', 'savewidget', false, array( 'id' => 'widget-' . esc_attr( $id_format ) . '-savewidget' ) ); ?>
<span class="spinner"></span>
</div>
<br class="clear" />
<br class="clear">
</div>
<?php echo $after_form; ?>
</div>

</details>

<div class="widget-description">
<?php
$widget_description = wp_widget_description( $widget_id );
Expand Down
Loading

0 comments on commit 396dabe

Please sign in to comment.