Add functionality for users to chose AMP + Stories, AMP-only, Stories-only

[amedina]

As long as the Stories editor is part of the AMP Plugin, it needs to provide the controls for users to chose how the plugin would be used. The options could include these (or a variation):

• AMP + Stories: Serve AMP content, and enable Stories
• AMP Only: Use AMP only, hide Stories editor
• Stories Only: Only use the Stories feature, do not serve AMP pages

One possibility (discussed with @westonruter) could be to add a new "Operational Mode" complementing the Native, Transitional, Reader trifecta, with a "Stories" mode. The user could check only the Stories checkbox (Stories only), or check the Stories checkbox and one of the AMP template modes (Stories + AMP).

[cathibosco]

I know for WordPress users this would be extremely useful both for individuals and agencies. There are many, many use cases for Stories that will not want to use AMP and that will not be able to manage it, but they do want to own and publish Stories The WordPress Way.

Being able to enable or change "Operational Mode" to includes AMP as well as Stories at a later date by toggling to dual AMP + Stories operational mode built in is very smart. Turbo charging... :)

[westonruter]

I'm not sure how these options should be laid out. One option would be to add a “Stories Only” selection after “Reader”:

Upon selecting “Stories Only” this could hide the settings not relevant to Stories:

One reason I don't like this is I can see Stories twice, and only one of them has the full explanation of what Stories are.

Another option would be to have another set of Radio buttons at the top for AMP Site, AMP Stories, or AMP Site+Stories before the template modes. I'm not sure how best to present that either.

[westonruter]

Here's what it could look like to have the second set of radio buttons:

If the select “Stories” then the other sections would be hidden:

There would also need to be a Stories-specific section for specifying the base URL for the export; this section would be displayed when “Pages + Stories” or “Stories” is selected.

[ThierryA]

Strong +1 for the second option with a few suggestions. Checkboxes would make more sense than radio options in this case and I would suggest to follow amp.dev terminologies. That would give us something like:

AMP Formats

• Enable AMP Website
• Enable AMP Stories

Both checkboxes should probably have a description too. IMO both should be enabled by default.

[swissspidy]

My first thought was also checkboxes.

And Formats definitely sounds better than Operational Mode.

IMO both should be enabled by default.

For new installs that makes sense, for updates it might be a bit confusing for users.

[westonruter]

I don't think checkboxes make sense, since at least one has to be selected.

[westonruter]

At least, if checkboxes were done then client-side validation logic would need to be put in place to make sure that at least one is selected.

Good point on aligning the format labels with what is used on amp.dev

[amedina]

The second option LGTM; we can iterate on it, but that serves the intended purpose to start with.

I think checkboxes should not be used here. Let's follow the approach of the template modes.

[amedina]

+1 also for aligning with AMP.dev, but removing redundancy on the AMP keyword. I would like to see this:

• Websites
• Stories
• Websites and Stories

[westonruter]

Here are the two alternatives I see. In both cases, I think “Template Mode” should be renamed to “Website Mode”, since this is only relevant to the Website experience. I also think “Operational Mode” section would be better termed “Experiences” since this is what amp.dev calls the different formats.

Also, instead of “Websites” I think it should be just ”Website” since the context is a single WordPress install. “Stories” still works because multiple stories would be published on the WordPress install.

Now as for selecting the desired experiences:

Radio Buttons

• Pro: You clearly have to select at least one option.
• Con: Putting the description with the experience doesn't work so well because Stories appears in the list twice.

Checkboxes

• Con: There is an implication that you can uncheck both Website and Stories. Client-side form validation should prevent doing this.
• Pro: Easier to attach a description with each experience.
• Pro: There is one fewer input field.
• Pro: There is some future proofing here in the case where there could be “Ads” and “Email” in the future, perhaps.

[amedina]

The checkboxes look cleaner indeed. And your suggestion about validation makes sense; is indeed a little weird (from an expectation perspective) but that is balanced by the gain in conciseness and clarity.

The case with Radial buttons would look better if laid out in the order:

• Website
• Stories
• Website and Stories

And put the explanation used for the case of the checkboxes. The last item (Website and Stories) would not need an explanation.

I am feeling inclined towards the checkboxes.

+1 on using Website mode in lieu of Template mode.

Q: The Reader mode does not appear because....?

[westonruter]

Q: The Reader mode does not appear because....?

Ah, because I'm testing with a theme (Neve) that has built-in AMP support, and the changes in #2550 include #2312 which allows for a theme with built-in Transitional support to be changed to Native/Standard mode.

[ThierryA]

Already mentioned it but strong +1 for checkboxes + validation. Having 3rd format would illustrate that radios aren't suitable/scalable even further as we would have to have all the radios below to cover all possible cases:

• Website
• Stories
• 3rd format
• Website + Stories
• Website + 3rd format
• Stories + 3rd format
• Website +Stories + 3rd format

[ThierryA]

Regarding naming convention, "AMP Formats" seems to be what is/will be used so I would vote to use that in the plugin too (ie not Experiences).

[amedina]

I am wary of calling AMP for Websites a format. Such terminology contributes to the misconceptions about AMP. AMP is not a format; it is a web components library.
AMP Stories on the other hand, does refer to a format. As AMP.dev indicates: "AMP stories provides content publishers with a mobile-focused format for delivering news and information as visually rich, tap-through stories."

[cathibosco]

With radio buttons users know they can only choose one "mode of operations" so radio buttons is the choice we would typically recommend. With checkboxes users typically know they can check more than one.

If users choose one radio for the top section and one from the bottom sections - add a separation line between the two sections and use radio buttons so they know what options they are choosing from and that there are two sections to complete. possibly....

[westonruter]

If a user selects no experiences, here's what they currently see when submitting the form:

So you can see that they are required to select at least one.

[westonruter]

If they don't have Gutenberg≥5.8 installed, they'd see:

[cathibosco]

You must "select at least one".... you can "only select one" right?
And you must select one to submit the form. - so that language could be improved if you are going with checkboxes... the Gutenberg notice looks good to me.

[westonruter]

You must "select at least one".... you can "only select one" right?

No, you can select both. Either you want to use AMP for Websites, AMP for Stories, or both at the same time.

[cathibosco]

I understood you had to choose one of the 3 options.

[westonruter]

With checkboxes there are only two, and you have to chose one or both. If you select none, then the user should just deactivate the AMP plugin because it wouldn't do anything.

[cathibosco]

Ok you CAN choose both - thanks for explaining. checkboxes makes sense then.

[westonruter]

@amedina thoughts on the description with the Website experience:

AMP is a simple and robust format to ensure your website is fast, user-first, and makes money. AMP provides long-term success for your web strategy with distribution across popular platforms and reduced operating and development costs. Read more about AMP Websites.

I lifted it from https://amp.dev/about/websites

[amedina]

AMP is a simple and robust format to ensure your website is fast, user-first, and makes money. AMP provides long-term success for your web strategy with distribution across popular platforms and reduced operating and development costs. Read more about AMP Websites.

AMP is a powerful web components framework which allows you to ensure your website is fast, user-first, and monetizes well. AMP puts at your fingertips tons of advanced capabilities effectively reducing the operating and development costs of your sites. Read more about AMP Websites.

[swissspidy]

Testing instructions

In WordPress admin, go to AMP -> General and test the following things:

1. Uncheck all options under "Experiences" and try to save the settings -> this should be prevented
2. Only activate the "Website" experience and save the settings -> the "Website Mode" and "Supported Templates" fields should be toggled.
3. Only activate the "Website" experience and save the settings -> the "Stories" menu item should not be visible anymore.
4. Only activate the "Stories" experience and save the settings -> the "Stories" menu item should be visible and new stories can be created.

Next up:

1. Only activate the "Website" experience and save the settings and choose the "Standard" website mode below. After that, create a new blog post -> verify that the "Latest Stories" block cannot be inserted. Regular AMP blocks can be inserted though.
2. Only activate the "Website" experience and save the settings and choose the "Transitional" website mode below. After that, create a new blog post -> verify that the "Latest Stories" block cannot be inserted. Also, no AMP blocks can be inserted.
3. Only activate the "Website" experience and save the settings and choose the "Reader" website mode below. After that, create a new blog post -> verify that the "Latest Stories" block cannot be inserted. Also, no AMP blocks can be inserted.

Last but not least:

1. Only activate the "Stories" experience and save the settings. After that, create a new blog post -> verify that the "Latest Stories" block can be inserted. However, no AMP blocks can be inserted.

[csossi]

Verified in QA