From 55dda57e04c77927a16a90f79cb1b498fff0cfd7 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 29 Jun 2018 10:05:35 +0200 Subject: [PATCH 1/2] Move opinionated styles to separate opt-in theme.scss files This moves opinionated styles, such as colors, fonts, and other non-structural elements to separate theme.scss files which require opt in by the theme itself. This includes in this PR: - Code styles - Embed captions - Image captions - Preformatted styles - Pullquote fonts & border styles - Quote styles - Table styles - Video captions In addition to this there's a new caption style mixin which reduces caption style reuse. --- core-blocks/code/edit.js | 1 + core-blocks/code/theme.scss | 8 ++++++++ core-blocks/embed/index.js | 1 + core-blocks/embed/style.scss | 7 ------- core-blocks/embed/theme.scss | 3 +++ core-blocks/gallery/style.scss | 10 +++++----- core-blocks/image/index.js | 1 + core-blocks/image/style.scss | 7 ------- core-blocks/image/theme.scss | 5 +++++ core-blocks/preformatted/editor.scss | 3 --- core-blocks/preformatted/index.js | 1 + core-blocks/preformatted/theme.scss | 7 +++++++ core-blocks/pullquote/index.js | 1 + core-blocks/pullquote/style.scss | 6 ------ core-blocks/pullquote/theme.scss | 12 ++++++++++++ core-blocks/quote/style.scss | 12 +++--------- core-blocks/quote/theme.scss | 7 +++---- core-blocks/table/index.js | 1 + core-blocks/table/style.scss | 17 ----------------- core-blocks/table/theme.scss | 18 ++++++++++++++++++ core-blocks/video/index.js | 1 + core-blocks/video/style.scss | 9 --------- core-blocks/video/theme.scss | 5 +++++ edit-post/assets/stylesheets/_mixins.scss | 12 ++++++++++++ 24 files changed, 88 insertions(+), 67 deletions(-) create mode 100644 core-blocks/code/theme.scss create mode 100644 core-blocks/embed/theme.scss create mode 100644 core-blocks/image/theme.scss create mode 100644 core-blocks/preformatted/theme.scss create mode 100644 core-blocks/pullquote/theme.scss create mode 100644 core-blocks/table/theme.scss create mode 100644 core-blocks/video/theme.scss diff --git a/core-blocks/code/edit.js b/core-blocks/code/edit.js index be2828c5912f4..bc271a04e379a 100644 --- a/core-blocks/code/edit.js +++ b/core-blocks/code/edit.js @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import './editor.scss'; +import './theme.scss'; import { PlainText } from '@wordpress/editor'; export default function CodeEdit( { attributes, setAttributes, className } ) { diff --git a/core-blocks/code/theme.scss b/core-blocks/code/theme.scss new file mode 100644 index 0000000000000..f41b4c3654563 --- /dev/null +++ b/core-blocks/code/theme.scss @@ -0,0 +1,8 @@ +.wp-block-code { + font-family: $editor-html-font; + font-size: $text-editor-font-size; + color: $dark-gray-800; + padding: .8em 1.6em; + border: 1px solid $light-gray-500; + border-radius: 4px; +} \ No newline at end of file diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js index 1332db7164099..18a5e34638628 100644 --- a/core-blocks/embed/index.js +++ b/core-blocks/embed/index.js @@ -26,6 +26,7 @@ import apiRequest from '@wordpress/api-request'; */ import './style.scss'; import './editor.scss'; +import './theme.scss'; // These embeds do not work in sandboxes const HOSTS_NO_PREVIEWS = [ 'facebook.com' ]; diff --git a/core-blocks/embed/style.scss b/core-blocks/embed/style.scss index 184ca12045b5a..68b9aff572570 100644 --- a/core-blocks/embed/style.scss +++ b/core-blocks/embed/style.scss @@ -1,10 +1,3 @@ -.wp-block-embed figcaption { - margin-top: 0.5em; - color: $dark-gray-300; - text-align: center; - font-size: $default-font-size; -} - // Apply max-width to floated items that have no intrinsic width .editor-block-list__block[data-type="core/embed"][data-align="left"] .editor-block-list__block-edit, .editor-block-list__block[data-type="core/embed"][data-align="right"] .editor-block-list__block-edit, diff --git a/core-blocks/embed/theme.scss b/core-blocks/embed/theme.scss new file mode 100644 index 0000000000000..63e9f70ad7511 --- /dev/null +++ b/core-blocks/embed/theme.scss @@ -0,0 +1,3 @@ +.wp-block-embed figcaption { + @include caption-style(); +} diff --git a/core-blocks/gallery/style.scss b/core-blocks/gallery/style.scss index 304b6edb26db6..71eaa2c126665 100644 --- a/core-blocks/gallery/style.scss +++ b/core-blocks/gallery/style.scss @@ -29,16 +29,16 @@ } figcaption { + position: absolute; + width: 100%; + max-height: 100%; + overflow: auto; padding: 40px 10px 5px; color: $white; text-align: center; font-size: $default-font-size; background: linear-gradient( 0deg, rgba( $color: $black, $alpha: 0.7 ) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent ); - position: absolute; - width: 100%; - max-height: 100%; - overflow: auto; - + img { display: inline; } diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js index 361aee8b548e2..d21eedd63de78 100644 --- a/core-blocks/image/index.js +++ b/core-blocks/image/index.js @@ -20,6 +20,7 @@ import { createBlobURL } from '@wordpress/blob'; * Internal dependencies */ import './style.scss'; +import './theme.scss'; import edit from './edit'; export const name = 'core/image'; diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss index af5157ee9464a..fd29c1e086b0b 100644 --- a/core-blocks/image/style.scss +++ b/core-blocks/image/style.scss @@ -1,13 +1,6 @@ .wp-block-image { width: fit-content; - figcaption { - margin-top: 0.5em; - color: $dark-gray-300; - text-align: center; - font-size: $default-font-size; - } - &.aligncenter { display: block; margin-left: auto; diff --git a/core-blocks/image/theme.scss b/core-blocks/image/theme.scss new file mode 100644 index 0000000000000..b4a202bb326eb --- /dev/null +++ b/core-blocks/image/theme.scss @@ -0,0 +1,5 @@ +.wp-block-image { + figcaption { + @include caption-style(); + } +} \ No newline at end of file diff --git a/core-blocks/preformatted/editor.scss b/core-blocks/preformatted/editor.scss index 207f7235d0df4..a5e2c6d240013 100644 --- a/core-blocks/preformatted/editor.scss +++ b/core-blocks/preformatted/editor.scss @@ -1,8 +1,5 @@ .wp-block-preformatted { pre { white-space: pre-wrap; - font-family: $editor-html-font; - font-size: $text-editor-font-size; - color: $dark-gray-800; } } diff --git a/core-blocks/preformatted/index.js b/core-blocks/preformatted/index.js index c3466a5e8e116..1b7e1255256e5 100644 --- a/core-blocks/preformatted/index.js +++ b/core-blocks/preformatted/index.js @@ -9,6 +9,7 @@ import { RichText } from '@wordpress/editor'; * Internal dependencies */ import './editor.scss'; +import './theme.scss'; export const name = 'core/preformatted'; diff --git a/core-blocks/preformatted/theme.scss b/core-blocks/preformatted/theme.scss new file mode 100644 index 0000000000000..920ecf7de4238 --- /dev/null +++ b/core-blocks/preformatted/theme.scss @@ -0,0 +1,7 @@ +.wp-block-preformatted { + pre { + font-family: $editor-html-font; + font-size: $text-editor-font-size; + color: $dark-gray-800; + } +} diff --git a/core-blocks/pullquote/index.js b/core-blocks/pullquote/index.js index d325aa720f0a7..b78aa2f13766c 100644 --- a/core-blocks/pullquote/index.js +++ b/core-blocks/pullquote/index.js @@ -19,6 +19,7 @@ import { */ import './editor.scss'; import './style.scss'; +import './theme.scss'; const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) ); const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( { diff --git a/core-blocks/pullquote/style.scss b/core-blocks/pullquote/style.scss index 81c965941067e..2467adff4e543 100644 --- a/core-blocks/pullquote/style.scss +++ b/core-blocks/pullquote/style.scss @@ -1,7 +1,4 @@ .wp-block-pullquote { - border-top: 4px solid $dark-gray-500; - border-bottom: 4px solid $dark-gray-500; - color: $dark-gray-600; padding: 3em 0; text-align: center; @@ -21,9 +18,6 @@ cite, footer { - color: $dark-gray-600; position: relative; - text-transform: uppercase; - font-size: $default-font-size; } } diff --git a/core-blocks/pullquote/theme.scss b/core-blocks/pullquote/theme.scss new file mode 100644 index 0000000000000..3d1d40647f496 --- /dev/null +++ b/core-blocks/pullquote/theme.scss @@ -0,0 +1,12 @@ +.wp-block-pullquote { + border-top: 4px solid $dark-gray-500; + border-bottom: 4px solid $dark-gray-500; + color: $dark-gray-600; + + cite, + footer { + color: $dark-gray-600; + text-transform: uppercase; + font-size: $default-font-size; + } +} diff --git a/core-blocks/quote/style.scss b/core-blocks/quote/style.scss index 10cb8c57afa99..c1206d68958f7 100644 --- a/core-blocks/quote/style.scss +++ b/core-blocks/quote/style.scss @@ -1,12 +1,6 @@ .wp-block-quote { - cite, - footer { - margin-top: 1em; - position: relative; - font-style: normal; - } - - &.is-style-large, &.is-large { + &.is-style-large, + &.is-large { margin: 0 0 16px; padding: 0 1em; @@ -18,7 +12,7 @@ cite, footer { - font-size: 19px; + font-size: 18px; text-align: right; } } diff --git a/core-blocks/quote/theme.scss b/core-blocks/quote/theme.scss index 64ac34fda3703..df07d206febe5 100644 --- a/core-blocks/quote/theme.scss +++ b/core-blocks/quote/theme.scss @@ -5,10 +5,9 @@ footer { color: $dark-gray-300; font-size: $default-font-size; - } - - p { - margin-bottom: 16px; + margin-top: 1em; + position: relative; + font-style: normal; } } diff --git a/core-blocks/table/index.js b/core-blocks/table/index.js index 5600a0abe3729..c7cc16ee8fab2 100644 --- a/core-blocks/table/index.js +++ b/core-blocks/table/index.js @@ -26,6 +26,7 @@ import { */ import './editor.scss'; import './style.scss'; +import './theme.scss'; import TableBlock from './table-block'; const tableContentSchema = { diff --git a/core-blocks/table/style.scss b/core-blocks/table/style.scss index 5f6e6654b6ff3..31a7ae479957a 100644 --- a/core-blocks/table/style.scss +++ b/core-blocks/table/style.scss @@ -1,21 +1,4 @@ .wp-block-table { - overflow-x: auto; - display: block; - border-collapse: collapse; - width: 100%; - - tbody { - width: 100%; - display: table; - min-width: $break-mobile / 2; - } - - td, - th { - padding: 0.5em; - border: 1px solid currentColor; - } - // Fixed layout toggle &.has-fixed-layout tbody { table-layout: fixed; diff --git a/core-blocks/table/theme.scss b/core-blocks/table/theme.scss new file mode 100644 index 0000000000000..277cdd105b485 --- /dev/null +++ b/core-blocks/table/theme.scss @@ -0,0 +1,18 @@ +.wp-block-table { + overflow-x: auto; + display: block; + border-collapse: collapse; + width: 100%; + + tbody { + width: 100%; + display: table; + min-width: $break-mobile / 2; + } + + td, + th { + padding: 0.5em; + border: 1px solid currentColor; + } +} diff --git a/core-blocks/video/index.js b/core-blocks/video/index.js index ca1e29c8c7db5..f73b551e4bd5b 100644 --- a/core-blocks/video/index.js +++ b/core-blocks/video/index.js @@ -12,6 +12,7 @@ import { RichText } from '@wordpress/editor'; * Internal dependencies */ import './style.scss'; +import './theme.scss'; import edit from './edit'; export const name = 'core/video'; diff --git a/core-blocks/video/style.scss b/core-blocks/video/style.scss index 44e0b375652d8..1fbdf19720705 100644 --- a/core-blocks/video/style.scss +++ b/core-blocks/video/style.scss @@ -1,13 +1,4 @@ .wp-block-video { - margin: 0; - - figcaption { - margin-top: 0.5em; - color: $dark-gray-300; - text-align: center; - font-size: $default-font-size; - } - &.aligncenter { text-align: center; } diff --git a/core-blocks/video/theme.scss b/core-blocks/video/theme.scss new file mode 100644 index 0000000000000..96184c563c110 --- /dev/null +++ b/core-blocks/video/theme.scss @@ -0,0 +1,5 @@ +.wp-block-video { + figcaption { + @include caption-style(); + } +} diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss index ac8fcd0ed5fd8..e4ec2d3524d66 100644 --- a/edit-post/assets/stylesheets/_mixins.scss +++ b/edit-post/assets/stylesheets/_mixins.scss @@ -278,3 +278,15 @@ right: $sidebar-width; } } + + +/** + * Styles that are reused verbatim in a few places + */ + +@mixin caption-style() { + margin-top: 0.5em; + color: $dark-gray-300; + text-align: center; + font-size: $default-font-size; +} \ No newline at end of file From 4e5d4b3be05dc8a857f36cb61ee0d9ff40ed2c12 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 6 Jul 2018 15:25:52 +0200 Subject: [PATCH 2/2] Add newline at end of file. --- core-blocks/code/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core-blocks/code/theme.scss b/core-blocks/code/theme.scss index f41b4c3654563..c44affa6dda6e 100644 --- a/core-blocks/code/theme.scss +++ b/core-blocks/code/theme.scss @@ -5,4 +5,4 @@ padding: .8em 1.6em; border: 1px solid $light-gray-500; border-radius: 4px; -} \ No newline at end of file +}