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

Add Buttons block #1790

Closed
pinarol opened this issue Jan 21, 2020 · 14 comments · Fixed by WordPress/gutenberg#20191 or #1933
Closed

Add Buttons block #1790

pinarol opened this issue Jan 21, 2020 · 14 comments · Fixed by WordPress/gutenberg#20191 or #1933
Assignees
Labels
[Type] Enhancement Improves a current area of the editor

Comments

@pinarol
Copy link
Contributor

pinarol commented Jan 21, 2020

Add mobile equivalent of Buttons block.

@pinarol pinarol added the [Type] Enhancement Improves a current area of the editor label Jan 21, 2020
@lukewalczak lukewalczak self-assigned this Jan 27, 2020
@lukewalczak
Copy link
Contributor

Hello @pinarol @iamthomasbishop, before starting Buttons implementation I've collected couple question referring to new block:

  1. Should buttons be arranged side by side within buttons block till there is a space for that? Maybe we should then re-calculate a default button minWidth based on container width / max number of default buttons.

  2. Should appender appear when Buttons block is selected and should be placed below the block as usually (like on the screenshot)?

  1. That question is related to the first question - if we are going to have buttons stacked horizontally what about ADD BLOCK HERE insertion line?

  1. Is it correct that both Buttons and Button have the same icon what looks a bit oddly in navigation toolbar?

  1. Since in Buttons block we can add only Button component should appender automatically (on pressing it) add a button instead of opening a bottom-sheet with available components?

@iamthomasbishop
Copy link
Contributor

Awesome to see this so quickly!

Should buttons be arranged side by side within buttons block till there is a space for that?

I think they should probably be displayed inline (side-by-side), yes.

Should appender appear when Buttons block is selected and should be placed below the block as usually (like on the screenshot)?

I think the appender could be displayed inline as well, right next to the buttons (assuming that's where the button is created, as mentioned above.

That question is related to the first question - if we are going to have buttons stacked horizontally what about ADD BLOCK HERE insertion line?

I wonder if we should skip the inserter flow altogether when a new button is added. What I mean is the button could be added immediately when the appender is tapped, no need for the inserter sheet and "add block here" indicator.

Is it correct that both Buttons and Button have the same icon what looks a bit oddly in navigation toolbar?

I think this is fine. We're borrowing the icon from core, so I think we should only change it if they also change the icon.

Since in Buttons block we can add only Button component should appender automatically (on pressing it) add a button instead of opening a bottom-sheet with available components?

Yes, see my note above (in the third comment).

@pinarol
Copy link
Contributor Author

pinarol commented Jan 28, 2020

Should buttons be arranged side by side within buttons block till there is a space for that? Maybe we should then re-calculate a default button minWidth based on container width / max number of default buttons.

@lukewalczak Could you check web's behavior about this? It'd be enough if we only wrap the buttons and let them break into the next line once they don't fit the current line anymore, flex-box should handle it. I expect we won't need to make extra calculations about min or max width if I am not wrong.

@lukewalczak
Copy link
Contributor

@lukewalczak Could you check web's behavior about this? It'd be enough if we only wrap the buttons and let them break into the next line once they don't fit the current line anymore, flex-box should handle it. I expect we won't need to make extra calculations about min or max width if I am not wrong.

Sure, will check it, however, it was just a quick idea.

I think the appender could be displayed inline as well, right next to the buttons (assuming that's where the button is created, as mentioned above.

@iamthomasbishop How should appender look like then? Should it take the whole free space next to the last button?

@iamthomasbishop
Copy link
Contributor

How should appender look like then? Should it take the whole free space next to the last button?

It can be a square (w/ same styling as current), displayed inline w/ the list of buttons. Something like this:

IMG_0705

@lukewalczak
Copy link
Contributor

Cool, That's exactly what I had in mind 👍

@pinarol
Copy link
Contributor Author

pinarol commented Feb 10, 2020

I was assuming this would be the best way to go with Buttons, until I start thinking about individual Button alignments. I couldn't imagine how to demonstrate alignment of each Button there. @iamthomasbishop wdyt?

The first thing that comes to my mind is stacking each button vertically instead, that way we'd be able to demonstrate horizontal alignments.

@iamthomasbishop
Copy link
Contributor

iamthomasbishop commented Feb 10, 2020

I was assuming this would be the best way to go with Buttons, until I start thinking about individual Button alignments. I couldn't imagine how to demonstrate alignment of each Button there. @iamthomasbishop wdyt?

@pinarol Considering the Buttons block has a control for alignment, which aligns the "group" of blocks, I think we should exclude the alignment controls on each of the inner buttons and let the parent Buttons block control the list of buttons. It's not only clunky when you attempt to align individual buttons within a parent Buttons block, but it's also a bit confusing. With that said, here's an example of what I'm thinking in terms of child block alignments (along with the appender):

Note: this example is also showing how wrapping would work.

@pinarol
Copy link
Contributor Author

pinarol commented Feb 11, 2020

@iamthomasbishop That looks super good 👍and I agree all. I thought since it is available on web we should look for ways to support it as well. But I agree that we'll have a better UX excluding it. Thanks!

@lukewalczak
Copy link
Contributor

@iamthomasbishop I would like to ask one more question into Buttons block behaviour: what should happen when the user removed the last button from Buttons block?
I consider Buttons as a container, so in my opinion, it should behave more like Group block, so after deleting the last button it should leave the placeholder
which after pressing will add new Button.

@iamthomasbishop
Copy link
Contributor

what should happen when the user removed the last button from Buttons block?
 I consider Buttons as a container, so in my opinion, it should behave more like Group block, so after deleting the last button it should leave the placeholder
 which after pressing will add new Button.

I think I would expect it to act like a group as well. In other words, after deleting the last button, the Buttons block would essentially revert to the placeholder/starter state, where the parent (Buttons) block is selected and only the appender button is shown inside.

@lukewalczak
Copy link
Contributor

How should the placeholder look like when Buttons block is empty and is not selected 🤔 ?

@iamthomasbishop
Copy link
Contributor

How should the placeholder look like when Buttons block is empty and is not selected 🤔 ?

Ahh, that’s a good question. After thinking about it, I think perhaps we should do one of the following two things:

  • Delete the Buttons block altogether

  • Don’t allow deleting of the last child Button block, instead leave it as an empty button with a placeholder label (“Add text...”). In other words, when I am down to no characters in the only block, hitting delete will do nothing.

I am leaning towards the first option, because I think it would feel more fluid and expected — if I’m tapping delete, I would expect it to delete the thing (in this case, the only child Button and the parent Buttons block).

@lukewalczak
Copy link
Contributor

I've implemented the first solution! Thanks @iamthomasbishop!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement Improves a current area of the editor
Projects
None yet
3 participants