Problem: I have created some Views that use Masonry to display a grid of posts. One of these Views displays sibling posts of the post where this View is displayed. I need to use a shortcode attribute here to pass the current post's parent post ID into the post relationship Query Filter. The Query Filter seems to work as expected because I see the correct results in the output, however, the Masonry styles are not applied as expected.
If I insert the View via the original Content Template, the Masonry styles are applied as expected, but the results are not filtered by post relationship. I need to use the wpv-view shortcode in this case so I can add a shortcode argument for the post relationship Query filter. How can I insert the View in a way that maintains the post relationship Query Filter and also displays the results in a Masonry grid?
Solution: The most practical solution in this case is to add the missing CSS grid styles manually. To find the missing styles, temporarily insert the Content Template containing the original View. Compare the two results in the browser inspector / debugger tools to find missing styles. In this case, the following styles were missing when the View is inserted using a shortcode:
.tb-masonry {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-column-gap: 25px;
}
Add the missing styles in the View block's Custom CSS panel.
