Gutenberg frontend style.css has admin CSS

[jdevalk]

Describe the bug
On the frontend, every site with Gutenberg gets block-library/style.css loaded. That file contains CSS that is meant for the backend, like this:

@keyframes fade-in{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes editor_region_focus{
    0%{
        box-shadow:inset 0 0 0 0 #33b3db
    }
    to{
        box-shadow:inset 0 0 0 4px #33b3db
    }
}
@keyframes rotation{
    0%{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(1turn)
    }
}
@keyframes modal-appear{
    0%{
        margin-top:32px
    }
    to{
        margin-top:0
    }
}

To Reproduce
Steps to reproduce the behavior:

1. Go to https://joost.blog
2. View the source, find block-library/style.css
3. See the above at the top. See that it's not used in that CSS file anywhere.

Expected behavior
This should not be included in that CSS file.

Desktop (please complete the following information):

• OS: any
• Browser any
• Version WP 5.0 beta

[jdevalk]

Another bit that clearly doesn't belong in here:

.editor-block-list__layout .reusable-block-edit-panel{
    align-items:center;
    background:#f8f9f9;
    color:#555d66;
    display:flex;
    flex-wrap:wrap;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size:13px;
    position:relative;
    top:-14px;
    margin:0 -14px -14px;
    padding:8px 14px
}
.editor-block-list__layout .editor-block-list__layout .reusable-block-edit-panel{
    margin:0 -14px;
    padding:8px 14px
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__spinner{
    margin:0 5px
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__info{
    margin-right:auto
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__label{
    margin-right:8px;
    white-space:nowrap;
    font-weight:600
}
.editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title{
    flex:1 1 100%;
    font-size:14px;
    height:30px;
    margin:4px 0 8px
}
.editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button{
    flex-shrink:0
}
@media (min-width:960px){
    .editor-block-list__layout .reusable-block-edit-panel{
        flex-wrap:nowrap
    }
    .editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title{
        margin:0
    }
    .editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button{
        margin:0 0 0 5px
    }
}
.editor-block-list__layout .reusable-block-indicator{
    background:#fff;
    border-left:1px dashed #e2e4e7;
    color:#555d66;
    border-bottom:1px dashed #e2e4e7;
    top:-14px;
    height:30px;
    padding:4px;
    position:absolute;
    z-index:1;
    width:30px;
    right:-14px
}

All of this seems editor CSS to me.

[jdevalk]

Note that the above examples are from minified files that I "unminified", code might not look like that in the source :)

[youknowriad]

Agreed with the issues mentioned here: (about the animations, the reusable one need further investigation)

We have an _animations.scss file that is meant to be a "mixin" the issue is that CSS animtations can't be defined as mixins properly so they end up duplicated automatically in all stylesheets.

I suggest removing this file by doing something like:

• If an animation is used only once in Gutenberg, define it in the stylesheet actually using it and give a very specific name
• If an animation is used in multiple places, we can keep this generic animations file but not import it implicitely (like other variables and mixins files) and only import it explicitely when a stylesheet (package) need it. (In addition to making these animations names more specific).

[m-e-h]

A couple more I think:

.is-selected .wp-block-gallery .blocks-gallery-image:nth-last-child(2),
.is-selected .wp-block-gallery .blocks-gallery-item:nth-last-child(2),
.is-typing .wp-block-gallery .blocks-gallery-image:nth-last-child(2),
.is-typing .wp-block-gallery .blocks-gallery-item:nth-last-child(2),

[m-e-h]

@jasmussen was this meant to be closed? I think maybe the @mixins and @keyframes may have gotten the original issue, Gutenberg frontend style.css has admin CSS, a little off track.

There are still plenty of editor styles currently in the frontend CSS.

Is there a reason these files are added to the front-end? https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/style.scss#L2-L3

[m-e-h]

.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,

[jdevalk]

Yeah I agree with @m-e-h. As much as I appreciate the work done in that pull that closed this, this still needs fixing.

[jasmussen]

Always okay to reopen! Was out for the day when I received this ping.

[m-e-h]

So should this file
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/block/edit-panel/style.scss

and this file
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/block/indicator/style.scss

be renamed to editor.scss and imported here
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/editor.scss

rather than here
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/style.scss#L2-L3?

I'm not certain but they look like editor styles judging by the class names in those files..

[youknowriad]

Can we clarify what's missing here. I see a number of merged PRs, are there any styles lingering on the frontend still?

[aristath]

Can we clarify what's missing here. I see a number of merged PRs, are there any styles lingering on the frontend still?

A few days ago I went through the compiled frontend styles and found some, there's a PR on #24439 for them 👍

[aristath]

This is no longer an issue, all remaining admin styles were removed from front-facing styles so I'll go ahead and close this ticket. 🎉
If in the future we see more editor styles leak on the frontend we can remove them on a case-by-case basis 👍