워드프레스 카테고리 항상 하나만 체크되게 스니펫

add_action("enqueue_block_editor_assets", function(){
    echo '<script>
    window.onload=function(){
        function initialize() {
            var clickCount = 0;
            var hierarchicalTermsList = document.querySelector(".editor-post-taxonomies__hierarchical-terms-list");
            if (hierarchicalTermsList) {
                hierarchicalTermsList.addEventListener("mousedown", function handleClick() {
                    var checkedContainers = document.querySelectorAll(".components-checkbox-control__input-container");
                    checkedContainers.forEach(function(container) {
                        var checkedCheckbox = container.querySelector(".components-checkbox-control__checked");
                        if (checkedCheckbox) {
                            var specificCheckbox = container.querySelector(".components-checkbox-control__input");
                            if (specificCheckbox) {
                                specificCheckbox.click();
                                clickCount++;
                                if (clickCount >= 1) {
                                    clickCount = 0;
                                }
                            }
                        }
                    });
                });
            }
        }
        
        function observeDOM() {
            initialize();
            new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.addedNodes.length) {
                        initialize();
                    }
                });
            }).observe(document.body, { childList: true, subtree: true });
        }

        setTimeout(observeDOM, 100);
    };
    </script>';
});

간단한 기능 구현이었는데, 제대로 작동하려면 생각보다 코드가 길어졌음.

일단 카테고리 체크상태가 감지되고 체크상태 변경으로 체크가 되면 간단히 해결될 일이었는데, 워드프레스 구텐베르크 에디터에서 이유는 모르겠지만 그게 안됨.

그래서 무식하지만 작동하게 .editor-post-taxonomies__hierarchical-terms-list 요소를 클릭시에 클릭 이벤트가 아니라 mousedown 이벤트로 클릭이 완료되기 전에 해당 요소 안에 있는 .components-checkbox-control__input-container 체크박스 콘테이너의 .components-checkbox-control__checked 를 사용해 체크 상태를 감지하고, 체크되어있는 .components-checkbox-control__input 를 전부 클릭한 뒤에, mouseup 되는 타이밍에 체크가 완료되게 구현했음.

무식해보이지만 지금 상태로는 이렇게 안하면 체크 자체가 안되고, 클릭이벤트로 하면 자기자신까지 클릭되기 때문에 이렇게 해야함.

제대로 체크상태 구분하고 구현할 수 있으면 그렇게 하면 되고, 아니면 이거 쓰면 됨.

단순 체크가 아니라 clickcount 식으로 한 이유는 무한클릭 방지하기 위해 넣은거고,

마찬가지로 .editor-post-taxonomies__hierarchical-terms-list 돔 감지를 안하면 새 글 작성시에는 적용이 안되길래 돔 감지를 해야하는데, 무한루프를 막기 위해 100 간격으로 .editor-post-taxonomies__hierarchical-terms-list 찾고, 찾으면 리스너 등록하게 함.