Masonry style displays one card above the other

[felipebochehin87]

Bug Description

Masonry style displays one card above the other, making it difficult to identify the cards that are hidden.

Expected Behaviour

Cards should be more visible.

Steps to reproduce

1. Go to https://dev-mdc-web.pantheonsite.io/wp-admin/
2. Go to Pages and click on Add New
3. Add a Query Loop > Material Image Card for Query Loop
4. Set it to Masonry and preview page

Screenshots

Additional context

• WordPress version:
• Plugin version:
• Gutenberg plugin version (if applicable):
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[felipebochehin87]

@PatelUtkarsh @igruszkauy @mattchungxwp new bug found.

[PatelUtkarsh]

This issue happens when two masonry query loops or gallery masonry are inserted on the same page / post.

[felipebochehin87]

@PatelUtkarsh thanks for clarifying :) that's the bug we talked about on our call last Friday. :)

[PatelUtkarsh]

QA note:

1. In the same post / page, add the following block.
2. Add image card using query loop.
3. Add material card using query loop.
4. Add material gallery.
5. Publish and test frontend.

[igruszkauy]

Verified via: https://dev-mdc-web.pantheonsite.io/masonry-style-test/

Issue fixed: