Learn about the new way to edit structured content

Wikipedia’s boring definition of structured content is "information or content that is organized in a predictable way and is usually classified with metadata". We, at Contentful prefer to refer to this as the medicine against the WYSIWTF disease: a condition where unstructured blobs of content, HTML tags and, in severe cases, shortcodes attack developer’s laptops and content modelers’ Moleskine notepads.

In our gospel of Topics and Assemblies, we talked about the benefits of structuring your content so that you can reuse it in multiple channels — or evolve it programmatically.

But today we’ll show you how to efficiently work with content through the eyes of an editor.

Editing references

The way structured content works with Contentful is by splitting your content into separate fields or entries, via linked references, and the latter is what we’ll talk about here. Until now, going from entry to entry has required reloading the page.

For example, you create an article: you add the title, the slug, the intro text, maybe some body copy — and when you go to create its author, as a new entry, you leave the current editor and land in another page.

Now imagine that you have to repeat this multiple times on the same page and you can easily understand that you’ll lose track of things.

Furthermore, we got feedback on deep navigating and editing references — like deeply nested content types where you have to go from the first level, then all the way down to the fifth level to see if it has the right content.

Say hello to the Contentful Slide-In editor

As always, issues are meant to be sorted out. This lead us to explore the best remedy for this UI sadness. We tried out some ideas: like flattening the contents of the linked entry on the parent editor, improving the navigation of the entire entry graph or sliding in the linked entry on-demand.

While the description of the exploration phase would demand another blog post, we can share that the navigation ideas were too broad for this problem and the flattening, which was also a common suggestion, was not as versatile as the Slide-In in cases where the inlined content would make the initial form very long.

So, we concluded to this:

Pretty, right? Well, that’s not enough: with the danger of being ostracized by the devs of my team, who fought against complex problems of syncing states and refactoring routes, I’m going to say that this is a simple and marginal improvement (we also have the bulk editor for that already).

What about the deep editing cases and the basic navigation needs of users who need to traverse equally well down and up the tree?

Now, that’s better! Whenever you have a linked entry in another linked entry, and so on, these Contentful editors will stack on top of each other so not only you get to edit them fast but you also keep track of where you are.

Finally, while keeping the context of where you are is important, you will also need to interact with it to see what the underlying stacks contain and potentially navigate to them. This "peeking" interaction is our favorite part of the feature, and we hope that it helps you to use it as a breadcrumb navigation.

What are the use cases — what’s in it for me?

If you are still wondering how this relates to your content model, here are a few examples to achieve Structured Awesomeness ®.

Adding entries or images

When editing an entry, one of the most annoying disruptions in your editing workflow has been the context switch with uploading an image, or adding a new entry where you had to jump to another page. The smaller the interruption for the "upload" task, the better it is for your flow, so now you can stay focused on crafting the content of your entry.

Entry level localization

In our localization patterns article, we suggested creating an assembly for your entry which will reference its localized versions via a reference field. This keeping the editing flow of these versions in the same context, while also being able to go deeper in each of them, will hopefully make it easier for you.

Editing carousels

Web experts say that "carousels are bad for conversion" yet some people still love this page component and use it in homepages, landing pages, category pages, even in emails. For example, you might have a content model like so:

Homepage > Header block > Carousel > Carousel Item

While editing your page, you have to go three levels deep to see if Carousel Item has a linked entry, and then you might want to go back to Carousel, instead of Homepage to keep adding more slides to it.

And as carousels are one specific component in the entire topic of composable entries, we expect to see you use this feature in other applications of dynamic page layout building – this is a topic that deeply fascinates us and we’re only getting started with it.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.