Add styles for WordPress embed block

[tylersticka]

Overview

I attempted to embed a YouTube video using the WordPress "embed" block, but was surprised to see it didn't really apply any meaningful styles. This PR changes that so it will have parity with our other media blocks.

(I also removed usage of the deprecated defaultValue property from one of the other demos in the same file.)

Screenshots

Before	After

Testing

On the deploy preview, try out:

• A video embed
  • Should display at the selected aspect ratio.
  • Should attempt to fill the margins (to a point) unless "center" alignment is selected.
• A "rich" embed
  • Should display at the selected aspect ratio.
  • Should not attempt to fill margins unless "wide" or "full" alignment options are selected.

---

• Fixes Embed block contents do not fill their container #2147

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	6dbf13f
🔍 Latest deploy log	https://app.netlify.com/sites/cloudfour-patterns/deploys/640667cc91fbb6000804dcf7
😎 Deploy Preview	https://deploy-preview-2149--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6dbf13f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tylersticka]

Just discovered an oversight in this: The margin enhancements should only apply to specific types of embeds (not Twitter, for example). Updating.

[tylersticka]

I made a few changes:

• I limited the negative alignment stuff to video embeds.
• I added an example of a non-video embed.
• I found a reference of WordPress aspect ratio classes and updated/expanded the classes here to match.

[spaceninja]

Should attempt to fill the margins (to a point) unless "center" alignment is selected.

What does this mean?

[tylersticka]

What does this mean?

Video embeds will attempt to fill the container margins where possible.

I'm open to suggestions on how better to explain it, I'm drawing a blank right now.