| 1 |
<?php |
| 2 |
/** |
| 3 |
* Render the post slider block. |
| 4 |
* |
| 5 |
* @param array $attributes The block attributes. |
| 6 |
* @return string The rendered block content. |
| 7 |
*/ |
| 8 |
|
| 9 |
// Exit if accessed directly. |
| 10 |
if ( ! defined( 'ABSPATH' ) ) { |
| 11 |
exit; |
| 12 |
} |
| 13 |
|
| 14 |
if ( ! function_exists( 'gutslider_post_slider_terms' ) ) { |
| 15 |
/** |
| 16 |
* Terms to print above a slide title. |
| 17 |
* |
| 18 |
* The taxonomies the slider is filtered by double as the ones it labels slides with; |
| 19 |
* with no filter it falls back to core categories, which is what the block has always |
| 20 |
* shown. Term ids sit on the stored REST record under each taxonomy's rest_base. |
| 21 |
* |
| 22 |
* @param array $post A record from the `queryPosts` attribute. |
| 23 |
* @param array $taxonomies Taxonomy slugs to read. |
| 24 |
* @return WP_Term[] Terms, in taxonomy order. |
| 25 |
*/ |
| 26 |
function gutslider_post_slider_terms( $post, $taxonomies ) { |
| 27 |
$terms = []; |
| 28 |
|
| 29 |
foreach ( $taxonomies as $taxonomy ) { |
| 30 |
$taxonomy_object = get_taxonomy( $taxonomy ); |
| 31 |
if ( ! $taxonomy_object ) { |
| 32 |
continue; |
| 33 |
} |
| 34 |
|
| 35 |
$rest_base = ! empty( $taxonomy_object->rest_base ) ? $taxonomy_object->rest_base : $taxonomy; |
| 36 |
$term_ids = isset( $post[ $rest_base ] ) && is_array( $post[ $rest_base ] ) ? $post[ $rest_base ] : []; |
| 37 |
|
| 38 |
foreach ( $term_ids as $term_id ) { |
| 39 |
$term = get_term( absint( $term_id ), $taxonomy ); |
| 40 |
if ( $term && ! is_wp_error( $term ) ) { |
| 41 |
$terms[] = $term; |
| 42 |
} |
| 43 |
} |
| 44 |
} |
| 45 |
|
| 46 |
return $terms; |
| 47 |
} |
| 48 |
} |
| 49 |
|
| 50 |
if ( ! function_exists( 'gutslider_post_slider' ) ) { |
| 51 |
function gutslider_post_slider( $attributes ) { |
| 52 |
// Extract attributes with default values |
| 53 |
$defaults = [ |
| 54 |
'queryPosts' => [], |
| 55 |
'showTitle' => true, |
| 56 |
'showCat' => true, |
| 57 |
'showExcerpt' => true, |
| 58 |
'showBtn' => true, |
| 59 |
'linkTitle' => true, |
| 60 |
'titleTag' => 'h2', |
| 61 |
'btnLabel' => __( 'Read More', 'slider-blocks' ), |
| 62 |
'enableOverlay' => true, |
| 63 |
'sliderType' => 'slider', |
| 64 |
'uniqueId' => '', |
| 65 |
'navContainerPosition' => 'nav_inside', |
| 66 |
'navPosition' => 'nav_cc', |
| 67 |
'catAnimation' => '', |
| 68 |
'titleAnimation' => '', |
| 69 |
'exptAnimation' => '', |
| 70 |
'btnAnimation' => '', |
| 71 |
'sliderOptions' => [], |
| 72 |
'showNavigation' => true, |
| 73 |
'showPagination' => true, |
| 74 |
'customNavIcon' => false, |
| 75 |
'navIconSource' => 'library', |
| 76 |
'navPrevIcon' => 'arrowLeft', |
| 77 |
'navNextIcon' => 'arrowRight', |
| 78 |
'customPrevSVG' => '', |
| 79 |
'customNextSVG' => '', |
| 80 |
'excerptLength' => 20, |
| 81 |
'enableRemoteNav' => false, |
| 82 |
'remotePrevSelector' => '', |
| 83 |
'remoteNextSelector' => '', |
| 84 |
'detachContent' => false, // New attribute for detaching content |
| 85 |
'showThumbs' => false, |
| 86 |
'thumbContent' => 'image', |
| 87 |
'thumbTitlePosition' => 'below', |
| 88 |
'thumbsOptions' => [], |
| 89 |
]; |
| 90 |
|
| 91 |
$atts = wp_parse_args( $attributes, $defaults ); |
| 92 |
|
| 93 |
// Sanitize attributes |
| 94 |
$atts = array_map( 'sanitize_text_field', $atts ); |
| 95 |
$atts['queryPosts'] = isset( $attributes['queryPosts'] ) ? $attributes['queryPosts'] : []; |
| 96 |
$atts['sliderOptions'] = isset( $attributes['sliderOptions'] ) ? $attributes['sliderOptions'] : []; |
| 97 |
$atts['thumbsOptions'] = isset( $attributes['thumbsOptions'] ) ? $attributes['thumbsOptions'] : []; |
| 98 |
$atts['focusPoints'] = isset( $attributes['focusPoints'] ) ? $attributes['focusPoints'] : []; |
| 99 |
|
| 100 |
// Taxonomies the slider is filtered by. `taxQuery` covers every taxonomy; |
| 101 |
// `specificCategories` is the legacy, core-category-only attribute kept for blocks |
| 102 |
// saved before that. The editor empties it as soon as a filter is changed, so only |
| 103 |
// one of the two is ever in play. |
| 104 |
$tax_query = isset( $attributes['taxQuery'] ) && is_array( $attributes['taxQuery'] ) ? $attributes['taxQuery'] : []; |
| 105 |
$query_type = isset( $attributes['queryType'] ) ? sanitize_key( $attributes['queryType'] ) : 'latest_posts'; |
| 106 |
|
| 107 |
$term_taxonomies = [ 'category' ]; |
| 108 |
if ( 'specific_categories' === $query_type && ! empty( $tax_query ) ) { |
| 109 |
$term_taxonomies = array_map( 'sanitize_key', array_keys( $tax_query ) ); |
| 110 |
} |
| 111 |
|
| 112 |
// Block classes |
| 113 |
$block_classes = [ |
| 114 |
esc_attr( $atts['uniqueId'] ), |
| 115 |
esc_attr( $atts['navContainerPosition'] ), |
| 116 |
esc_attr( $atts['navPosition'] ), |
| 117 |
]; |
| 118 |
|
| 119 |
// Block wrapper attributes |
| 120 |
$block_props = get_block_wrapper_attributes( [ |
| 121 |
'class' => implode( ' ', array_filter( $block_classes ) ) |
| 122 |
] ); |
| 123 |
|
| 124 |
// Single block classes |
| 125 |
$swiper_classes = [ |
| 126 |
'swiper-slide', |
| 127 |
$atts['sliderType'] === 'slider' ? 'slide-mode' : '' |
| 128 |
]; |
| 129 |
|
| 130 |
if ( ! empty( $atts['detachContent'] ) ) { |
| 131 |
$swiper_classes[] = 'detach-content'; |
| 132 |
} |
| 133 |
|
| 134 |
?> |
| 135 |
<div <?php echo wp_kses_data( $block_props ); ?> data-swiper-options="<?php echo esc_attr( wp_json_encode( $atts['sliderOptions'] ) ); ?>" |
| 136 |
<?php |
| 137 |
if ( '1' === $atts['showThumbs'] ) { |
| 138 |
echo 'data-thumbs-options="' . esc_attr( wp_json_encode( $atts['thumbsOptions'] ) ) . '" '; |
| 139 |
} |
| 140 |
?> |
| 141 |
<?php |
| 142 |
if ( $atts['enableRemoteNav'] ) { |
| 143 |
echo 'data-rprev="' . esc_attr( $atts['remotePrevSelector'] ) . '" '; |
| 144 |
echo 'data-rnext="' . esc_attr( $atts['remoteNextSelector'] ) . '" '; |
| 145 |
} |
| 146 |
?> |
| 147 |
> |
| 148 |
<div class="swiper"> |
| 149 |
<div class="swiper-wrapper"> |
| 150 |
<?php |
| 151 |
if ( is_array( $atts['queryPosts'] ) && ! empty( $atts['queryPosts'] ) ) { |
| 152 |
$index = 0; |
| 153 |
foreach ( $atts['queryPosts'] as $post ) { |
| 154 |
$index++; |
| 155 |
$post_title = isset( $post['title']['rendered'] ) ? $post['title']['rendered'] : ''; |
| 156 |
$post_excerpt = isset( $post['excerpt']['rendered'] ) ? $post['excerpt']['rendered'] : ''; |
| 157 |
$post_link = isset( $post['link'] ) ? $post['link'] : ''; |
| 158 |
$post_image_id = isset( $post['featured_media'] ) ? $post['featured_media'] : ''; |
| 159 |
$post_image = wp_get_attachment_image_url( $post_image_id, 'full' ); |
| 160 |
// Check if focusPoints is set and not empty |
| 161 |
$focusPoints = isset( $atts['focusPoints'] ) && is_array( $atts['focusPoints'] ) ? $atts['focusPoints'] : []; |
| 162 |
$bg_position = isset( $focusPoints[$index - 1] ) && isset( $focusPoints[$index - 1]['x'] ) && isset( $focusPoints[$index - 1]['y'] ) |
| 163 |
? sprintf( 'background-position: %d%% %d%%;', round( $focusPoints[$index - 1]['x'] * 100 ), round( $focusPoints[$index - 1]['y'] * 100 ) ) |
| 164 |
: 'background-position: center center;'; |
| 165 |
$bg_style = $post_image ? sprintf( 'background-image: url(%s); %s', esc_url( $post_image ), $bg_position ) : $bg_position; |
| 166 |
$post_terms = gutslider_post_slider_terms( $post, $term_taxonomies ); |
| 167 |
|
| 168 |
// create object-position style |
| 169 |
$object_position = isset( $focusPoints[$index - 1] ) && isset( $focusPoints[$index - 1]['x'] ) && isset( $focusPoints[$index - 1]['y'] ) |
| 170 |
? sprintf( 'object-position: %d%% %d%%;', round( $focusPoints[$index - 1]['x'] * 100 ), round( $focusPoints[$index - 1]['y'] * 100 ) ) |
| 171 |
: 'object-position: center center;'; |
| 172 |
|
| 173 |
?> |
| 174 |
<div class="<?php echo esc_attr( implode( ' ', $swiper_classes ) ); ?>"> |
| 175 |
<div class="swiper-container-outer" |
| 176 |
<?php if ( ! $atts['detachContent'] ) : ?> |
| 177 |
style="<?php echo esc_attr( $bg_style ); ?>" |
| 178 |
<?php endif; ?> |
| 179 |
> |
| 180 |
<?php if ( $atts['enableOverlay'] ) : ?> |
| 181 |
<div class="gutslider-overlay"></div> |
| 182 |
<?php endif; ?> |
| 183 |
<?php |
| 184 |
if ( $atts['detachContent'] && $post_image ) { |
| 185 |
?> |
| 186 |
<a class="detached-featured-image" href="<?php echo esc_url( $post_link ); ?>"> |
| 187 |
<img src="<?php echo esc_url( $post_image ); ?>" alt="<?php echo esc_attr( $post_title ); ?>" |
| 188 |
style="<?php echo esc_attr( $object_position ); ?>" |
| 189 |
/> |
| 190 |
</a> |
| 191 |
<?php |
| 192 |
} |
| 193 |
?> |
| 194 |
<div class="gutslider-content-wrapper<?php echo $atts['detachContent'] ? ' detach-content' : ''; ?>"> |
| 195 |
<div class="gutslider-content-inner"> |
| 196 |
<?php if ( $atts['showCat'] && ! empty( $post_terms ) ) : ?> |
| 197 |
<div class="post-categories <?php echo esc_attr( $atts['catAnimation'] ); ?>"> |
| 198 |
<?php |
| 199 |
foreach ( $post_terms as $post_term ) { |
| 200 |
printf( '<span class="post-category">%s</span>', esc_html( $post_term->name ) ); |
| 201 |
} |
| 202 |
?> |
| 203 |
</div> |
| 204 |
<?php endif; ?> |
| 205 |
|
| 206 |
<?php if ( $atts['showTitle'] ) : ?> |
| 207 |
<?php |
| 208 |
$title_tag = tag_escape( $atts['titleTag'] ); |
| 209 |
$title_content = sprintf( |
| 210 |
'<%1$s class="post-title %2$s">%3$s</%1$s>', |
| 211 |
$title_tag, |
| 212 |
esc_attr( $atts['titleAnimation'] ), |
| 213 |
esc_html( $post_title ) |
| 214 |
); |
| 215 |
|
| 216 |
if ( $atts['linkTitle'] ) { |
| 217 |
printf( |
| 218 |
'<a href="%s" class="post-title">%s</a>', |
| 219 |
esc_url( $post_link ), |
| 220 |
$title_content // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped |
| 221 |
); |
| 222 |
} else { |
| 223 |
echo wp_kses_post( $title_content ); |
| 224 |
} |
| 225 |
?> |
| 226 |
<?php endif; ?> |
| 227 |
|
| 228 |
<?php if ( $atts['showExcerpt'] ) : ?> |
| 229 |
<div class="post-excerpt <?php echo esc_attr( $atts['exptAnimation'] ); ?>"> |
| 230 |
<?php |
| 231 |
if ( $atts['excerptLength'] > 0 ) { |
| 232 |
$post_excerpt = wp_trim_words( $post_excerpt, $atts['excerptLength'], '...' ); |
| 233 |
} |
| 234 |
echo wp_kses_post( $post_excerpt ); |
| 235 |
?> |
| 236 |
</div> |
| 237 |
<?php endif; ?> |
| 238 |
|
| 239 |
<?php if ( $atts['showBtn'] ) : ?> |
| 240 |
<div class="post-cta-wrapper <?php echo esc_attr( $atts['btnAnimation'] ); ?>"> |
| 241 |
<a href="<?php echo esc_url( $post_link ); ?>" class="post-cta"> |
| 242 |
<?php echo esc_html( $atts['btnLabel'] ); ?> |
| 243 |
</a> |
| 244 |
</div> |
| 245 |
<?php endif; ?> |
| 246 |
</div> |
| 247 |
</div> |
| 248 |
</div> |
| 249 |
</div> |
| 250 |
<?php |
| 251 |
} |
| 252 |
} |
| 253 |
?> |
| 254 |
</div> |
| 255 |
<?php |
| 256 |
if( $atts['showNavigation'] === '1' && $atts['navContainerPosition'] === 'nav_inside' && $atts['enableRemoteNav'] !== '1' ) { |
| 257 |
?> |
| 258 |
<div class="gutslider-nav nav_inside <?php echo esc_attr( $atts['navPosition'] ); ?>"> |
| 259 |
<?php if ( $atts['customNavIcon'] ) : ?> |
| 260 |
<div class="gutslider-prev"> |
| 261 |
<!-- <div class="gutslider-prev-icon"> --> |
| 262 |
<?php |
| 263 |
if ( $atts['navIconSource'] === 'library' ) { |
| 264 |
echo wp_kses( gutslider_display_icon( $atts['navPrevIcon'] ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output |
| 265 |
} else { |
| 266 |
echo wp_kses( $atts['customPrevSVG'], gutslider_allowed_svg_tags() ); |
| 267 |
} |
| 268 |
?> |
| 269 |
<!-- </div> --> |
| 270 |
</div> |
| 271 |
<div class="gutslider-next"> |
| 272 |
<!-- <div class="gutslider-next-icon"> --> |
| 273 |
<?php |
| 274 |
if ( $atts['navIconSource'] === 'library' ) { |
| 275 |
echo wp_kses( gutslider_display_icon( $atts['navNextIcon'] ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output |
| 276 |
} else { |
| 277 |
echo wp_kses( $atts['customNextSVG'], gutslider_allowed_svg_tags() ); |
| 278 |
} |
| 279 |
?> |
| 280 |
<!-- </div> --> |
| 281 |
</div> |
| 282 |
<?php else : ?> |
| 283 |
<div class="swiper-button-prev"></div> |
| 284 |
<div class="swiper-button-next"></div> |
| 285 |
<?php endif; ?> |
| 286 |
</div> |
| 287 |
<?php |
| 288 |
} |
| 289 |
?> |
| 290 |
<?php |
| 291 |
if( $atts['showPagination'] === '1' ) { |
| 292 |
?> |
| 293 |
<div class="swiper-pagination"></div> |
| 294 |
<?php |
| 295 |
} |
| 296 |
?> |
| 297 |
</div> |
| 298 |
<?php |
| 299 |
if ( $atts['showNavigation'] === '1' && $atts['navContainerPosition'] === 'nav_outside' && $atts['enableRemoteNav'] !== '1' ) : ?> |
| 300 |
<div class="gutslider-nav nav_outside <?php echo esc_attr( $atts['navPosition'] ); ?>"> |
| 301 |
<?php if ( $atts['customNavIcon'] ) : ?> |
| 302 |
<div class="gutslider-prev"> |
| 303 |
<!-- <div class="gutslider-prev-icon"> --> |
| 304 |
<?php |
| 305 |
if ( $atts['navIconSource'] === 'library' ) { |
| 306 |
echo wp_kses( gutslider_display_icon( esc_attr( $atts['navPrevIcon'] ) ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output |
| 307 |
} else { |
| 308 |
echo wp_kses( $atts['customPrevSVG'], gutslider_allowed_svg_tags() ); |
| 309 |
} |
| 310 |
?> |
| 311 |
<!-- </div> --> |
| 312 |
</div> |
| 313 |
<div class="gutslider-next"> |
| 314 |
<!-- <div class="gutslider-next-icon"> --> |
| 315 |
<?php |
| 316 |
if ( $atts['navIconSource'] === 'library' ) { |
| 317 |
echo wp_kses( gutslider_display_icon( esc_attr( $atts['navNextIcon'] ) ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output |
| 318 |
} else { |
| 319 |
echo wp_kses( $atts['customNextSVG'], gutslider_allowed_svg_tags() ); |
| 320 |
} |
| 321 |
?> |
| 322 |
<!-- </div> --> |
| 323 |
</div> |
| 324 |
<?php else : ?> |
| 325 |
<div class="swiper-button-prev"></div> |
| 326 |
<div class="swiper-button-next"></div> |
| 327 |
<?php endif; ?> |
| 328 |
</div> |
| 329 |
<?php endif; ?> |
| 330 |
<?php |
| 331 |
if ( '1' === $atts['showThumbs'] && is_array( $atts['queryPosts'] ) && ! empty( $atts['queryPosts'] ) ) { |
| 332 |
$thumb_classes = [ 'swiper', 'gutslider-thumbs', 'thumb-content-' . $atts['thumbContent'] ]; |
| 333 |
if ( 'both' === $atts['thumbContent'] ) { |
| 334 |
$thumb_classes[] = 'thumb-title-' . $atts['thumbTitlePosition']; |
| 335 |
} |
| 336 |
$placeholder = GUTSLIDER_URL . 'assets/images/placeholder.svg'; |
| 337 |
?> |
| 338 |
<div class="<?php echo esc_attr( implode( ' ', $thumb_classes ) ); ?>"> |
| 339 |
<div class="swiper-wrapper"> |
| 340 |
<?php |
| 341 |
foreach ( $atts['queryPosts'] as $thumb_post ) { |
| 342 |
$thumb_media_id = isset( $thumb_post['featured_media'] ) ? $thumb_post['featured_media'] : ''; |
| 343 |
$thumb_url = $thumb_media_id ? wp_get_attachment_image_url( $thumb_media_id, 'medium' ) : ''; |
| 344 |
$thumb_alt = $thumb_media_id ? get_post_meta( $thumb_media_id, '_wp_attachment_image_alt', true ) : ''; |
| 345 |
$thumb_title = isset( $thumb_post['title']['rendered'] ) ? $thumb_post['title']['rendered'] : ''; |
| 346 |
?> |
| 347 |
<div class="swiper-slide"> |
| 348 |
<?php if ( 'title' !== $atts['thumbContent'] ) : ?> |
| 349 |
<img src="<?php echo esc_url( $thumb_url ? $thumb_url : $placeholder ); ?>" alt="<?php echo esc_attr( $thumb_alt ); ?>" /> |
| 350 |
<?php endif; ?> |
| 351 |
<?php if ( 'image' !== $atts['thumbContent'] && $thumb_title ) : ?> |
| 352 |
<span class="gutslider-thumb-title"><?php echo wp_kses_post( $thumb_title ); ?></span> |
| 353 |
<?php endif; ?> |
| 354 |
</div> |
| 355 |
<?php |
| 356 |
} |
| 357 |
?> |
| 358 |
</div> |
| 359 |
</div> |
| 360 |
<?php |
| 361 |
} |
| 362 |
?> |
| 363 |
</div> |
| 364 |
<?php |
| 365 |
} |
| 366 |
|
| 367 |
} |
| 368 |
|
| 369 |
// call the render callback function |
| 370 |
gutslider_post_slider( $attributes ); |
| 371 |
|
| 372 |
|
