Description:
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.
- Add a Query block with a Query Template block
- Add Tailwind classes to the base breakpoint to enable grid and set a single column
- Go to the
lgbreakpoint 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