Skip to content

Make the Customizer devices preview labels visible. #12519

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
afercia wants to merge 3 commits into from
Closed

Make the Customizer devices preview labels visible. #12519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
202f100
Make the Customizer devices preview labels visible.
afercia Jul 14, 2026
48c9fd9
Adjust tests.
afercia Jul 14, 2026
725f942
Add group role and aria-label
joedolson Jul 14, 2026
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
11 changes: 9 additions & 2 deletions src/wp-admin/css/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1748,6 +1748,7 @@ body.full-overlay-active {
background: transparent;
border: none;
height: 45px;
min-width: 50px;
padding: 0 3px;
margin: 0 0 0 -4px;
box-shadow: none;
Expand All @@ -1767,9 +1768,9 @@ body.full-overlay-active {
.wp-full-overlay-footer .devices button:before {
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/30px "dashicons";
font: normal 20px/20px "dashicons";
vertical-align: top;
margin: 3px 0;
margin: 0 0 -2px;
padding: 4px 8px;
color: #646970;
}
Expand Down Expand Up @@ -1812,6 +1813,12 @@ body.full-overlay-active {
content: "\f470" / '';
}

.wp-full-overlay-footer .devices .devices__preview-label {
display: block;
font-size: 10px;
line-height: 1;
}

@media screen and (max-width: 1024px) {
.wp-full-overlay-footer .devices {
display: none;
Expand Down
4 changes: 2 additions & 2 deletions src/wp-admin/customize.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@
</button>
<?php $previewable_devices = $wp_customize->get_previewable_devices(); ?>
<?php if ( ! empty( $previewable_devices ) ) : ?>
<div class="devices-wrapper">
<div class="devices-wrapper" role="group" aria-label="<?php echo esc_attr_x( 'Responsive Views', 'label for responsive previews group' ); ?>">
<div class="devices">
<?php foreach ( (array) $previewable_devices as $device => $settings ) : ?>
<?php
Expand All @@ -289,7 +289,7 @@
}
?>
<button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ); ?>" data-device="<?php echo esc_attr( $device ); ?>">
<span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span>
<span class="devices__preview-label"><?php echo esc_html( $settings['label'] ); ?></span>
</button>
<?php endforeach; ?>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/wp-includes/class-wp-customize-manager.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5044,14 +5044,14 @@ public function customize_pane_settings() {
public function get_previewable_devices() {
$devices = array(
'desktop' => array(
'label' => __( 'Enter desktop preview mode' ),
'label' => __( 'Desktop' ),
'default' => true,
),
'tablet' => array(
'label' => __( 'Enter tablet preview mode' ),
'label' => __( 'Tablet' ),
),
'mobile' => array(
'label' => __( 'Enter mobile preview mode' ),
'label' => __( 'Mobile' ),
),
);

Expand Down
8 changes: 4 additions & 4 deletions tests/phpunit/tests/customize/manager.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3519,14 +3519,14 @@ public function test_get_previewable_devices() {
// The default devices list.
$default_devices = array(
'desktop' => array(
'label' => __( 'Enter desktop preview mode' ),
'label' => __( 'Desktop' ),
'default' => true,
),
'tablet' => array(
'label' => __( 'Enter tablet preview mode' ),
'label' => __( 'Tablet' ),
),
'mobile' => array(
'label' => __( 'Enter mobile preview mode' ),
'label' => __( 'Mobile' ),
),
);

Expand All @@ -3551,7 +3551,7 @@ public function test_get_previewable_devices() {
private function filtered_device_list() {
return array(
'custom-device' => array(
'label' => __( 'Enter custom-device preview mode' ),
'label' => __( 'Custom device' ),
'default' => true,
),
);
Expand Down
6 changes: 3 additions & 3 deletions tests/qunit/fixtures/customize-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,14 +146,14 @@ window._wpCustomizeSettings = {
},
'previewableDevices': {
'desktop': {
'label': 'Enter desktop preview mode',
'label': 'Desktop',
'default': true
},
'tablet': {
'label': 'Enter tablet preview mode'
'label': 'Tablet'
},
'mobile': {
'label': 'Enter mobile preview mode'
'label': 'Mobile'
}
},
initialClientTimestamp: 1506510531595,
Expand Down
Loading