From f6277b9daf8c31da42170fbfd11f7eaf574c3d42 Mon Sep 17 00:00:00 2001 From: m-e-h Date: Tue, 26 Mar 2019 17:31:19 -0400 Subject: [PATCH 1/3] correct core-embed data-type selector and move to editor.scss --- packages/block-library/src/embed/editor.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss index f84b5b886bd10..f65a1dfb9b8d0 100644 --- a/packages/block-library/src/embed/editor.scss +++ b/packages/block-library/src/embed/editor.scss @@ -1,3 +1,11 @@ +// Apply max-width to floated items that have no intrinsic width +.block-editor-block-list__block[data-type^="core-embed"][data-align="left"] .block-editor-block-list__block-edit, +.block-editor-block-list__block[data-type^="core-embed"][data-align="right"] .block-editor-block-list__block-edit { + // Instagram widgets have a min-width of 326px, so go a bit beyond that. + max-width: 360px; + width: 100%; +} + .wp-block-embed { // Remove the left and right margin the figure is born with. margin-left: 0; From 4434a43f063d88179a3f24a21b5ecf7a67cbfb66 Mon Sep 17 00:00:00 2001 From: m-e-h Date: Tue, 26 Mar 2019 17:35:16 -0400 Subject: [PATCH 2/3] make iframe fluid on alignleft/right and reduce embed-block specificity. --- packages/block-library/src/embed/style.scss | 111 ++++++++++---------- 1 file changed, 54 insertions(+), 57 deletions(-) diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index 3028e00a8bd51..c715b8fbb321e 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -1,13 +1,3 @@ -// 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-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%; -} - .wp-block-embed { // Supply caption styles to embeds, even if the theme hasn't opted in. // Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes, @@ -18,63 +8,70 @@ // 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; + + // Apply max-width to floated items that have no intrinsic width. + &.alignleft, + &.alignright { + // Instagram widgets have a min-width of 326px, so go a bit beyond that. + max-width: 360px; + width: 100%; + + // override the iframe's static width. + iframe { + 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 } } From 91aff355363dd19e5248f533338d1228678c9b1b Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Tue, 26 Mar 2019 18:03:01 -0400 Subject: [PATCH 3/3] set max-width rather than width and reduce specificity --- packages/block-library/src/embed/editor.scss | 8 ------ packages/block-library/src/embed/style.scss | 29 ++++++++++++-------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss index f65a1dfb9b8d0..f84b5b886bd10 100644 --- a/packages/block-library/src/embed/editor.scss +++ b/packages/block-library/src/embed/editor.scss @@ -1,11 +1,3 @@ -// Apply max-width to floated items that have no intrinsic width -.block-editor-block-list__block[data-type^="core-embed"][data-align="left"] .block-editor-block-list__block-edit, -.block-editor-block-list__block[data-type^="core-embed"][data-align="right"] .block-editor-block-list__block-edit { - // Instagram widgets have a min-width of 326px, so go a bit beyond that. - max-width: 360px; - width: 100%; -} - .wp-block-embed { // Remove the left and right margin the figure is born with. margin-left: 0; diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index c715b8fbb321e..a9a6437fe4a3c 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -1,3 +1,18 @@ +// Apply max-width to floated items that have no intrinsic width +.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 { // Supply caption styles to embeds, even if the theme hasn't opted in. // Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes, @@ -9,17 +24,9 @@ // This rule explicitly sets it, to ensure at least some bottom-margin in the flow. margin-bottom: 1em; - // Apply max-width to floated items that have no intrinsic width. - &.alignleft, - &.alignright { - // Instagram widgets have a min-width of 326px, so go a bit beyond that. - max-width: 360px; - width: 100%; - - // override the iframe's static width. - iframe { - width: 100%; - } + // Don't allow iframe to overflow it's container. + iframe { + max-width: 100%; } }