Skip to content

Commit

Permalink
Fix missing CSS in the Classic Block (#12441)
Browse files Browse the repository at this point in the history
  • Loading branch information
@azaozz @youknowriad
azaozz authored and youknowriad committed Mar 20, 2019
1 parent 3e03d37 commit 1ca8fc3
Showing 1 changed file with 167 additions and 74 deletions.
241 changes: 167 additions & 74 deletions packages/block-library/src/classic/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.wp-block-freeform.block-library-rich-text__tinymce {
overflow: hidden;

p,
li {
line-height: $editor-line-height;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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 <body>
.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 {
Expand All @@ -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.
Expand Down

0 comments on commit 1ca8fc3

Please sign in to comment.