Element queries!

[MichaelArestad]

I would love to see some element queries to make the interface components even more flexible. For example, if the parent container is less than 200px wide, then make the grid one column instead of two.

[ItsJonQ]

Rad!! I'll see what it takes to seamlessly integrate this: http://marcj.github.io/css-element-queries/

[ItsJonQ]

Looks like there's also this:

https://github.com/marcj/css-element-queries

[ItsJonQ]

@MichaelArestad It looks like these libraries work quite differently (the 2 links I shared above).

Is there a particular solution you had in mind?

Also! Do you know how it's currently being used in Gutenberg? (I think it's there... At least, I remember reading about it)

[griffbrad]

I believe @jasmussen did some work with element queries in Gutenberg late last year: https://github.com/WordPress/gutenberg/pull/18745

[jasmussen]

The Placeholder component in the block editor uses a JS resize observer to provide element queries. It's working well, and provides the feature in a compatible way today, which might work well here.

The polyfill I tried did not play well with react, as it relied on setting classnames that were quickly sanitized away by the system.

[ItsJonQ]

Oooo... I see. It was a ad-hoc implementation, rather than something with CSS compiling.

It would be nice to have a... it just works. Kind of workflow :)

https://github.com/marcj/css-element-queries

Seems to be the most promising solution.

Ultimately, it works with (and uses) valid CSS:

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

It's just the DOM target binding bit that's the tricky part. 🤔

[ItsJonQ]

Note to self: (Apologies in advance, the following may not make sense...)

• Create some sort of useEQ() hook + matching context pair
• Ref the HTMLElement for responsiveness to that context
• Consumer of the hook can write CSS-in-JS, which gets parsed + init() (via EQ library) with useEQ() hook