Wordpress 5.0 comes with a brand new rich text editor called Gutenberg. It is highly anticipated and has created both buzz and controversy. The promise of Gutenberg is customizability, especially when it comes to adding custom content blocks. If you want to get started with Gutenberg, you can read this excellent introduction in Smashing Magazine. It is built in React and allow developers to extend the editors basic functionality.

The testimonial slider content model

In the tutorial on Smashing Magazine, you learn to make a “testimonial slider” – typically used on marketing pages as a way to visualize social proof for your product.

To re-create the Wordpress testimonial slider for Sanity you only need to define its content model. We’ll take care of the input fields, and the real-time syncing to the datastore.

The content model is pretty straightforward: First, we make the type for a testimonialSlider

Custom preview component

You can also add a custom preview component with some React code:

Beyond appearances: The advantage of deeply typed content

This testimonial slider example tightly ties to a specific presentation on a webpage, which makes sense in WordPress because it’s built to render and manage a website. WordPress saves the input in Gutenberg as HTML, which is what you eventually also get out of the APIs. HTML in content APIs is generally not what you want if you want to use it in your favorite frontend framework, or in something that should render in something other than a web browser.

Sanity saves the content in the editor as Portable Text, which makes it portable across any markup, but also makes rich text queryable. It should be easy to create custom editorial experiences, with the custom types and inputs that makes sense in your project or organization, and it should be easy to take that content and fit it to whatever form of presentation.