From 7cc9e4ca194b5ee926ea1628dc702325be5deb39 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 24 Oct 2018 08:44:43 -0400 Subject: [PATCH] Consolidate editor styles A followup to #22. This PR removes our secondary `style-editor-frame.css` file, and consolidates all of our editor styles into `style-editor.css`. Initially, the standard editor stylesheet was limited in scope to individual blocks, which meant we were unable to style the general alignment of the page, as well as items like the page title and default appender. The scope of `style-editor.css` is being expanded in https://github.com/WordPress/gutenberg/pull/10956 , so we're now able to style those elements in a single stylesheet. Some minor style tweaks were necessary to make our original styles work in this context, but for the most part this is identical to #22. --- functions.php | 9 -- package.json | 1 - style-editor-frame.css | 60 ------------- style-editor-frame.scss | 67 --------------- style-editor.css | 183 +++++++++++++++++++++++++++------------- style-editor.scss | 102 ++++++++++++++++++---- 6 files changed, 212 insertions(+), 210 deletions(-) delete mode 100644 style-editor-frame.css delete mode 100644 style-editor-frame.scss diff --git a/functions.php b/functions.php index 6e5e86fe..a4f93830 100644 --- a/functions.php +++ b/functions.php @@ -147,15 +147,6 @@ function twentynineteen_scripts() { } add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' ); -/** - * Enqueue supplemental block editor styles - */ -function twentynineteen_editor_frame_styles() { - wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' ); -} - -add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' ); - /** * SVG Icons class. */ diff --git a/package.json b/package.json index c74b3600..c1826f0e 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "scripts": { "build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css", "build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css", - "build:style-editor-frame": "node-sass style-editor-frame.scss style-editor-frame.css --output-style expanded && postcss -r style-editor-frame.css", "build:rtl": "rtlcss style.css style-rtl.css", "build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css", "build": "run-p \"build:*\"", diff --git a/style-editor-frame.css b/style-editor-frame.css deleted file mode 100644 index 197b8c2f..00000000 --- a/style-editor-frame.css +++ /dev/null @@ -1,60 +0,0 @@ -/*! -Twenty Nineteen Editor Frame Styles - -NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css. -*/ -/** === Includes === */ -/* If we add the border using a regular CSS border, it won't look good on non-retina devices, - * since its edges can look jagged due to lack of antialiasing. In this case, we are several - * layers of box-shadow to add the border visually, which will render the border smoother. */ -/** === Title === */ -body.gutenberg-editor-page .gutenberg .editor-post-title__block:before { - background: #767676; - content: "\020"; - display: block; - height: 2px; - margin: 1rem 0; - width: 1em; -} - -body.gutenberg-editor-page .gutenberg .editor-post-title__block:before { - width: 2.8125em; - margin-top: 0; - margin-bottom: 0; - margin-left: 1em; - position: relative; - top: 0.5em; -} - -body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-title__input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 2.8125em; -} - -/** === Default Appender === */ -body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content { - font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; - font-size: 22px; -} - -/** === Off-Center Content === */ -@media only screen and (min-width: 768px) { - body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow { - max-width: 80%; - margin: 0 10%; - } - body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block, - body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-default-block-appender, - body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block { - margin-left: 0; - margin-right: 0; - } - body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="full"] { - width: calc( 125% + 88px + 28px); - position: relative; - left: calc( -12.5% - 46px - 14px); - } - body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="right"] { - max-width: 125%; - } -} diff --git a/style-editor-frame.scss b/style-editor-frame.scss deleted file mode 100644 index 94e8962b..00000000 --- a/style-editor-frame.scss +++ /dev/null @@ -1,67 +0,0 @@ -/*! -Twenty Nineteen Editor Frame Styles - -NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css. -*/ - -/** === Includes === */ - -@import "sass/variables-site/variables-site"; -@import "sass/variables-site/colors"; -@import "sass/mixins/mixins-master"; - -/** === Title === */ - -body.gutenberg-editor-page .gutenberg .editor-post-title__block { - @include post-section-dash; - - &:before { - width: $font__size-xxl; - margin-top: 0; - margin-bottom: 0; - margin-left: 1em; - position: relative; - top: 0.5em; - } - - .editor-post-title__input { - font-family: $font__heading; - font-size: $font__size-xxl; - } -} - -/** === Default Appender === */ - -body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content { - font-family: $font__body; - font-size: $font__size_base; -} - -/** === Off-Center Content === */ - -body.gutenberg-editor-page .gutenberg .edit-post-layout { - - @include media(tablet) { - .editor-writing-flow { - max-width: 80%; - margin: 0 10%; - } - - .editor-post-title__block, - .editor-default-block-appender, - .editor-block-list__block { - margin-left: 0; - margin-right: 0; - } - - .editor-block-list__block[data-align="full"] { - width: calc( 125% + 88px + 28px ); - position: relative; - left: calc( -12.5% - 46px - 14px ); - } - - .editor-block-list__block[data-align="right"] { - max-width: 125%; - } - } -} \ No newline at end of file diff --git a/style-editor.css b/style-editor.css index 6e8e9a2b..0615b0e9 100644 --- a/style-editor.css +++ b/style-editor.css @@ -9,9 +9,46 @@ when Gutenberg supports styling those variations more intuitively. /* If we add the border using a regular CSS border, it won't look good on non-retina devices, * since its edges can look jagged due to lack of antialiasing. In this case, we are several * layers of box-shadow to add the border visually, which will render the border smoother. */ +/** === Editor Frame === */ +@media screen and (min-width: 600px) { + body .wp-block[data-align="full"] { + width: calc( 100% + 90px); + max-width: calc( 100% + 90px); + } +} + +@media only screen and (min-width: 768px) { + body { + overflow-x: hidden; + } + body .editor-writing-flow { + max-width: 80%; + margin: 0 10%; + } + body .editor-post-title__block, + body .editor-default-block-appender, + body .editor-block-list__block { + margin-left: 0; + margin-right: 0; + } + body .wp-block[data-align="wide"] { + width: 100%; + } + body .wp-block[data-align="full"] { + position: relative; + left: calc( -12.5% - 14px); + width: calc( 125% + 116px); + max-width: calc( 125% + 116px); + } + body .wp-block[data-align="right"] { + max-width: 125%; + } +} + /** === Content Width === */ .wp-block { width: calc(100vw - (2 * 1rem)); + max-width: 100%; } @media only screen and (min-width: 768px) { @@ -124,6 +161,36 @@ figcaption, color: #767676; } +/** === Post Title === */ +.editor-post-title__block:before { + background: #767676; + content: "\020"; + display: block; + height: 2px; + margin: 1rem 0; + width: 1em; +} + +.editor-post-title__block:before { + width: 2.8125em; + margin-top: 0; + margin-bottom: 0; + margin-left: 1em; + position: relative; + top: 0.5em; +} + +.editor-post-title__block .editor-post-title__input { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 2.8125em; +} + +/** === Default Appender === */ +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-size: 22px; +} + /** === Paragraph === */ .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @@ -134,45 +201,45 @@ figcaption, } /** === Cover Image === */ -.wp-block-cover-image h2, -.wp-block-cover-image .wp-block-cover-image-text { +.wp-block-cover h2, +.wp-block-cover .wp-block-cover-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 2.25em; font-weight: bold; line-height: 1.4; } -.wp-block-cover-image.has-left-content { +.wp-block-cover.has-left-content { justify-content: center; } -.wp-block-cover-image.has-left-content h2, -.wp-block-cover-image.has-left-content .wp-block-cover-image-text { +.wp-block-cover.has-left-content h2, +.wp-block-cover.has-left-content .wp-block-cover-text { padding: 1em; } -.wp-block-cover-image.has-right-content { +.wp-block-cover.has-right-content { justify-content: center; } -.wp-block-cover-image.has-right-content h2, -.wp-block-cover-image.has-right-content .wp-block-cover-image-text { +.wp-block-cover.has-right-content h2, +.wp-block-cover.has-right-content .wp-block-cover-text { padding: 1em; } -body[data-type="core/cover-image"][data-align="left"] h2, -body[data-type="core/cover-image"][data-align="left"] .wp-block-cover-image-text, -body[data-type="core/cover-image"][data-align="right"] h2, -body[data-type="core/cover-image"][data-align="right"] .wp-block-cover-image-text { +.wp-block[data-type="core/cover"][data-align="left"] h2, +.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover-text, +.wp-block[data-type="core/cover"][data-align="right"] h2, +.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover-text { width: 100%; max-width: 305px; } @media only screen and (min-width: 1168px) { - body[data-type="core/cover-image"][data-align="wide"] h2, - body[data-type="core/cover-image"][data-align="wide"] .wp-block-cover-image-text, - body[data-type="core/cover-image"][data-align="full"] h2, - body[data-type="core/cover-image"][data-align="full"] .wp-block-cover-image-text { + .wp-block[data-type="core/cover"][data-align="wide"] h2, + .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text, + .wp-block[data-type="core/cover"][data-align="full"] h2, + .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text { padding: 0; width: calc(6 * (100vw / 12)); max-width: calc(6 * (100vw / 12)); @@ -284,15 +351,15 @@ body[data-type="core/cover-image"][data-align="right"] .wp-block-cover-image-tex word-break: break-word; } -body[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, -body[data-type="core/pullquote"] blockquote > .editor-rich-text p, -body[data-type="core/pullquote"] p, -body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, -body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p, -body[data-type="core/pullquote"][data-align="left"] p, -body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, -body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, -body[data-type="core/pullquote"][data-align="right"] p { +.wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, +.wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p, +.wp-block[data-type="core/pullquote"] p, +.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, +.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p, +.wp-block[data-type="core/pullquote"][data-align="left"] p, +.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, +.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, +.wp-block[data-type="core/pullquote"][data-align="right"] p { font-size: 1.6875em; font-style: italic; line-height: 1.3; @@ -302,22 +369,22 @@ body[data-type="core/pullquote"][data-align="right"] p { } @media only screen and (min-width: 768px) { - body[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, - body[data-type="core/pullquote"] blockquote > .editor-rich-text p, - body[data-type="core/pullquote"] p, - body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, - body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p, - body[data-type="core/pullquote"][data-align="left"] p, - body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, - body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, - body[data-type="core/pullquote"][data-align="right"] p { + .wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, + .wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p, + .wp-block[data-type="core/pullquote"] p, + .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, + .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p, + .wp-block[data-type="core/pullquote"][data-align="left"] p, + .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, + .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, + .wp-block[data-type="core/pullquote"][data-align="right"] p { font-size: 2.25em; } } -body[data-type="core/pullquote"] .wp-block-pullquote__citation, -body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation, -body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation { +.wp-block[data-type="core/pullquote"] .wp-block-pullquote__citation, +.wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation, +.wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 0.71111em; line-height: 1.6; @@ -325,42 +392,42 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati color: #767676; } -body[data-type="core/pullquote"] em, -body[data-type="core/pullquote"][data-align="left"] em, -body[data-type="core/pullquote"][data-align="right"] em { +.wp-block[data-type="core/pullquote"] em, +.wp-block[data-type="core/pullquote"][data-align="left"] em, +.wp-block[data-type="core/pullquote"][data-align="right"] em { font-style: normal; } -body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit, -body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit { +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit { max-width: 50%; } -body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color), -body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) { +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color), +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) { padding: 0; } -body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color, -body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color { +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color { padding: 1em; } -body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color p, -body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, -body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color p, -body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation { +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color p, +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color p, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation { color: white; } -body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, -body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p, -body[data-type="core/pullquote"][data-align="left"] p, -body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation, -body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, -body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, -body[data-type="core/pullquote"][data-align="right"] p, -body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation { +.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, +.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p, +.wp-block[data-type="core/pullquote"][data-align="left"] p, +.wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation, +.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, +.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, +.wp-block[data-type="core/pullquote"][data-align="right"] p, +.wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation { text-align: left; } diff --git a/style-editor.scss b/style-editor.scss index 8beb322f..16ad3624 100644 --- a/style-editor.scss +++ b/style-editor.scss @@ -12,10 +12,55 @@ when Gutenberg supports styling those variations more intuitively. @import "sass/variables-site/colors"; @import "sass/mixins/mixins-master"; +/** === Editor Frame === */ + +body { + + // Non-standard media query necessary to override a Gutenberg breakpoint style. + @media screen and (min-width: 600px) { + .wp-block[data-align="full"] { + width: calc( 100% + 90px ); + max-width: calc( 100% + 90px ); + } + } + + @include media(tablet) { + overflow-x: hidden; + + .editor-writing-flow { + max-width: 80%; + margin: 0 10%; + } + + .editor-post-title__block, + .editor-default-block-appender, + .editor-block-list__block { + margin-left: 0; + margin-right: 0; + } + + .wp-block[data-align="wide"] { + width: 100%; + } + + .wp-block[data-align="full"] { + position: relative; + left: calc( -12.5% - 14px ); + width: calc( 125% + 116px ); + max-width: calc( 125% + 116px ); + } + + .wp-block[data-align="right"] { + max-width: 125%; + } + } +} + /** === Content Width === */ .wp-block { width: calc(100vw - (2 * #{$size__spacing-unit})); + max-width: 100%; @include media(tablet) { width: calc(8 * (100vw / 12)); @@ -110,6 +155,33 @@ figcaption, color: $color__text-light; } +/** === Post Title === */ + +.editor-post-title__block { + @include post-section-dash; + + &:before { + width: $font__size-xxl; + margin-top: 0; + margin-bottom: 0; + margin-left: 1em; + position: relative; + top: 0.5em; + } + + .editor-post-title__input { + font-family: $font__heading; + font-size: $font__size-xxl; + } +} + +/** === Default Appender === */ + +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-family: $font__body; + font-size: $font__size_base; +} + /** === Paragraph === */ .wp-block-paragraph { @@ -125,10 +197,10 @@ figcaption, /** === Cover Image === */ -.wp-block-cover-image { +.wp-block-cover { h2, - .wp-block-cover-image-text { + .wp-block-cover-text { font-family: $font__heading; font-size: $font__size-xl; font-weight: bold; @@ -139,7 +211,7 @@ figcaption, justify-content: center; h2, - .wp-block-cover-image-text { + .wp-block-cover-text { padding: 1em; } } @@ -148,28 +220,28 @@ figcaption, justify-content: center; h2, - .wp-block-cover-image-text { + .wp-block-cover-text { padding: 1em; } } } -body[data-type="core/cover-image"][data-align="left"], -body[data-type="core/cover-image"][data-align="right"] { +.wp-block[data-type="core/cover"][data-align="left"], +.wp-block[data-type="core/cover"][data-align="right"] { h2, - .wp-block-cover-image-text { + .wp-block-cover-text { width: 100%; max-width: 305px; } } -body[data-type="core/cover-image"][data-align="wide"], -body[data-type="core/cover-image"][data-align="full"] { +.wp-block[data-type="core/cover"][data-align="wide"], +.wp-block[data-type="core/cover"][data-align="full"] { @include media(desktop) { h2, - .wp-block-cover-image-text { + .wp-block-cover-text { padding: 0; width: calc(6 * (100vw / 12)); max-width: calc(6 * (100vw / 12)); @@ -290,9 +362,9 @@ body[data-type="core/cover-image"][data-align="full"] { } } -body[data-type="core/pullquote"], -body[data-type="core/pullquote"][data-align="left"], -body[data-type="core/pullquote"][data-align="right"] { +.wp-block[data-type="core/pullquote"], +.wp-block[data-type="core/pullquote"][data-align="left"], +.wp-block[data-type="core/pullquote"][data-align="right"] { blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, blockquote > .editor-rich-text p, @@ -322,8 +394,8 @@ body[data-type="core/pullquote"][data-align="right"] { } } -body[data-type="core/pullquote"][data-align="left"], -body[data-type="core/pullquote"][data-align="right"] { +.wp-block[data-type="core/pullquote"][data-align="left"], +.wp-block[data-type="core/pullquote"][data-align="right"] { .editor-block-list__block-edit { max-width: 50%;