A reusable Cocktail Card component used in a related posts section (ACF Relationship query).
The same card reused in a Cocktails archive grid with a standard posts query and pagination.
When the Query Loop is inside the Component, the grid works but pagination doesn’t seem to work correctly.
When I move the Query Loop outside the Component, the layout breaks because the Component becomes the repeated element.
Is there an official recommended architecture for this scenario?
My goal is to reuse the same Component in two different places:
Related Cocktails
The component contains a Query Loop using an ACF Relationship field.
This works correctly.
Cocktails Hub page
I want to reuse exactly the same card component.
The query should display all Cocktail posts (12 per page) with pagination.
The problem is that I’m not sure where the Query Loop should live.
Option 1 – Query Loop inside the Component
If I keep the Query Loop inside the Component, the component renders correctly, but I’m not sure if pagination is officially supported in this setup.
Option 2 – Query Loop outside the Component
If I move the Query Loop to the parent Grid and place the Component inside it, the HTML/layout becomes incorrect because the repeated element is no longer the card itself.
So my main question is:
What is the recommended architecture in Bricks for reusing the same card component with different queries (ACF Relationship and normal Posts query with pagination)?
If the card itself is the repeated item, the Query Loop should live on the card component. Then expose the query settings as component properties so each component instance can use its own query: for example an ACF Relationship query in the related posts section, and a normal posts query with 12 posts per page on the Cocktails Hub page.
The Pagination element can be placed outside the component and target the loop inside that specific component instance. If the pagination isn’t working properly, it usually helps to enable “is main query” in the corresponding loop.
