Can you have nested blocks in the sidebar?

I am currently working on a project that utilizes the TinaCMS sidebar using blocks. I have a CardDeck block that contains multiple Card blocks. However, when I am in the CardDeck block, Card does not show as an option when I click on the plus button.

This is my code for the CardDeck Block. I have the CardBlock under templates but it is not showing up as an option of a block to add.
fields: [
{
name: ‘cards’,
label: ‘Cards’,
component: ‘blocks’,
templates: {
‘card-block’: CardBlock,
},
}
],

I have exactly the same problem with „nested blocks" in the sidebar. The problem also occurs with “blocks” within a group. In both cases the buttons to add a block are not clickable (no list with options displayed). But all other functions work (drag and drop, expand etc.).

Examples:

“block field within group”: The buttons for ‘image’ and ‘contactChannels’ within the group are not clickable. If I create the fields without group, the buttons are clickable.

{
        label: 'Contact',
        name: 'contact',
        component: 'group',
        fields: [
          {
            label: 'Headline',
            name: 'headline',
            component: 'textarea',
          },
          {
            label: 'Image',
            name: 'image',
            component: 'blocks',
            templates: {
              'Image': SidebarImageBlock,
            },
          },
          {
            label: 'Contact channels',
            name: 'contactChannels',
            component: 'blocks',
            templates: {
              'Phone': ContactChannelPhoneBlock,
              'Mobile': ContactChannelMobileBlock,
              'Mail': ContactChannelMailBlock,
            },
          },
        ],
      },

“nested blocks”: The button for adding “Sections” (top level) works, the button for (nested) “Grids” is not clickable:

const SidebarGridBlock = {
  label: 'Grid',
  key: 'Grid',
  fields: [
    {
      label: 'Columns',
      name: 'columns',
      component: 'blocks',
      templates: {
        'Text': SidebarTextBlock,
        'Image': SidebarImageBlock,
        'Video': SidebarVideoBlock,
        'Gallery': SidebarGalleryBlock,
      }
    }
  ],
}

const SidebarSectionBlock = {
  label: 'Section',
  key: 'Section',
  fields: [
    {
      label: 'Grids',
      name: 'grids',
      component: 'blocks',
      templates: {
        'Grid': SidebarGridBlock,
      }
    }
  ],
}

Thanks for reporting, please subscribe to Cannot add Nested Blocks without using Inline Blocks · Issue #1757 · tinacms/tinacms · GitHub to be notified when a fix is available, our team is working on this.

1 Like