Add custom flex-grow control

thoughtis / cata-blocks

Block Editor components for use with the Cata theme.

GNU General Public License v3.0

1 stars 0 forks source link

Add custom flex-grow control #122

Closed douglas-johnson closed 7 months ago

douglas-johnson commented 8 months ago

The controls for the flex layout type allow, fit, fill and fixed sizes. We really need fixed and fill to work together. We run into multiple layouts that would benefit from support for uses cases like "20em by default and grow to fill the available space".

Can we add control to the layout panel to set flex-grow as a number?
Based on that, flex-grow be set in the style attribute of a block?

jessica-townsend commented 7 months ago

@douglas-johnson the solutions that I've seen for something like this involved adding a new control panel to certain blocks. Was there a different way to achieve this that you had in mind?

douglas-johnson commented 7 months ago

@jessica-townsend I think that sounds right, can you show me an example?

jessica-townsend commented 7 months ago

I have an unrefined solution for this here: https://github.com/thoughtis/cata-blocks/blob/issue%23122/flex-grow-control/block-editor/src/index.js

This adds a Flex Grow attribute to all group blocks, but only displays an input field under dimensions if the block's parent has a flex layout and the block's width is set to fixed. An inline style gets added in the editor and on the frontend. Let me know what you think about this so far @douglas-johnson

douglas-johnson commented 7 months ago

@jessica-townsend I'm not able to see the control in the editor, what am I missing?

jessica-townsend commented 7 months ago

@douglas-johnson the control is currently only applied to group blocks, so the block structure should be like this

douglas-johnson commented 7 months ago

I set the flex-grow on these two headings in a Row, then I switched them to Fit instead of Fixed. I expected the flex-grow value to get reset to null, but it was still there in the output.