!lost - How would you implement a grid block in...
# ❓questionsu
!lost
05/18/2023, 3:15 PMHow would you implement a grid block in which elements can be placed at any position of the grid? I saw nested layouts are a thing, probably that then. But if i desire to have that block span across two grid cells? (like css grids basically, col-span/row-span)?
i
ifox
05/18/2023, 3:15 PMhi @!lost that would be an option of your nested block
u
!lost
05/18/2023, 3:17 PMSo a nested block can have attributes?
<x-twill::block-editor name="left"/>namei
ifox
05/18/2023, 3:18 PMnot what I mean, no, I mean that you would have a form field in your block to define how it spans
u
!lost
05/18/2023, 3:20 PMOh yeah, i need formfields and blocks
!lost
05/18/2023, 3:20 PMhttps://cdn.discordapp.com/attachments/1108774822277808128/1108776190480764988/Bildschirmfoto_2023-05-18_um_17.20.38.png▾
!lost
05/18/2023, 3:21 PMthats the UI basically and i'd like to configure the spaning of each element, that grid has just image form fields and one text field then i guess
!lost
05/18/2023, 4:20 PMCan I configure which blocks are allowed for that editor?
Copy code
html
<x-twill::block-editor name="col-1"/>
<x-twill::block-editor name="col-2"/>
<x-twill::block-editor name="col-3"/>
<x-twill::block-editor name="col-4"/>
<x-twill::block-editor name="col-5"/>
<x-twill::block-editor name="col-6"/>!lost
05/18/2023, 4:20 PMso that block editor should only allow text or image as possible blocks
!lost
05/18/2023, 4:32 PMokay found a blocks() method on the BlockEditor class
p
pboivin
05/18/2023, 9:26 PMHi @!lost , I've also implemented something similar recently and went for a "flat" block editor with 2 block types: Spacer and Project
https://cdn.discordapp.com/attachments/1108774822277808128/1108868293739151360/2023-05-18_17-19.png▾
pboivin
05/18/2023, 9:26 PMI've disabled the fullscreen block editor (the client works in Figma anyway to assemble the pages beforehand). Then on the front-end, this is all just basic flexbox (or grid, I don't actually remember that part).