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

Rebuild widgets screen (and equivalent in Customizer) to use details and summary tags #240

Merged
merged 34 commits into from
Oct 12, 2023
Merged

Rebuild widgets screen (and equivalent in Customizer) to use details and summary tags #240

Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
ea52ebb
Update widgets.php to use `details` and `summary` tags
KTS915 Sep 29, 2023
97464e2
Update widgets-form.php
KTS915 Sep 29, 2023
449fddc
Update class-wp-customize-widgets.php to work with `details` and `sum…
KTS915 Sep 29, 2023
145715f
Update customize-widgets.js to work with more semantic markup
KTS915 Sep 29, 2023
c8bb2e6
Update media-widgets.js
KTS915 Sep 29, 2023
96da283
Update text-widgets.js to work with more semantic markup
KTS915 Sep 29, 2023
b7893c9
Update custom-html-widgets.js to work with more semantic markup
KTS915 Sep 29, 2023
3eb8485
Update widgets.js to work with `details` and `summary` elements and m…
KTS915 Sep 29, 2023
39609d6
Update widgets.css so that changes to markup cause minimal visual dif…
KTS915 Sep 29, 2023
0669b51
Update widgets.js to ensure chooser reamins available after dragging …
KTS915 Sep 29, 2023
0d4d28f
Update widgets.js to ensure that `inert` attribute on widget contents…
KTS915 Sep 29, 2023
e219da0
Update widgets.js to increment each new added widget's ID.
KTS915 Sep 29, 2023
511da87
Update widgets.js to ensure widget opens when added to sidebar.
KTS915 Sep 30, 2023
c0f4260
Update widgets.css to ensure available widgets sidebar description is…
KTS915 Sep 30, 2023
05cef97
Update widgets.php to improve semantics of receiving sidebar
KTS915 Sep 30, 2023
b91fa48
Update widgets.js to have receiving sidebars open and close when widg…
KTS915 Sep 30, 2023
16b6046
Merge branch 'ClassicPress:develop' into better-widgets
KTS915 Oct 7, 2023
4450d2f
Update customize-controls.css
KTS915 Oct 7, 2023
819dd90
Update customize-widgets.css
KTS915 Oct 7, 2023
17a90a2
Update customize-widgets.css to ensure summary marker does not show i…
KTS915 Oct 7, 2023
a7fa30b
Update widgets.css to enable custom `summary` marker
KTS915 Oct 7, 2023
ad7ddfb
Update widgets.php to reinstate `<h3>` header after feedback on dashb…
KTS915 Oct 7, 2023
f1bc455
Update widgets.css to create custom markers for lists of widget
KTS915 Oct 7, 2023
3a88703
Update widgets.php to reinstate `<h2>` headers
KTS915 Oct 7, 2023
a56c96c
Update widgets-form.php to reinstate `<h2>` headers
KTS915 Oct 7, 2023
6833804
Update widgets.css to account for reinstatement of `<h2>` headers
KTS915 Oct 7, 2023
21de5a9
Update widgets.css to maintain marker spacing
KTS915 Oct 7, 2023
0b17d3c
Update widgets.css
KTS915 Oct 7, 2023
197f74a
PHP Coding Standards
mattyrob Oct 8, 2023
d96cf9d
PHPUnit fixes
mattyrob Oct 8, 2023
06ebb9d
JSHint fixes
mattyrob Oct 8, 2023
8d6a656
Update widgets.js to address error message in console
KTS915 Oct 9, 2023
bd953ad
Update media-widgets.js to make widget open when added to sidebar
KTS915 Oct 9, 2023
937fedf
Update widgets.css to use native disclosure widget marker, but enlarged
KTS915 Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/wp-admin/css/customize-controls.css
View file
Open in desktop
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
Open in desktop
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
78 changes: 67 additions & 11 deletions src/wp-admin/css/widgets.css
View file
Open in desktop
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,33 @@
user-select: none;
}

summary.widget-title {
list-style: none;
}

summary.widget-title::before {
content: '\25B8';
font-size: 1.4em;
cursor: pointer;
}

details[open] > summary.widget-title::before {
content: '\25BE';
}

/* Fix for Safari */
summary.widget-title::-webkit-details-marker {
display: none;
}

.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 +371,35 @@
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;
list-style: none;
}

summary.sidebar-name::before {
content: '\25B8';
padding-right: 0.5em;
font-size: 1.2em;
cursor: pointer;
}

#widgets-right .widgets-holder-wrap > details > summary.sidebar-name::before {
padding-right: 0.2em;
}

details[open] > summary.sidebar-name::before {
content: '\25BE';
}

/* Fix for Safari */
summary.sidebar-name::-webkit-details-marker {
display: none;
}

.widgets-holder-wrap .description {
Expand Down Expand Up @@ -559,6 +610,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 +641,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 +657,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 +690,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 +734,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 +748,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 +902,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 +911,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
Open in desktop
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
Loading