Make adding a CTA button with text more intuitive

[alcurrie]

As a AMP stories author, I want to the process for adding a CTA button with text to be more intuitive so that i can easily add a CTA to my AMP story.

• AC 1: Make adding a CTA button with text more intuitive.
  - [ x] AC 2: Resolve the issue identified here: After adding a CTA button, it is difficult to figure out how to add the button text. There is an interface that allows the user to add a URL for the button, but the interface to edit the text of the CTA button requires the user to click on the B (for Bold) or I (for Italics) to access the interface to add a button label. https://cl.ly/640fd0fc03ea
  - [x] AC 3: Consider modifying the CTA layer block to add a block template which populates a newly-inserted block with a button block to begin with, instead of a paragraph.

Relates to: #1560

[alcurrie]

@jwold / @mehigh - @miina - flagged that the issue documented in AC 2, https://cl.ly/640fd0fc03ea, is no longer repeatable, likely due to a Gutenberg update. See screencast: https://drive.google.com/file/d/1T_uXOvyIKE8h5Tzvdud2cHhm3qfeogoN/view?usp=sharing
However, the interface is still not intuitive, so the requirement in AC-3 or something that resolves that that same issue is still needed I think.

[jwold]

AC 3 is the only issue actually on this ticket, so therefore dev will move forward to followup on it, and if needed, will reach out for UX feedback, but it's not likely at this point.

[jacobschweitzer]

@miina Could you please review this PR for me? Thanks!

I tried to add a RichText template but it was giving an error that attributes was empty though it seemed to work fine with existing blocks so I didn't catch it right away. I also tried with core/paragraph as the template but it was acting funny as well. Is there a place where <InnerBlocks are defined for the CTA layer that I missed or am I in conflict with a Gutenberg default which is added?

[miina]

@jacobschweitzer Just added some comments.

Saw your note just now about adding a RichText. Actually I think we were supposed to add core/button (Button block) template -- could you try with that to see if this works? If there's an issue with Gutenberg that doesn't allow doing that at this moment then we should log this for the next iteration of AMP Stories and can probably leave this AC out for now. Would also be good to check in github if there's a similar issue for using templates + allowedBlocks together -- perhaps that's the case here.

[jacobschweitzer]

@miina I've updated it with core/button in the PR. I think I just misread the AC. Please have a look at the PR in relation to the other two issues there (blurring and CTA on first page).

[miina]

Closing this this got fixed within #1636 .

[alcurrie]

The core functionality is confirmed working. @csossi - can you review this as part of your overall QA review.

[alcurrie]

Confirmed the interface to add a CTA button is now much simpler and easier to add to an AMP story https://cl.ly/5dc8d80adcd6