diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index 3028e00a8bd51..a9a6437fe4a3c 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -1,11 +1,16 @@ // Apply max-width to floated items that have no intrinsic width -.wp-block[data-align="left"] > .wp-block-embed, -.wp-block[data-align="right"] > .wp-block-embed, +.wp-block[data-align="left"] > [data-type^="core-embed"], +.wp-block[data-align="right"] > [data-type^="core-embed"], .wp-block-embed.alignleft, .wp-block-embed.alignright { // Instagram widgets have a min-width of 326px, so go a bit beyond that. max-width: 360px; width: 100%; + + // Unless these have a min-width, they collapse when floated. + .wp-block-embed__wrapper { + min-width: $break-zoomed-in; + } } .wp-block-embed { @@ -18,63 +23,62 @@ // The embed block is in a `figure` element, and many themes zero this out. // This rule explicitly sets it, to ensure at least some bottom-margin in the flow. margin-bottom: 1em; + + // Don't allow iframe to overflow it's container. + iframe { + max-width: 100%; + } } -.wp-embed-responsive { - .wp-block-embed { - // Add responsiveness to common aspect ratios. - &.wp-embed-aspect-21-9 .wp-block-embed__wrapper, - &.wp-embed-aspect-18-9 .wp-block-embed__wrapper, - &.wp-embed-aspect-16-9 .wp-block-embed__wrapper, - &.wp-embed-aspect-4-3 .wp-block-embed__wrapper, - &.wp-embed-aspect-1-1 .wp-block-embed__wrapper, - &.wp-embed-aspect-9-16 .wp-block-embed__wrapper, - &.wp-embed-aspect-1-2 .wp-block-embed__wrapper { - position: relative; +.wp-block-embed__wrapper { + position: relative; +} - &::before { - content: ""; - display: block; - padding-top: 50%; // Default to 2:1 aspect ratio. - } +// Add responsiveness to embeds with aspect ratios. +.wp-embed-responsive .wp-has-aspect-ratio { + .wp-block-embed__wrapper::before { + content: ""; + display: block; + padding-top: 50%; // Default to 2:1 aspect ratio. + } - iframe { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - } - } + iframe { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + width: 100%; + } +} - &.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { - padding-top: 42.85%; // 9 / 21 * 100 - } +.wp-embed-responsive { + .wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { + padding-top: 42.85%; // 9 / 21 * 100 + } - &.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { - padding-top: 50%; // 9 / 18 * 100 - } + .wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { + padding-top: 50%; // 9 / 18 * 100 + } - &.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { - padding-top: 56.25%; // 9 / 16 * 100 - } + .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { + padding-top: 56.25%; // 9 / 16 * 100 + } - &.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { - padding-top: 75%; // 3 / 4 * 100 - } + .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { + padding-top: 75%; // 3 / 4 * 100 + } - &.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { - padding-top: 100%; // 1 / 1 * 100 - } + .wp-embed-aspect-1-1 .wp-block-embed__wrapper::before { + padding-top: 100%; // 1 / 1 * 100 + } - &.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { - padding-top: 177.78%; // 16 / 9 * 100 - } + .wp-embed-aspect-9-6 .wp-block-embed__wrapper::before { + padding-top: 66.66%; // 6 / 9 * 100 + } - &.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { - padding-top: 200%; // 2 / 1 * 100 - } + .wp-embed-aspect-1-2 .wp-block-embed__wrapper::before { + padding-top: 200%; // 2 / 1 * 100 } }