Blocks

In Imput blocks are synonymous with MDX components, but we call them "blocks" to be more palatable for non-technical writers. Imput allows you to configure different blocks for each of your collections, meaning different parts of your site are able to use completely different kinds of components.

Your configuration is only aware of the composition of your MDX components, which leaves the freedom of how to display them on your site up to you.

Tips and Tricks

In its current version Imput is mostly designed to be used with next-mdx-remote on the front-end. Imput works great with setups that uses <MDXProvider/> since it helps automatically replacing JSX components in your MDX without having to manually import them.

Configuring blocks

Getting Imput to recognise your components is pretty straight forward:

<NextCMS
  {...{
    settings: {
      collections: [
        {
          // the rest of your collection configuration
          blocks: [
            // this is where your components config will go
          ],
        },
      ],
    },
  }}
/>

The next step is to match your component's composition: its name, its props, its types.

<NextCMS
  {...{
    settings: {
      collections: [
        {
          // the rest of your collection configuration
          blocks: [
            {
              name: 'Note',
              label: 'Note',
              fields: [
                {
                  name: 'children',
                  label: 'Children',
                  type: {
                    widget: 'markdown',
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  }}
/>

The above configuration will allow Imput to output a component with this shape:

<Note>
  Any **markdown** text here
</Note>

From here you can go as simple or as complex as you want. You can even nest components within components (within reason 👀) thanks to our nested editors.

Blocks Widgets

Just like the editor fields, blocks support a variety of widgets to help with composition. All widgets supported by fields are available for blocks as well (aside from the relational widget!).

Good to know

There's some quirks that are good to know about working with Blocks within Imput.

Children and Markdown

If your block configuration specifies a component's children prop it will always be displayed as a Markdown in the block interface.

This decision was made because it's difficult to predict how markdown in props is handled by MDX, especially if that markdown contains JSX components.

Writing array and object props

While with a considerable amount of effort it would probably be possible to support nested widgets to construct objects, this was not something Imput is planning to support from the get go.

In its stead you can make use of the json widget, which allows you to write Javascript objects directly into your Markdown.

There are probably bugs (sorry)

Imput is still in alpha! It's likely I've got some stuff wrong or I haven't considered some edge cases. If you find a bug please open an issue over on Github.