', esc_attr( implode( ' ', $class_name ) ), esc_attr( implode( ' ', apply_filters( 'gutenify_render_wrapper_class', $class, $attributes ) ) ), esc_attr( implode( ' ', apply_filters( 'gutenify_render_wrapper_styles', $styles, $attributes ) ) ) ); $list_items_markup = ''; $list_items_markup = $content; $block_content .= $list_items_markup; $block_content .= '

'; $has_navigation = ! empty( $attributes['hasNavigation'] ) && true === $attributes['hasNavigation']; $has_pagination = ! empty( $attributes['hasPagination'] ) && true === $attributes['hasPagination']; if ( $has_navigation ) { $block_content .= '

'; } if ( $has_pagination ) { $block_content .= '

'; } $block_content .= '

'; $block_content .= '

'; $block_content .= ''; $columns = ! empty( $attributes['columns'] ) ? $attributes['columns'] : 1; $space_between = ! empty( $attributes['spaceBetween'] ) ? $attributes['spaceBetween'] : 0; $block_client_id = ! empty( $attributes['blockClientId'] ) ? $attributes['blockClientId'] : 1; ob_start(); wp_enqueue_script( 'gutenify-swiper' ); $config = '{ loop: true, slidesPerView: ' . $columns . ', breakpoints: { // when window width is >= 320px 320: { slidesPerView: 1, spaceBetween: 20 }, // when window width is >= 640px 640: { slidesPerView: 1, spaceBetween: 15 }, 1024: { slidesPerView: ' . $columns . ', spaceBetween: ' . $space_between . ' } },'; $config .= ' spaceBetween:' . $space_between . ','; if ( $has_navigation ) { $config .= ' navigation:{ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", },'; } $config .= ' pagination:{ el: ".swiper-pagination", clickable: true, }, '; $config .= ' scrollbar:{ draggable: true } }'; $slider_var = 'slider_' . str_replace( '-', '_', $block_client_id ); $slider_function_name = 'reinitSlider' . $slider_var; wp_add_inline_script( 'gutenify-swiper', 'var ' . $slider_var . ' = new Swiper("#gutenify-section-' . $block_client_id . ' .swiper-container", ' . $config . '); jQuery(function($){ $(document).on("containerStretched", function(){ var swiperWrapper = $("' . $block_client_id . ' .swiper-wrapper"); var newSlides = swiperWrapper.children(".swiper-slide").clone(true); ' . $slider_var . '.destroy(); swiperWrapper.empty().append(newSlides); swiperWrapper.attr("style", ""); mySwiper = new Swiper("#gutenify-section-' . $block_client_id . ' .swiper-container", ' . $config . '); }); });' ); $block_content .= ''; echo $block_content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped $output = ob_get_contents(); ob_end_clean(); return $output; } /** * Registers the `gallery` block on server. */ function gutenify_register_slider_block() { // Return early if this function does not exist. if ( ! function_exists( 'register_block_type' ) ) { return; } // Load attributes from block.json. ob_start(); include GUTENIFY_PLUGIN_DIR . 'src/blocks/slider/block.json'; $metadata = json_decode( ob_get_clean(), true ); register_block_type( 'gutenify/slider', array( 'attributes' => $metadata['attributes'], 'render_callback' => 'gutenify_render_slider_block', ) ); } add_action( 'init', 'gutenify_register_slider_block' );