From 709e305a07fad1b72f4f937dd5934d3f7774225f Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Thu, 5 Mar 2026 16:02:11 +0900 Subject: [PATCH 1/2] Block Visibility: change visibility class --- .../block-supports/block-visibility.php | 2 +- .../tests/block-supports/block-visibility.php | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/wp-includes/block-supports/block-visibility.php b/src/wp-includes/block-supports/block-visibility.php index 756e0500418f4..4c1c6e83dfb5f 100644 --- a/src/wp-includes/block-supports/block-visibility.php +++ b/src/wp-includes/block-supports/block-visibility.php @@ -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-block-hidden-on-' . $hidden_viewport_size; $class_names[] = $visibility_class; $css_rules[] = array( 'selector' => '.' . $visibility_class, diff --git a/tests/phpunit/tests/block-supports/block-visibility.php b/tests/phpunit/tests/block-supports/block-visibility.php index dd116472ba1f4..acc8ed49cbd54 100644 --- a/tests/phpunit/tests/block-supports/block-visibility.php +++ b/tests/phpunit/tests/block-supports/block-visibility.php @@ -153,12 +153,12 @@ public function test_block_visibility_support_generated_css_with_mobile_viewport $block_content = '
Test content
'; $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-block-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-block-hidden-on-mobile{display:none !important;}}', $actual_stylesheet, 'CSS should contain mobile visibility rule' ); @@ -189,12 +189,12 @@ public function test_block_visibility_support_generated_css_with_tablet_viewport $block_content = '
Test content
'; $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-block-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-block-hidden-on-tablet{display:none !important;}}', $actual_stylesheet, 'CSS should contain tablet visibility rule' ); @@ -225,12 +225,12 @@ public function test_block_visibility_support_generated_css_with_desktop_breakpo $block_content = '
Test content
'; $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-block-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-block-hidden-on-desktop{display:none !important;}}', $actual_stylesheet, 'CSS should contain desktop visibility rule' ); @@ -263,7 +263,7 @@ 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-block-hidden-on-desktop is-block-hidden-on-mobile"', $result, 'Block should have both visibility classes in the class attribute' ); @@ -271,7 +271,7 @@ public function test_block_visibility_support_generated_css_with_two_viewport_si $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-block-hidden-on-desktop{display:none !important;}}@media (width <= 480px){.is-block-hidden-on-mobile{display:none !important;}}', $actual_stylesheet, 'CSS should contain desktop and mobile visibility rules' ); @@ -334,7 +334,7 @@ public function test_block_visibility_support_generated_css_with_all_viewport_si $block_content = '
Test content
'; $result = wp_render_block_visibility_support( $block_content, $block ); - $this->assertSame( '
Test content
', $result, 'Block content should have the visibility classes for all viewport sizes in the class attribute.' ); + $this->assertSame( '
Test content
', $result, 'Block content should have the visibility classes for all viewport sizes in the class attribute.' ); } /* @@ -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-block-hidden-on-mobile"', $result, 'Block should have the visibility class for the mobile breakpoint in the class attribute' ); From 45a45651aa0f1bf934091d803f64d418a21a6fe4 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 6 Mar 2026 09:15:19 +0900 Subject: [PATCH 2/2] Update "is-block-hidden-on" to "is-hidden-on" --- .../block-supports/block-visibility.php | 2 +- .../tests/block-supports/block-visibility.php | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/wp-includes/block-supports/block-visibility.php b/src/wp-includes/block-supports/block-visibility.php index 4c1c6e83dfb5f..4e7ab10dc2c75 100644 --- a/src/wp-includes/block-supports/block-visibility.php +++ b/src/wp-includes/block-supports/block-visibility.php @@ -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 = 'is-block-hidden-on-' . $hidden_viewport_size; + $visibility_class = 'is-hidden-on-' . $hidden_viewport_size; $class_names[] = $visibility_class; $css_rules[] = array( 'selector' => '.' . $visibility_class, diff --git a/tests/phpunit/tests/block-supports/block-visibility.php b/tests/phpunit/tests/block-supports/block-visibility.php index acc8ed49cbd54..39acd2f6bdde3 100644 --- a/tests/phpunit/tests/block-supports/block-visibility.php +++ b/tests/phpunit/tests/block-supports/block-visibility.php @@ -153,12 +153,12 @@ public function test_block_visibility_support_generated_css_with_mobile_viewport $block_content = '
Test content
'; $result = wp_render_block_visibility_support( $block_content, $block ); - $this->assertStringContainsString( 'is-block-hidden-on-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){.is-block-hidden-on-mobile{display:none !important;}}', + '@media (width <= 480px){.is-hidden-on-mobile{display:none !important;}}', $actual_stylesheet, 'CSS should contain mobile visibility rule' ); @@ -189,12 +189,12 @@ public function test_block_visibility_support_generated_css_with_tablet_viewport $block_content = '
Test content
'; $result = wp_render_block_visibility_support( $block_content, $block ); - $this->assertStringContainsString( 'class="existing-class is-block-hidden-on-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){.is-block-hidden-on-tablet{display:none !important;}}', + '@media (480px < width <= 782px){.is-hidden-on-tablet{display:none !important;}}', $actual_stylesheet, 'CSS should contain tablet visibility rule' ); @@ -225,12 +225,12 @@ public function test_block_visibility_support_generated_css_with_desktop_breakpo $block_content = '
Test content
'; $result = wp_render_block_visibility_support( $block_content, $block ); - $this->assertStringContainsString( 'class="is-block-hidden-on-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){.is-block-hidden-on-desktop{display:none !important;}}', + '@media (width > 782px){.is-hidden-on-desktop{display:none !important;}}', $actual_stylesheet, 'CSS should contain desktop visibility rule' ); @@ -263,7 +263,7 @@ public function test_block_visibility_support_generated_css_with_two_viewport_si $result = wp_render_block_visibility_support( $block_content, $block ); $this->assertStringContainsString( - 'class="is-block-hidden-on-desktop is-block-hidden-on-mobile"', + 'class="is-hidden-on-desktop is-hidden-on-mobile"', $result, 'Block should have both visibility classes in the class attribute' ); @@ -271,7 +271,7 @@ public function test_block_visibility_support_generated_css_with_two_viewport_si $actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) ); $this->assertSame( - '@media (width > 782px){.is-block-hidden-on-desktop{display:none !important;}}@media (width <= 480px){.is-block-hidden-on-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' ); @@ -334,7 +334,7 @@ public function test_block_visibility_support_generated_css_with_all_viewport_si $block_content = '
Test content
'; $result = wp_render_block_visibility_support( $block_content, $block ); - $this->assertSame( '
Test content
', $result, 'Block content should have the visibility classes for all viewport sizes in the class attribute.' ); + $this->assertSame( '
Test content
', $result, 'Block content should have the visibility classes for all viewport sizes in the class attribute.' ); } /* @@ -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="is-block-hidden-on-mobile"', + 'class="is-hidden-on-mobile"', $result, 'Block should have the visibility class for the mobile breakpoint in the class attribute' );