editor.css application in Sage 10

bud
5

Okay, progress made. I am using

add_action('enqueue_block_assets', function () {
    bundle('editor')->enqueue();
}, 100);

now and got it to work post another yarn build AND wp acorn cache:clear . Now I do see all fonts in Gutenberg editor and if frames for tablet and mobile. Only the columns do not work yet.

Current editor.css still uses these rules for columns

/* Desktop: Three columns */
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
    display: flex;
    flex: 1 1 calc(33.333% - 20px);
}

/* Tablets: Two columns */
@media (max-width: 1024px) {
    .editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
        flex: 1 1 calc(50% - 20px);
    }
}

/* Mobile: One column */
@media (max-width: 767px) {
    .editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
        flex: 1 1 100%;
    }
}

But it seems to be a CSS override issue where:

@media (max-width:767px)
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
flex: 1 1 100%;
}

overrides my rule:

@media (max-width:1024px)
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-columns {
flex: 1 1 calc(50% - 20px);
}

So will work that out soon enough.

Also on yarn dev fonts do not load properly for some reason with this new setup. But reading Editor styles not loading in WP6.3 with bud dev - #19 by talss89 that might be due to inlined css that won’t play nice with hot reloading and need for assets to be built. Also read https://discourse.roots.io/t/how-to-add-mini-css-extract-plugin-to-sages-bud-config-js-to-compile-editor-styles/27771