". A virtual anchor matched by the view script (see render below). $modal_anchor = ( 'modal' === $behavior ) ? sanitize_title( (string) ( $attributes['modalAnchor'] ?? '' ) ) : ''; $image_url = esc_url_raw( $attributes['imageUrl'] ?? '' ); $image_alt = sanitize_text_field( $attributes['imageAlt'] ?? '' ); $label = sanitize_text_field( $attributes['label'] ?? '' ); $link_url = esc_url_raw( $attributes['linkUrl'] ?? '' ); $link_new_tab = ! empty( $attributes['linkNewTab'] ); $show_subtext = ! empty( $attributes['showSubtext'] ); $subtext = sanitize_text_field( $attributes['subtext'] ?? '' ); $label_color = bw_il_color( $attributes['labelColor'] ?? '', '#231f20' ); $chevron_color = bw_il_color( $attributes['chevronColor'] ?? '', '#cc0000' ); // Aspect ratio — only " / " is accepted, else fall back to 3 / 2. $ratio = trim( (string) ( $attributes['ratio'] ?? '3 / 2' ) ); if ( ! preg_match( '/^[0-9]+(\.[0-9]+)?\s*\/\s*[0-9]+(\.[0-9]+)?$/', $ratio ) ) { $ratio = '3 / 2'; } // "Fill section height" is a responsive-only option: on the selected breakpoints // the tile drops its fixed ratio and stretches to the parent section/column's // full height (see the .bw-il--fill-* media queries). Desktop always keeps the // aspect ratio above. Tablet = 768–1024px, Mobile = ≤767px, independent bands. $fill_tablet = ! empty( $attributes['fillTablet'] ); $fill_mobile = ! empty( $attributes['fillMobile'] ); // Corner radius in px (0–200). When linked, one value drives all four corners; // when unlinked, each corner has its own value. Falls back to $radius / 8. $clamp_radius = static function ( $v ) { return max( 0, min( 200, (int) $v ) ); }; $radius = isset( $attributes['radius'] ) ? $clamp_radius( $attributes['radius'] ) : 8; $radius_link = ! isset( $attributes['radiusLink'] ) || ! empty( $attributes['radiusLink'] ); if ( $radius_link ) { $r_tl = $r_tr = $r_br = $r_bl = $radius; } else { $r_tl = isset( $attributes['radiusTL'] ) ? $clamp_radius( $attributes['radiusTL'] ) : $radius; $r_tr = isset( $attributes['radiusTR'] ) ? $clamp_radius( $attributes['radiusTR'] ) : $radius; $r_br = isset( $attributes['radiusBR'] ) ? $clamp_radius( $attributes['radiusBR'] ) : $radius; $r_bl = isset( $attributes['radiusBL'] ) ? $clamp_radius( $attributes['radiusBL'] ) : $radius; } // border-radius shorthand order: top-left top-right bottom-right bottom-left. $radius_css = $r_tl . 'px ' . $r_tr . 'px ' . $r_br . 'px ' . $r_bl . 'px'; // Focal point → object-position percentage. $fp = is_array( $attributes['focalPoint'] ?? null ) ? $attributes['focalPoint'] : array(); $fx = isset( $fp['x'] ) ? max( 0, min( 1, (float) $fp['x'] ) ) : 0.5; $fy = isset( $fp['y'] ) ? max( 0, min( 1, (float) $fp['y'] ) ) : 0.5; $obj = round( $fx * 100, 2 ) . '% ' . round( $fy * 100, 2 ) . '%'; // A headless (anchor) modal has no tile, so it is allowed to have no image/label. if ( ! $image_url && ! $label && '' === $modal_anchor ) { return; // nothing to show } // ── chevron (FontAwesome angle-right) ───────────────────────────────────────── $chevron = ''; // ── inner markup ────────────────────────────────────────────────────────────── $img_html = $image_url ? sprintf( '

', esc_url( $image_url ), esc_attr( $image_alt ), esc_attr( $obj ) ) : ''; $pill = ''; if ( '' !== $label ) { $pill = '' . '' . esc_html( $label ) . '' . '' . $chevron . '' . ''; } $sub = ( $show_subtext && '' !== $subtext ) ? '' . esc_html( $subtext ) . '' : ''; $overlay = '' . $pill . $sub . ''; $inner = $img_html . $overlay; // ── wrapper ────────────────────────────────────────────────────────────────── $style = '--bw-il-ratio:' . esc_attr( $ratio ) . ';--bw-il-radius:' . esc_attr( $radius_css ) . ';'; // Responsive fill-height classes (scoped to their breakpoints in CSS). $fill_class = ''; if ( $fill_tablet ) { $fill_class .= ' bw-il--fill-tablet'; } if ( $fill_mobile ) { $fill_class .= ' bw-il--fill-mobile'; } // Accordion mode: the tile is a '; $close = ''; $panel = ''; printf( '

%s%s

', get_block_wrapper_attributes( array( 'class' => 'bw-il-acc' ) ), // phpcs:ignore WordPress.Security.EscapeOutput $button, // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above $panel // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above / core blocks self-escape ); return; } // Modal mode: the tile is a '; $close = ''; $dialog = ''; $wrap_class = 'bw-il-modal-block' . ( $is_headless ? ' bw-il-modal-block--headless' : '' ); printf( '

%s%s

', get_block_wrapper_attributes( array( 'class' => $wrap_class ) ), // phpcs:ignore WordPress.Security.EscapeOutput $button, // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above $dialog // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above / core blocks self-escape ); return; } if ( $link_url ) { $tag = 'a'; $attrs = array( 'class' => 'bw-il bw-il--link' . $fill_class, 'style' => $style, ); $extra = ' href="' . esc_url( $link_url ) . '"'; if ( $link_new_tab ) { $extra .= ' target="_blank" rel="noopener noreferrer"'; } if ( '' !== $label ) { $extra .= ' aria-label="' . esc_attr( $label ) . '"'; } } else { $tag = 'div'; $attrs = array( 'class' => 'bw-il' . $fill_class, 'style' => $style, ); $extra = ''; } printf( '<%1$s %2$s%3$s>%4$s', $tag, // phpcs:ignore WordPress.Security.EscapeOutput -- literal a|div get_block_wrapper_attributes( $attrs ), // phpcs:ignore WordPress.Security.EscapeOutput -- escaped by core $extra, // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above $inner // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above );