From a5bfd7dd6f4d8c2bb9b1b7a88a9bbc4a4b3b69e6 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 5 Nov 2019 09:00:43 -0500 Subject: [PATCH 1/3] Revert img, iframe styles to block editor container scope --- packages/block-library/src/style.scss | 10 ---------- packages/edit-post/src/style.scss | 9 +++++++++ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 3fd7e3c2b8e04..96f08cfd452cd 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -261,13 +261,3 @@ figcaption { margin-top: 0.5em; } - -// Apply some base styles to blocks that need them. -img { - max-width: 100%; - height: auto; -} - -iframe { - width: 100%; -} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 94fcfa7ac60fe..da8b8a1a21268 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -83,6 +83,15 @@ body.block-editor-page { } } + img { + max-width: 100%; + height: auto; + } + + iframe { + width: 100%; + } + .components-navigate-regions { height: 100%; } From 3752c71ce4dc2c4eb420876ce78b208b56ade03e Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 5 Nov 2019 09:52:37 -0500 Subject: [PATCH 2/3] Block Library: Remove all vanilla styles --- packages/block-library/src/style.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 96f08cfd452cd..387cde5f18c6f 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -247,17 +247,3 @@ /*rtl:ignore*/ text-align: right; } - -/** - * Vanilla Block Styles - * These are base styles that apply across blocks, meant to provide a baseline. - * They are applied both to the editor and the theme, so we should have as few of these as possible. - * Please note that some styles are stored in packages/editor/src/editor-styles.scss, as they pertain to CSS bleed for the editor only. - */ - -// Caption styles. -// Supply these even if the theme hasn't opted in, because the figcaption element is not likely to be styled in the majority of existing themes. -// By providing a minimum of margin styles, we ensure it doesn't look broken or unstyled in those themes. -figcaption { - margin-top: 0.5em; -} From 9e8da8452028ab073063f9d8c3b8ab5720b5c566 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 5 Nov 2019 10:28:04 -0500 Subject: [PATCH 3/3] Block Library: Restore non-theme front-end margins for figcaption --- packages/base-styles/_mixins.scss | 5 +++++ packages/block-library/src/audio/style.scss | 7 +++++++ packages/block-library/src/embed/style.scss | 6 ++++++ packages/block-library/src/image/style.scss | 7 +++++++ packages/block-library/src/video/style.scss | 7 +++++++ 5 files changed, 32 insertions(+) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index dd90c086f5624..fda485a779275 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -332,6 +332,11 @@ */ // These are additional styles for all captions, when the theme opts in to block styles. +@mixin caption-style() { + margin-top: 0.5em; + margin-bottom: 1em; +} + @mixin caption-style-theme() { color: $dark-gray-500; font-size: $default-font-size; diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss index 4bec2b8522538..64d79cafd85dc 100644 --- a/packages/block-library/src/audio/style.scss +++ b/packages/block-library/src/audio/style.scss @@ -1,4 +1,11 @@ .wp-block-audio { + // Supply caption styles to audio blocks, even if the theme hasn't opted in. + // Reason being: the new markup, , are not likely to be styled in the majority of existing themes, + // so we supply the styles so as to not appear broken or unstyled in those themes. + figcaption { + @include caption-style(); + } + // Show full-width when not aligned. audio { width: 100%; diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index 5409085faf020..a3e9ee13f4d94 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -9,6 +9,12 @@ } .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, + // so we supply the styles so as to not appear broken or unstyled in those. + figcaption { + @include caption-style(); + } // 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; diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 461b6dc8a5ffd..01356391e9cfa 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -54,6 +54,13 @@ margin-left: auto; margin-right: auto; } + + // Supply caption styles to images, even if the theme hasn't opted in. + // Reason being: the new markup, , are not likely to be styled in the majority of existing themes, + // so we supply the styles so as to not appear broken or unstyled in those themes. + figcaption { + @include caption-style(); + } } // Variations diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss index e426eaa6e2f70..de4e9499dd67c 100644 --- a/packages/block-library/src/video/style.scss +++ b/packages/block-library/src/video/style.scss @@ -16,4 +16,11 @@ &.aligncenter { text-align: center; } + + // Supply caption styles to videos, even if the theme hasn't opted in. + // Reason being: the new markup, , are not likely to be styled in the majority of existing themes, + // so we supply the styles so as to not appear broken or unstyled in those themes. + figcaption { + @include caption-style(); + } }