AMP Stories Experimental
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.
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.
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:
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:
Downloading the plugin
Please download the plugin from the Releases page.