AMP Stories

In the 1.2.0 release of the AMP plugin, the AMP Stories experience has been introduced in a Beta version. Stories is a visual storytelling format for the open web which immerses your readers in fast-loading, full-screen, and visually rich experiences. Stories can be a great addition to your overall content strategy. Read more about AMP Stories.

Introduction

What are AMP Stories?

AMP Stories offer a powerful visual format to bring interactivity with rich media content. Our goal with this experimental project is to harness the power of WordPress content creation to enable authoring of AMP Stories as an immersive visual format.

Why AMP Stories in WordPress?

WordPress as a platform brings the creation process of building AMP Stories to more users. This works best with the latest version of the Gutenberg plugin. Building on top of WordPress, and specifically the new Gutenberg editor available in WordPress 5.0, allows the AMP Stories creation process to benefit from the rich media management architecture available in WordPress. In Gutenberg everything is a block. This makes it easy to create rich post layouts, provide enhanced authoring tools (word count, color contrast, document outlines, etc.), and extend with custom blocks. Learn more about Gutenberg

Summary of Capabilities

We’ve leveraged the automatic sanitization of HTML to AMP provided by the AMP plugin. Because AMP Stories are nested AMP components in an immersive visual format, quite a bit comes out of the box. This includes:

  • Creating and reordering AMP Story pages
  • Dragging and dropping blocks
  • Managing your content overall as part of WordPress
  • Creating new elements, such as text, videos, images
  • Changing the background color and opacity, and adding a gradient
  • Animating the text, rotating it, and selecting a Google font

Creating Your First Story

Once you have the AMP Stories branch of the AMP plugin, you can play with creating your first story.

Step 1: In the WordPress admin sidebar navigate to AMP Stories > Add New

Step 2: You’ll now see an interface that may look familiar to you, using Gutenberg as its foundation:

The AMP Stories editor UI

Step 3: Let’s add a background image to the first page:

Step 4: Let’s add text, drag and drop it, and rotate it:

Step 5: Now, let’s add a second page to the story:

Step 6: To add a new block, click the + and select the block, like an image block: