Responsive Design with Block Themes

  • I’m learning about block themes for the first time and I’m not clear on how responsive layouts are achieved.

    For example, let’s say I want a paragraph to use red font with screen width is less than or equal to 700px, and blue font all other times. Using plain HTML CSS, it would look like this:

    <style>
p { color: blue; }
@media (max-width: 700px) {p { color: red; }}
</style>
<p>Hello World</p>

    I’ve been trying to read up on theme.json, but it’s not clear to me how block themes would achieve the behavior I mentioned above. Can someone point me in the right direction?

    Or another example, I need to achieve:

    <style>
ul { display: grid; grid-template: ...etc... }
@media (max-width: 700px) { ul { display: flex; ...flex-options...} }
</style>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

    Basically depending on what the screen width is, I want to completely change the way elements are laid out. How are these types of rules defined in a block theme?

Viewing 4 replies - 1 through 4 (of 4 total)

  • If you need to use media queries to target screen sizes, you can do that in your theme’s style.css (or whatever primary stylesheet it uses) just like you’ve always been able to do with classic themes.

    I just tested this in my block theme’s style.css, and it works fine:

    p {
	color: blue;
}

@media ( max-width: 700px ) {
	p {
		color: red;
	}
}

    theme.json doesn’t have any specific support for media queries.

    Thread Starter learningtechthings

    (@evermight)

    Thanks Justin.

    In terms of best practice, should designers/developers avoid trying to write any media queries to target screen sizes? Is that the reason theme.json doesn’t try to support the concept of break points and media queries? That I should try to solve UX issues with a “block type of paradigm” which is a whole new way of thinking? (eg. like how object oriented programmers needed a complete paradigm shift way of thinking when approaching functional programming). Is that the kind of paradigm shift I need to adjust to?

    I don’t necessarily think there’s a right or wrong answer to this. It’s more situational.

    Personally, I avoid media queries in design as much as possible. With intrinsic design principles, I find that I need them less and less. But there are times when I need to target specific screen sizes for one reason or another. And there’s nothing wrong with doing that when needed. Actually, I’m more likely to reach for container queries over media queries nowadays.

    There is a WordPress Developer Blog post that covers a lot of the thinking around intrinsic and responsive design.

    I do believe we are at a paradigm-shifting point in web design (not just for WP). Just like we threw away table layouts 20 years or so ago, web design today is moving more toward the intrinsic approach of components/elements naturally adjusting to whatever size screen or container they are sitting in.

    I feel like modern-day WP is just trying to keep up with these trends. You see some of that in the block system and features available via theme.json.

    As for why theme.json doesn’t support breakpoints and media queries, I think that has more to do with the complexity of creating the system (the Style Engine) that would be able to parse all of that data without bugs. It wouldn’t be an easy task.

    Thread Starter learningtechthings

    (@evermight)

    Awesome answer you’ve given me a good sense of direction. And I appreicated the cited resources too. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive Design with Block Themes’ is closed to new replies.