Hallway Hangout: Let’s chat about All Things Layout

This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment channel as part of the FSE Outreach Program. Thank you to everyone who joined in!

Attendance:

@annezazu @isabel_brison @saxonafletcher @beckej @nomadskateboarding @bph @sjx65 @jordesign

Video Recording:

Notes:

Demo and discussion of various 6.2 items

@isabel_brison, a developer who has spent much of the last year diving deep into layout controls, took us through a look at 6.2 related layout changes including:

As part of this, she showed how you can now create layouts where the Site Icon can be next to the Site Title or a three cards can always have the same height with a Button blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. at the bottom. This led to a discussion both around how even a few additional controls has a big impact for increasing the design possibilities along with some pain points with the current system. For the latter, as it related to one of the demos, could we do something to make it easier for setting things like width automatically rather than individually for each column?

Thinking about layout from a designer perspective

@saxonafletcher, a designer who has thought deeply about these problems, shared some high level thoughts on how he aims to approach this work:

  • How can we make layout more accessible to more people regardless of technical knowledge?
  • How can we increase the speed at which you can design layouts? Ex: patterns.
  • How can we expand what’s possible? Ex: overlapping designs, responsive layouts.

Exploring the new Grid layout type

We then dug into some of what’s coming up next with the Grid layout type:

  • Responsive out of the box.
  • Set min column width and the columns will adapt to the space available. 
  • Can turn responsive off and then set columns (can cause super narrow columns). 

@beckej, who works in higher ed and teaches students, commented on how simple this is!

Overview of sticky positioning

At the very end, we talked about sticky positioning for 6.2 and how it’s distinct from yet related to layout. Essentially, layout is about inner blocks whereas positioning is about how that content relates to the rest of the page. This was very nicely demo-ed with a community theme (more about the community theme initiative here) that Saxon worked on that greatly leans on sticky positioning. We ended by talking about some follow up items, including how it can only be applied to root blocks. This is a great time to give feedback as this work evolves.

Ideas for future calls for testing

After digging into sticky positioning, the work around the negative margins PR came up and we briefly chatted about perhaps getting both the negative margins PR and grid layout type PR behind experimental flags for some early testing, alongside the navigation section that was removed for 6.2.

#fse-hallway-hangout, #fse-outreach-program