Modular Blocks

Modular Blocks is a field that allows content managers to dynamically create and modify components of a page or app on the go.

While creating a new entry, content managers now have the option to choose from multiple blocks, say "Banner" (Single Line Textbox and File fields), "Product Details" (Title, RTE, and File fields), or "Video" (File and Multi-line Textbox fields). Content managers can add the required block(s) from these options, move blocks up or down, remove them, as and when required.

This gives content managers the flexibility to create rich pages without the need to engage a developer for changes in the content type structure.

Let’s learn how developers and content managers can use this field.

Developer

The developer must first add this field to the content type builder while creating a content type. Once added, click the + New Block link, provide a name of your choice for this block (e.g., banner), and click Create.

You will notice a new block within the field. Now, from the left panel, add fields of your choice into this block. Likewise, you can add multiple blocks (with several fields within each block) into the added Modular Blocks field. You can, at any time, rename or delete the added blocks.

The developer can add a maximum of five Modular Blocks fields within a content type, and a maximum of 20 blocks within each Modular Blocks field.

Warning: You cannot add a Modular Blocks field within a Group field.

Modular blocks Developer.png

Content Manager

While creating an entry, the content manager sees the Modular Block field (or as renamed) and, within it, the links to add the defined blocks (e.g., a banner). By clicking on any of these block links, the relevant block (with all the corresponding fields) will be added in the entry form.

The content managers can add different multiple blocks and can also add the same blocks multiple times. They can also sort them, delete them, or add another block above a block using the icons given on the right-hand side top corner of a block.

Content Manager_3.png

Nested Modular Blocks

You can add Modular Blocks within a Modular Block field while creating a content type. This provides content managers with the flexibility of creating complex data structures with different content schemas.

Tip: You can use Nested Modular Blocks to create nested or flexible content pieces that have different structures. However, for similar structures, you can use nested Group fields instead.

For instance, you want to offer flexibility to news authors by providing flexible page structures that allow them to create either standard new articles or submit a set of photos of the event. Further, when creating standard news articles, there should be flexibility in usage of images, image description and body content as required.

To achieve this, you can create a content type by adding a Modular Blocks field, and add two blocks within it: “Standard News Article” and “Image Gallery”. Within the first block (i.e., Standard News Article), add another (nested) Modular Blocks field, and add a block each for the following fields: File, Single Line Textbox, and Rich Text Editor. For the “Image Gallery” Modular Blocks field, add a File field and mark it as Multiple. Save this content type.

Now, while creating entries for this content type, news authors can choose between the “Standard News Article” format or the “Image Gallery” format. Further, they can create varieties of “Standard News Articles” by adding any of the three given fields anywhere in the page multiple times.

Let’s look at how content managers and developers can make use of Nested Modular Blocks while working with entries and content types.

Add the Nested Modular Blocks Field to Content Types

To add a Nested Modular Blocks field to the content type, log in to your Contentstack account, and perform the following steps:

  1. Edit your content type by clicking on the Modular Blocks field option or drag and drop the field from the Fields list displayed at the left-hand side.

    Note: Developers can add up to 5 Modular Blocks fields in a content type.

  2. Once added, click the + New Block link, provide a name of your choice for this block (e.g. News Articles), and click Create.
  3. Now, from the left panel, add fields of your choice into this block. Likewise, you can add multiple blocks (with several fields within each block) into the added Modular Blocks field.

    Tip: You can, at any time, rename or delete the added blocks.

  4. Now, within one of these blocks (for e.g. News Articles), drag and drop a Nested Modular Blocks field from the left panel, and provide a name of your choice for this Modular Blocks field (for e.g. Categories).

    Note: Only two levels of nesting are allowed for the Modular Blocks field.

  5. Now, you can add multiple blocks (with several fields within each block) into the Nested Modular Blocks field (for e.g. the three nested blocks here would contain different template structures for an article).

    Note: The maximum number of blocks that can be added to a Modular Blocks field is 20.

Nested Modular Blocks in Content Type Builder.png

Add Content to the Nested Modular Blocks Field

Let’s learn how the Nested Modular Blocks field allows content managers to flexibly add content to their entries. While creating an entry, the content manager can perform the following steps to add content to the entry:

  1. Open the entry.
  2. You will see the Modular Blocks field (or as renamed), the subsequent Nested Modular Blocks field within it, and links to the different blocks defined within the Nested Modular Blocks field.
  3. Now, click on any of the links to add the defined blocks (e.g., a banner) to your entry. The relevant block (with all the corresponding fields) will be added in the entry form.

    Note: The content manager cannot add more than 30 blocks within a Nested Modular Blocks field.

Nested Modular Blocks in Entry Page.png

Tip: Content managers can flexibly add different blocks to the entry or add the same blocks multiple times. They can also sort the blocks using the icons given on the right-hand side top corner of a block and decide how they would be placed on the website.

Limitations of Modular Blocks

  • The maximum number of Modular Blocks fields that can be added in a single content type is 5.
  • The maximum number of blocks that the developer can add within the Modular Blocks field is 20.
  • The maximum depth limit for nesting of Modular Blocks fields is 2.
  • The maximum number of fields that can be added to a content type is 100. When you add a Modular Blocks field to a content type, each Modular Blocks field is counted as a field, each block within the Modular Blocks field is counted as a field, and each field within a block is counted too. Consider for example, a content type with one Modular Blocks field that contains two blocks, each block with two fields each, will be counted as a total of 7 fields.
  • The content manager cannot add more than 30 blocks within a Modular Blocks field.
  • The maximum number of blocks that the developer can add within the Nested Modular Blocks field is 20.
  • While creating an entry, the content manager cannot add more than 30 blocks within a Nested Modular Blocks field.

On This Page

top-arrow