Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix missing CSS in the Classic Block #12441

Merged
merged 1 commit into from
Mar 18, 2019
Merged

Fix missing CSS in the Classic Block #12441

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 167 additions & 74 deletions packages/block-library/src/classic/editor.scss
View file
Open in desktop
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