Define grid layout programmatically

[intelligence]

Hey!

The layout block is so useful, thanks for your work on it!

As I tend to want to tightly control how clients can add content I'm curious if you've thought about being able to setup the layout grid programmatically via attributes? The use case would be to create a custom block that contains an inner block that has a template that only allows the layout grid at top level and then the content in each column can be customized by the client.

Effectively you'd be able to create advanced grids (preferably for each breakpoint) and the client can then add content in the grid how they please, but with the upside that the grid layout is preserved. Being able to lock layout changes (optionally disable offset/span) would be pretty cool too, so you have even more control of the layout.

Thoughts?

[jasmussen]

Thanks for the idea. I think it's a great one. I also think the idea is good enough that it might be worth adding to the core project itself, not just layout grid. There's a conversation ongoing in WordPress/gutenberg#29864 which discusses a feature that seems very adjacent to what you are suggesting. Can you take a look?

[intelligence]

Very cool concept, I hope it makes it way into the core! What I had in mind when I made this issue is more akin of the "traditional" way, like this:

  const TEMPLATE = [
    [ 'core/heading', { placeholder: 'Enter sub headline...' } ],
  ];

  const blockProps = useBlockProps();
  const innerBlocksProps = useInnerBlocksProps( blockProps, {
      allowedBlocks: [ 'core/heading' ],
      template: TEMPLATE,
  });

When looking through the current layout grid code it seems like it's not possible to setup a grid block with amounts of columns, span and offset value for each responsive breakpoint (similarly as setting placeholder programmatically), or am I wrong? :)

[intelligence]

Just tried this, but does not seem to work as intended:

export default function Edit() {

  const TEMPLATE = [
    [ 'jetpack/layout-grid', { 
        column1DesktopOffset: 0,
        column1DesktopSpan: 8,
        column1MobileOffset: 0,
        column1MobileSpan: 6,
        column1TabletOffset: 0,
        column1TabletSpan: 6,
        column2DesktopOffset: 0,
        column2MobileOffset: 0,
        column2TabletOffset: 0,
        column3DesktopOffset: 0,
        column3MobileOffset: 0,
        column3TabletOffset: 0,
        column4DesktopOffset: 0,
        column4MobileOffset: 0,
        column4TabletOffset: 0,
      } 
    ]           
  ];

  const blockProps = useBlockProps();
  const innerBlocksProps = useInnerBlocksProps( blockProps, {
      allowedBlocks: [ 'jetpack/layout-grid', 'jetpack/layout-grid-column' ],
      template: TEMPLATE,
  });

  return (
    <div { ...innerBlocksProps } />
  );
}