Prevent Timber from escaping `&&` when using with ACF_Blocks

Question

Here is my timber block render function

function render_swiper_block($block, $content = '', $is_preview = false)
{
    $context = Timber::context();
    // Store block values.
    $context['block'] = $block;
    // post id
    $context['id'] = get_the_id();
    // Store field values.
    $context['fields'] = get_fields();
    // Store $is_preview value.
    $context['is_preview'] = $is_preview;
    // Render the block.
    Timber::render('admin/swiper.twig', $context);
}

The problem occurs when I initiate swiper slider from within script tag inside swiper.twig like so:

<script type='text/javascript'>
    let interval = setInterval(function() {
        if (window.hasOwnProperty('Swiper')) {
            let swiper = {
                el: '.{{ block.id }}',
                instance: '',
                breakpoint: 1023,
                active: false,
                config: {
                    loop: true,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    spaceBetween: 1,
                    // Navigation arrows
                    navigation: {
                        nextEl: '.arrow-next',
                        prevEl: '.arrow-prev',
                    },
                },
            }

            swiper.instance = new Swiper(swiper.el, swiper.config)
            if (window.innerWidth > swiper.breakpoint) {
                swiper.active = true
            }

            addEventListener('resize', debounce(() => {
                if (window.innerWidth > swiper.breakpoint && swiper.active === false) {
                    swiper.instance = new Swiper(swiper.el, swiper.config)
                    swiper.active = true
                }
                if (window.innerWidth <= swiper.breakpoint && swiper.active === true) {
                    swiper.instance.destroy(true, true)
                    swiper.active = false
                }
            }, 300))
            clearInterval(interval);
        }
    }, 100);
</script>

post.content escapes && and instead prints && , I know that its WordPress filter apply_filters('the_content', $content) does that. But is there a way around it for my usecase?

Answer 1

Have use tried using {{ var|raw }} ?

The raw filter marks the value as being “safe”, which means that in an environment with automatic escaping enabled this variable will not be escaped if raw is the last filter applied to it.

Ref: https://twig.symfony.com/doc/2.x/filters/raw.html