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

Bugs
1

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.

  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
1 Like
2

I can confirm this one. You have to manually switch back to remove it at the (for me) large breakpoint (~1024px).

1 Like
3

Yes, exactly, for every instance of a Query Template.

4

There seems to be some legacy code that’s baked into some elements at that 1024px breakpoint. See my other post here: https://discourse.cwicly.com/t/editor-crashes-at-1024px-breakpoint/5721

Where the editor keeps crashing when I switch over that breakpoint.

5

Can confirm this one, too. In my case it also happens with desktop first breakpoints.