Imagine a very simple blog. Blog posts are just a title and a paragraph or three. In that case, having a CMS where you enter the title and those paragraphs and hit publish is perfect. Perhaps some metadata like the date and author come along for the ride. I’m gonna stick my neck out here and say that title-and-content fields only is a CMS anti-pattern. It’s powerful in its flexibility but causes long-term pain in lack of control through abstraction.
Let’s not have a conversation about CMS’s as a whole though, let’s scope this down to just that content area issue.
Now imagine we have a site with a bit more variety. We’re trying to use our CMS to build all sorts of pages. Perhaps some of it is bloggish. Some of it more like landing pages. These pages are constructed from chunks of text but also different components. Maps! Sliders! Advertising! Pull quotes!
Here are four different examples, so you can see exactly what I mean:
I bet that kind of thing looks familiar.
You can absolutely pull this off by putting all those blocks into a single content field. Hey, it’s just HTML! Put the HTML you need for all these blocks right into that content field and it’ll do what you want.
There’s a couple of significant problems with this:
- Not everyone is super handy with HTML. You might be setting up a CMS for other people to use who are great with content but not so much with code. Even for those folks who are comfortable with HTML, this doesn’t leverage the CMS very well. It would be a lot easier, for example, to rearrange a page by dragging and dropping then it could carefully copy and pasting HTML.
- The HTML-in-the-database issue. So you have five pages with an image slider. The slider requires some specific, nested, structured HTML. Are you dropping that into five different pages? That slider is bound to change, and you’ll want to avoid changing it five times. Keep your HTML in templates, and data in databases.
So… what do we do? I wasn’t really sure how CMS’s were handling this, to be honest. So I looked around. This is what I’ve found.
In CraftCMS…
CraftCMS has a Matrix field type for this.
A single Matrix field can have as many types of blocks as needed, which the author can pick and choose from when adding new content. Each block type gets its own set of fields.
In Perch…
Perch handles this with what they call Blocks:
In our blog template, the body of the post is just one big area to add text. Your editor, however, might want to build up a post with images, or video, or anything else. We can give them the ability to choose between different things to put into their post using Perch Blocks.
In Statamic…
Statamic deals with this idea with Replicator meta fieldtype:
The Replicator is a meta fieldtype giving you the ability to define sets of fields that you can dynamically piece together in whatever order and arrangement you imagine.
In WordPress…
It’s tempting to just shout out Advanced Custom Fields here, which seems right up this alley. I love ACF, but I don’t think it’s quite the same here. While you can create new custom fields to use, it’s then on you to ask for that data and output it in templates in a special way. It’s not a way of handling the existing content blocks.
Something like SiteOrigin Page Builder, which works by using the existing content area and widgets:
There is also the forthcoming Gutenberg editor. It’s destined for WordPress core, but for now it’s a plugin. Brian Jackson has a good article covering it. In the demo content of Gutenberg itself it explains it well:
The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content – somewhat similar to LEGO bricks – that you can move around an interact with. Move your cursor around and you’ll notice differnet blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, whichout fearing about losing things in the process of copying and pasting.
Note the different blocks available:
In Drupal…
Drupal has a module called Paragraphs for this:
Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another. Paragraph Types can be anything you want from a simple text block or image to a complex and configurable slideshow.
In ModX…
ModX has a paid add-on called ContentBlocks for this:
The Modular Content principle means that you break up your content into smaller pieces of content, that can be used or parsed separately. So instead of a single blob of content, you may set a headline, an image and a text description.
Each of those small blocks of content have their own template so you can do amazing things with their values.
Of course those aren’t the only CMS’s on the block. How does yours handle it?
Also there’s ProcessWire (https://processwire.com) with its (pro) module Repeater Matrix: https://processwire.com/api/modules/profields/repeater-matrix/
An introduction: https://digitalardor.com/articles/basic-setup-for-content-blocks-in-processwire/
Totally agree about ProcessWire an the Repeater Matrix module.
One may also consider Wagtail and its powerful native Streamfield feature if Python is your thing.
Probably should be noted that, in addition to the awesome and flexible commercial Repeater Matrix module, ProcessWire also has a built-in module called PageTable that fits the bill nicely.
Teppo is right, PageTable is an alternative to build content blocks in ProcessWire I was not aware of it when I wrote the article because this module and field type is not activated by default.
However, I personally don’t like how the blocks are displayed in the ProcessWire backend when you use PageTable: It’s a table—like the name implies. Each row represents one content block and has an edit button which opens the edit mode of that block in a modal popup.
There is a solution to prettify how PageTable content blocks are displayed in the CMS backend. The additional module PageTableExtended allows you to use your own layout as output for a table row. This way you can mimic each content block’s frontend layout to a certain extend. But it comes with the cost of additional work to create these layouts.
In the end, I guess it is a matter of personal taste. Anyway, I’ve updated both of my articles “How—and why—to pimp your CMS with modular content blocks” and “Creating the basic setup for modular content blocks in ProcessWire” (which is the article Marcus mentioned in the comment above), so that they now provide basic information (since I have no implementation experience myself) about the PageTable option.
Component IO is much easier than any of these. You just make the edits directly from your own webpage and format things however you want. Way more flexible.
Wouldn’t the WordPress analog be shortcodes? With a lot of shortcodes defined in the theme or in a plugin, the content area can act much like Perch’s, where these blocks are placed within the content area and then the HTML that results is abstracted to your theme or plugin.
I was thinking of shortcodes here as well. Shortcode UI takes this a step further –> https://wordpress.org/plugins/shortcode-ui/
If the page building system needs to be flexible, then I agree that there are some halfway decent page builders out there.
However, if we really are just looking for some tinker-toy/lego templates (a small set of fixed layouts), then ACF still is my go to. I have built some custom page builders that are essentially client proof using the Flexible Content Field.
For a really quick & dirty example: Let’s say the client has three branding colors, and wants to be able to insert 2 column sections with a light colorerd background, full width hero sections with large text (pull quotes), a lightbox image gallery, regular text, and/or the sign up form for their newsletter.
Using ACF, I can make each of these Flexible Content. The 2 column section has two text editors (left and right column) and a drop-down/select for background color (which I use to assign a CSS class to the container). Same thing for the hero section, except we use a textarea instead of a WYSIWYG. That way I can control the CSS formatting. The sign up form doesn’t even have anything to select. It is just a placeholder box on the backend …. the frontend spits out the properly formatted code.
It is not ideal, but it does allow end-users to build flexible landing pages far easier than teaching a page builder in some cases. It also allows me to dumb down the interface when I want to ( Pull quotes need to look good. You enter plain text and pick a color scheme. I’ll handle the rest)
Just my $0.02 on what it probably an edge use case.
I agree, ACF is pretty powerful and with the Flexible Content Field the client can essentially add/remove/re-order their blocks of content.
Yeah, ACF is awesome, and since the introduction of Clone, which when used in conjunction with Flexible Content, brings everything to a whole new level. Kudos to Elliot!
100% agree Bill, Flexible Content is my go-to. I created a plugin called “ACF Flex Layouts” that pre-registers common Flexible Content layouts via PHP, but also allows me to add completely custom layouts as needed.
I coupled it with a markup-generating Composer package we titled the “Template Library” for fast, filterable markup. Every part of the markup output, from the tags to the content is accessible via filters, which helps me out a lot.
ACF is absolutely a viable solution for blocks. For a developer, I’ve found it to be much more flexible than the other WordPress options.
Try looking at Beaver Builder I’ve had a great experience with it recently and it can integrate with ACF
James in certainly correct about shortcodes in WordPress, but there is another approach that feels to me more in keeping with the article. These days, many modern WordPress themes use a model of multiple sidebars, which can be inserted above, below, and around the “main content,” rather than just being a column on the side. The Enlightenment theme by onedesigns is an example of this. Each of these sidebars can then hold any kind of widget–a map, a slider, a row of icons, or whatever. There are other plugins that allow you to decide which sidebars to display on which pages, giving you total flexibility.
Sidebars are cool for adding mixed content within a template, but not for adding mixed content inside a post. Unless things have changed since I last used WP
Craft also has Neo (https://github.com/benjamminf/craft-neo) which is like the Matrix field but on crack. It allows you to nest these blocks, so a “carousel” block would contain one or many “carousel items”.
ExpressionEngine v3 also has a similar concept in its Grid (https://docs.expressionengine.com/latest/fieldtypes/grid.html) and the Bloqs commercial extension (https://eebloqs.com/).
At my old job, I setup a shopify theme to use liquid’s string filter tags to identify and construct content areas based on headings. This made the end user process similar to formatting a word doc which tends to work well in the corporate world.
So the input would look something like this:
Intro text
Intro text here
Regular Text
Regular text
Image Slider
image
image
image
Quote
Quote text
and output a proper design.
Hey Matt,
I’m working on the exact same issue for shopify right now! Do you happen to still have that liquid parsing code you might be able to share with me. Thanks!
Cool Topic! Thanks Chris.
Here’s how we do it. I cannot show you guys too much, but I’m sure you’ll get it: We also call them Content Blocks (meh.).
The two following screen shots will explain a lot, although they just show the front end interface. The actual content editing is done in our (headless) CMS.
Screenshot 1
Screenshot 2
In short: you add content blocks to a page. Each content block has a layout option, a behaviour option, an h1 and h2, one(!) rich text paragraph, tags […] and you can either associate exiting or upload new content elements like images, files, HTML blocks, FAQs, quotes, widgets […]. This way you build a whole page, one by one … a lot like Lego (but from top bottom, obviously). You can also add content blocks to content blocks, which then have individual layout and behaviour options, depending on the parent element. How the layout and behaviour options affect the front end is controlled by the templates. The editors do not need to know any HTML or CSS. It works great since the first version of our CMS some 17 years ago.
Images don’t seem to work in comments. Here they are:
· Screenshot 1
· Screenshot 2
Hey Robert,
That approach sounds interesting, but the screenshots aren’t working unfortunately. Thanks
Thank for the hint, Keyur. The links in my previous comment should work again now.
TYPO3 does not support blog posts at all, but one of its most common extensions called News adds news list and news details views as content elements. The news articles can consist of some text and maybe some images, but they can also contain content elements of any type—and there lots of types.
If the common extension Grid Elements is installed, any combination of content elements can be placed in containers to apply responsive multi-column layouts.
Concrete5 uses blocks that you drag and drop on areas in your page. You can then edit those blocks, template them, move them around, apply specific styling.
You can also add layouts to those areas (grids of custom columns and rows) before dropping blocks in them…
Those blocks can be anything: galleries, WYSIWYG content (using CKeditor), forms, page lists…
And “Advanced Custom Fields” that can be installed with WordPress are called Attributes in the Concrete5 world and they come with the core, no need to install anything. You can use them through code or use a core block to add them to your page. Attributes can be attached to pages, users, files, and pretty much anything. For instance products and orders in an eCommerce app.
I second concrete 5 it’s a nice editor that does a lot of this out of the box even if it’s a little clunky it’s a great CMS
In my experience all these pagebuilder tools (for WordPress) create really terrible code (heavy markup + non-semantic code). Fitting elements into existing layouts require so much custom css that I find it easier to build the whole thing from scratch. They also feel very slow to work with.
I have only tried SO Pagebuilder and VisualComposer and both left me frustrated.
For me ACF is the only clean WP solution out there …
Agree. 100%.
Absolutely agree. ACF all the way for me, I wouldn’t touch the pagebuilder plugins with a barge pole.
Totally agree!
Most page builders try to be everything for everyone. There’s literally no way to accomplish that without a bunch of heavy heavy ham-fisted markup. They encourage editors who know just enough to be dangerous to add things like “spacing blocks” that are just trouble all around. Feels like a regression to 1999 layouts with
<table>when you start getting a bunch of columns and rows going.The only context this might be ok in is for a project with zero budget and an employee/volunteer who is familiar with their page builder of choice. They also don’t necessarily end up with an easy-to-understand editing interface for other editors to use. If there is any development budget at all, I use ACF for data entry and build the front end as needed.
With CraftCMS, you can make the HTML code as clean as you want it, same for the CSS and JS. It doesn’t enforce anything.
Kirby CMS has the Modules plugin https://github.com/getkirby-plugins/modules-plugin that helps to make your content modular, for any page.
For Kirby CMS I think the Kirby Page Builder is better for this job! :)
It also is more starred in github (225 vs 79)
https://github.com/TimOetting/kirby-builder
In DNN’s Evoq CMS you place HTML modules into defined content blocks (which are coded into the skin), either into the default “contentpane”, or other panes which are divided into a grid-like structure. I usually drop an HTML module into the default pane and code my own grid inside it.
I would like to recommend TYPO3 (https://typo3.org) as powerful and most flexible/extensible alternative (and in my opinion the way to go for highly structured content in a classical “page” way). Although it‘s one of the most used CMS in Germany (maybe Europe), it‘s fairly unknow in other regions of the world.
It has a superiour column and content element system, which is easy to use for editors (drag&drop, multiple copy&paste, batch-editing of elements etc.) and is also flexible to render in the frontend.
In the backend, you can add your own column/grid structure and your own content types (with custom fields, tabs, checkboxes and so forth).
For even more advanced requirements, you can use the configuration language TypoScript to merge/wrap/render content from wherever the editor choose to save it in the system.
The downside: TYPO3 and especially TypoScript is kind of hard to learn and the documentation lacks some details.
But for me, it was worth the steep learning curve. :)
Agree. Core comes with Page Builder, Caching, i18n, l10n, Content Elements (widgets), and more stuff to come.
With Pulse we do similar to Perch and they are called “Blocks” also:
http://help.pulsecms.com/article/14-blocks
This allows a modular approach to page building.
As a developer I see time and time again where the use of a “page builder/block elements” are over thought and under developed. In other words, try thinking of the easiest way to allow a content editor to enter their content without ever thinking or code, markdown, shortcodes etc.
Part of our job as a developer is to make the design we are building as close to full proof as possible. This article hits it right on. Keep layout in your templates and content in your database. This not only gives you more control but also removes the burden of how to enter or wrap their content from the content editor. Let them focus on what they are their to do. Entering and modifying content.
I use Craftcms Neo/Matrix/Field and I use WordPress ACF’s as well. I also use Drupal Paragraph’s and tend to be more of a fan of the Drupal implementation.
Being able to quickly add paragraph styles inside of another paragraph without all the hand coding the CraftCMS Neo with Matrix Fields bring is a breath of fresh are. Simple edits to existing block/field/paragraph twig files and your code can be as clean as you want to make it.
In the end, it is usually the client that drives the tools that are used. I find it best to continue reading, continue learning and try and be proficient in as many of these tools as I can be.
I couldn’t leave a comment without pointing out another solid option. Drupal Panels. Grab the Panopoly Drupal build and give it a try. Great way to build out pages with blocks, nodes and views.
The template systems for many of these platforms can make these “content blocks” as complex as you want…What no mention of Joomla?
For Kirby CMS there are also third party plugins like:
https://github.com/jenstornell/field-engineer
https://github.com/TimOetting/kirby-builder
My go to CMS is Joomla. Surprised it was left out of the otherwise comprehensive article. Joomla can do all that was proposed natively and if you are not strong with HTML just add UNITE CMS Blox Page Builder. I’ve been building sites since 1998 and Blox Page Builder is unbelievable. You can literally layout a page any way you can imagine and they have several very good videos teaching how to use it. And the support terrific.
Great post. We used this component-based design and development approach for most of the sites we build at the firm I work out.
Note that we developed this Drupal module that we use instead of Paragraphs to build sites like this. Might be worth checking out.
https://www.drupal.org/project/stacks
I’ve found Beaver Builder (https://www.wpbeaverbuilder.com/) to be the most flexible when it comes to WordPress. They provide a very simple interface (drag and drop, edit on front end) and an easily extensible module system.
While it required a bit of tweaking to get it to look the way I want it to, it’s proven to be a solid framework for the 20 or so sites I’ve used it on, and they seem to be collaborating on Gutenberg and preparing to embrace it.
My CMS of choice in Contao because it breaks things up into content blocks by nature. You don’t need plugins, it’s just made that way. I’ve tried a lot of CMS, and found Contao is the easiest to design and work with as far as breaking up content goes.
Wait, so we get a detailed guess on how a future WordPress plug-in might work…
But no mention of Joomla at all?
Or Ghost, or Typo3, or Expression Engine, or DNN, or Concrete5, or Episerver, Sitecore, AdobeCQ/EM, heck even EZpublish…
I think this is a great topic to discuss as we move away from 1-1 or even n-1 content towards n-n; but compairson of multiple miniscule CMS’ that all work from a similar mindset under the hood doesn’t quite seem fair.
I also missed literally thousands more. Fortunately, all y’all out there with more CMS experience can use those CMS’s to publish more articles about this topic and expand the conversation.
For WP, you can use ACF with a field called “Flexible Content” (in the Pro version).
https://www.advancedcustomfields.com/resources/flexible-content/
Our CMS of choice at work is Umbraco, which now has a native property-/field-type called Grid Layout, which operates very similar to the examples in this post.
All of these also remind me a lot of the Squarespace editor.