In the Preliminary Road to 5.9 post, intrinsic web design principles are outlined as a potential path forward for providing basic responsive defaults to blocks:
One of the biggest points of friction for pattern and theme builders are the lack of responsive tools available at a block level. This needs to be solved in a way that doesn’t disproportionally increase interface complexity.
The block model is a good case to apply some intrinsic design principles, since a block can occupy a place in many different layouts and containers, for which prescriptive media queries that don’t take context into account are inflexible.
Each block area should be intrinsically responsive allowing blocks to compose together, wrap, stack, and organize themselves to fit the different spaces and screens. For this to work well, container blocks need to absorb more layout controls. (Container queries might help expand this further in the future.)
Typography tools need to become more fluid and internally support algorithmic clamping. Whenever possible, patterns should just work and accommodate themselves.
To distill that a bit, a lavish pattern featuring multiple columns and complex layouts might look great if inserted in a sufficiently wide theme, but it might fall apart if inserted in contexts or layouts that are narrow. Media queries (#19909) that look only at the viewport width will fail to provide good fallback views for patterns inserted into columns. Even in cases where media queries would work as intended, it might add undue complexity for basic behaviors that feel like they should be built in:
If we look at what intrinsic tools we have available, notably things like CSS grid autofit and minmax as well as clamp based algorithms, we can get quite far. The following 3 column layout collapses to 1 column when the container (or the viewport) is <480px wide:
Using clamp we can provide min/max values for font sizes:
We can create columns that stack on their own as individual columns go below a certain minimum size:
The above examples can be tinkered with in this Codepen.
Ultimately the motivation isn’t necessarily to rid ourselves of media queries entirely, but rather to explore the question: how much can a single block pattern do to be responsive out of the box? A welcome side-effect, potentially, is a vastly simplified UI for editing. Media- or container-queries could be seen as a progressive enhancement on built-in intrinsic behaviors.
If we can refactor blocks to have intrinsic responsivness built-in, it's likely that we would need to evolve the design tools to accommodate some configuring of values:
What does a font size picker look like if you can specify a minimum and a maximum value?
What would a control that decides maximum and and minimum amount of columns in a gallery look like?
For columns that stack progressively, would we need a minimum column-width slider?
These ideas need some visual exploration.
The text was updated successfully, but these errors were encountered:
We are unable to convert the task to an issue at this time. Please try again.
The issue was successfully created but we are unable to update the comment at this time.
jasmussen commentedSep 8, 2021
•
edited
In the Preliminary Road to 5.9 post, intrinsic web design principles are outlined as a potential path forward for providing basic responsive defaults to blocks:
To distill that a bit, a lavish pattern featuring multiple columns and complex layouts might look great if inserted in a sufficiently wide theme, but it might fall apart if inserted in contexts or layouts that are narrow. Media queries (#19909) that look only at the viewport width will fail to provide good fallback views for patterns inserted into columns. Even in cases where media queries would work as intended, it might add undue complexity for basic behaviors that feel like they should be built in:
If we look at what intrinsic tools we have available, notably things like CSS grid
autofit
andminmax
as well asclamp
based algorithms, we can get quite far. The following 3 column layout collapses to 1 column when the container (or the viewport) is <480px wide:Using
clamp
we can provide min/max values for font sizes:We can create columns that stack on their own as individual columns go below a certain minimum size:
The above examples can be tinkered with in this Codepen.
Ultimately the motivation isn’t necessarily to rid ourselves of media queries entirely, but rather to explore the question: how much can a single block pattern do to be responsive out of the box? A welcome side-effect, potentially, is a vastly simplified UI for editing. Media- or container-queries could be seen as a progressive enhancement on built-in intrinsic behaviors.
If we can refactor blocks to have intrinsic responsivness built-in, it's likely that we would need to evolve the design tools to accommodate some configuring of values:
These ideas need some visual exploration.
The text was updated successfully, but these errors were encountered: