Introducing Stories in WordPress Visual storytelling for the open web

➔ Discover this new media: Web Stories ➔ Experience a Story on the open web together ➔ Explore use cases for Stories ➔ Learn how Stories for WordPress has come to be ➔ Demo! Walk through the visual editor together ➔ Review ads and how to add Stories to a site

What and where are Stories now? ➔ Instagram ➔ Facebook ➔ Snapchat and so on… ➔ NEW: Stories live in the open web and now they are coming to WordPress next!

What and where are Stories now? ➔ Instagram ➔ Facebook ➔ ➔ NEW: Stories live in the open web and now they are coming to WordPress next!

What and where are Stories now? ➔ Instagram ➔ Facebook ➔ Snapchat, TikTok short format video, and so on… ➔ NEW: Stories live in the open web and now they are coming to WordPress next!

What and where are Stories now? ➔ Instagram ➔ Facebook ➔ Snapchat, TikTok short format video, and so on… ➔ NEW: Stories now live on the open web and they are coming to WordPress next!

How do Web Stories work in WordPress? Why does it matter? What problems are we solving for Users?

Awesome visual editor in the dashboard plugin in WIP

Own your own content! The WordPress way…

Engaging, fast-loading, full screen experiences with tappable interactions.

Searchable We want our Stories to be searchable! Web stories appear in Search under Images, Discover, Search, and News

Short format and visual content with ads can be a better user experience on the web!

User experience focused design Research shows us the way

User experience focused design Research shows us the way ● ● ● Performant Accessible Secure plus…

Healthy open web ecosystem Content creators decide how long the Web Stories lasts. No dark patterns.

Share across platforms & gain SEO benefits We want maximum SEO benefits for our content creation work.

Integrate and Share Publish Web Stories on your site and on your client’s sites, beautifully.

Marketing So many use cases to highlight!

Monetization and Ads

Example from the wild Link & QR Code Audience participation

What media and features can be included in a Web Story?

● ● ● ● ● ● ● ● ● ● Video Photos Text and hyperlinks Animations Ken Burns effects Extensive color palettes & styling with the visual editor Attachment pages Call to action (CTA button) Sidebar & Sharing Readiness to publish tabs…

Links in presentation story - interactive experience (add as Page Attachment) Note the Pulitzer prize awarded in early 2019 Demo attachment page

Use Cases and User Groups for WordPress

User groups ● ● ● ● ● ● ● Blogs (Hobby & Pastime) Business Ecommerce Membership (Community and Organizations) Enterprise (Publishing for example) LMS (Learning) Higher Education

Specific use cases

Travel stories “How to” stories (makers, builders, most things) Recipes Sports Events & Reporting Breaking News Plant & horticultural indexing Educational Political Cartoon/ commentary Stories for children - picture book Learning for children ABC’s, language, people, places, things Nature Fashion Popular Culture trends Visual blogging (personal & professional) Advocating for a cause Fundraising Community building Marketing and Promotional purposes Illustrations & animated storytelling Invitations Ambassadors for eCommerce - (See me climb this mountain, buy these shoes) eCommerce Historical Lessons Interviews Social Justice Health and Wellness Lifestyle A single and specific website experience as a story Stories that grow with live updates for events and specific live experiences Schools + Organizations for community building Fan appreciation stories (Lady Gaga love etc) Museum and gallery exhibitions Event albums - engagements, weddings, etc Announcements for events all scales Artists & Art Hobbies A story as a stand-alone Ad Photographers & Videographers Simple articles The digital National Geographic or Life Magazine of the 2020s Paid Ambassadors for YourTube and Insta etc… Animals Humor Podcasting attachment page 10 tips on how to save money for example Travel stories “How to” stories (makers, builders, most things) Recipes Sports Events & Reporting Breaking News Plant & horticultural indexing Educational Political Cartoon/ commentary Stories for children - picture book Learning for children ABC’s, language, people, places, things Nature Fashion Popular Culture trends Visual blogging (personal & professional) Advocating for a cause Fundraising Community building Marketing and Promotional purposes Illustrations & animated storytelling Invitations Ambassadors for eCommerce - (See me climb this mountain, buy these shoes) eCommerce Historical Lessons Interviews Social Justice Health and Wellness Lifestyle A single and specific website experience as a story Stories that grow with live updates for events and specific live experiences Schools + Organizations for community building Fan appreciation stories (Lady Gaga love etc) Museum and gallery exhibitions Event albums - engagements, weddings, etc Announcements for events all scales Artists & Art Hobbies A story as a stand-alone Ad Photographers & Videographers Simple articles The digital National Geographic or Life Magazine of the 2020s Paid Ambassadors for YourTube and Insta etc… Animals Humor Podcasting attachment page 10 tips on how to save money for example Specific use cases

The Story Behind Stories

Gutenberg and Proof of concept in 2018

Project Restart at the beginning of 2019

Another Restart: Moving away from Gutenberg

Why did we choose Gutenberg?

Existing block based system

Existing needed features

Starting with little effort

Why did we move away from Gutenberg?

Design conflicts

Working “against” Gutenberg

Not being in control of the tool

Implementation overview

Options we considered

  1. Continuing as-is

  1. Reusing parts of Gutenberg

  1. Start from scratch

Choice: React App

Connection to WordPress

The WordPress way…

Using templates Having something of value to say

How the Web Stories tool helps to create beautiful stories: Walk-through Demo

3 types of ads ● A page in a story - like in a magazine ● ●

3 types of ads ● A page in a story - like in a magazine ● An entire story can be an ad ●

3 types of ads ● A page in a story - like in a magazine ● An entire story can be an ad ● Affiliate links

How to integrate Stories into your blog

Work In Progress: Web Stories Plugin

Legacy: via AMP plugin

Do I need an AMP compatible website?

Embedding Stories to your posts

Future planned features

Shared open template library

AI features

This presentation was built with Stories!

Presentation link Special thank you to XWP, Google & WordCamp Asia 2020 Cathi Bosco @BeTheBreeze Miina Sikk @MiinaSikk