Basic headless support for Accordion-Blocks WordPress plugin

disable-accordian-scripts.php

<?php

// add this to functions.php or as an mu-plugin (if needed)

add_action('wp_enqueue_scripts', function () {
    wp_dequeue_script('pb-accordion-blocks-frontend-script');
    wp_dequeue_style('pb-accordion-blocks-style');
});

sample-css-tw.css

.c-accordion__item {
    @apply border-t border-bright-blue;
}
.c-accordion__title {
    @apply text-lg p-2 px-4 m-0 relative;
}
.c-accordion__title::after {
    @apply text-3xl text-bright-blue absolute right-2 top-1;
}
.c-accordion__content {
    @apply p-4;
}
.c-accordion__title:after {
    content: "+" !important;
}
.is-open>.c-accordion__title:after {
    content: "−" !important;
}

useAccordian.js

// Used with https://github.com/philbuchanan/Accordion-Blocks
import { useEffect } from 'react'

export default function useAccordian() {
    useEffect(() => {
        const handler = (event) => {
            event.target.nextSibling.classList.toggle('hidden')
            event.target.parentNode.classList.toggle('is-open')
        }
        const accordians = document.querySelectorAll(
            '.wp-block-pb-accordion-item',
        )
        accordians.forEach((accordian) => {
            if (accordian.dataset.initiallyOpen === 'false') {
                const content = accordian.querySelector('.c-accordion__content')
                content.classList.add('hidden')
            }
            accordian
                .querySelector('.js-accordion-controller')
                ?.addEventListener('click', handler)
        })
        return () =>
            accordians.forEach((accordian) => {
                accordian
                    .querySelector('.js-accordion-controller')
                    ?.removeEventListener('click', handler)
            })
    })
}