Skip to content

Commit

Permalink
set max-width rather than width and reduce specificity
Browse files Browse the repository at this point in the history
  • Loading branch information
m-e-h authored and jasmussen committed May 11, 2020
1 parent 6189574 commit e82f93e
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 19 deletions.
8 changes: 0 additions & 8 deletions packages/block-library/src/embed/editor.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
29 changes: 18 additions & 11 deletions packages/block-library/src/embed/style.scss
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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%;
}
}

Expand Down

0 comments on commit e82f93e

Please sign in to comment.