[AMP Stories] Editor includes all additional blocks to satisfy the Fandom and Travel story creation needs

[miina]

AC: User can add a star rating block from 1 to 5 stars. AC: User can add story title, byline with the author, and/or publish date which will be automatically pulled from the post data.

Updated tasks based on the comments below:

• [x] Story title
• [x] Story byline (with the author)
• [x] Story publish date

- Create a block for creating a Google Maps Static API - Make sure there is a way to fill a block with color/gradient and change its opacity. Check if this can be done by Gutenberg Section block ; This will be implemented as a Page setting instead, see #2013. - Add a Rating block allowing simply to choose a number or stars. This will be implemented separately if / when needed. See #2096 .

[westonruter]

• Create a block for creating a Google Maps Static API

I don't think this is really going to be feasible in the short term, as this block will require working out a streamlined way to obtain a Google Maps API key. The Jetpack Contact Info widget uses the Google Maps API but it the process to get the API key is not easy.

What would be cool is to create a Map block that could automatically use an amp-iframe with an interactive map in non-story AMP pages, and then automatically switch to a static map in AMP story pages (where iframes aren't allowed).

In the mean time, though, allowing for an image to be uploaded seems sufficient, as the user can obtain a map from somewhere externally.

[miina]

Makes sense that we might not need the Map block at this moment and can leave it for later.

Here are some other notes for potential blocks based on the templates:

• Color Fill for adding a block which could be filled with color/gradient and opacity assigned (note the future default Section block in case it gets merged in time), see also https://github.com/ampproject/amp-wp/issues/2013#issuecomment-475361347
• A rating block;
• Embed Post block: embedding posts is possible now as well but it doesn't necessarily suit the needs of AMP Stories very well. If it would be necessary then we might need a custom block (depending on if it's possible to extend the default embed post). Not sure if that's important right now.
• There is a template which displays grid of featured categories, not sure if this would be necessary, probably not crucial at this moment:

Do you think any of these might be important for this phase?

To me, it seems that a block for being able to add a color + opacity would be important.

[westonruter]

Color Fill for adding a block

Agreed on color fill (aka section) block. If it is not merged in time, then it could be included in AMP Stories as a polyfill, perhaps. But if it isn't merged in Gutenberg, then that probably means it doesn't work yet 😛

A rating block

This would be simply allowing you to show a number of stars, and how many of them would be filled? Seems very useful for fandom. I imagine this would essentially be a frontend-static version of Star Rating on ABE:

Embed Post block

Yeah, this is a larger issue. Post embeds don't work very well in the AMP plugin. Probably something we can't address immediately.

There is a template which displays grid of featured categories

I don't think this is the most relevant to the story context. Such a grid would presume to be clickable, and links normally aren't in a grid layer.

[amedina]

All these suggestions are superb. Components like these correspond as well to the building blocks for templates. E.g. templates varying the location of the ratings, etc.

[miina]

The issue description is now updated based on the discussion.

[miina]

Note that as @swissspidy mentioned then the Section block is merged now: https://github.com/WordPress/gutenberg/pull/13964

Updated the description accordingly.

[swissspidy]

Some of the previous template mockups included polls, e.g. for upvoting and downvoting something.

We could adapt https://ampbyexample.com/samples_templates/poll/ for that.

[kienstra]

New Blocks

Per our discussion, this should include separate block for each of these three items:

1. Story title
2. Story byline (with the author)
3. Story publish date

[westonruter]

Some of the previous template mockups included polls, e.g. for upvoting and downvoting something.

Note that form is not allowed in an AMP Story. It may need to be that the voting buttons have to be in the CTA layer, and that amp-bind is used to process the action.

[swissspidy]

Per our discussion, this should include separate block for each of these three items:

IMO to reduce overhead and make things DRY we should create one single block that can handle all of these items. In its most simple form it could contain checkboxes or a dropdown to choose which items you'd want to display.

Having one block that displays the byline and the publish date would also make it way easier for users to position the two things.

[westonruter]

@swissspidy so 1 block instead of 3? How would this make it easier for users to position them? What if they want the byline to be at the top of the page and the date to be at the bottom? If they are separate blocks then the user can put them anywhere.

[swissspidy]

@westonruter Just insert the same block multiple times? One set to display the title, one set to display the date. Or do you think separate blocks like with embeds is better?

[westonruter]

Separate blocks. One block for title, one for date, one for author.

Similar in concept to the author bio block: https://github.com/WordPress/gutenberg/pull/3250

Gutenberg is going to need blocks eventually for title, author, and date for use in page template building for customization.

[kienstra]

If it's alright, I started working on the Title block in PR #2072.

[miina]

Would the title block be essentially like a Text Block but instead of having editable content it would pull the content from the actual title? Thoughts?

[swissspidy]

That was my assumption, yes. Something static doesn't make sense.

Since Title, Author, and Post Date would be like 99% identical, I would recommend looking at how the embed blocks in Gutenberg are done.

In the editor you'd just use getEditedPostAttribute to get the data and on the front end the relevant PHP functions.

[miina]

Yep, I was also thinking that all of these could be implemented together in a similar way, with the difference of default values (e.g. text size) + pulling in specific data.

[miina]

Note: moved the Star rating block to a separate issue since it's not crucial right now: https://github.com/ampproject/amp-wp/issues/2096

[csossi]

Verified in QA: