slider-blocks / src / blocks / post-slider / render.php

render.php in GutSlider – All in One Slider and Carousel Blocks for Gutenberg 2.11.1, at src/blocks/post-slider/render.php

284 lines 16.9 KB

Raw Download Zip

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' ) ) {
15	function gutslider_post_slider( $attributes ) {
16	// Extract attributes with default values
17	$defaults = [
18	'queryPosts' => [],
19	'showTitle' => true,
20	'showCat' => true,
21	'showExcerpt' => true,
22	'showBtn' => true,
23	'linkTitle' => true,
24	'titleTag' => 'h2',
25	'btnLabel' => __( 'Read More', 'slider-blocks' ),
26	'enableOverlay' => true,
27	'sliderType' => 'slider',
28	'uniqueId' => '',
29	'navContainerPosition' => 'nav_inside',
30	'navPosition' => 'nav_cc',
31	'catAnimation' => '',
32	'titleAnimation' => '',
33	'exptAnimation' => '',
34	'btnAnimation' => '',
35	'sliderOptions' => [],
36	'showNavigation' => true,
37	'showPagination' => true,
38	'customNavIcon' => false,
39	'navIconSource' => 'library',
40	'navPrevIcon' => 'arrowLeft',
41	'navNextIcon' => 'arrowRight',
42	'customPrevSVG' => '',
43	'customNextSVG' => '',
44	'excerptLength' => 20,
45	'enableRemoteNav' => false,
46	'remotePrevSelector' => '',
47	'remoteNextSelector' => '',
48	'detachContent' => false, // New attribute for detaching content
49	];
50
51	$atts = wp_parse_args( $attributes, $defaults );
52
53	// Sanitize attributes
54	$atts = array_map( 'sanitize_text_field', $atts );
55	$atts['queryPosts'] = isset( $attributes['queryPosts'] ) ? $attributes['queryPosts'] : [];
56	$atts['sliderOptions'] = isset( $attributes['sliderOptions'] ) ? $attributes['sliderOptions'] : [];
57	$atts['focusPoints'] = isset( $attributes['focusPoints'] ) ? $attributes['focusPoints'] : [];
58
59	// Block classes
60	$block_classes = [
61	esc_attr( $atts['uniqueId'] ),
62	esc_attr( $atts['navContainerPosition'] ),
63	esc_attr( $atts['navPosition'] ),
64	];
65
66	// Block wrapper attributes
67	$block_props = get_block_wrapper_attributes( [
68	'class' => implode( ' ', array_filter( $block_classes ) )
69	] );
70
71	// Single block classes
72	$swiper_classes = [
73	'swiper-slide',
74	$atts['sliderType'] === 'slider' ? 'slide-mode' : ''
75	];
76
77	if ( ! empty( $atts['detachContent'] ) ) {
78	$swiper_classes[] = 'detach-content';
79	}
80
81	?>
82	<div <?php echo wp_kses_post( $block_props ); ?> data-swiper-options="<?php echo esc_attr( wp_json_encode( $atts['sliderOptions'] ) ); ?>"
83	<?php
84	if ( $atts['enableRemoteNav'] ) {
85	echo 'data-rprev="' . esc_attr( $atts['remotePrevSelector'] ) . '" ';
86	echo 'data-rnext="' . esc_attr( $atts['remoteNextSelector'] ) . '" ';
87	}
88	?>
89	>
90	<div class="swiper">
91	<div class="swiper-wrapper">
92	<?php
93	if ( is_array( $atts['queryPosts'] ) && ! empty( $atts['queryPosts'] ) ) {
94	$index = 0;
95	foreach ( $atts['queryPosts'] as $post ) {
96	$index++;
97	$post_title = isset( $post['title']['rendered'] ) ? $post['title']['rendered'] : '';
98	$post_excerpt = isset( $post['excerpt']['rendered'] ) ? $post['excerpt']['rendered'] : '';
99	$post_link = isset( $post['link'] ) ? $post['link'] : '';
100	$post_image_id = isset( $post['featured_media'] ) ? $post['featured_media'] : '';
101	$post_image = wp_get_attachment_image_url( $post_image_id, 'full' );
102	// Check if focusPoints is set and not empty
103	$focusPoints = isset( $atts['focusPoints'] ) && is_array( $atts['focusPoints'] ) ? $atts['focusPoints'] : [];
104	$bg_position = isset( $focusPoints[$index - 1] ) && isset( $focusPoints[$index - 1]['x'] ) && isset( $focusPoints[$index - 1]['y'] )
105	? sprintf( 'background-position: %d%% %d%%;', round( $focusPoints[$index - 1]['x'] * 100 ), round( $focusPoints[$index - 1]['y'] * 100 ) )
106	: 'background-position: center center;';
107	$bg_style = $post_image ? sprintf( 'background-image: url(%s); %s', esc_url( $post_image ), $bg_position ) : $bg_position;
108	$post_categories = isset( $post['categories'] ) ? $post['categories'] : [];
109
110	// create object-position style
111	$object_position = isset( $focusPoints[$index - 1] ) && isset( $focusPoints[$index - 1]['x'] ) && isset( $focusPoints[$index - 1]['y'] )
112	? sprintf( 'object-position: %d%% %d%%;', round( $focusPoints[$index - 1]['x'] * 100 ), round( $focusPoints[$index - 1]['y'] * 100 ) )
113	: 'object-position: center center;';
114
115	?>
116	<div class="<?php echo esc_attr( implode( ' ', $swiper_classes ) ); ?>">
117	<div class="swiper-container-outer"
118	<?php if ( ! $atts['detachContent'] ) : ?>
119	style="<?php echo esc_attr( $bg_style ); ?>"
120	<?php endif; ?>
121	>
122	<?php if ( $atts['enableOverlay'] ) : ?>
123	<div class="gutslider-overlay"></div>
124	<?php endif; ?>
125	<?php
126	if ( $atts['detachContent'] && $post_image ) {
127	?>
128	<a class="detached-featured-image" href="<?php echo esc_url( $post_link ); ?>">
129	<img src="<?php echo esc_url( $post_image ); ?>" alt="<?php echo esc_attr( $post_title ); ?>"
130	style="<?php echo esc_attr( $object_position ); ?>"
131	/>
132	</a>
133	<?php
134	}
135	?>
136	<div class="gutslider-content-wrapper<?php echo $atts['detachContent'] ? ' detach-content' : ''; ?>">
137	<div class="gutslider-content-inner">
138	<?php if ( $atts['showCat'] ) : ?>
139	<div class="post-categories <?php echo esc_attr( $atts['catAnimation'] ); ?>">
140	<?php
141	foreach ( $post_categories as $category_id ) {
142	$category = get_category( $category_id );
143	if ( $category ) {
144	printf( '<span class="post-category">%s</span>', esc_html( $category->name ) );
145	}
146	}
147	?>
148	</div>
149	<?php endif; ?>
150
151	<?php if ( $atts['showTitle'] ) : ?>
152	<?php
153	$title_tag = tag_escape( $atts['titleTag'] );
154	$title_content = sprintf(
155	'<%1$s class="post-title %2$s">%3$s</%1$s>',
156	$title_tag,
157	esc_attr( $atts['titleAnimation'] ),
158	esc_html( $post_title )
159	);
160
161	if ( $atts['linkTitle'] ) {
162	printf(
163	'<a href="%s" class="post-title">%s</a>',
164	esc_url( $post_link ),
165	$title_content // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
166	);
167	} else {
168	echo wp_kses_post( $title_content );
169	}
170	?>
171	<?php endif; ?>
172
173	<?php if ( $atts['showExcerpt'] ) : ?>
174	<div class="post-excerpt <?php echo esc_attr( $atts['exptAnimation'] ); ?>">
175	<?php
176	if ( $atts['excerptLength'] > 0 ) {
177	$post_excerpt = wp_trim_words( $post_excerpt, $atts['excerptLength'], '...' );
178	}
179	echo wp_kses_post( $post_excerpt );
180	?>
181	</div>
182	<?php endif; ?>
183
184	<?php if ( $atts['showBtn'] ) : ?>
185	<div class="post-cta-wrapper <?php echo esc_attr( $atts['btnAnimation'] ); ?>">
186	<a href="<?php echo esc_url( $post_link ); ?>" class="post-cta">
187	<?php echo esc_html( $atts['btnLabel'] ); ?>
188	</a>
189	</div>
190	<?php endif; ?>
191	</div>
192	</div>
193	</div>
194	</div>
195	<?php
196	}
197	}
198	?>
199	</div>
200	<?php
201	if( $atts['showNavigation'] === '1' && $atts['navContainerPosition'] === 'nav_inside' && $atts['enableRemoteNav'] !== '1' ) {
202	?>
203	<div class="gutslider-nav nav_inside <?php echo esc_attr( $atts['navPosition'] ); ?>">
204	<?php if ( $atts['customNavIcon'] ) : ?>
205	<div class="gutslider-prev">
206	<!-- <div class="gutslider-prev-icon"> -->
207	<?php
208	if ( $atts['navIconSource'] === 'library' ) {
209	echo wp_kses( gutslider_display_icon( $atts['navPrevIcon'] ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output
210	} else {
211	echo wp_kses( $atts['customPrevSVG'], gutslider_allowed_svg_tags() );
212	}
213	?>
214	<!-- </div> -->
215	</div>
216	<div class="gutslider-next">
217	<!-- <div class="gutslider-next-icon"> -->
218	<?php
219	if ( $atts['navIconSource'] === 'library' ) {
220	echo wp_kses( gutslider_display_icon( $atts['navNextIcon'] ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output
221	} else {
222	echo wp_kses( $atts['customNextSVG'], gutslider_allowed_svg_tags() );
223	}
224	?>
225	<!-- </div> -->
226	</div>
227	<?php else : ?>
228	<div class="swiper-button-prev"></div>
229	<div class="swiper-button-next"></div>
230	<?php endif; ?>
231	</div>
232	<?php
233	}
234	?>
235	<?php
236	if( $atts['showPagination'] === '1' ) {
237	?>
238	<div class="swiper-pagination"></div>
239	<?php
240	}
241	?>
242	</div>
243	<?php
244	if ( $atts['showNavigation'] === '1' && $atts['navContainerPosition'] === 'nav_outside' && $atts['enableRemoteNav'] !== '1' ) : ?>
245	<div class="gutslider-nav nav_outside <?php echo esc_attr( $atts['navPosition'] ); ?>">
246	<?php if ( $atts['customNavIcon'] ) : ?>
247	<div class="gutslider-prev">
248	<!-- <div class="gutslider-prev-icon"> -->
249	<?php
250	if ( $atts['navIconSource'] === 'library' ) {
251	echo wp_kses( gutslider_display_icon( esc_attr( $atts['navPrevIcon'] ) ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output
252	} else {
253	echo wp_kses( $atts['customPrevSVG'], gutslider_allowed_svg_tags() );
254	}
255	?>
256	<!-- </div> -->
257	</div>
258	<div class="gutslider-next">
259	<!-- <div class="gutslider-next-icon"> -->
260	<?php
261	if ( $atts['navIconSource'] === 'library' ) {
262	echo wp_kses( gutslider_display_icon( esc_attr( $atts['navNextIcon'] ) ), gutslider_allowed_svg_tags() ); // Ensure this function properly escapes output
263	} else {
264	echo wp_kses( $atts['customNextSVG'], gutslider_allowed_svg_tags() );
265	}
266	?>
267	<!-- </div> -->
268	</div>
269	<?php else : ?>
270	<div class="swiper-button-prev"></div>
271	<div class="swiper-button-next"></div>
272	<?php endif; ?>
273	</div>
274	<?php endif; ?>
275	</div>
276	<?php
277	}
278
279	}
280
281	// call the render callback function
282	gutslider_post_slider( $attributes );
283
284