From aec49f6fad27bcde495dfc84deec873952a82db0 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 11 Mar 2019 08:49:25 +0100 Subject: [PATCH 1/5] Try: Move color and font size from captions to theme This PR moves the color and font size styles for captions to a separate CSS file that themes opt in to. As a reminder, we have style.scss, which contains structural and base styles that are loaded in the editor and the theme. There's editor.scss which is only loaded in the editor. There's theme.scss, which is loaded in the editor and the theme if the theme opts in to them. Addresses one item surfaced in https://github.com/WordPress/gutenberg/issues/12299#issuecomment-471201071, props @joyously. --- assets/stylesheets/_mixins.scss | 7 ++++++- packages/block-library/src/audio/theme.scss | 3 +++ packages/block-library/src/embed/theme.scss | 3 +++ packages/block-library/src/image/theme.scss | 3 +++ packages/block-library/src/theme.scss | 5 +++++ packages/block-library/src/video/theme.scss | 3 +++ 6 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/audio/theme.scss create mode 100644 packages/block-library/src/embed/theme.scss create mode 100644 packages/block-library/src/image/theme.scss create mode 100644 packages/block-library/src/video/theme.scss diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 75d38e971ef15..2921b6b9714d8 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -310,11 +310,16 @@ * Styles that are reused verbatim in a few places */ +// These are base styles for all captions. @mixin caption-style() { margin-top: 0.5em; margin-bottom: 1em; - color: $dark-gray-500; text-align: center; +} + +// These are additional styles for all captions, when the theme opts in to block styles. +@mixin caption-style-theme() { + color: $dark-gray-500; font-size: $default-font-size; } diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss new file mode 100644 index 0000000000000..03e2b5e04333a --- /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/theme.scss b/packages/block-library/src/embed/theme.scss new file mode 100644 index 0000000000000..a23337bcc55c1 --- /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/theme.scss b/packages/block-library/src/image/theme.scss new file mode 100644 index 0000000000000..95ed74e1ee2ff --- /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/theme.scss b/packages/block-library/src/theme.scss index 7a4dcce562f8a..feedbf83c1999 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -5,3 +5,8 @@ @import "./search/theme.scss"; @import "./separator/theme.scss"; @import "./table/theme.scss"; + +@import "./audio/theme.scss"; +@import "./embed/theme.scss"; +@import "./image/theme.scss"; +@import "./video/theme.scss"; diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss new file mode 100644 index 0000000000000..174535bdf0916 --- /dev/null +++ b/packages/block-library/src/video/theme.scss @@ -0,0 +1,3 @@ +.wp-block-video figcaption { + @include caption-style-theme(); +} From bc38d620e62251f43de57ba8b84db5fc8db45475 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 12 Mar 2019 09:12:16 +0100 Subject: [PATCH 2/5] Address feedback. --- assets/stylesheets/_mixins.scss | 8 +------- 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 ------- packages/editor/src/editor-styles.scss | 8 ++++++++ 6 files changed, 9 insertions(+), 34 deletions(-) diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 2921b6b9714d8..bce11c94e994a 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -310,17 +310,11 @@ * Styles that are reused verbatim in a few places */ -// These are base styles for all captions. -@mixin caption-style() { - margin-top: 0.5em; - margin-bottom: 1em; - text-align: center; -} - // These are additional styles for all captions, when the theme opts in to block styles. @mixin caption-style-theme() { color: $dark-gray-500; font-size: $default-font-size; + text-align: center; } @mixin dropdown-arrow() { diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss index 64d79cafd85dc..4bec2b8522538 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/embed/style.scss b/packages/block-library/src/embed/style.scss index 31c568c48b0b7..6f3478f3bb108 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/image/style.scss b/packages/block-library/src/image/style.scss index 01c3585be4a1f..0ce4d929d426d 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/video/style.scss b/packages/block-library/src/video/style.scss index de4e9499dd67c..e426eaa6e2f70 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/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index 1efafd9445f49..8d2140bce8a3a 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -33,3 +33,11 @@ ul ul, ol ul { list-style-type: circle; } + +// Supply caption styles even if the theme hasn't opted in. +// Reason being: the figcaption element is 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 { + margin-top: 0.5em; + margin-bottom: 1em; +} From 214e84e303fdb7ee91dac5a810c6eba5ec8c4f77 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 13 Mar 2019 10:05:59 +0100 Subject: [PATCH 3/5] Address feedback. Create new vanilla block styles location. --- packages/block-library/src/style.scss | 19 +++++++++++++++++-- packages/block-library/src/theme.scss | 7 +++---- packages/edit-post/src/style.scss | 9 +++++---- packages/editor/src/editor-styles.scss | 8 -------- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index f9a53b9221417..5599dafd7c463 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 feedbf83c1999..5aa1b7281537c 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -1,12 +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 "./audio/theme.scss"; -@import "./embed/theme.scss"; -@import "./image/theme.scss"; @import "./video/theme.scss"; diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index a0703d07b00d0..ae0225bc6c97e 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; diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index 8d2140bce8a3a..1efafd9445f49 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -33,11 +33,3 @@ ul ul, ol ul { list-style-type: circle; } - -// Supply caption styles even if the theme hasn't opted in. -// Reason being: the figcaption element is 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 { - margin-top: 0.5em; - margin-bottom: 1em; -} From b6344ee84878a7a5cf38ebd096f569cd60409ffd Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 20 Mar 2019 08:58:00 +0100 Subject: [PATCH 4/5] Address margin feedback. --- packages/block-library/src/audio/editor.scss | 4 +++- packages/block-library/src/embed/editor.scss | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/audio/editor.scss b/packages/block-library/src/audio/editor.scss index e09d789e3c9ea..f99b695f6c9dd 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/embed/editor.scss b/packages/block-library/src/embed/editor.scss index d26b048b862eb..507d38c256688 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. From 9b84916f46464a8a2b36d30cd0f07ddd31c42bfc Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 21 Mar 2019 08:23:38 +0100 Subject: [PATCH 5/5] Address feedback. --- packages/block-editor/src/components/rich-text/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 16fdc282020e0..437bb95557c49 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