Allow dragging CTA button within the CTA block

[miina]

Closes #2781.
Closes #2899.

Left todo:

• Look into why sometimes top and left attribute are assigned to CTA block. (Needs testing).
• Adjust CTA block styling to match the borders exactly to make the drop logic more precise.
• Remove alignment options.
• Maybe don't display the link when dragging.
• Make the adjustments to save and FE view, too (see how to do that without breaking existing blocks).
• See if can make more DRY.
• Tests (e2e).
• Update the logic once Require double click (or just two clicks) for editing. #2863 gets merged.

[swissspidy]

Added a comment about bumping the story template version, but otherwise this looks & works good.

[kienstra]

Code And Dragging Look Good
Question About Deprecation

Hi @miina,
This looks good. Dragging of the CTA block works well, that's a nice feature:

Are CTA blocks created with the develop branch supposed to be free of validation errors when switching to this branch? It looks like there's a deprecated.js file for that.

I saw validation errors with these steps:

1. Checkout and build the develop branch
2. Create an AMP story
3. Add a CTA block, and enter text, like 'Click here'
4. Checkout and build this PR's branch, 2781-dragging_cta_button
5. Reload the page
6. Expected: validation errors shouldn't appear for CTA blocks (I think)
7. Actual: there were validation errors, like below.

There are even more when selecting a background color, though the screenshot above doesn't show those.

[miina]

I saw validation errors with these steps:

Thanks a lot for testing this, correct -- there shouldn't be validation errors, tested it before but not recently.

Looking into this.

[miina]

Looks like #2906 caused a regression, should be fixed now.

[swissspidy]

Failing test on Travis:

 waiting for selector ".wp-block .block-editor-warning__message" failed: timeout 30000ms exceeded
      54 | 
      55 | 		const errorSelector = '.wp-block .block-editor-warning__message';
    > 56 | 		await page.waitForSelector( errorSelector );
         | 		           ^
      57 | 		const element = await page.$( errorSelector );
      58 | 		const text = await ( await element.getProperty( 'textContent' ) ).jsonValue();
      59 | 		expect( text ).toStrictEqual( 'Call to Action: This block can not be used on the first page.' );
      at new WaitTask (../../node_modules/puppeteer/lib/FrameManager.js:840:28)
      at Frame._waitForSelectorOrXPath (../../node_modules/puppeteer/lib/FrameManager.js:731:12)
      at Frame.waitForSelector (../../node_modules/puppeteer/lib/FrameManager.js:690:17)
      at Page.waitForSelector (../../node_modules/puppeteer/lib/Page.js:1008:29)
      at Object.waitForSelector (specs/stories-editor/cta.test.js:56:14)

[miina]

The test passed now.

[miina]

@swissspidy Any objections to merging this to develop? Or should we wait for creating a separate release branch first?

[swissspidy]

No objections really. Will merge once the tests pass. Just haven't gotten around to do it so far.