Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Enhancement: carousel gallery filter to disable `carousel slideshows` for custom gallery styles #37786

Open up1512001 opened 3 months ago

up1512001 commented 3 months ago

Impacted plugin

Jetpack

What

I have enabled Display images in a full-screen carousel gallery feature from jetpack which is adding full-screen carousel slideshows to every gallery styles which is not intentional. I have created some gallery styles for which I don't want this feature so I want to know is there any filter to disable this carousel slideshows for particular gallery styles. right now I have to do this using JS and changing dom attributes is not ideal I think.

How

Right now to disable carousel slideshows for particular gallery styles I am using this JS and removing data-carousel-extra attribute set by jetpack.

document.addEventListener( 'DOMContentLoaded', function() {
    const styles = [ 'is-style-client-logos', 'is-style-our-team', 'is-style-key-areas-of-expertise', 'is-style-our-team-normal', 'is-style-client-logos-2x2' ];

    styles.forEach( ( style ) => {
        const galleryClass = document.querySelectorAll( `.${ style }` );
        galleryClass.forEach( ( gallery ) => {
            gallery.removeAttribute( 'data-carousel-extra' );
        } );
    } );
} );
jeherve commented 3 months ago

We currently do not have a way to directly disable the Carousel based on a gallery style. You may, however, be able to leverage the existing jp_carousel_add_data_to_container filter to fetch posts that use that gallery style, and ensure Carousel isn't loaded for them by returning an empty array. You can learn more about that filter here: https://developer.jetpack.com/hooks/jp_carousel_add_data_to_container/

up1512001 commented 3 months ago

Hi @jeherve thank you for your suggestion but I am in a tricky situation right now, I use this filter then for that particular page carousel slideshows will be disabled if there is a custom gallery style. but for my case on the single post there are 2 galleries being used one is default style which requires carousel and another custom-styled gallery which doesn't require a carousel in this situation what is your suggestion?

add_filter( 'jp_carousel_add_data_to_container', array( $this, 'remove_carousel_data' ) );

         /**
     * Find if the gallery block has custom style.
     * 
     * @param array $blocks The blocks array.
     * 
     * @return bool
     */
    public function find_custom_gallery_style($blocks){
        foreach ($blocks as $block) {
            // Check if the block is a gallery block.
            if ($block['blockName'] === 'core/gallery') {

                $styles = [ 'is-style-client-logos', 'is-style-our-team', 'is-style-key-areas-of-expertise', 'is-style-our-team-normal', 'is-style-client-logos-2x2' ];

                // Check for custom class name in the block attributes.
                if (!empty($block['attrs']['className']) && in_array($block['attrs']['className'], $styles)) {
                    return true;
                }
            }
            // Recursively check inner blocks if any.
            if (!empty($block['innerBlocks']) && $this->find_custom_gallery_style($block['innerBlocks'])) {
                return true;
            }
        }
        return false;
    }

    /**
     * Remove carousel data if the gallery block has custom style.
     * 
     * @param array $data The carousel data.
     * 
     * @return array
     */
    public function remove_carousel_data( $data ) {
        global $post;

        // Check if the post content has gallery block.
        $has_gallery = has_block( 'core/gallery', $post->post_content );
        if( $has_gallery ){
            $blocks = parse_blocks( $post->post_content );

            // Check if the gallery block has custom style.
            $has_custom_gallery_style = $this->find_custom_gallery_style($blocks);

            if( $has_custom_gallery_style ){
                $data = [];
            }

        }
        return $data;
    }
jeherve commented 3 months ago

I'm afraid the jp_carousel_add_data_to_container filter won't be useful to you in this case. There is currently no way to enable Carousel for one gallery and disable it for another within the same post.

I'll reopen this issue so this is something we can consider in the future.