Responsive rules with block themes and theme.json

Question

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 when 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?

---

Note: the online style tag is just written for brevity... typically I would enqueue CSS as a seperate file via WordPress hooks/functions . But I'm under the impression this is a violation of block theme design principles?

Answer 1

They're defined the same way they always have been, in a CSS file.

Do what styling you can using the block editor and theme.json then supplement it with additional CSS in a CSS file. You can enqueue it the same was as a classic theme in functions.php, and if it's a minor change there's a custom CSS option in the site editors global styles section.

Block styles and block variations may help here by providing useful point and click UIs that automatically add the HTML classes you need so the user doesn't have to type them out themselves. You might also find that using the built in layout functions might interfere, e.g. if you were defining flexbox layouts and grid layouts for a group block it would not make sense to turn it into a grid/row/stack.

Enqueue your CSS file the same way you would have done in a classic theme, just be sure to also add it as an editor stylesheet so that the site editor displays things correctly.