Are there media queries?

[scottfennell-toptal]

I'm an experienced (old school) wp dev, trying to give gutenberg a fair chance. I see there are a lot of UI's for controlling various aspects of block content and design. But what about media queries? To make it super simple, how do I make something red on wide screens, but blue on narrow screens?

[stokesman]

I’d guess you may have figured this out by now. Anyway, if we’re talking about developing blocks or using react components in general the compose package has useMediaQuery. Example:

import { useMediaQuery } from '@wordpress/compose';

const MyComponent = () => {
    const isNarrow = useMediaQuery( '(max-width: 382px)' );

    if ( isNarrow ) {
        // make it blue
    }
    // …
};

Yet for the majority of cases it’s likely preferable to write media queries in CSS. There’s nothing different about using them with Gutenberg/React.