How to create new Layout Blocks

standardgage2 years ago

7

• 

  dankuta2 years ago

  In the frontend code, do you have a function to help loop through

  page.layout

  and render the blocks based on blockType?

• 

  standardgage2 years ago

  Maybe? I'm not sure where that would be in the template. But would adding a new block effect that?

• 

  dankuta2 years ago

  Ok are the other blocks that came with the template displaying?

  
  
  

  If so, this might mean you'll need to add the new block to the list of blocks under the layout field in the Collection config file (e.g. collections -> pages -> fields -> layout) in the payload folder.

  
  

  Add a console.log(page.layout) in your [...slug] file to be sure that the new block is in the output or use the API explorer for the collection item in the Admin UI.

  
  
  

  On the frontend, you'll also need to to create the new block, and add to the block list to be rendered.

• 

  standardgage2 years ago

  So yes the other blocks are displaying and on the admin api I can see the new block. However, in the slug file I added a log as you said and the new block does not print out in that (the normal blocks do)

  
  
  

  also I noticed in the src/app/_graphql/pages.ts there's a export for page that references the other blocks.

  
  

  export const PAGE = `
    query Page($slug: String, $draft: Boolean) {
      Pages(where: { AND: [{ slug: { equals: $slug }}] }, limit: 1, draft: $draft) {
        docs {
          id
          title
          hero {
            type
            richText
            links {
              link ${LINK_FIELDS()}
            }
            ${MEDIA}
          }
          layout {
            ${CONTENT}
            ${CALL_TO_ACTION}
            ${CONTENT}
            ${MEDIA_BLOCK}
            ${ARCHIVE_BLOCK}
            
          }
          ${META}
        }
      }
    }
  `

  
  

  So I tried to add mine to this but doing so breaks the database somehow? Immediately my site then thinks it has no data until I remove my block again.

  
  
  

  Hey I was able to figure out the problem

• 

  waterlord932 years ago

  Mind writting a short summary what the issue was? I am looking to do something similar, would be nice to know what to look out for :D

• 

  standardgage2 years ago

  In my case the biggest issue seemed to be typos and not regenerating types/schemas as well as restarting with yarn dev. I made a super barebones component to get started and then upgraded once that worked so that's what I would suggest doing. It also helped me to look at the other blocks code and search for where they were being called.

  
  
  

  Oh and I often forgot to update the code in the blocks file within _graphql folder

  
  
  

  Now I'm stuck on integrating tailwind with the template 😭

• 

  dankuta2 years ago

  That's great!