Create custom layout component with multiple “slots”

Hi there,

currently I am trying to build a layout block component for the organization I am working for. I like to hide the underlying element hierarchy but enable the people using it by providing some slots for header, footer, content and sidebar. Is there any way to do this?

My problem is located somewhere between “I can add only one <InnerBlocks /> component per block component” and “I cannot choose the location of the components added to <InnerBlocks />”. What I want to say is: yes, I could create four custom block components for each of layout areas, add them as default to my layout component and lock moving them.

But this has some issues:
1st: even templates can be unlocked.
2nd: I am not sure how I can customize the location of the area blocks.

My current approach looks like this:

export default function Edit({
  attributes,
  clientId,
  setAttributes
}) {
  const innerBlocks = useSelect(
    ( select ) =>
      select( blockEditorStore ).getBlocks( clientId ),
    [ clientId ]
  );

  console.log({
    innerBlocks,
  });

  const blockProps = useBlockProps();

  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    'renderAppender': InnerBlocks.ButtonBlockAppender,
    'allowedBlocks': [
      'custom-block/layout-header',
      'custom-block/layout-content',
      'custom-block/layout-sidebar',
      'custom-block/layout-footer',
    ],
    'template': [
      [ 'custom-block/layout-header', {} ],
      [ 'custom-block/layout-content', {} ],
      [ 'custom-block/layout-sidebar', {} ],
      [ 'custom-block/layout-footer', {} ],
    ],
    'templateLock': 'all',
  });

  return (
    <div { ...blockProps }>
      <div className="custom-block--layout-container">
        <div { ...innerBlocksProps } />
        <div className="custom-block--layout-header">Header</div>
        <div className="custom-block--layout-body" style={{ 'display': 'flex' }}>
          <div className="custom-block--layout-main" style={{ 'width': '75%', 'paddingRight': '1rem' }}>
            Content
          </div>
          <div className="custom-block--layout-sidebar" style={{ 'width': '25%', 'paddingLeft': '1rem' }}>
            Sidebar
          </div>
        </div>
        <div className="custom-block--layout-footer">Footer</div>
      </div>
    </div>
  );
}

• This topic was modified 4 years ago by Gregor.