Let's talk: Elemental

We think content blocks are an integral part of managing content in the SilverStripe CMS.

In late 2017, we wrote about adopting the Elemental module as a commercially supported module. This was done to align community contributions and create a content editing experience that clients were looking for in the SilverStripe CMS. Since this time, teams at SilverStripe, at digital agencies, and developers in the wider community have dedicated effort to developing this module. Thanks to their efforts, the module is now ready for you to put it in front of a content editor who’s looking for a fluid publishing experience.

Content editors and digital agencies care about the publishing experience. Results from a recent community survey have been collated and one theme that stood out was that the SilverStripe Framework is well-suited to rapid development. This is a key characteristic of an Agile CMS, and a theme we’re proud to see shared amongst the SilverStripe community. As a module, Elemental shares this theme too.

Build the solution for delivering content

While the idea of an Agile CMS is still evolving, the Elemental content blocks module is a core piece of SilverStripe’s answer to this.

Wielding the power of the open source Elemental module, you can use your iterative development processes with a client to create content solutions that focus on reuse, flexibility, and experimentation while ensuring your agency can still build and deploy quickly.

Five key points that Elemental supports:

• Creating content with good structure and front-end design
• Giving content authors greater flexibility
• Reusing code and design patterns
• Building complex interfaces away from the GridField
• Powerful GraphQL content APIs

Content requires structure, so use blocks

Content editors are looking for structure in a CMS. However, it’s becoming far more likely that creation of content, especially as part of a site redesign, will happen outside of the CMS. For large amounts of unstructured information, or content that needs to be written from scratch, content creation tools like GatherContent are recommended to help your client quickly build and iterate with structure in mind. These tools support you in breaking page-level content down into manageable chunks (or ‘blocks’). When the content is migrated into the CMS, it still needs to be capable of keeping that structure for future maintenance and publishing.

Elemental provides the modular structure that allows for individual management of these blocks of content, simple examples being: page banners, text, and media. But it’s also important to think about content structure in the way a content editor may. In order to best engage the reader, there needs to be a focus on specific sections of the page. Examples could be: a call to action, summary statement to engage the reader, featured images, or embed content from another related page.

Engage the reader with well-designed content using blocks

You may be working with your client and content editor to come up with this content structure, or be building content blocks to lay the path for the structure. Either way, ensuring the information can be managed and presented to the customer in the most impactful way can be handled by Elemental.

Content blocks don’t mean top-down design

Content structure doesn’t have to follow a vertical order. Elemental provides the functionality to extend a page template by swapping out the single content area for a list of manageable ‘elements’. Each element can have its own style within an ‘elemental area’ and thus, a landing page like the below can be created quickly. Quick to design on the front-end and simple to manage in the CMS.

Reduce custom code

The latest major release of Elemental shifted CMS management of blocks to a JavaScript interface using React, lifting the opportunity for reuse and flexibility with the blocks that you create or use.

Moving away from a catch-all WYSIWYG field to a block made up of individual components built using the React JavaScript library expands what you can offer.

When you’re looking to move away from the standard CMS GridField, you’re able to build more complex editing interfaces to meet the demands of your client. Don't forget though: there’s a large community of open-source developers that may have already built what you’re looking for—there’s dozens of community-maintained blocks modules listed on addons.silverstripe.org!

Better yet, share React components across blocks and reduce your developer effort while keeping consistency for the content editor. The example below shows a banner block made up of a number of components. The file upload field could have reuse potential in blocks focusing on displaying a featured image or a file gallery.

Check out some links at the bottom if you’re interested in reading more about building your own React components in the SilverStripe CMS, or customising existing ones.

Delivering content across channels

With the latest major version of the Elemental module, you’ll see the module moving to an API first approach. All blocks can be exposed through powerful content GraphQL APIs, increasing your access to the structured data of the content and opening up your possibilities of surfacing your client’s content in new ways. Lazy load content in your frontend apps for rapid response times, take a hybrid approach or go headless, the choice is yours!

What commercially supported means

Our focus is to cement Elemental as a solid foundation for digital agencies and the open source community to extend with their own content blocks.

If you haven’t had the chance to review the latest version of Elemental, a key example of improving the content block foundation in SilverStipe is the introduction of inline editing. After identifying areas of friction for the content editor, work has been done to create a more seamless flow for creating and editing content in a block within the context of other blocks. This removes the required transition between the master and detail GridField views.

To see some other recent improvements made to the Elemental module, such as drag and drop reordering and individual save and publishing of blocks, have a look at the latest major release page on GitHub.

Community Support

We encourage you to adopt Elemental for content management in all future SilverStripe projects. The module is available through the SilverStripe addons site—it’s the module under the DNA Design organisation.

If you’re using the module and creating your own content blocks, the module contributors would love to hear from you! The following channels are available for you:

• Raise bugs or enhancement requests on the GitHub module repository.
• Submit content blocks you create on the addons site.
• Talk shop on the #content-blocks community slack channel. Sign up here.
• Get in touch about writing a feature blog post on how you create solutions for managing content.

If you want to get building, check out the developer guidance on the module repository and this tutorial for customising existing React components.