How to change the classes of a gallery block?

  • Hi,

    I’m using a plugin/code called “Gridzy” to make a justified gallery. For this to work, I need to use a class called on the items container. Like :

    <ul class="gridzy">
    <li> item </li>
    <li> item </li>
    <li> item </li>
</ul>

    However, how the WordPress gallery is made, I can only add a class to the main block and not the ul.

    <figure class="wp-block-gallery columns-4 is-cropped gridzy">
       <ul class="blocks-gallery-grid">
             <li class="blocks-gallery-item">
             <li class="blocks-gallery-item">
       </ul>
</figure>

    So I tried to export a reusable gallery block and modified it like that :

    {
  "__file": "wp_block",
  "title": "Justified gallery",
  "content": "<!-- wp:gallery {\"ids\":[],\"linkTo\":\"file\",\"sizeSlug\":\"full\"} -->\n<figure class=\"justified-gallery\"><ul class=\"gridzy\"></ul></figure>\n<!-- /wp:gallery -->"
}

    But it just broke the block and when I restore it, it just add my “justified-gallery” class on the main figure instead of the ul. Also, I don’t need the is-cropped or columns class…

    After that, I tried to edit inside WordPress using the “HTML” option, but when I remove class or add a class to the ul, I just get an error again.

    How can I add a class to the ul element of the gallery block and remove the other classes I don’t need?

    Thank you

Viewing 1 replies (of 1 total)

  • I think this can be done using custom javascript, here is code below

    
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('figure.wp-block-gallery ul').addClass('gridzy');
})
</script>

    you need to put this code under wp_footer(); function in footer.php after closing php tag.
    Make sure you’re using child theme otherwise it can break in next theme update.

Viewing 1 replies (of 1 total)
  • The topic ‘How to change the classes of a gallery block?’ is closed to new replies.