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/style.scss b/packages/block-library/src/style.scss index 3fd7e3c2b8e04..387cde5f18c6f 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -247,27 +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; -} - -// Apply some base styles to blocks that need them. -img { - max-width: 100%; - height: auto; -} - -iframe { - width: 100%; -} 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(); + } } 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%; }