Skip to content

Editor: Trigger a notice when the tablet viewport breakpoint is dropped #12974

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
HasnainAshfaq wants to merge 1 commit into
base: trunk
Choose a base branch
from
+49 −1
Open

Editor: Trigger a notice when the tablet viewport breakpoint is dropped #12974

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
14 changes: 13 additions & 1 deletion 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,9 +816,10 @@ 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`, it is removed and a notice is triggered.
*
* @since 7.1.0
* @since 7.2.0 A notice is triggered when `tablet` is dropped because it is not larger than `mobile`.
*
* @param mixed $viewport_settings Viewport settings from theme.json.
* @return array Sanitized viewport breakpoint settings.
Expand Down Expand Up @@ -853,6 +854,17 @@ private static function sanitize_viewport_settings( $viewport_settings ) {

if ( isset( $breakpoints['tablet'] ) && $breakpoints['mobile']['px'] < $breakpoints['tablet']['px'] ) {
$sanitized['tablet'] = $breakpoints['tablet']['value'];
} elseif ( isset( $breakpoints['tablet'] ) ) {
wp_trigger_error(
__METHOD__,
sprintf(
/* translators: 1: theme.json, 2: settings.viewport */
__( 'The %1$s %2$s "tablet" breakpoint value must be larger than the "mobile" value. The "tablet" breakpoint was removed.' ),
'theme.json',
'settings.viewport'
),
E_USER_NOTICE
);
}

return $sanitized;
Expand Down
36 changes: 36 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,42 @@ public function test_get_viewport_media_queries_omits_tablet_when_its_breakpoint
);
}

/**
* Tests that a notice is triggered when the tablet breakpoint is dropped because it is not larger than mobile.
*
* @ticket 65841
*/
public function test_sanitize_viewport_settings_triggers_notice_when_tablet_is_not_larger_than_mobile() {
$notice_triggered = false;
$notice_message = '';

add_action(
'wp_trigger_error_run',
static function ( $function_name, $message ) use ( &$notice_triggered, &$notice_message ) {
$notice_triggered = true;
$notice_message = $message;
},
10,
2
);

// Suppress the actual PHP notice so it doesn't fail the test.
add_filter( 'wp_trigger_error_trigger_error', '__return_false' );

WP_Theme_JSON::get_viewport_media_queries(
array(
'mobile' => '64rem',
'tablet' => '40rem',
)
);

remove_filter( 'wp_trigger_error_trigger_error', '__return_false' );

$this->assertTrue( $notice_triggered, 'A notice should be triggered when the tablet breakpoint is not larger than mobile.' );
$this->assertStringContainsString( '"tablet"', $notice_message );
$this->assertStringContainsString( '"mobile"', $notice_message );
}

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