Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive blocks & intrinsic web design #34641

Open
Tracked in #33447
jasmussen opened this issue Sep 8, 2021 · 0 comments
Open
Tracked in #33447

Responsive blocks & intrinsic web design #34641

jasmussen opened this issue Sep 8, 2021 · 0 comments

Comments

@jasmussen
Copy link
Contributor

@jasmussen jasmussen commented Sep 8, 2021

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:

responsive-desktop

responsive-mobile

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:

grid

Using clamp we can provide min/max values for font sizes:

font-size

We can create columns that stack on their own as individual columns go below a certain minimum size:

cards

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants