search

ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Element queries! #7

Open MichaelArestad opened 3 years ago

MichaelArestad commented 3 years ago

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 commented 3 years ago

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

ItsJonQ commented 3 years ago

Looks like there's also this:

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

ItsJonQ commented 3 years ago

@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 commented 3 years ago

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

jasmussen commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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