Modular content fields

    Everyone hates WYSIWYG editors: developers know they produce dirty code, designers fear the introduction of unwanted styling, editors struggle to use them. Sure, DatoCMS features a WYSIWYG editor since day one, but we want to keep it simple and lightweight.

    In DatoCMS you can achieve structured, rich-content editing using a specific type of field called Modular content.

    The idea is to give your authors the choice to compose their content by alternating certain blocks (ie. text, images, videos, etc.), which are nothing more but "low-level" models. Authors, to compose a structured content, will be able to add and reorder these blocks as they prefer. This gives authors a lot of freedom to organize their content, much like Medium editor does, while keeping the content clean and structured.


    How to build a Modular content editor

    Suppose we have an Article model, and we want to add a modular content field to manage its content. The first step is to decide which are the different kind of basic blocks you want your authors to alternate. In this case, we want our content to be a flexible composition of:

    • Text
    • Quotes
    • Videos
    • Text + Image blocks

    To achieve this result, first we create the Article model, and add a Modular content field to it:

    Under the Modular content field we just created, we can now add our blocks. There's a Add new block button for that, so we'll use it to create the Quote block:

    Blocks are just a composition of fields, just like ordinary models. In our case, we want quotes to be made of two fields: one containing the actual quote, the other containing the author.

    You can click on the Settings button on the Quote block, and add some fields. A multi-paragraph text field to contain the text of the quote, and a single-line string text to display the name of the quote's author.

    If you go to your Content area now you should see a new option called "Quote" in the modular content field's dropdown.

    Build modular templates reusing modular blocks

    With these building blocks you can start to design and develop a modular template that matches models and modular blocks in DatoCMS' schema.

    Once you have set up the different blocks you can reuse them across different models, by using the Pick existing functionality:

    Pick existing modular block

    This means that the exact same block structure is reused across modular contents and models. If you now modify the block in one place the changes will be reflected across all modular contents.

    This will effectively enable you to develop a modular template that will allow editors to build complex pages just by creating new records in the CMS!