_media doesn't evaluate dynamically

[Radiergummi]

The _media operator returns information about the current screen dimensions, but doesn't update them if the size changes during client runtime.
Ideally, the data would change if the window is resized, so block visibility could be controlled by media queries, similar to CSS.

There's mainly two ways this can be achieved in modern browsers:

1. The resize event: Listening to the event (ideally debounced), we can set the current screen dimensions after the window has been resized.
2. The matchMedia() function: Using matchMedia, we can attach CSS media queries to the window object and add event listeners that will be triggered if the query starts to match, or doesn't match any longer. This allows to set named breakpoints (eg. sm, lg, etc.) in the application state.

By implementing those features combined, we could have up-to-date media query information available.

[Gervwyk]

In order to update block definitions, operators must also be reevaluated in engine. This can be done by calling context.update(); in the event. We need to consider where is the best place to register event listeners, I'm sure there would be other event listeners to add in the future besides resize. Perhaps the Events class should include a addEventListener method? Not sure, @SamTolmay?

[SamTolmay]

I agree, but I don't think that should be part of the Events class, since that handles block events where this is more of an engine thing. We also need to be tracking which page is currently being rendered so we don't update the other pages. This could just be a check in context.update() though.

[Gervwyk]

True also there is an events class for every block, so not what we are looking for. Maybe this should be implemented from Context component inside of renderer?

[Radiergummi]

Maybe another solution for responsive layouts would be to have additional, size-dependent layout subkeys?

layout:
  span: 24
  md:
    span:
      12
  lg:
    span:
      8  

The above example would simply add the layout classes with some kind of CSS media query, similar to how TailwindCSS does it. What do you think?

[SamTolmay]

This is already a feature that we forgot to document properly 😅. You can see #685 for reference.

At least this means the schema we have is intuitive

[Radiergummi]

Haha alright that makes my life easier instantly, thank you 😄

[Gervwyk]

Btw, all styles are implemented as emotion classes. So you can use media queries like so:

id: bl
type: Box
style:
  '@media (min-width: 420px)':
     background: red
...

However, we also implement standard breakpoints as a shorthand for styles:

id: bl
type: Box
style:
  md:
     background: red
...

See mediaToCssObject for implementation.

[Gervwyk]

Sorry, updated / corrected the previous comment.