Skip to content

Block Visibility: change visibility class #11169

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
t-hamano wants to merge 2 commits into
base: trunk
Choose a base branch
from
+11 −11
Open

Block Visibility: change visibility class #11169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
709e305
Block Visibility: change visibility class
t-hamano Mar 5, 2026
45a4565
Update "is-block-hidden-on" to "is-hidden-on"
t-hamano Mar 6, 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
2 changes: 1 addition & 1 deletion src/wp-includes/block-supports/block-visibility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function wp_render_block_visibility_support( $block_content, $block ) {
* If these values ever become user-defined,
* they should be sanitized and kebab-cased.
*/
$visibility_class = 'wp-block-hidden-' . $hidden_viewport_size;
$visibility_class = 'is-hidden-on-' . $hidden_viewport_size;
Copy link
Member

@mukeshpanchal27 mukeshpanchal27 Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this class conflict with any existing one themes/plugin? Have you checked that?

I do quick search https://wpdirectory.net/search/01KK0QW5ZCT6GTEZDAMAZ33HXM for themes.

Copy link
Member

@ramonjd ramonjd Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good question. I wouldn't be against reinstating wp as a namespace. After all it's wp that's generating it.

$class_names[] = $visibility_class;
$css_rules[] = array(
'selector' => '.' . $visibility_class,
Expand Down
20 changes: 10 additions & 10 deletions tests/phpunit/tests/block-supports/block-visibility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,12 +153,12 @@ public function test_block_visibility_support_generated_css_with_mobile_viewport
$block_content = '<div>Test content</div>';
$result = wp_render_block_visibility_support( $block_content, $block );

$this->assertStringContainsString( 'wp-block-hidden-mobile', $result, 'Block should have the visibility class for the mobile breakpoint.' );
$this->assertStringContainsString( 'is-hidden-on-mobile', $result, 'Block should have the visibility class for the mobile breakpoint.' );

$actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) );

$this->assertSame(
'@media (width <= 480px){.wp-block-hidden-mobile{display:none !important;}}',
'@media (width <= 480px){.is-hidden-on-mobile{display:none !important;}}',
$actual_stylesheet,
'CSS should contain mobile visibility rule'
);
Expand Down Expand Up @@ -189,12 +189,12 @@ public function test_block_visibility_support_generated_css_with_tablet_viewport
$block_content = '<div class="existing-class">Test content</div>';
$result = wp_render_block_visibility_support( $block_content, $block );

$this->assertStringContainsString( 'class="existing-class wp-block-hidden-tablet"', $result, 'Block should have the existing class and the visibility class for the tablet breakpoint in the class attribute.' );
$this->assertStringContainsString( 'class="existing-class is-hidden-on-tablet"', $result, 'Block should have the existing class and the visibility class for the tablet breakpoint in the class attribute.' );

$actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) );

$this->assertSame(
'@media (480px < width <= 782px){.wp-block-hidden-tablet{display:none !important;}}',
'@media (480px < width <= 782px){.is-hidden-on-tablet{display:none !important;}}',
$actual_stylesheet,
'CSS should contain tablet visibility rule'
);
Expand Down Expand Up @@ -225,12 +225,12 @@ public function test_block_visibility_support_generated_css_with_desktop_breakpo
$block_content = '<div>Test content</div>';
$result = wp_render_block_visibility_support( $block_content, $block );

$this->assertStringContainsString( 'class="wp-block-hidden-desktop"', $result, 'Block should have the visibility class for the desktop breakpoint in the class attribute.' );
$this->assertStringContainsString( 'class="is-hidden-on-desktop"', $result, 'Block should have the visibility class for the desktop breakpoint in the class attribute.' );

$actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) );

$this->assertSame(
'@media (width > 782px){.wp-block-hidden-desktop{display:none !important;}}',
'@media (width > 782px){.is-hidden-on-desktop{display:none !important;}}',
$actual_stylesheet,
'CSS should contain desktop visibility rule'
);
Expand Down Expand Up @@ -263,15 +263,15 @@ public function test_block_visibility_support_generated_css_with_two_viewport_si
$result = wp_render_block_visibility_support( $block_content, $block );

$this->assertStringContainsString(
'class="wp-block-hidden-desktop wp-block-hidden-mobile"',
'class="is-hidden-on-desktop is-hidden-on-mobile"',
$result,
'Block should have both visibility classes in the class attribute'
);

$actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) );

$this->assertSame(
'@media (width > 782px){.wp-block-hidden-desktop{display:none !important;}}@media (width <= 480px){.wp-block-hidden-mobile{display:none !important;}}',
'@media (width > 782px){.is-hidden-on-desktop{display:none !important;}}@media (width <= 480px){.is-hidden-on-mobile{display:none !important;}}',
$actual_stylesheet,
'CSS should contain desktop and mobile visibility rules'
);
Expand Down Expand Up @@ -334,7 +334,7 @@ public function test_block_visibility_support_generated_css_with_all_viewport_si
$block_content = '<div>Test content</div>';
$result = wp_render_block_visibility_support( $block_content, $block );

$this->assertSame( '<div class="wp-block-hidden-desktop wp-block-hidden-mobile wp-block-hidden-tablet">Test content</div>', $result, 'Block content should have the visibility classes for all viewport sizes in the class attribute.' );
$this->assertSame( '<div class="is-hidden-on-desktop is-hidden-on-mobile is-hidden-on-tablet">Test content</div>', $result, 'Block content should have the visibility classes for all viewport sizes in the class attribute.' );
}

/*
Expand Down Expand Up @@ -389,7 +389,7 @@ public function test_block_visibility_support_generated_css_with_unknown_viewpor
$result = wp_render_block_visibility_support( $block_content, $block );

$this->assertStringContainsString(
'class="wp-block-hidden-mobile"',
'class="is-hidden-on-mobile"',
$result,
'Block should have the visibility class for the mobile breakpoint in the class attribute'
);
Expand Down
Loading