'
. '';
}
}
// ── sanitize attributes ─────────────────────────────────────────────────────
$parent_label = sanitize_text_field( $attributes['parentLabel'] ?? '' );
$parent_url = esc_url_raw( $attributes['parentUrl'] ?? '' );
$parent_img = esc_url_raw( $attributes['parentImageUrl'] ?? '' );
$parent_alt = sanitize_text_field( $attributes['parentImageAlt'] ?? '' );
$more_label = sanitize_text_field( $attributes['mobileMoreLabel'] ?? '' );
if ( '' === $more_label && '' !== $parent_label ) {
$more_label = 'More ' . $parent_label;
}
$primary = bw_pl_color( $attributes['primaryColor'] ?? '', '#cc0000' );
$highlight = bw_pl_color( $attributes['highlightColor'] ?? '', '#f1efe9' );
$items = is_array( $attributes['items'] ?? null ) ? $attributes['items'] : array();
// Nothing to show without at least one sibling tile or a parent link.
if ( empty( $items ) && '' === $parent_label ) {
return;
}
// ── parent panel (desktop only) ───────────────────────────────────────────────
$parent_html = '';
if ( '' !== $parent_label ) {
$photo = $parent_img
? ''
: '';
$parent_inner = $photo
. ''
. '' . esc_html( $parent_label ) . ''
. bw_pl_chevron( 'right' )
. ''
. '';
if ( $parent_url ) {
$parent_html = '' . $parent_inner . '';
} else {
$parent_html = '' . $parent_inner . '
';
}
}
// ── sibling tiles ──────────────────────────────────────────────────────────────
// Pre-filter to valid tiles so we know which one is last: every tile EXCEPT the
// last carries the skewed white divider on its right edge (like the parent).
$valid = array();
foreach ( $items as $item ) {
$l = sanitize_text_field( $item['label'] ?? '' );
$i = esc_url_raw( $item['imageUrl'] ?? '' );
if ( '' === $l && '' === $i ) {
continue;
}
$valid[] = $item;
}
$last_index = count( $valid ) - 1;
$tiles_html = '';
foreach ( $valid as $index => $item ) {
$label = sanitize_text_field( $item['label'] ?? '' );
$url = esc_url_raw( $item['url'] ?? '' );
$img = esc_url_raw( $item['imageUrl'] ?? '' );
$alt = sanitize_text_field( $item['imageAlt'] ?? '' );
$chevron = ( isset( $item['chevron'] ) && in_array( $item['chevron'], array( 'left', 'right', 'none' ), true ) )
? $item['chevron'] : 'right';
$img_html = $img
? ' . ')
'
: '';
// Pill: chevron sits before the label when pointing left, after it otherwise.
$pill_parts = '';
if ( 'left' === $chevron ) {
$pill_parts .= '' . bw_pl_chevron( 'left' ) . '';
$pill_parts .= '' . esc_html( $label ) . '';
} elseif ( 'none' === $chevron ) {
$pill_parts .= '' . esc_html( $label ) . '';
} else {
$pill_parts .= '' . esc_html( $label ) . '';
$pill_parts .= '' . bw_pl_chevron( 'right' ) . '';
}
$overlay = '' . $pill_parts . '';
$line = '';
// Image + pill live in a counter-skewed wrapper so they stay upright while
// the tile itself is skewed. The line spans the (skewed) tile.
$inner = '' . $img_html . $overlay . '' . $line;
// All tiles but the last get the skewed right divider; descending z-index so
// each skewed edge sits above the tile to its right.
$tile_class = 'bw-pl__tile' . ( $index < $last_index ? ' bw-pl__tile--skew' : '' );
$tile_style = 'z-index:' . ( 6 - $index ) . ';'; // below parent (7) + border (8)
if ( $url ) {
$aria = ( '' !== $label ) ? ' aria-label="' . esc_attr( $label ) . '"' : '';
$tiles_html .= '' . $inner . '';
} else {
$tiles_html .= '' . $inner . '
';
}
}
// ── mobile "More …" bar ─────────────────────────────────────────────────────────
$more_html = '';
if ( '' !== $more_label ) {
$more_inner = '' . esc_html( $more_label ) . '' . bw_pl_chevron( 'right' );
if ( $parent_url ) {
$more_html = '' . $more_inner . '';
} else {
$more_html = '' . $more_inner . '
';
}
}
// ── wrapper ──────────────────────────────────────────────────────────────────
$style = '--bw-pl-primary:' . esc_attr( $primary ) . ';--bw-pl-highlight:' . esc_attr( $highlight ) . ';';
printf(
''
. '
'
. ''
. '%s%s%s'
. '
'
. '