Introduction

Part 3 in our series of posts about Flexible content covers Flexible Content in Silverstripe CMS.  Silverstripe has added Flexible Content as a core supported module, called Elemental.

The Elemental module provides the ability for SilverStripe users to break up a web page into smaller modular parts (or ‘blocks’) that allow content like banners, text and media to be independently managed within the CMS. This also allows for more targeted control over individual types of content, as well as individual versioning, more detailed reports and easy customisation for developers over how certain pieces of content are presented.

Getting Started

Elemental comes just one block type, "Content", a WYSIWYG editor content field.  The idea is to not flood admin users with too many options.  You can add more block types depending on your site's needs.  Silverstripe offers three more core block types: Banner, File and Form. 

As you build up the content with a list of blocks, you can see the UI gives you inline representations of the content and status indicators per block. Drag and drop blocks to reorder them.  Click through to edit complex blocks or edit simple blocks inline. Add new blocks to the top of the list or hover between blocks to add a block in the position you need.

The Status indcators show under the BlockType icon and are as follows:

Blue - The block has unsaved changes. Orange full - The block state is Draft and not publicly visible. Orange outline - The block is Modified where it has been published but has some additional draft changes. No state - The block is published.

There are some community developed modules that add more block types. Add the types your site needs by requiring it in your composer.json file and you can quickly build up a wide selection to keep content editors happy writing the content they need with enough control to make it look good. Block types include:

• Accordion: content in collapsible panels
• Countdown: time left until a set date and time
• Customer Service: map, directions, and contact info for your location
• Embeded Code: embed code like iframes, javascript
• Featured Content: large image, headline, description, link. one per row
• File List: A list of files for download
• Flexslider: Flexslider slideshow
• Gallery: display a collection of images
• Image: single image
• oEmbed: embed content from YouTube, SoundCloud, etc
• Promos: small image, headline, description, link. 3 to 4 per row
• Recent Blog Posts: list of the most recent posts of a specific blog
• Section Navigation: list of child pages or pages in current level
• Sponsors: sponsor logos in a row
• Tab Set: Create a tabbed interface that uses elements
• Testimonials: list of customer testimonials, filter by category

Customising Block Templates

If a block doesn't fit in with your design, add a template.ss file to your theme to override the provided block template.  Remember to use dev/build?flush=all to refresh the system and your new style should be used. The main difficulty is working out where exactly to put the SS file. Follow the class naming conventions in the modules to find the path.

Writing Custom Block Types

It is very easy to add your own custom block types.  All you need to do is write a class that extends DNADesign\Elemental\Models\BaseElement and add a template to output the content. 

<?php

use DNADesign\Elemental\Models\BaseElement;

class MyElement extends BaseElement
{
    private static $singular_name = 'my element';

    private static $plural_name = 'my elements';

    private static $description = 'What my custom element does';

	public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        // ...

        return $fields;
    }

    public function getType()
    {
        return 'My Element';
    }
}

Workflow & Reports

Some of SilverStripe's strengths are it's workflow features. This is carried through to blocks. You can publish and unpublish individual blocks and see indicators in the block list so you are aware which blocks have been published and which are drafts. There is a history tab for each block. You can click through and see previous versions, revert to a previous version or compare versions of a block. Silverstripe also offers block reporting with a "Blocks Used" and "Block Types" report.   This is amazing functionality for larger organisations that need strict control of their content.

Conclusion

Silverstripe's new "Elementor" blocks system offers good Flexible Content functionality in a way that is easy to extend and has powerful workflow features.  The interface can seem slightly clunky at times but it is being actively improved and is a bug free and robust user interface.