Chore: Adds embed object mixin

[derekshirk]

Overview

This PR was originally intended to address the needs of styling the Gutenberg core/image block. After further effort I realize that the work represented here thus far, no longer meets the needs of that goal.

However, the embed object mixin may still be a meaningful addition. This pull request accomplices the following:

• adds mixin for embed object
• updates o-embed to make use of available mixin

I am opening this up for review as is. What do you think? Are these changes worth introducing even though they aren't aligned with the original intent of styling the Gutenberg core/image block?

Gutenberg core/image block styles will be addressed and added via #802

Testing

1. View deploy preview
2. Review embed object output
3. Confirm no regressions have been introduced

---

See #710

[derekshirk]

👋 @tylersticka @spaceninja

I was wondering if either of you would be able to review the current state of this PR, which only introduces a change that converts the existing CSS styles for o-embed into a mixin.

My primary question is if I handled the @supports rule appropriately.

Prior to these changes the @supports rule was wrapping the (non-fallback) .o-embed styles.

cloudfour.com-patterns/src/objects/embed/embed.scss

Lines 87 to 102 in b406c48

	@supports (--custom: property) {
	/**
	* Here's where the magic happens! 🦄
	*
	* 1. We default to a square aspect ratio. This is suitable for icons, profile
	* images, etc. It's also the simplest default.
	* 2. Required for rounded corners to work as expected. We could apply this
	* by default, but then circular rounding would appear elliptical in older
	* browsers.
	* 3. Required to absolute-position child elements.
	*/
	.o-embed {
	--aspect-ratio: #{$default-aspect-ratio}; /* 1 */
	overflow: hidden; /* 2 */
	position: relative; /* 3 */

For the new mixin, I inverted these:

@mixin object {
  @supports (--custom: property) {
      ...

[tylersticka]

@derekshirk I tried it out locally and it seems fine to me.

The way I tested was that I changed the @supports query to some nonsense (I believe I used floob: whut), confirmed the fallback styles were applied, then reverted the query to what it was before and confirmed the enhanced styles were applied.

[changeset-bot]

💥 No Changeset

Latest commit: b7f2bff

Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂

If these changes should be published to npm, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

[derekshirk]

I will update/add the Changeset once this is ready for review.

As I understand it, this PR does not require a changeset.

[spaceninja]

Unless I'm reading this wrong, this will result in no actual changes to the compiled CSS, so no objections here.