search

mrwweb / useful-block-styles

Simple block styles you frequently need for the WordPress Block Editor
GNU General Public License v3.0
4 stars 1 forks source link

New Style Idea: Buttons at Bottom of Columns Block #9

Closed mrwweb closed 3 years ago

mrwweb commented 3 years ago

Because column blocks are already equal-height, it's pretty easy to write a rule that forces a button block to align to the bottom of any column.

Questions:

  1. Do 90%+ of all sites needs this.
  2. Is this too weird of a style, given that it only would apply when there is a column block that as a buttons block as the last block. (And an empty paragraph block would break that.)
rtvenge commented 3 years ago

@mrwweb I generally want the button to align to the bottom on card layouts like this. Would it make more sense to make this a group so you could use it on any element? I understand that would add complexity to creating it for the editor. Or apply this style to button, link, paragraph, etc?

On a technical side, how do we implement this? Does this depend on the #11 so the parent column is display: flex;? Then add 'justify-self: flex-end; to the button? My flexbox knowledge isn't 100%, so I could be missing something.

mrwweb commented 3 years ago

Demo: https://codepen.io/mrwweb/pen/eYgmypR?editors=1100

auto margin + flexbox is the best-kept flexbox secret.

rtvenge commented 3 years ago

@mrwweb looks great! Any thought to applying this to a Group?

My thought: Apply to Button, paragraph (so it could be applied to a non-button link), and group (for ultimate flexibility).

I could be persuaded to only do Button if we want to keep the complexity/technical debt down.

mrwweb commented 3 years ago

I think this would have to be applied to the core/columns block, because it needs to set styles of both the core/column wrapper and the last block in the column. The alternative would be to create multiple styles that would have to be combined to make it work and might be a little more unpredictable. I do like the idea of a way to make it apply to more than just buttons though. This is an interesting one. It might be worth sketching out in a branch for feedback.

mrwweb commented 3 years ago

Emerging guidelines for this plugin: "stick to styles that are useful utility classes (small, single purpose) and mostly for Text blocks."

Therefore, closing this issue.