Skip to content

Editor: Drop mixed-unit viewport breakpoint pairs in theme.json #13029

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

Open
itzmekhokan wants to merge 1 commit into
base: trunk
Choose a base branch
from
+56 −2
Open

Editor: Drop mixed-unit viewport breakpoint pairs in theme.json #13029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 13 additions & 2 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -816,7 +816,8 @@ private static function get_viewport_breakpoint_value_in_pixels( $value ) {
* the default breakpoints when no valid custom breakpoint is provided. When
* only one breakpoint is valid, it remains keyed by its configured state and
* uses a single max-width media query. When `tablet` is not larger than
* `mobile`, it is removed.
* `mobile`, or does not share an absolute or relative unit type with it, it
* is removed.
*
* @since 7.1.0
*
Expand Down Expand Up @@ -852,7 +853,17 @@ private static function sanitize_viewport_settings( $viewport_settings ) {
$sanitized = array( 'mobile' => $breakpoints['mobile']['value'] );

if ( isset( $breakpoints['tablet'] ) && $breakpoints['mobile']['px'] < $breakpoints['tablet']['px'] ) {
$sanitized['tablet'] = $breakpoints['tablet']['value'];
/*
* A media query resolves `em` and `rem` against the browser's default
* font size, so the order of a pair that mixes a relative unit with
* `px` only holds at the 16px base assumed above.
*/
$mobile_is_absolute = str_ends_with( $breakpoints['mobile']['value'], 'px' );
$tablet_is_absolute = str_ends_with( $breakpoints['tablet']['value'], 'px' );

if ( $mobile_is_absolute === $tablet_is_absolute ) {
$sanitized['tablet'] = $breakpoints['tablet']['value'];
}
}

return $sanitized;
Expand Down
43 changes: 43 additions & 0 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1248,6 +1248,49 @@ public function test_get_viewport_media_queries_omits_tablet_when_its_breakpoint
);
}

/**
* @ticket 65865
*/
public function test_get_viewport_media_queries_omits_tablet_when_breakpoints_mix_absolute_and_relative_units() {
$this->assertSame(
array(
'@mobile' => '@media (width <= 30em)',
'@desktop' => '@media (width > 30em)',
),
WP_Theme_JSON::get_viewport_media_queries(
array(
'mobile' => '30em',
'tablet' => '580px',
),
array(
'include_desktop' => true,
)
)
);
}

/**
* @ticket 65865
*/
public function test_get_viewport_media_queries_keeps_tablet_when_breakpoints_mix_em_and_rem() {
$this->assertSame(
array(
'@mobile' => '@media (width <= 30em)',
'@tablet' => '@media (30em < width <= 48rem)',
'@desktop' => '@media (width > 48rem)',
),
WP_Theme_JSON::get_viewport_media_queries(
array(
'mobile' => '30em',
'tablet' => '48rem',
),
array(
'include_desktop' => true,
)
)
);
}

/**
* @ticket 65596
*/
Expand Down
Loading