diff --git a/FILTERS.md b/FILTERS.md index e0623aea..34bd7077 100644 --- a/FILTERS.md +++ b/FILTERS.md @@ -1717,6 +1717,25 @@ Filters the intermediate output array of the `fictioneer_filter_media_buttons( $ --- +### `apply_filters( 'fictioneer_filter_splide_arrows', $html, $uid )` +Filters the HTML of the Splide arrows returned by the `fictioneer_get_splide_arrows()` function. These arrows are only used in shortcodes. For custom HTML setups, please refer to the [Splide documentation](https://splidejs.com/guides/arrows/#custom-arrows). + +**Parameters:** +* $html (string) – The HTML for the Splide arrows. +* $uid (string|null) – Optional. Unique ID of the target element (only for reference). + +**Example:** +```php +// Change the Splide arrow icons (right, because they get rotated) + +function child_change_splide_arrows( $html, $uid ) { + return '
'; +} +add_filter( 'fictioneer_filter_splide_arrows', 'child_change_splide_arrows', 10, 2 ); +``` + +--- + ### `apply_filters( 'fictioneer_filter_splide_breakpoints', $breakpoints, $json_string, $uid )` Filters the associative array of Splide breakpoints returned by the `fictioneer_extract_splide_breakpoints()` function. These breakpoints are used to generate dynamic placeholder styles for a specific slider. Modifying the breakpoints at this stage is generally inadvisable, the filter exists primarily for completeness and edge cases. diff --git a/css/splide.css b/css/splide.css index c2efee3d..8e173117 100644 --- a/css/splide.css +++ b/css/splide.css @@ -1 +1 @@ -@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.splide{--this-arrow-size: clamp(20px, 6.25vw - 0px, 40px);--this-outset: 6px;width:calc(100% + 2*var(--this-outset));max-width:100vw;transform:translateX(calc(-1 * var(--this-outset)));padding-top:var(--this-arrow-vertical-padding, 0px);padding-left:calc(var(--this-arrow-horizontal-padding, 0px));padding-bottom:var(--this-arrow-vertical-padding, 0px);padding-right:calc(var(--this-arrow-horizontal-padding, 0px) + var(--this-pagination-side-padding, 0px))}.splide._splide-placeholder{visibility:visible}.splide._splide-placeholder .splide__slide:first-child{width:100%}.splide.splide--ttb{--this-outset: 0px}.splide.splide--ttb .splide__slide{height:auto !important}.splide.splide--ttb .splide__track{padding:0 !important}.splide:has(.splide__pagination){--this-arrow-offset: 9px}.splide:has(.splide__arrows){--this-arrow-horizontal-padding: var(--this-arrow-size)}.splide:has(.splide__arrows--ttb){--this-arrow-offset: 0px;--this-arrow-horizontal-padding: 0px;--this-arrow-vertical-padding: var(--this-arrow-size)}.splide:has(.splide__pagination--ttb){--this-pagination-side-padding: 24px}.splide:has(.splide__pagination--ttb) .splide__arrow--next{right:16px}.splide__track{padding:var(--this-outset) var(--this-outset) var(--this-pagination-vertical-padding, 16px) !important}.splide.article-card-block.is-overflow .splide__track{--this-pagination-vertical-padding: 0px}.splide.article-card-block.is-overflow .splide__track .splide__pagination:not(.splide__pagination--ttb){margin-top:16px}.splide__arrow{position:absolute;z-index:10;top:calc(50% - var(--this-arrow-offset, 0px));display:grid;place-content:center;line-height:1;height:calc(var(--this-arrow-size)*2);width:var(--this-arrow-size)}.splide__arrow--prev{left:0;transform:translateY(-50%) scale(-1, 1)}.splide__arrow--next{right:0;transform:translateY(-50%)}.splide__arrow svg{height:calc(var(--this-arrow-size)*.675);width:calc(var(--this-arrow-size)*.675);fill:var(--splide-arrow);transition:fill .15s}.splide__arrow:hover svg{fill:var(--splide-arrow-hover)}.splide__arrow:active svg{fill:var(--splide-arrow-active)}.splide__arrows--ttb .splide__arrow{top:unset;left:50%;right:unset;transform:translateX(-50%) rotate(-90deg);height:var(--this-arrow-size)}.splide__arrows--ttb .splide__arrow--prev{top:0}.splide__arrows--ttb .splide__arrow--next{bottom:0;transform:translateX(-50%) rotate(90deg)}.splide__pagination{display:flex;align-items:flex-start;flex-wrap:wrap}.splide__pagination li{display:block}.splide__pagination button{--this-background: var(--splide-pagination);cursor:pointer;position:relative;display:block;padding:8px;transition:background-color .15s;contain:strict}.splide__pagination button::after{content:"";position:absolute;inset:4px;display:block;background:var(--this-background);border-radius:50%}.splide__pagination button.is-active{--this-background: var(--splide-pagination-active)}.splide__pagination button:where(:not(.is-active)):hover{--this-background: var(--splide-pagination-hover, var(--splide-pagination))}.splide__pagination--ttb{position:absolute;top:50%;right:0;flex-direction:column;transform:translateY(-50%)} +@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.splide{--this-arrow-size: clamp(20px, 6.25vw - 0px, 40px);--this-outset: 6px;width:calc(100% + 2*var(--this-outset));max-width:100vw;transform:translateX(calc(-1 * var(--this-outset)));padding-top:var(--this-arrow-vertical-padding, 0px);padding-left:calc(var(--this-arrow-horizontal-padding, 0px));padding-bottom:var(--this-arrow-vertical-padding, 0px);padding-right:calc(var(--this-arrow-horizontal-padding, 0px) + var(--this-pagination-side-padding, 0px))}.splide._splide-placeholder{visibility:visible}.splide._splide-placeholder:not(.showcase) .splide__slide:first-child{width:100%}.splide._splide-placeholder.showcase .splide__list{gap:1.5rem}.splide._splide-placeholder.showcase .splide__slide{flex:1 1 auto;min-width:22%}.splide.splide--ttb{--this-outset: 0px}.splide.splide--ttb .splide__slide{height:auto !important}.splide.splide--ttb .splide__track{padding:0 !important}.splide:has(.splide__pagination){--this-arrow-offset: 9px}.splide:has(.splide__arrows){--this-arrow-horizontal-padding: var(--this-arrow-size)}.splide:has(.splide__arrows--ttb){--this-arrow-offset: 0px;--this-arrow-horizontal-padding: 0px;--this-arrow-vertical-padding: var(--this-arrow-size)}.splide:has(.splide__pagination--ttb){--this-pagination-side-padding: 24px}.splide:has(.splide__pagination--ttb) .splide__arrow--next{right:16px}.splide__track{padding:var(--this-outset) var(--this-outset) var(--this-pagination-vertical-padding, 16px) !important}.splide.article-card-block.is-overflow .splide__track{--this-pagination-vertical-padding: 0px}.splide.article-card-block.is-overflow .splide__track .splide__pagination:not(.splide__pagination--ttb){margin-top:16px}.splide__arrow{position:absolute;z-index:10;top:calc(50% - var(--this-arrow-offset, 0px));display:grid;place-content:center;color:var(--splide-arrow);font-size:24px;line-height:1;height:calc(var(--this-arrow-size)*2);width:var(--this-arrow-size);transition:color .15s ease-in-out}.splide__arrow--prev{left:0;transform:translateY(-50%) scale(-1, 1)}.splide__arrow--next{right:0;transform:translateY(-50%)}.splide__arrow:hover{color:var(--splide-arrow-hover)}.splide__arrow:active{color:var(--splide-arrow-active)}.splide__arrows--ttb .splide__arrow{top:unset;left:50%;right:unset;transform:translateX(-50%) rotate(-90deg);height:var(--this-arrow-size)}.splide__arrows--ttb .splide__arrow--prev{top:0}.splide__arrows--ttb .splide__arrow--next{bottom:0;transform:translateX(-50%) rotate(90deg)}.splide__pagination{display:flex;align-items:flex-start;flex-wrap:wrap}.splide__pagination li{display:block}.splide__pagination button{--this-background: var(--splide-pagination);cursor:pointer;position:relative;display:block;padding:8px;transition:background-color .15s;contain:strict}.splide__pagination button::after{content:"";position:absolute;inset:4px;display:block;background:var(--this-background);border-radius:50%}.splide__pagination button.is-active{--this-background: var(--splide-pagination-active)}.splide__pagination button:where(:not(.is-active)):hover{--this-background: var(--splide-pagination-hover, var(--splide-pagination))}.splide__pagination--ttb{position:absolute;top:50%;right:0;flex-direction:column;transform:translateY(-50%)} diff --git a/includes/functions/_helpers-templates.php b/includes/functions/_helpers-templates.php index 682dc61a..343243f9 100644 --- a/includes/functions/_helpers-templates.php +++ b/includes/functions/_helpers-templates.php @@ -2516,7 +2516,7 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) { if ( $ttb ) { $style .= ".{$uid}._splide-placeholder {--this-pagination-side-padding: 24px;}"; } else { - $style .= ".{$uid}._splide-placeholder {--this-pagination-vertical-padding: 32px;}"; + $style .= ".{$uid}._splide-placeholder {--this-pagination-vertical-padding: 32px; --this-arrow-offset: 9px;}"; } } @@ -2566,7 +2566,7 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) { }"; } else { $style .= "@media only screen and (max-width: {$break}px) { - .{$uid}._splide-placeholder {--this-pagination-side-padding: 0px;} + .{$uid}._splide-placeholder {--this-pagination-side-padding: 0px; --this-arrow-offset: 9px;} }"; } } @@ -2595,3 +2595,22 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) { // Return style return ""; } + +/** + * Returns the HTML for the Splide arrows + * + * @since 5.25.0 + * @link https://splidejs.com/guides/arrows/#custom-arrows + * + * @param string $uid Optional. Unique ID of the target element. + * + * @return array The HTML for the Splide arrows. + */ + +function fictioneer_get_splide_arrows( $uid = null ) { + return apply_filters( + 'fictioneer_filter_splide_arrows', + '
', + $uid + ); +} diff --git a/partials/_article-cards.php b/partials/_article-cards.php index a4f007b3..bac97044 100644 --- a/partials/_article-cards.php +++ b/partials/_article-cards.php @@ -145,6 +145,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-chapters-compact.php b/partials/_latest-chapters-compact.php index 33ed7b81..337e172f 100644 --- a/partials/_latest-chapters-compact.php +++ b/partials/_latest-chapters-compact.php @@ -141,6 +141,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-chapters-list.php b/partials/_latest-chapters-list.php index 526a7088..adea7e3e 100644 --- a/partials/_latest-chapters-list.php +++ b/partials/_latest-chapters-list.php @@ -146,6 +146,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-chapters.php b/partials/_latest-chapters.php index 09aa89cd..94692692 100644 --- a/partials/_latest-chapters.php +++ b/partials/_latest-chapters.php @@ -146,6 +146,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-recommendations-compact.php b/partials/_latest-recommendations-compact.php index 529913d6..9b6360b7 100644 --- a/partials/_latest-recommendations-compact.php +++ b/partials/_latest-recommendations-compact.php @@ -120,6 +120,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-recommendations.php b/partials/_latest-recommendations.php index 98b28089..56441e78 100644 --- a/partials/_latest-recommendations.php +++ b/partials/_latest-recommendations.php @@ -117,6 +117,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-stories-compact.php b/partials/_latest-stories-compact.php index babb76b1..67bca00f 100644 --- a/partials/_latest-stories-compact.php +++ b/partials/_latest-stories-compact.php @@ -145,6 +145,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-stories-list.php b/partials/_latest-stories-list.php index 0e91f269..c906158f 100644 --- a/partials/_latest-stories-list.php +++ b/partials/_latest-stories-list.php @@ -146,6 +146,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-stories.php b/partials/_latest-stories.php index 12def764..c0519cf7 100644 --- a/partials/_latest-stories.php +++ b/partials/_latest-stories.php @@ -146,6 +146,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-updates-compact.php b/partials/_latest-updates-compact.php index 5ed99732..b271571a 100644 --- a/partials/_latest-updates-compact.php +++ b/partials/_latest-updates-compact.php @@ -154,6 +154,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-updates-list.php b/partials/_latest-updates-list.php index bdc3a170..8143cddf 100644 --- a/partials/_latest-updates-list.php +++ b/partials/_latest-updates-list.php @@ -157,6 +157,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_latest-updates.php b/partials/_latest-updates.php index ec1423cb..12e6b73f 100644 --- a/partials/_latest-updates.php +++ b/partials/_latest-updates.php @@ -160,6 +160,7 @@ if ( $splide ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } ?> diff --git a/partials/_showcase.php b/partials/_showcase.php index 79afa4d0..bdea0491 100644 --- a/partials/_showcase.php +++ b/partials/_showcase.php @@ -124,6 +124,7 @@ if ( $args['min_width'] ) { if ( $splide ) { echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] ); + echo fictioneer_get_splide_arrows( $args['uid'] ); echo '
'; } diff --git a/src/scss/splide.scss b/src/scss/splide.scss index c2f27048..581d7d14 100644 --- a/src/scss/splide.scss +++ b/src/scss/splide.scss @@ -19,9 +19,22 @@ &._splide-placeholder { visibility: visible; - .splide__slide:first-child { + // Emergency fallback + &:not(.showcase) .splide__slide:first-child { width: 100%; } + + // Emergency fallback + &.showcase { + .splide__list { + gap: 1.5rem; + } + + .splide__slide { + flex: 1 1 auto; + min-width: 22%; + } + } } &.splide--ttb { @@ -76,9 +89,12 @@ top: calc(50% - var(--this-arrow-offset, 0px)); display: grid; place-content: center; + color: var(--splide-arrow); + font-size: 24px; line-height: 1; height: calc(var(--this-arrow-size) * 2); width: var(--this-arrow-size); + transition: color .15s ease-in-out; &--prev { left: 0; @@ -90,19 +106,12 @@ transform: translateY(-50%); } - svg { - height: calc(var(--this-arrow-size) * .675); - width: calc(var(--this-arrow-size) * .675); - fill: var(--splide-arrow); - transition: fill .15s; + &:hover { + color: var(--splide-arrow-hover); } - &:hover svg { - fill: var(--splide-arrow-hover); - } - - &:active svg { - fill: var(--splide-arrow-active); + &:active { + color: var(--splide-arrow-active); } }