diff --git a/core-blocks/code/edit.js b/core-blocks/code/edit.js index be2828c5912f47..bc271a04e379a4 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 00000000000000..c44affa6dda6e0 --- /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; +} diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js index 1332db7164099c..18a5e34638628a 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 184ca12045b5a2..68b9aff572570b 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 00000000000000..63e9f70ad7511b --- /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 304b6edb26db67..71eaa2c1266654 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 361aee8b548e21..d21eedd63de786 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 af5157ee9464ac..fd29c1e086b0be 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 00000000000000..b4a202bb326eb1 --- /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 207f7235d0df4a..a5e2c6d2400132 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 c3466a5e8e1164..1b7e1255256e54 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 00000000000000..920ecf7de4238d --- /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 d325aa720f0a7c..b78aa2f13766c1 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 81c965941067e1..2467adff4e5437 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 00000000000000..3d1d40647f496f --- /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 10cb8c57afa99b..c1206d68958f7b 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 64ac34fda3703b..df07d206febe59 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 5600a0abe37295..c7cc16ee8fab22 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 5f6e6654b6ff31..31a7ae479957a3 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 00000000000000..277cdd105b485c --- /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 ca1e29c8c7db53..f73b551e4bd5be 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 44e0b375652d86..1fbdf19720705a 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 00000000000000..96184c563c1104 --- /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 ac8fcd0ed5fd88..e4ec2d3524d662 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