Fix 9:16 aspect ratio styling

[westonruter]

Description

I noticed that even though there are these ASPECT_RATIOS defined:

gutenberg/packages/block-library/src/embed/constants.js

Lines 1 to 11 in 78585d6

	export const ASPECT_RATIOS = [
	// Common video resolutions.
	{ ratio: '2.33', className: 'wp-embed-aspect-21-9' },
	{ ratio: '2.00', className: 'wp-embed-aspect-18-9' },
	{ ratio: '1.78', className: 'wp-embed-aspect-16-9' },
	{ ratio: '1.33', className: 'wp-embed-aspect-4-3' },
	// Vertical video and instagram square video support.
	{ ratio: '1.00', className: 'wp-embed-aspect-1-1' },
	{ ratio: '0.56', className: 'wp-embed-aspect-9-16' },
	{ ratio: '0.50', className: 'wp-embed-aspect-1-2' },
	];

There was no style rule defined for .wp-embed-aspect-9-16. Instead there is apparently either an old style rule for .wp-embed-aspect-9-16 or it was entered with a typo:

gutenberg/packages/block-library/src/embed/style.scss

Lines 77 to 79 in 78585d6

	.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
	padding-top: 66.66%; // 6 / 9 * 100
	}

This typo appears to have been introduced in #21599.

This is closely related to #18518. Since there is no style rule for .wp-embed-aspect-9-16 in current Gutenberg, the fallback aspect ratio of 2:1 is used:

gutenberg/packages/block-library/src/embed/style.scss

Lines 39 to 43 in 78585d6

	.wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 50%; // Default to 2:1 aspect ratio.
	}

When adding a Spotify block, the aspect ratio being detected is 9:16. Before the style rule is fixed, it gets the 2:1 fallback. But after the fix, the height gets quite excessive:

Before	After

The issue appears to be due to the Spotify iframe having a height that is just a little larger than the width:

<iframe title="Spotify Embed: Cut To The Feeling (Kid Froopy Remix)" width="300" height="380" allowtransparency="true" frameborder="0" allow="encrypted-media" src="https://open.spotify.com/embed/album/4RuzGKLG99XctuBMBkFFOC"></iframe>

There appears to be a missing aspect ratio for 3:4 to invert the 4:3. This is not included in the scope of this PR.

How has this been tested?

Add a Spotify embed, e.g. https://open.spotify.com/album/4RuzGKLG99XctuBMBkFFOC

Types of changes

Fixing styles, which reveal a deeper issue with getClassNames() in the embed/util.js.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: 0 B

Total Size: 1.19 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.54 kB	0 B
build/api-fetch/index.js	3.35 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	668 B	0 B
build/block-directory/index.js	8.55 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	129 kB	0 B
build/block-editor/style-rtl.css	10.9 kB	0 B
build/block-editor/style.css	10.9 kB	0 B
build/block-library/editor-rtl.css	8.65 kB	0 B
build/block-library/editor.css	8.65 kB	0 B
build/block-library/index.js	145 kB	0 B
build/block-library/style-rtl.css	7.66 kB	0 B
build/block-library/style.css	7.65 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.78 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.6 kB	0 B
build/components/index.js	169 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.43 kB	0 B
build/core-data/index.js	12 kB	0 B
build/data-controls/index.js	685 B	0 B
build/data/index.js	8.6 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/index.js	10.6 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.29 kB	0 B
build/edit-post/style.css	6.28 kB	0 B
build/edit-site/index.js	21 kB	0 B
build/edit-site/style-rtl.css	3.73 kB	0 B
build/edit-site/style.css	3.73 kB	0 B
build/edit-widgets/index.js	21.2 kB	0 B
build/edit-widgets/style-rtl.css	3.02 kB	0 B
build/edit-widgets/style.css	3.02 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.5 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.84 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	734 B	0 B
build/format-library/index.js	7.49 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.54 kB	0 B
build/is-shallow-equal/index.js	710 B	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.12 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.34 kB	0 B
build/priority-queue/index.js	790 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13 kB	0 B
build/server-side-render/index.js	2.6 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[jasmussen]

My goodness, thanks so much for finding this typo — what even is a 9/6 aspect ratio!? 3/2 could be something, but 9/6 isn't, yet I still managed to calculate the padding based off of it. I must've been very tired that day, thanks for catching it.