diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 75d38e971ef15d..bce11c94e994aa 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -310,12 +310,11 @@ * Styles that are reused verbatim in a few places */ -@mixin caption-style() { - margin-top: 0.5em; - margin-bottom: 1em; +// These are additional styles for all captions, when the theme opts in to block styles. +@mixin caption-style-theme() { color: $dark-gray-500; - text-align: center; font-size: $default-font-size; + text-align: center; } @mixin dropdown-arrow() { diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 16fdc282020e0c..437bb95557c49e 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -5,7 +5,6 @@ } .block-editor-rich-text__editable { - margin: 0; position: relative; // In HTML, leading and trailing spaces are not visible, and multiple spaces // elsewhere are visually reduced to one space. This rule prevents spaces diff --git a/packages/block-library/src/audio/editor.scss b/packages/block-library/src/audio/editor.scss index e09d789e3c9ea5..f99b695f6c9dd2 100644 --- a/packages/block-library/src/audio/editor.scss +++ b/packages/block-library/src/audio/editor.scss @@ -1,3 +1,5 @@ .wp-block-audio { - margin: 0; + // Remove the left and right margin the figure is born with. + margin-left: 0; + margin-right: 0; } diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss index 64d79cafd85dc9..4bec2b85225387 100644 --- a/packages/block-library/src/audio/style.scss +++ b/packages/block-library/src/audio/style.scss @@ -1,11 +1,4 @@ .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/audio/theme.scss b/packages/block-library/src/audio/theme.scss new file mode 100644 index 00000000000000..03e2b5e04333ab --- /dev/null +++ b/packages/block-library/src/audio/theme.scss @@ -0,0 +1,3 @@ +.wp-block-audio figcaption { + @include caption-style-theme(); +} diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss index d26b048b862eb4..507d38c256688f 100644 --- a/packages/block-library/src/embed/editor.scss +++ b/packages/block-library/src/embed/editor.scss @@ -1,5 +1,7 @@ .wp-block-embed { - margin: 0; + // Remove the left and right margin the figure is born with. + margin-left: 0; + margin-right: 0; // Necessary because we use responsive trickery to set width/height, // therefore the video doesn't intrinsically clear floats like an image does. diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index 31c568c48b0b70..6f3478f3bb1089 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -9,12 +9,6 @@ } .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/embed/theme.scss b/packages/block-library/src/embed/theme.scss new file mode 100644 index 00000000000000..a23337bcc55c11 --- /dev/null +++ b/packages/block-library/src/embed/theme.scss @@ -0,0 +1,3 @@ +.wp-block-embed figcaption { + @include caption-style-theme(); +} diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 01c3585be4a1fc..0ce4d929d426dc 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -58,11 +58,4 @@ 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(); - } } diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss new file mode 100644 index 00000000000000..95ed74e1ee2ffe --- /dev/null +++ b/packages/block-library/src/image/theme.scss @@ -0,0 +1,3 @@ +.wp-block-image figcaption { + @include caption-style-theme(); +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index f9a53b92214177..5599dafd7c463f 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -120,7 +120,7 @@ font-size: 13px; } -.has-regular-font-size, // not used now, kept because of backward compatibility. +.has-regular-font-size, // Not used now, kept because of backward compatibility. .has-normal-font-size { font-size: 16px; } @@ -133,7 +133,22 @@ font-size: 36px; } -.has-larger-font-size, // not used now, kept because of backward compatibility. +.has-larger-font-size, // Not used now, kept because of backward compatibility. .has-huge-font-size { font-size: 42px; } + + +/** + * Vanilla Block Styles + * These are base styles that apply across blocks. + * We should have as few of these as possible. + */ + +// 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; + margin-bottom: 1em; +} diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss index 7a4dcce562f8ac..5aa1b7281537cf 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -1,7 +1,11 @@ +@import "./audio/theme.scss"; @import "./code/theme.scss"; +@import "./embed/theme.scss"; +@import "./image/theme.scss"; @import "./preformatted/theme.scss"; @import "./pullquote/theme.scss"; @import "./quote/theme.scss"; @import "./search/theme.scss"; @import "./separator/theme.scss"; @import "./table/theme.scss"; +@import "./video/theme.scss"; diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss index de4e9499dd67c5..e426eaa6e2f70e 100644 --- a/packages/block-library/src/video/style.scss +++ b/packages/block-library/src/video/style.scss @@ -16,11 +16,4 @@ &.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/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss new file mode 100644 index 00000000000000..174535bdf09163 --- /dev/null +++ b/packages/block-library/src/video/theme.scss @@ -0,0 +1,3 @@ +.wp-block-video figcaption { + @include caption-style-theme(); +} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index a0703d07b00d0f..ae0225bc6c97e7 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -68,8 +68,8 @@ body.block-editor-page { } .block-editor__container { - // on mobile the main content area has to scroll - // otherwise you can invoke the overscroll bounce on the non-scrolling container, causing (ノಠ益ಠ)ノ彡┻━┻ + // On mobile the main content area has to scroll, otherwise you can invoke + // the overscroll bounce on the non-scrolling container, for a bad experience. @include break-small { position: absolute; top: 0; @@ -79,7 +79,7 @@ body.block-editor-page { min-height: calc(100vh - #{ $admin-bar-height-big }); } - // The WP header height changes at this breakpoint + // The WP header height changes at this breakpoint. @include break-medium { min-height: calc(100vh - #{ $admin-bar-height }); @@ -102,7 +102,8 @@ body.block-editor-page { } } -// These are default editor styles in case the theme doesn't provide them. + +// These are default block editor styles in case the theme doesn't provide them. .wp-block { max-width: $content-width;