PluginProbe ʕ •ᴥ•ʔ
FrontBlocks for Gutenberg/GeneratePress / 1.3.4
FrontBlocks for Gutenberg/GeneratePress v1.3.4
trunk 0.2.0 0.2.1 0.2.2 0.2.3 0.2.4 0.2.5 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.1.0 1.2.0 1.2.1 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 ci-artifacts
frontblocks / includes / Frontend / Carousel.php
frontblocks / includes / Frontend Last commit date
Animations.php 1 month ago BackButton.php 7 months ago BeforeAfter.php 1 month ago BlockPatterns.php 4 months ago Carousel.php 1 month ago ContainerEdgeAlignment.php 1 month ago Counter.php 1 month ago Events.php 7 months ago FluidTypography.php 4 months ago Gallery.php 8 months ago GravityFormsInline.php 1 month ago Headline.php 1 month ago InsertPost.php 1 month ago ProductCategories.php 8 months ago ReadingProgress.php 7 months ago ReadingTime.php 8 months ago ShapeAnimations.php 1 month ago StackedImages.php 4 months ago StickyColumn.php 1 month ago Testimonials.php 8 months ago TextAnimation.php 1 month ago
Carousel.php
469 lines
1 <?php
2 /**
3 * Carousel module for FrontBlocks.
4 *
5 * @package FrontBlocks
6 * @author David Perez <david@close.technology>
7 * @copyright 2023 Closemarketing
8 * @version 1.0
9 */
10
11 namespace FrontBlocks\Frontend;
12
13 defined( 'ABSPATH' ) || exit;
14
15 /**
16 * Carousel class.
17 *
18 * @since 1.0.0
19 */
20 class Carousel {
21
22 /**
23 * Constructor.
24 */
25 public function __construct() {
26 $this->init_hooks();
27 }
28
29 /**
30 * Initialize hooks.
31 *
32 * @return void
33 */
34 private function init_hooks() {
35 add_action( 'init', array( $this, 'register_frontend_assets' ) );
36 add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
37 add_action( 'enqueue_block_assets', array( $this, 'enqueue_block_canvas_assets' ) );
38 add_filter( 'render_block_generateblocks/grid', array( $this, 'add_custom_attributes_to_grid_block' ), 10, 2 );
39 add_filter( 'render_block_generateblocks/element', array( $this, 'add_custom_attributes_to_element_block' ), 10, 2 );
40 add_filter( 'render_block_core/group', array( $this, 'add_custom_attributes_to_core_group_block' ), 10, 2 );
41 add_action( 'init', array( $this, 'register_custom_attributes' ), 5 );
42 }
43
44 /**
45 * Register frontend carousel assets for conditional enqueueing.
46 *
47 * @return void
48 */
49 public function register_frontend_assets() {
50 // Assets are registered in Plugin_Main::register_scripts().
51 // This method exists as a hook point for any additional registration needs.
52 }
53
54 /**
55 * Enqueue carousel frontend assets when a carousel block is detected.
56 *
57 * @return void
58 */
59 private function enqueue_carousel_assets() {
60 if ( ! wp_style_is( 'frontblocks-carousel', 'enqueued' ) ) {
61 wp_enqueue_style( 'frontblocks-carousel' );
62 }
63 if ( ! wp_script_is( 'frontblocks-carousel-custom', 'enqueued' ) ) {
64 wp_enqueue_script( 'frontblocks-carousel-custom' );
65 }
66 }
67
68 /**
69 * Enqueue carousel CSS in the editor canvas (iframe).
70 *
71 * @return void
72 */
73 public function enqueue_block_canvas_assets() {
74 if ( ! is_admin() ) {
75 return;
76 }
77 wp_enqueue_style(
78 'frontblocks-carousel-editor',
79 FRBL_PLUGIN_URL . 'assets/carousel/frontblocks-carousel-editor.css',
80 array(),
81 FRBL_VERSION
82 );
83 }
84
85 /**
86 * Enqueue block editor assets.
87 *
88 * @return void
89 */
90 public function enqueue_block_editor_assets() {
91 wp_enqueue_script(
92 'frontblocks-advanced-option',
93 FRBL_PLUGIN_URL . 'assets/carousel/frontblocks-advanced-option.js',
94 array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-data', 'wp-edit-post' ),
95 FRBL_VERSION,
96 true
97 );
98
99 // Set script translations for JavaScript.
100 wp_set_script_translations(
101 'frontblocks-advanced-option',
102 'frontblocks'
103 );
104 }
105
106 /**
107 * Add custom attributes to grid block.
108 *
109 * @param string $block_content Block content.
110 * @param array $block Block attributes.
111 * @return string
112 */
113 public function add_custom_attributes_to_grid_block( $block_content, $block ) {
114 $attrs = $block['attrs'] ?? array();
115 $custom_option = isset( $attrs['frblGridOption'] ) ? sanitize_text_field( $attrs['frblGridOption'] ) : '';
116 $items_to_view = isset( $attrs['frblItemsToView'] ) ? (int) $attrs['frblItemsToView'] : 4;
117 $laptop_to_view = isset( $attrs['frblLaptopToView'] ) ? (int) $attrs['frblLaptopToView'] : 3;
118 $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2;
119 $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1;
120 $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : '';
121 $gap = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20;
122 $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true;
123 $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows';
124 $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : '';
125 $button_bg_color = isset( $attrs['frblButtonBgColor'] ) ? sanitize_text_field( $attrs['frblButtonBgColor'] ) : '';
126 $buttons_position = isset( $attrs['frblButtonsPosition'] ) ? sanitize_text_field( $attrs['frblButtonsPosition'] ) : 'side';
127 $disable_on_desktop = isset( $attrs['frblDisableOnDesktop'] ) ? (bool) $attrs['frblDisableOnDesktop'] : false;
128
129 // Add data attributes to the wrapper div if carousel is enabled.
130 if ( 'carousel' === $custom_option || 'slider' === $custom_option ) {
131 $attributes = '';
132 if ( 'slider' === $custom_option ) {
133 $attributes .= ' data-rewind="' . esc_attr( $rewind ) . '"';
134 }
135
136 // Add data attributes and the 'frontblocks-carousel' class to the first div in the block content.
137 $block_content = preg_replace(
138 '/<div([^>]*)class="([^"]*gb-grid-wrapper[^"]*)"([^>]*)>/',
139 '<div$1class="$2 frontblocks-carousel"$3' .
140 ' data-type="' . esc_attr( $custom_option ) . '"' .
141 ' data-view="' . esc_attr( $items_to_view ) . '"' .
142 ' data-laptop-view="' . esc_attr( $laptop_to_view ) . '"' .
143 ' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' .
144 ' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' .
145 ' data-autoplay="' . esc_attr( $autoplay ) . '"' .
146 ' data-gap="' . esc_attr( $gap ) . '"' .
147 ' data-buttons="' . esc_attr( $buttons ) . '"' .
148 ' data-buttons-color="' . esc_attr( $button_color ) . '"' .
149 ' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' .
150 ' data-buttons-position="' . esc_attr( $buttons_position ) . '"' .
151 ' data-disable-on-desktop="' . esc_attr( $disable_on_desktop ? 'true' : 'false' ) . '"' .
152 $attributes .
153 '>',
154 $block_content,
155 1 // Only replace the first occurrence.
156 );
157
158 $this->enqueue_carousel_assets();
159 }
160
161 return $block_content;
162 }
163
164 /**
165 * Add custom attributes to element block.
166 *
167 * @param string $block_content Block content.
168 * @param array $block Block attributes.
169 * @return string
170 */
171 public function add_custom_attributes_to_element_block( $block_content, $block ) {
172 $attrs = $block['attrs'] ?? array();
173
174 // Check if this element has grid display.
175 $styles = $attrs['styles'] ?? array();
176 $display = $styles['display'] ?? '';
177
178 // Only process if it's a grid element.
179 if ( 'grid' !== $display ) {
180 return $block_content;
181 }
182
183 $custom_option = isset( $attrs['frblGridOption'] ) ? sanitize_text_field( $attrs['frblGridOption'] ) : '';
184 $items_to_view = isset( $attrs['frblItemsToView'] ) ? (int) $attrs['frblItemsToView'] : 4;
185 $laptop_to_view = isset( $attrs['frblLaptopToView'] ) ? (int) $attrs['frblLaptopToView'] : 3;
186 $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2;
187 $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1;
188 $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : '';
189 $gap = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20;
190 $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true;
191 $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows';
192 $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : '';
193 $button_bg_color = isset( $attrs['frblButtonBgColor'] ) ? sanitize_text_field( $attrs['frblButtonBgColor'] ) : '';
194 $buttons_position = isset( $attrs['frblButtonsPosition'] ) ? sanitize_text_field( $attrs['frblButtonsPosition'] ) : 'side';
195 $disable_on_desktop = isset( $attrs['frblDisableOnDesktop'] ) ? (bool) $attrs['frblDisableOnDesktop'] : false;
196
197 // Add data attributes to the wrapper div if carousel is enabled.
198 if ( 'carousel' === $custom_option || 'slider' === $custom_option ) {
199 $attributes = '';
200 if ( 'slider' === $custom_option ) {
201 $attributes .= ' data-rewind="' . esc_attr( $rewind ) . '"';
202 }
203
204 // Add data attributes and the 'frontblocks-carousel' class to the first div in the block content.
205 $block_content = preg_replace(
206 '/<div([^>]*)class="([^"]*gb-element-[^"]*)"([^>]*)>/',
207 '<div$1class="$2 frontblocks-carousel"$3' .
208 ' data-type="' . esc_attr( $custom_option ) . '"' .
209 ' data-view="' . esc_attr( $items_to_view ) . '"' .
210 ' data-laptop-view="' . esc_attr( $laptop_to_view ) . '"' .
211 ' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' .
212 ' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' .
213 ' data-autoplay="' . esc_attr( $autoplay ) . '"' .
214 ' data-gap="' . esc_attr( $gap ) . '"' .
215 ' data-buttons="' . esc_attr( $buttons ) . '"' .
216 ' data-buttons-color="' . esc_attr( $button_color ) . '"' .
217 ' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' .
218 ' data-buttons-position="' . esc_attr( $buttons_position ) . '"' .
219 ' data-disable-on-desktop="' . esc_attr( $disable_on_desktop ? 'true' : 'false' ) . '"' .
220 $attributes .
221 '>',
222 $block_content,
223 1 // Only replace the first occurrence.
224 );
225
226 $this->enqueue_carousel_assets();
227 }
228
229 return $block_content;
230 }
231
232 /**
233 * Add custom attributes to core/group block.
234 *
235 * @param string $block_content Block content.
236 * @param array $block Block attributes.
237 * @return string
238 */
239 public function add_custom_attributes_to_core_group_block( $block_content, $block ) {
240 $attrs = $block['attrs'] ?? array();
241
242 // Check if this group has grid layout.
243 $layout = $attrs['layout'] ?? array();
244 $layout_type = $layout['type'] ?? '';
245
246 // Only process if it's a grid layout.
247 if ( 'grid' !== $layout_type ) {
248 return $block_content;
249 }
250
251 $custom_option = isset( $attrs['frblGridOption'] ) ? sanitize_text_field( $attrs['frblGridOption'] ) : '';
252 $items_to_view = isset( $attrs['frblItemsToView'] ) ? (int) $attrs['frblItemsToView'] : 4;
253 $laptop_to_view = isset( $attrs['frblLaptopToView'] ) ? (int) $attrs['frblLaptopToView'] : 3;
254 $tablet_to_view = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2;
255 $responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1;
256 $autoplay = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : '';
257 $gap = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20;
258 $rewind = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true;
259 $buttons = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows';
260 $button_color = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : '';
261 $button_bg_color = isset( $attrs['frblButtonBgColor'] ) ? sanitize_text_field( $attrs['frblButtonBgColor'] ) : '';
262 $buttons_position = isset( $attrs['frblButtonsPosition'] ) ? sanitize_text_field( $attrs['frblButtonsPosition'] ) : 'side';
263 $disable_on_desktop = isset( $attrs['frblDisableOnDesktop'] ) ? (bool) $attrs['frblDisableOnDesktop'] : false;
264
265 // Add data attributes to the wrapper div if carousel is enabled.
266 if ( 'carousel' === $custom_option || 'slider' === $custom_option ) {
267 $attributes = '';
268 if ( 'slider' === $custom_option ) {
269 $attributes .= ' data-rewind="' . esc_attr( $rewind ) . '"';
270 }
271
272 // Add data attributes and the 'frontblocks-carousel' class to the first div in the block content.
273 $block_content = preg_replace(
274 '/<div([^>]*)class="([^"]*wp-block-group[^"]*)"([^>]*)>/',
275 '<div$1class="$2 frontblocks-carousel"$3' .
276 ' data-type="' . esc_attr( $custom_option ) . '"' .
277 ' data-view="' . esc_attr( $items_to_view ) . '"' .
278 ' data-laptop-view="' . esc_attr( $laptop_to_view ) . '"' .
279 ' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' .
280 ' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' .
281 ' data-autoplay="' . esc_attr( $autoplay ) . '"' .
282 ' data-gap="' . esc_attr( $gap ) . '"' .
283 ' data-buttons="' . esc_attr( $buttons ) . '"' .
284 ' data-buttons-color="' . esc_attr( $button_color ) . '"' .
285 ' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' .
286 ' data-buttons-position="' . esc_attr( $buttons_position ) . '"' .
287 ' data-disable-on-desktop="' . esc_attr( $disable_on_desktop ? 'true' : 'false' ) . '"' .
288 $attributes .
289 '>',
290 $block_content,
291 1 // Only replace the first occurrence.
292 );
293
294 $this->enqueue_carousel_assets();
295 }
296
297 return $block_content;
298 }
299
300 /**
301 * Register custom attributes for blocks.
302 *
303 * @return void
304 */
305 public function register_custom_attributes() {
306 // Register attributes before GenerateBlocks registers its blocks.
307 add_filter(
308 'generateblocks_blocks_registered_block',
309 array( $this, 'register_custom_attributes_for_grid_block' ),
310 9,
311 2
312 );
313
314 // Register attributes from frontend side too.
315 add_action(
316 'enqueue_block_editor_assets',
317 array( $this, 'add_inline_script_for_attributes' )
318 );
319 }
320
321 /**
322 * Register custom attributes for GenerateBlocks Grid and Element blocks.
323 *
324 * @param array $block_args The block arguments.
325 * @param string $block_type The name of the block.
326 * @return array Modified block arguments.
327 */
328 public function register_custom_attributes_for_grid_block( $block_args, $block_type ) {
329 if ( 'generateblocks/grid' !== $block_type && 'generateblocks/element' !== $block_type ) {
330 return $block_args;
331 }
332
333 $block_args['attributes']['frblGridOption'] = array(
334 'type' => 'string',
335 'default' => 'none',
336 );
337 $block_args['attributes']['frblItemsToView'] = array(
338 'type' => 'string',
339 'default' => '4',
340 );
341 $block_args['attributes']['frblLaptopToView'] = array(
342 'type' => 'string',
343 'default' => '3',
344 );
345 $block_args['attributes']['frblTabletToView'] = array(
346 'type' => 'string',
347 'default' => '2',
348 );
349 $block_args['attributes']['frblResponsiveToView'] = array(
350 'type' => 'string',
351 'default' => '1',
352 );
353 $block_args['attributes']['frblAutoplay'] = array(
354 'type' => 'string',
355 'default' => '',
356 );
357 $block_args['attributes']['frblGap'] = array(
358 'type' => 'string',
359 'default' => '20',
360 );
361 $block_args['attributes']['frblRewind'] = array(
362 'type' => 'boolean',
363 'default' => true,
364 );
365 $block_args['attributes']['frblButtons'] = array(
366 'type' => 'string',
367 'default' => 'arrows',
368 );
369 $block_args['attributes']['frblButtonColor'] = array(
370 'type' => 'string',
371 'default' => '',
372 );
373 $block_args['attributes']['frblButtonBgColor'] = array(
374 'type' => 'string',
375 'default' => '',
376 );
377 $block_args['attributes']['frblButtonsPosition'] = array(
378 'type' => 'string',
379 'default' => 'side',
380 );
381 $block_args['attributes']['frblDisableOnDesktop'] = array(
382 'type' => 'boolean',
383 'default' => false,
384 );
385
386 return $block_args;
387 }
388
389 /**
390 * Add inline script for block attributes.
391 *
392 * @return void
393 */
394 public function add_inline_script_for_attributes() {
395 wp_add_inline_script(
396 'wp-blocks',
397 "
398 wp.hooks.addFilter(
399 'blocks.registerBlockType',
400 'frontblocks/grid-attributes',
401 function( settings, name ) {
402 if ( name !== 'generateblocks/grid' && name !== 'generateblocks/element' && name !== 'core/group' ) {
403 return settings;
404 }
405
406 settings.attributes = {
407 ...settings.attributes,
408 frblGridOption: {
409 type: 'string',
410 default: 'none'
411 },
412 frblItemsToView: {
413 type: 'string',
414 default: '4'
415 },
416 frblLaptopToView: {
417 type: 'string',
418 default: '3'
419 },
420 frblTabletToView: {
421 type: 'string',
422 default: '2'
423 },
424 frblResponsiveToView: {
425 type: 'string',
426 default: '1'
427 },
428 frblAutoplay: {
429 type: 'string',
430 default: ''
431 },
432 frblGap: {
433 type: 'string',
434 default: '20'
435 },
436 frblButtons: {
437 type: 'string',
438 default: 'arrows'
439 },
440 frblButtonsPosition: {
441 type: 'string',
442 default: 'side'
443 },
444 frblButtonColor: {
445 type: 'string',
446 default: ''
447 },
448 frblButtonBgColor: {
449 type: 'string',
450 default: ''
451 },
452 frblRewind: {
453 type: 'boolean',
454 default: true
455 },
456 frblDisableOnDesktop: {
457 type: 'boolean',
458 default: false
459 }
460 };
461
462 return settings;
463 }
464 );
465 "
466 );
467 }
468 }
469