From 1ca8fc3c50d0605d7c31078a6af347f081225d3b Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Mon, 18 Mar 2019 04:23:54 -0700 Subject: [PATCH] Fix missing CSS in the Classic Block (#12441) --- .../block-library/src/classic/editor.scss | 241 ++++++++++++------ 1 file changed, 167 insertions(+), 74 deletions(-) diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss index 758609eb9d5490..b4427ec2b21ad0 100644 --- a/packages/block-library/src/classic/editor.scss +++ b/packages/block-library/src/classic/editor.scss @@ -1,6 +1,4 @@ .wp-block-freeform.block-library-rich-text__tinymce { - overflow: hidden; - p, li { line-height: $editor-line-height; @@ -120,15 +118,100 @@ background-position: center; } - /** - * The following gallery styles were replicated - * from the styles applied in the tinymce skin, - * /wp-includes/js/tinymce/skins/wordpress/wp-content.css. - */ - .wpview-type-gallery::after { - content: ""; - display: table; + /* Remove blue highlighting of selected images in WebKit */ + img::selection { + background-color: transparent; + } + + div.mceTemp { + -ms-user-select: element; + } + + /* Image captions */ + dl.wp-caption { + margin: 0; /* dl browser reset */ + max-width: 100%; + + a, + img { + display: block; + } + + &, + & * { + -webkit-user-drag: none; + } + + .wp-caption-dd { + padding-top: 0.5em; + margin: 0; /* browser dd reset */ + } + } + + /* WP Views */ + .wpview { + width: 99.99%; /* All IE need hasLayout, incl. 11 (ugh, not again!!) */ + position: relative; clear: both; + margin-bottom: 16px; + border: 1px solid transparent; + + iframe { + display: block; + max-width: 100%; + background: transparent; + } + + .mce-shim { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + &[data-mce-selected="2"] .mce-shim { + display: none; + } + + .loading-placeholder { + border: 1px dashed $light-gray-400; + padding: 10px; + } + + .wpview-error { + border: 1px solid $light-gray-400; + padding: 1em 0; + margin: 0; + word-wrap: break-word; + + p { + margin: 0; + text-align: center; + } + } + + &[data-mce-selected] .loading-placeholder, + &[data-mce-selected] .wpview-error { + border-color: transparent; + } + + .dashicons { + display: block; + margin: 0 auto; + width: 32px; + height: 32px; + font-size: 32px; + } + + // The following gallery styles were replicated + // from the styles applied in the tinymce skin, + // /wp-includes/js/tinymce/skins/wordpress/wp-content.css. + &.wpview-type-gallery::after { + content: ""; + display: table; + clear: both; + } } .gallery img[data-mce-selected]:focus { @@ -180,32 +263,7 @@ } } -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/freeform"] { - - // Not sure why this is necessary, there seems to be a skin file that overrides this upstream. - .mce-btn.mce-active button, - .mce-btn.mce-active:hover button, - .mce-btn.mce-active i, - .mce-btn.mce-active:hover i { - color: $dark-gray-800; - } - - // Prevent toolbar clipping on heading style in RTL languages - .mce-rtl .mce-flow-layout-item.mce-last { - margin-right: 0; - margin-left: 8px; - } - - // Prevent i tags in buttons from picking up theme editor styles. - .mce-btn i { - font-style: normal; - } - - // Adjust padding to not cause a jump. - .mce-toolbar-grp > div { - padding: 1px 3px; - } - +div[data-type="core/freeform"] { .block-editor-block-list__block-edit::before { transition: border-color 0.1s linear, box-shadow 0.1s linear; border: $border-width solid $light-gray-500; @@ -223,11 +281,41 @@ &.is-hovered .block-editor-block-list__breadcrumb { display: none; } + + .editor-block-contextual-toolbar + div { + margin-top: 0; + padding-top: 0; + } + + // Ensure aligned blocks at end are within the selected block. + &.is-selected .block-library-rich-text__tinymce::after { + content: ""; + display: table; + clear: both; + } } -div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div { - margin-top: 0; - padding-top: 0; +// mce global styles: the toolbars may get appended to +.mce-toolbar-grp { + // Not sure why this is necessary, there seems to be a skin file that + // overrides this upstream. + .mce-btn.mce-active button, + .mce-btn.mce-active:hover button, + .mce-btn.mce-active i, + .mce-btn.mce-active:hover i { + color: $dark-gray-800; + } + + // Prevent toolbar clipping on heading style in RTL languages + .mce-rtl .mce-flow-layout-item.mce-last { + margin-right: 0; + margin-left: 8px; + } + + // Prevent i tags in buttons from picking up theme editor styles. + .mce-btn i { + font-style: normal; + } } .block-library-classic__toolbar { @@ -251,49 +339,54 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div { @include break-small() { padding: 0; } -} -.block-library-classic__toolbar:empty { - height: $block-toolbar-height; - background: #f5f5f5; - border-bottom: $border-width solid #e2e4e7; + &:empty { + height: $block-toolbar-height; + background: #f5f5f5; + border-bottom: $border-width solid #e2e4e7; - &::before { - font-family: $default-font; - font-size: $default-font-size; - content: attr(data-placeholder); - color: #555d66; - line-height: 37px; - padding: $block-padding; + &::before { + font-family: $default-font; + font-size: $default-font-size; + content: attr(data-placeholder); + color: #555d66; + line-height: 37px; + padding: $block-padding; + } } -} -// Overwrite inline styles. -.block-library-classic__toolbar .mce-tinymce-inline, -.block-library-classic__toolbar .mce-tinymce-inline > div, -.block-library-classic__toolbar div.mce-toolbar-grp, -.block-library-classic__toolbar div.mce-toolbar-grp > div, -.block-library-classic__toolbar .mce-menubar, -.block-library-classic__toolbar .mce-menubar > div { - height: auto !important; - width: 100% !important; -} + // Overwrite inline styles. + .mce-tinymce-inline, + .mce-tinymce-inline > div, + div.mce-toolbar-grp, + div.mce-toolbar-grp > div, + .mce-menubar, + .mce-menubar > div { + height: auto !important; + width: 100% !important; + } -.block-library-classic__toolbar .mce-container-body.mce-abs-layout { - overflow: visible; -} + .mce-container-body.mce-abs-layout { + overflow: visible; + } -.block-library-classic__toolbar .mce-menubar, -.block-library-classic__toolbar div.mce-toolbar-grp { - position: static; -} + .mce-menubar, + div.mce-toolbar-grp { + position: static; + } -.block-library-classic__toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) { - display: none; -} + // Adjust padding to not cause a jump. + .mce-toolbar-grp > div { + padding: 1px 3px; + } + + .mce-toolbar-grp .mce-toolbar:not(:first-child) { + display: none; + } -.block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar { - display: block; + &.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar { + display: block; + } } // We don't want the ellipsis to overlap the classic toolbar, which it will due to position sticky.