Title: Create custom layout component with multiple “slots”
Last modified: May 15, 2022

---

# Create custom layout component with multiple “slots”

 *  Resolved [Gregor](https://wordpress.org/support/users/meikatz/)
 * (@meikatz)
 * [4 years ago](https://wordpress.org/support/topic/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](https://wordpress.org/support/users/meikatz/).

Viewing 1 replies (of 1 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [4 years ago](https://wordpress.org/support/topic/create-custom-layout-component-with-multiple-slots/#post-15697017)
 * Hi, [@meikatz](https://wordpress.org/support/users/meikatz/)! It seems like this
   isn’t related to the standalone Gutenberg plugin, but to some custom development
   you’re doing. I would recommend reposting in the Developing with WordPress forum,
   which is more suited for advanced development questions:
 * [https://wordpress.org/support/forum/wp-advanced/](https://wordpress.org/support/forum/wp-advanced/)
 * Unfortunately I’m not able to move posts between this forum and that one, so 
   you’ll need to make a new post there. Thanks!

Viewing 1 replies (of 1 total)

The topic ‘Create custom layout component with multiple “slots”’ is closed to new
replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [4 years ago](https://wordpress.org/support/topic/create-custom-layout-component-with-multiple-slots/#post-15697017)
 * Status: resolved