Change the selector to target blocks that have a warning class

[scruffian]

Dependent on #14730

Changes proposed in this Pull Request:

• This updates the CSS selectors used by the with-has-warning-is-interactive-class-names component, so that they still target the block in edit mode.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• Bug fix

Testing instructions:

• Apply this patch D39099-code on your sandbox
• Add a Calendly block on a free site
• Check that you can interact with the block, and add a URL
• Deselect the block
• Check that you can reselect the block

Proposed changelog entry for your changes:

• No changelog

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello scruffian! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D39099-code before merging this PR. Thank you!

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: March 3, 2020.
Scheduled code freeze: February 25, 2020

Generated by 🚫 dangerJS against 9606e68

[Copons]

The change here works as advertised, but when I try to insert a link the block breaks with this error:

This block has encountered an error and cannot be previewed.

[scruffian]

@Copons thanks for the review. I think that bug is being caused by #14730

[Copons]

@Copons thanks for the review. I think that bug is being caused by #14730

I haven't had the chance to look at that yet, but in this case I'd probably note here that this PR is dependent on that other one.
Otherwise, when the pointer event will let users be able to trigger the embed, they will end up with broken blocks.

[pablinos]

@Copons thanks for the review. I think that bug is being caused by #14730

It's being fixed by #14730!

This does fix the problem and I think it was caused by the wrapper div that was removed in WordPress/gutenberg#19593

I've discovered the reason OpenTable wasn't affected by this, and fixed it in #14738, but this should be merged first

[jeherve]

Do you think you could rebase this PR so we can test it with the fix that has now been merged?

Thank you!

[scruffian]

Rebased ✅

[matticbot]

scruffian, Your synced wpcom patch D39099-code has been updated.

[Copons]

Works for me! ✨

Unrelated to this PR, I've noticed that, when unavailable, the block outputs just a link.
Anchors being inline elements, they might not respect some theme styles setting the blocks' width and margins.

I've incidentally tried this diff on a site using the Maywood theme and it looks like this:

The green box is the intended post content width (set with max-width and margin: auto), while the red box with the Calendly link is the screen's 100% width.

I think we should do something like this 🤔

{
  save: () => (<div><a href={ url }>{ url }</a></div> ),
}

[apeatling]

Works for me. I was able to add a calendly URL and see the correct embed. I deselected the block and reselected and was able to change all settings and interact with the block.

[scruffian]

r203259-wpcom