AMP Stories

Please note that the Stories experience is being removed from the AMP plugin in favor of the feature being released as a standalone plugin, which will be available soon!

Read more about AMP Stories.


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: