Display: grid is automatically added to Query Template block class for lg breakpoint when using mobile first breakpoints


Display grid appears to be added to the block class by default on the lg breakpoint. I assume this was an optimisation put in place to enable proper grid display by default.

I am typing this from memory as we encountered this a few times when adding a new Query block with a Query Template.

We haven’t created a minimal test case and haven’t attempted to repeat this since 1.4.1 was released, so there is a chance it may already have been fixed.

With mobile-first breakpoints when managing the grid via Tailwind classes this causes the grid to behave incorrectly on the desktop breakpoint by default until you remove the display: grid from the block styles.

Step-by-step reproduction instructions:

Prerequisites: Given a site with Tailwind enabled and Tailwind mode switched on with mobile-first Tailwind breakpoints.

  1. Add a Query block with a Query Template block
  2. Add Tailwind classes to the base breakpoint to enable grid and set a single column
  3. Go to the lg breakpoint and change some grid settings using Tailwind classes

Expected results:
All Tailwind classes are applied correctly on all breakpoints including desktop

Actual results:
There are some conflicts and some Tailwind styles are overridden by the default block styles for the desktop

Environment info

  • WordPress version: 6.4.3
  • Cwicly Plugin version: 1.4.1