Add Column block - 1st iteration

[pinarol]

We need to add a column block similar to web. Column block is basically Group block with columns and a placeholder state where you can pick an initial layout. Column block has column count slider in the inspector. And each column block has percentage slider.

cc @iamthomasbishop for more details

[jbinda]

@iamthomasbishop

I have started to take a look how to implement this block.

First thing is I would like to deal with RangeControl here. In the meantime I will provide some initial setup and try to pull as many logic from web as I can.

My main concerns are connected about limited space to render multiple column layout. Do you have any concepts about design ?

[iamthomasbishop]

Apologies for the delay on design, I keep getting pulled into other things so I haven't had a chance to catch up on this block 😬

In the meantime I will provide some initial setup and try to pull as many logic from web as I can.

Sounds good 👍

My main concerns are connected about limited space to render multiple column layout.

In terms of display/layout, we can think of the Columns block like a Group block with two placeholder children (two Column blocks) – and stacked by default (like the current web version). Just a very quick rough sketch:

[pinarol]

like the current web version

Web version is switching to horizontal layout in mobile devices for landscape mode, or more correctly: ‘if the width is big enough’. Should we put some kind of logic similar to that? We used a similar approach on media & text too, but ofc it is only limited to 2 columns.

We can also think this for the next iteration:
We should be able to use horizontal layout but let some columns overflow to the second line when it is not fitting to screen anymore, like word wrapping. @iamthomasbishop

[iamthomasbishop]

Should we put some kind of logic similar to that?

Ideally, I think we should use a similar approach to web if possible. Something like this (video example of web):

• 2 or fewer columns: use similar behavior to the Media & Text block,
• 3+ columns: follow web – display all columns on 768+, then collapse to two-per-row in middle breakpoints, then collapse to a single column (stacked) on smaller than 480 like we do w/ Media & Text

I believe this would mean that most landscape phones (in between ~400 and ~600 would show two-per-line, and tablets (~700+ mostly would show all columns across. We also need to be mindful of split-screen tablet displays, as well.

[iamthomasbishop]

@jbinda @pinarol This is a quick first pass at the Columns block:

Notes:

• All of the nested hierarchy and highlighting should utilize the work we've been doing on the Group and Media/Text blocks.
• Also, like the Group block, we don't have the toolbar icon yet – while we're trying to get this added as soon as possible, we also have the Floating Toolbar breadcrumbs to rely on.

I also still need to attack the Column blocks within this, I'll add more on that tomorrow or Wednesday.

[pinarol]

@iamthomasbishop Can we keep the settings part same between mobile and web? I mean, the same control can sure have different designs on mobile and web but here we are using a different control for number of columns, while Slider is being used on web. We still want to have Slider and Stepper separately for mobile right?

We can for sure do it like this if you feel strong about it. I just want to mention that it is contradicting with our long term goal about x-platform development. The web implementation of block settings are currently working on mobile as is, we still have some missing pieces but we already did good amount of work to make it possible. As I said, if you feel strongly about this we can do that too.

[pinarol]

However, if you think Stepper should be the mobile equivalent of web's Slider it is all OK then. That way it'd be still compatible with x-platform methods.

[iamthomasbishop]

Can we keep the settings part same between mobile and web?

I don't love the Slider component for a granular numerical selection that allows a small range (1-5 in this case). A Stepper or Picker is probably better in this case, even on web.

If we stick with a Slider, can we at least add discrete "tick" marks to make it more obvious at a glance? See Discrete Slider example in Material guidelines. I think this might be the default for short-scale Sliders, looking at this example.

We can for sure do it like this if you feel strong about it. I just want to mention that it is contradicting with our long term goal about x-platform development.

Fair enough, but I think it's very important for us to avoid going cross-platform for the sake of making our lives easier at the expense of our platform-native end-users. We should always try to find common ground, but the platform best practices will almost always win out in terms of usability in the native context.

[pinarol]

@iamthomasbishop It is totally ok to choose a different component from web, my request here is just making it consistent. RangeControl is part of the public @wordpress/components library, so we should make a decision about what it should render on mobile and stick to it that’s all. This is not about making things easier, we can define mobile RangeControl as a control rendering a stepper, that’s totally cool. But if we want to render different things on cases where RangeControl is used then it’ll become a problem in terms of defining the public api. 3rd party devs will also use this same component while developing 3rd party blocks.