Modular Blocks

The Modular Blocks field lets content managers dynamically build and modify components of a page or app, directly from the entry editor. It provides flexibility to assemble rich content structures without developer involvement.

For example, content managers can choose from predefined blocks like:

• Banner: Single Line Textbox and File fields
• Product Details: Title, RTE, and File fields
• Video: File and Multi Line Textbox fields

They can add, reorder, or remove these blocks as needed, allowing them to design complex page layouts independently.

Let’s explore how both developers and content managers can use this field effectively.

Developer

To use Modular Blocks, developers must first add the field to a content type.

1. In the content type builder, insert the Modular Blocks field.
2. Click + New Block, provide a name (e.g., Hero Banner), and click Create.
3. Inside the block, use Insert a Field to add the required fields.
4. Repeat this to add multiple blocks within the same Modular Blocks field.
5. Rename or delete any block if needed.

   

Note: You can add up to 5 Modular Blocks fields per content type, with up to 20 blocks in each field.

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

Content Manager

While creating an entry, the Modular Blocks field appears with links to add the defined blocks (e.g., Banner, Product Details). Content managers can:

• Add blocks and repeat them as needed
• Sort or delete blocks
• Insert a block above another using the icons at the top-right of each block

When entering text into certain fields, the block’s title auto-updates to reflect the first field’s value. This occurs when using:

• Single Line Textbox
• Multi Line Textbox
• Date field (shows date in ISO format)
• Title field in a Link field
• Radio or dropdown field (single select)

Real-World Scenarios of Using Modular Blocks

Let's learn how to work with Modular Blocks in Contentstack using a few use cases.

Example 1: Fluid Page Components

Modular Blocks simplify creating flexible content types for multiple pages with varying components.

To create a content type with modular blocks, log in to your Contentstack account, and perform the following steps:

1. Go to your stack and click the “Content Models” icon.
2. Click + New Content Type and name it Page.
3. Add common fields like Intro, Metadata, or SEO.
4. Insert a Modular Blocks field and name it Page Components.
5. Inside Page Components, create blocks like:
   1. Banner
   2. Quote
   3. Sections
6. Content editors can structure and reorder components as needed.

   

Example 2: Creating a Menu

You can use Modular Blocks to create a navigation menu with references to internal or external pages.

To create a menu using modular blocks, log in to your Contentstack account, and perform the following steps:

1. Go to your stack and click the “Content Models” icon.
2. Click + New Content Type and name it Landing Page.
3. Add fields like:
   1. Title (default)
   2. JSON Rich Text Editor (Main Text) 
4. Click Save and Close to save your content type.
5. Now, create another content type named Menu.
6. Insert a Modular Blocks field and name it Menu.
7. Inside Menu, create blocks:
   1. Landing Page Reference: Single Line Textbox (Label) and Reference field (linked to Landing Page)
   2. External: Single Line Textbox and Link field
   3. Custom: Two Single Line Textboxes (Label, Path) 

Now that we are done creating our content types, let's create entries in them and see modular blocks in action.

1. Navigate to “Entries” and create a new entry in the Landing Page content type.
2. Create two entries namely, Frontpage and About.
3. In the Menu content type, create an entry with:
   1. Landing Page Reference title as Home and reference Frontpage.
   2. Add another block with the title About referencing the About entry.
   3. Within External, set the title as Contentstack and the URL as https://contentstack.com.
   4. Within Custom keep the title as Docs with the Path as /documentation/start.

      Tip: The Custom block allows linking to any internal path (e.g., /some-other-link/on-my-webpage).

You can now use the Content Delivery API to retrieve the Menu entry content and build your navigation dynamically. For example, refer to this example.

Example 3: Light Geo-Segmentation

To show different content based on user location, create a content type with blocks like:

• India
• USA
• Europe

Each block can hold region-specific content. Editors can structure content accordingly.

Note: Modular Blocks enable content structure. Actual geo-segmentation logic (based on IP) needs to be implemented externally.

Nested Modular Blocks

You can nest a Modular Blocks field inside a block of another Modular Blocks field, allowing even greater flexibility.

Let’s say you want to let authors:

• Create a standard news article with optional fields like image, description, and body content.
• Or create a photo gallery with multiple image uploads.

To create nested modular blocks, log in to your Contentstack account, and perform the following steps:

1. Go to your stack and click the “Content Models” icon.
2. Create a new or select an existing content type.
3. Add a Modular Blocks field named Article Type.
4. Create two blocks:
   1. News Articles that contains a nested Modular Blocks field with:
      1. Image Block (File field)
      2. Description Block (Single Line Textbox)
      3. Body Block (RTE)
   2. Image Gallery that contains a File field with Multiple enabled. 

Now, while creating entries, authors can choose between article or gallery and structure the content using reusable patterns.

1. Open the entry and scroll to the Modular Blocks field.
2. Click a block name (e.g., News Articles) to add it.
3. Inside it, select a nested block from the defined list (e.g., Image Block).
4. Repeat or reorder blocks as needed.

Note: You can add up to 30 block instances inside a nested Modular Blocks field.

Copy Field Values Across Modular Blocks

Content managers can also copy the values of a block within a Modular Blocks field and paste them into:

• Another block in the same entry
• A block in the same Modular Blocks field in a different entry

This simplifies content duplication and speeds up entry creation.

To copy and paste field values across modular blocks, log in to your Contentstack account and perform the following steps:

1. In the Modular Blocks field, hover over the desired block.
2. Click the vertical ellipsis and select Copy Field Values.
3. In the target entry or block, click the vertical ellipsis again and select Paste Field Values.

Note: The destination block must match the original block’s name and structure.

Limitations of Modular Blocks

• You can add a maximum of five Modular Blocks fields in a single content type.
• Each Modular Blocks field can contain up to 100 block definitions.
• Up to three levels of nesting are allowed within Modular Blocks fields.
• A nested Modular Blocks field can include up to 20 block definitions.
• A content type can include a maximum of 100 fields in total, including Modular Blocks fields and nested fields.
• You can add up to 100 block instances within a Modular Blocks field while creating an entry.
• A nested Modular Blocks field supports up to 30 block instances per entry.