` with a stretched link behind its content. * - Background images become real `` elements: responsive sizes, lazy loading for * slides after the first, the focal point kept. * - Slides without an image no longer print `background-image:url()`. * - A slide's fixed height becomes a minimum, so long content is never cut off. * - Background videos get the slide image as their poster; autoplay sliders get the * labels for their pause button (frontend.js). * - The newer settings (design, height mode, animations, background effect, tab * pagination, progress bar, deep links; per slide: position, text colour, width, * visibility, schedule) become classes and data attributes here. * * @package GutSlider\Blocks * @since 3.1.1 */ final class FlexibleSlider { /** Sliders rendered so far in this request. */ private static $sliders = 0; /** Slides rendered so far in the current slider. */ private static $slides = 0; /** Settings of the slider being rendered, for its slides. */ private static $context = array(); /** Slide content positions. */ const POSITIONS = array( 'top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right' ); /** Values the new slider settings may take. */ const DESIGNS = array( 'hero', 'split', 'cards', 'fullscreen', 'stacked', 'ticker' ); const ANIMATIONS = array( 'fade-up', 'fade', 'zoom', 'slide-left' ); const BG_EFFECTS = array( 'kenburns', 'parallax' ); /** * Constructor. */ public function __construct() { add_filter( 'render_block_data', array( $this, 'prepare' ), 10, 1 ); add_filter( 'render_block', array( $this, 'render' ), 20, 2 ); } /** * Before a slider renders: count it, and turn its slide height into a minimum. * * @param array $block Parsed block. * @return array */ public function prepare( $block ) { if ( 'gutsliders/any-content' !== ( $block['blockName'] ?? '' ) ) { return $block; } ++self::$sliders; self::$slides = 0; self::$context = $block['attrs'] ?? array(); $mode = $block['attrs']['heightMode'] ?? 'min'; $vertical = 'vertical' === ( $block['attrs']['direction'] ?? '' ); // Blocks saved before height modes wrote a fixed `height`: a minimum now (see below). if ( 'min' === $mode && ! $vertical && ! empty( $block['attrs']['blockStyle'] ) && is_string( $block['attrs']['blockStyle'] ) ) { $block['attrs']['blockStyle'] = self::min_height( $block['attrs']['blockStyle'] ); } return $block; } /** * `height` in the slide rules of a saved block style becomes `min-height` * (same as dynamic-style.js now writes it). * * @param string $css Block style. * @return string */ public static function min_height( $css ) { return (string) preg_replace_callback( '/(\.gutslider-[\w-]+\s+\.swiper-slide\s*\{)([^}]*)\}/', static function ( $match ) { return $match[1] . preg_replace( '/(?next_tag( array( 'class_name' => 'wp-block-gutsliders-any-content' ) ) ) { return $content; } // Same classes as flexClasses() in edit.js. $design = in_array( $attrs['design'] ?? '', self::DESIGNS, true ) ? $attrs['design'] : ''; $mode = $attrs['heightMode'] ?? 'min'; $animation = in_array( $attrs['contentAnimation'] ?? '', self::ANIMATIONS, true ) ? $attrs['contentAnimation'] : ''; $bg_effect = in_array( $attrs['bgEffect'] ?? '', self::BG_EFFECTS, true ) ? $attrs['bgEffect'] : ''; $autoplay = ! empty( $attrs['sliderOptions']['autoplay'] ); $classes = array_filter( array( $design ? 'gs-flex-design-' . $design : '', in_array( $mode, array( 'fixed', 'auto' ), true ) ? 'gs-height-' . $mode : '', 'vertical' === ( $attrs['direction'] ?? '' ) ? 'gs-vertical' : '', $animation ? 'gs-anim-' . $animation : '', $bg_effect ? 'gs-bg-' . $bg_effect : '', // showPagination is on by default (not saved when on). ! empty( $attrs['paginationTabs'] ) && ( $attrs['showPagination'] ?? true ) ? 'has-tab-pagination' : '', ! empty( $attrs['showProgress'] ) && $autoplay ? 'has-progress' : '', ) ); foreach ( $classes as $class ) { $tags->add_class( $class ); } // Screen reader wording for Swiper's accessibility module. $tags->set_attribute( 'data-label-carousel', __( 'carousel', 'slider-blocks' ) ); $tags->set_attribute( 'data-label-slide', __( 'slide', 'slider-blocks' ) ); /* translators: 1: slide number, 2: number of slides. */ $tags->set_attribute( 'data-label-position', __( '%1$s of %2$s', 'slider-blocks' ) ); if ( $autoplay ) { $tags->set_attribute( 'data-label-pause', __( 'Pause slideshow', 'slider-blocks' ) ); $tags->set_attribute( 'data-label-play', __( 'Play slideshow', 'slider-blocks' ) ); } // Deep links: #{anchor or id}-{slide number}. if ( ! empty( $attrs['deepLink'] ) ) { $id = $tags->get_attribute( 'id' ); $tags->set_attribute( 'data-deep-link', is_string( $id ) && '' !== $id ? $id : (string) ( $attrs['uniqueId'] ?? '' ) ); } return $tags->get_updated_html(); } /** * Whether a slide is outside its schedule (site time zone). * * @param array $attrs Slide attributes. * @return bool */ private static function out_of_schedule( $attrs ) { $start = isset( $attrs['scheduleStart'] ) ? (string) $attrs['scheduleStart'] : ''; $end = isset( $attrs['scheduleEnd'] ) ? (string) $attrs['scheduleEnd'] : ''; if ( '' === $start && '' === $end ) { return false; } try { $zone = wp_timezone(); $now = new \DateTimeImmutable( 'now', $zone ); if ( '' !== $start && $now < new \DateTimeImmutable( $start, $zone ) ) { return true; } if ( '' !== $end && $now > new \DateTimeImmutable( $end, $zone ) ) { return true; } } catch ( \Exception $e ) { return false; } return false; } /** * One slide. * * @param string $content Slide HTML. * @param array $attrs Attributes (saved, non-default ones). * @return string */ private static function slide( $content, $attrs ) { // The slide's content box: (linked slide) or