Фильтровать галерею используя figcaption

Question

Итак, я создал веб-сайт в формате HTML и хочу импортировать его сейчас в WordPress. У меня была сделана панель поиска с использованием javascript для фильтрации изображений с их figcaption в галерее. Я просто не могу заставить это работать сейчас в WordPress, это мой код

HTML

<p style="margin-block-start: 0; margin-block-end: 0;"><input type="text" id="search" class="form-control" placeholder="Zoek een sessie..."></p>

<!-- wp:gallery {"ids":["57","59","63","62","64","65","69","93","61","66","67","60","58","73","68","70","71","72","74","75","76","77","78","79","80","81","82","83","84","85","87","88","86","89","90","92","91",114,116,118],"columns":5} -->
<ul class="wp-block-gallery columns-5 is-cropped">
  <li class="blocks-gallery-item">
    <figure>
      <img src="https://horizon-educatief.000webhostapp.com/wp-content/uploads/2019/10/anno1465.png" 
      alt="" data-id="57" data-link="https://horizon-educatief.000webhostapp.com/aanbod/anno1465" 
      class="wp-image-57"/>
        <figcaption>Anno 1465</figcaption>
    </figure>
  </li>
</ul>
<!-- /wp:gallery -->

В этой галерее около 20 фотографий, но я сейчас использую только одну, например

Javascript

$(document).ready(function(){
    var $search = $("#search").on('input',function(){
        var matcher = new RegExp($(this).val(), 'gi');
        $('.blocks-gallery-item').show().not(function(){
            return matcher.test($(this).find('figcaption').text())
        }).hide();
    })
})

Мне бы очень хотелось пойти дальше, я много пробовал искать, но ничего не нашел.