Skip to content

AMP Stories Experimental

Weston Ruter edited this page May 22, 2019 · 10 revisions

amp-stories-header

The AMP Stories Editor allows immersive storytelling. We’ve applied a streamlined UX with the forward-facing technology of AMP components to create something wonderful.

Download the preview release

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 and/or WordPress 5.2 Beta.

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: amp-story-overview

Step 3: Let's add a background image to the first page: adding-background-img

Step 4: Let's add text, drag and drop it, and rotate it: text-move-rotate

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

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

Downloading the plugin

Please download the plugin from the Releases page.

You can’t perform that action at this time.