| @@ -270,8 +270,23 @@ | ||
| 270 | 270 | Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ), |
| 271 | 271 | Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ), |
| 272 | 272 | Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ), |
| 273 | 273 | ); |
| 274 | + // Specificity override: the flex rule above has (0,2,0); the global hide rule also has (0,2,0) but | |
| 275 | + // comes earlier in the CSS output, so flex wins due to source order. This override uses | |
| 276 | + // {{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-* → (0,3,0), placed last, | |
| 277 | + // so display:none always beats display:flex regardless of order. Restore uses flex (not block) | |
| 278 | + // so the Info Box layout stays intact when a device-hidden block becomes visible at a smaller breakpoint. | |
| 279 | + $css_generator->add_class_styles( | |
| 280 | + '{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile', | |
| 281 | + ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [], | |
| 282 | + ! empty( $attributes['_hide_on_tablet'] ) | |
| 283 | + ? [ 'display' => 'none' ] | |
| 284 | + : ( ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'flex' ] : [] ), | |
| 285 | + ! empty( $attributes['_hide_on_mobile'] ) | |
| 286 | + ? [ 'display' => 'none' ] | |
| 287 | + : ( ! empty( $attributes['_hide_on_tablet'] ) ? [ 'display' => 'flex' ] : [] ) | |
| 288 | + ); | |
| 274 | 289 | return $css_generator->generate_css(); |
| 275 | 290 | } |
| 276 | 291 | public function build_css_v2( $attributes ) { |
| 277 | 292 | $css_generator = new CssGeneratorV2( $attributes, $this->block_name ); |
| @@ -531,8 +546,18 @@ | ||
| 531 | 546 | '{{WRAPPER}} .ablocks-info-box-btn-link > .ablocks-icon-wrap:hover', |
| 532 | 547 | Icon::get_wrapper_hover_css( $attributes, '', 'btnIcon' ), |
| 533 | 548 | Icon::get_wrapper_hover_css( $attributes, 'Tablet', 'btnIcon' ), |
| 534 | 549 | Icon::get_wrapper_hover_css( $attributes, 'Mobile', 'btnIcon' ), |
| 550 | + ); | |
| 551 | + $css_generator->add_class_styles( | |
| 552 | + '{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-desktop,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-tablet,{{WRAPPER}}:not(.ablocks-has-block-container).ablocks-hide-on-mobile', | |
| 553 | + ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'none' ] : [], | |
| 554 | + ! empty( $attributes['_hide_on_tablet'] ) | |
| 555 | + ? [ 'display' => 'none' ] | |
| 556 | + : ( ! empty( $attributes['_hide_on_desktop'] ) ? [ 'display' => 'flex' ] : [] ), | |
| 557 | + ! empty( $attributes['_hide_on_mobile'] ) | |
| 558 | + ? [ 'display' => 'none' ] | |
| 559 | + : ( ! empty( $attributes['_hide_on_tablet'] ) ? [ 'display' => 'flex' ] : [] ) | |
| 535 | 560 | ); |
| 536 | 561 | return $css_generator->generate_css(); |
| 537 | 562 | } |
| 538 | 563 | public function build_css( $attributes ) { |
