Fix placeholder arrows for list-style shortcodes

This commit is contained in:
Tetrakern 2024-10-07 16:16:01 +02:00
parent bd7c3dbb48
commit 7017aa9845
7 changed files with 19 additions and 12 deletions

View File

@ -1717,21 +1717,24 @@ Filters the intermediate output array of the `fictioneer_filter_media_buttons( $
---
### `apply_filters( 'fictioneer_filter_splide_arrows', $html, $uid )`
### `apply_filters( 'fictioneer_filter_splide_arrows', $html, $uid, $ttb )`
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).
* $ttb (bool) Whether the arrows are top-to-bottom. Default `false`.
**Example:**
```php
// Change the Splide arrow icons (right, because they get rotated)
function child_change_splide_arrows( $html, $uid ) {
return '<div class="splide__arrows"><button class="splide__arrow splide__arrow--prev"><i class="fa-regular fa-circle-right"></i></button><button class="splide__arrow splide__arrow--next"><i class="fa-regular fa-circle-right"></i></button></div>';
function child_change_splide_arrows( $html, $uid, $ttb ) {
$ttb_class = $ttb ? 'splide__arrows--ttb' : '';
return '<div class="splide__arrows ' . $ttb_class . '"><button class="splide__arrow splide__arrow--prev"><i class="fa-regular fa-circle-right"></i></button><button class="splide__arrow splide__arrow--next"><i class="fa-regular fa-circle-right"></i></button></div>';
}
add_filter( 'fictioneer_filter_splide_arrows', 'child_change_splide_arrows', 10, 2 );
add_filter( 'fictioneer_filter_splide_arrows', 'child_change_splide_arrows', 10, 3 );
```
---

File diff suppressed because one or more lines are too long

View File

@ -2620,14 +2620,18 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
* @link https://splidejs.com/guides/arrows/#custom-arrows
*
* @param string $uid Optional. Unique ID of the target element.
* @param bool $ttb Optional. Whether the arrows are top-to-bottom. Default false.
*
* @return array The HTML for the Splide arrows.
*/
function fictioneer_get_splide_arrows( $uid = null ) {
function fictioneer_get_splide_arrows( $uid = null, $ttb = false ) {
$ttb_class = $ttb ? 'splide__arrows--ttb' : '';
return apply_filters(
'fictioneer_filter_splide_arrows',
'<div class="splide__arrows"><button class="splide__arrow splide__arrow--prev"><i class="fa-solid fa-chevron-right"></i></button><button class="splide__arrow splide__arrow--next"><i class="fa-solid fa-chevron-right"></i></button></div>',
$uid
'<div class="splide__arrows ' . $ttb_class . '"><button class="splide__arrow splide__arrow--prev"><i class="fa-solid fa-chevron-right"></i></button><button class="splide__arrow splide__arrow--next"><i class="fa-solid fa-chevron-right"></i></button></div>',
$uid,
$ttb
);
}

View File

@ -146,7 +146,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'], true );
echo '<div class="splide__track">';
}
?>

View File

@ -146,7 +146,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'], true );
echo '<div class="splide__track">';
}
?>

View File

@ -157,7 +157,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'], true );
echo '<div class="splide__track">';
}
?>

View File

@ -26,7 +26,7 @@
}
}
&.splide--ttb {
&:is(.splide--ttb, ._list) {
--this-outset: 0px;
.splide__slide {