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

Flex layout: Wrap multiple lines as default #39651

Closed
apeatling opened this issue Mar 22, 2022 · 7 comments · Fixed by #40171
Closed

Flex layout: Wrap multiple lines as default #39651

apeatling opened this issue Mar 22, 2022 · 7 comments · Fixed by #40171
Assignees
Labels
[Feature] Blocks Overall functionality of blocks [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Priority] High Used to indicate top priority items that need quick attention [Release] Do Not Punt Used to indicate the issue or pull request must not be moved from the assigned milestone [Type] Enhancement A suggestion for improvement.

Comments

@apeatling
Copy link
Contributor

apeatling commented Mar 22, 2022

Description

With the row block and using orientation and justification in layout settings the "Allow to wrap to multiple lines" setting is set as off by default. This means the typical user experience will go like this:

Screeny.Video.22.Mar.2022.at.18.47.33.mov

By setting the wrap setting to on by default you'd automatically get something like this, which is I think what most users would expect:

image (1)

Let's default this setting to on.

@apeatling apeatling added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Mar 22, 2022
@youknowriad
Copy link
Contributor

youknowriad commented Mar 22, 2022

Let's default this setting to on.

I think this means that we should also add a "column" variation to the "group" block. Changing the orientation of a row block should be the same as "transforming it to a column variation"

@glendaviesnz
Copy link
Contributor

Allow to wrap to mulitple lines is set to on by default for me when adding a Row:

row-wrap.mp4

Which matches with the code.

I wonder why it is showing off by default for you?

@apeatling
Copy link
Contributor Author

This was straight from @mtias's report. I've tested this and can confirm it's turned on by default both in the post and site editor, with the Skatepark theme being used.

@mtias
Copy link
Member

mtias commented Mar 25, 2022

Interesting, not sure what happened there.

@apeatling apeatling reopened this Mar 30, 2022
@apeatling
Copy link
Contributor Author

apeatling commented Mar 30, 2022

Tested this again because it didn't make sense to me.

The problem is "wrap to multiple lines" is on by default not off by default on the row block:

2022-03-30 10 20 28

When turned on, it is allowing wrapping of child blocks in the row. That's nothing to do with a paragraph child block wrapping text to multiple lines because of restricted space.

So -- this setting turned off by default actually provides the outcome you would expect with a row block, where child blocks stay on a single line.

@mtias
Copy link
Member

mtias commented Mar 30, 2022

Ah, good catch, that's what I had in mind — the behaviour where things fit on a single line by default, which is what you'd expect most often when choosing a Row. Otherwise if you have any line of text that is slightly long it'd seem like it's not working properly. Thanks for looking back :D

@youknowriad
Copy link
Contributor

If we do change the behavior here. Let's make sure we don't regress on other blocks using "flex" where the "off" by default might not be the right call. (Navigation, buttons, social links, maybe others)

@mtias mtias added the [Priority] High Used to indicate top priority items that need quick attention label Apr 6, 2022
@priethor priethor added the [Release] Do Not Punt Used to indicate the issue or pull request must not be moved from the assigned milestone label Apr 6, 2022
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Priority] High Used to indicate top priority items that need quick attention [Release] Do Not Punt Used to indicate the issue or pull request must not be moved from the assigned milestone [Type] Enhancement A suggestion for improvement.
6 participants