editor.css application in Sage 10

bud
1

Working on adding some styling to columns in editor: three columns for desktop, two for tablet and one for mobile like on the frontend, but no luck yet using:

/* Desktop: Three columns */
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-column {
    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-column {
        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-column {
        flex: 1 1 100%;
    }
}

at resources/styles/editor.css. I also tried adding

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

to setup.php even though I am using bud.conf.js with:

...
/**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);
...

without any success. I do not see my styles added when I check editor.min.css in console log nor do I see it elsewhere, but perhaps I am looking in the wrong area?

I did briefly get

TypeError: null is not an object (evaluating '(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.dispatch)(`core/notices`).createInfoNotice')

in blob:https://cafejpcoen.test/91cb02e5-d0d6-4af6-bd95-723fc2e44d11

related to

/ Execute the module function
/******/ 		try {
/******/ 			var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
/******/ 			__webpack_require__.i.forEach(function(handler) { handler(execOptions); });
/******/ 			module = execOptions.module;
/******/ 			execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
/******/ 		} catch(e) {
/******/ 			module.error = e;
/******/ 			throw e;
/******/ 		}

but not sure if these issues are related

2
1 Like
3

Adding frontend styles as editor styles with that code :

add_action('after_setup_theme', function () {
    /**
     * Disable full-site editing support.
     *
     * @link https://wptavern.com/gutenberg-10-5-embeds-pdfs-adds-verse-block-color-options-and-introduces-new-patterns
     */
    remove_theme_support('block-templates');

    /**
     * Register the navigation menus.
     *
     * @link https://developer.wordpress.org/reference/functions/register_nav_menus/
     */
    register_nav_menus([
        'primary_navigation' => __('Primary Navigation', 'sage'),
    ]);

    /**
     * Disable the default block patterns.
     *
     * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/#disabling-the-default-block-patterns
     */
    remove_theme_support('core-block-patterns');

    /**
     * Enable plugins to manage the document title.
     *
     * @link https://developer.wordpress.org/reference/functions/add_theme_support/#title-tag
     */
    add_theme_support('title-tag');

    /**
     * Enable post thumbnail support.
     *
     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
     */
    add_theme_support('post-thumbnails');

    /**
     * Enable responsive embed support.
     *
     * @link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#responsive-embedded-content
     */
    add_theme_support('responsive-embeds');

    /**
     * Enable HTML5 markup support.
     *
     * @link https://developer.wordpress.org/reference/functions/add_theme_support/#html5
     */
    add_theme_support('html5', [
        'caption',
        'comment-form',
        'comment-list',
        'gallery',
        'search-form',
        'script',
        'style',
    ]);

    /**
     * Enable selective refresh for widgets in customizer.
     *
     * @link https://developer.wordpress.org/reference/functions/add_theme_support/#customize-selective-refresh-widgets
     */
    add_theme_support('customize-selective-refresh-widgets');

    /*
    * Add frontend styles as editor styles.
    *
    * @return void
    */
    bundle('app')->editorStyles();
    // enqueue app editor-only styles, extracted from app frontend styles
    $relEditorAppOnlyCssPath = asset('editor/app.css')->relativePath(get_theme_file_path());
    add_editor_style($relEditorAppOnlyCssPath);
}, 20);

added to setup.php of Sage 10 could be useful, thanks. But the code

* Desktop: Three columns */
.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-column {
    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-column {
        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-column {
        flex: 1 1 100%;
    }
}

to have block editor show three, two, one column display in editor.css as well (with editor wrapper class which it seems we need) is not being applied and neither is

/* Three columns on desktop */
.drinks .wp-block-columns,
.drinks .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 20px; /* Adjust the gap between columns as needed */
}

/* Two columns on tablets */
@media (max-width: 1024px) {
  .drinks .wp-block-columns,
  .food .wp-block-columns {
      grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  }
}

/* One column on mobile */
@media (max-width: 767px) {
  .drinks .wp-block-columns,
  .food .wp-block-columns {
      grid-template-columns: 1fr; /* One column (stacked) */
  }
}

from app.css. I still see desktop with 3 columns, table and mobile with one column in preview tablet or tablet view. Only desktop did get editor.css application of

.editor-styles-wrapper .wp-block-cover .block-editor-block-list__block.wp-block-column {
display: flex;
flex: 1 1 calc(33.333% - 20px);
}

for first column I see when using desktop view in editor.

Screenshot 2024-09-29 at 09.56.13
Screenshot 2024-09-29 at 09.56.132694×1874 201 KB

4

Adjusted my editor.css some

* 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%;
    }
}

to target columns block with flex as I did in frontend assets. Works for desktop view, but not tablet view loaded in iframe. In desktop view I can see the CSS loading. In tablet or mobile I do not.

and also read / checking 🔧 Use `enqueue_block_assets` for editor assets by retlehs · Pull Request #3196 · roots/sage · GitHub

and read

From version 6.3 onwards, styles and scripts added using enqueue_block_assets() will be enqueued for the editor iframe. If the intention is to limit styles to the editor only, simply use the is_admin() condition.

https://developer.wordpress.org/reference/hooks/enqueue_block_assets/

but using enqueue_block_assets instead of enqueue_block_editor_assets in

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

stopped my fonts and other styles from loading for blocks on editor desktop view for some reason. Perhaps because of what was mentioned in comment:

Note that this action is specifically for adding styles and scripts that impact the editor interface (e.g., the block sidebar or toolbar). For styling editor content, use enqueue_block_assets.

Background:

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

But that would perhaps means we need editor.css for editor styling, editor-content.css for editor content styling and app.css for frontend styling with an additional add_action using enqueue_block_assets perhaps.

Initial new setup I did did not work. At least in tablet iframe I did not see the two columns with additional add_action with enqueue_block_assets, bud.conf.js .entry addition to load new editor content css and new editor-content.css file.

P.S. Addition to setup.php as suggested by @strarsis does seem to help with loading editor.css so thanks for that.

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

6

Are you wrapping the CSS selectors into .editor-styles-wrapper class yourself, or was this added by Gutenberg CSS post-processing?

Manually adding this wrapper CSS class can cause issues, as Gutenberg uses different style isolation methods, depending on editor mode, see this post

1 Like
7

When I do not use the manually added .editor-styles-wrapper and then run yarn dev I still get zero styling in the editor for desktop, tablet and mobile. When I run a yarn build I do get styling for desktop, tablet and mobile. So it seems I do not need .editor-styles-wrapper as a wrapper, but it did not cause issues too it seems.

So the issue remains that I still need to run yarn build to see CSS changes added. And that seems to be because with Hot Module Reloading you do not affect the inline styles. For that you need to use yarn build because you then add CSS assets. I have been tinkering with Bud and the Webpack Mini CSS Extract Plugin:

import MiniCssExtractPlugin from 'mini-css-extract-plugin';

export default async (app) => {
  /**
   * Application assets & entrypoints
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   */
  app.setPublicPath('/wp-content/themes/cafejp/public/');

  /**
   * Development server settings
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://cafejpcoen.test')
    .watch(['resources/views', 'app']);

  /**
   * Register MiniCssExtractPlugin using Bud's extensions
   */
  app.hooks.on('build.plugins', (plugins = []) => [
    ...plugins,
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ]);

  /**
   * Override the default rule for handling CSS to use MiniCssExtractPlugin
   */
  app.hooks.on('build.rules.before', rules => {
    rules.css.use = [
      MiniCssExtractPlugin.loader,
      'css-loader',
    ];
    return rules;
  });

  /**
   * Generate WordPress `theme.json`
   */
  app.wpjson
    .setSettings({
      // Add your theme.json settings here
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

but though I did not get errors the editor.css did not get generated on yarn dev with it. Another community member did work on a Bud extension also GitHub - talss89/bud-wp-editor-query: Split WordPress editor styles into separate stylesheets but I think it is not quite active or done yet, not sure.

Also read https://github.com/roots/bud/issues/2633 some now on extending Bud with mini css extract plugin and possible use of

bud.extensions
  .get('@roots/bud-extensions/mini-css-extract-plugin')
  .setFilename('[name].css')

extension does exist for Bud as seen at https://bud.js.org/learn/general-use/extensions#built-in-extensions

So added this to bud.conf.js

...
/**
   * MiniCssExtractPlugin setup using Bud's extension system
   */
  app.extensions.get('@roots/bud-extensions/mini-css-extract-plugin').setFilename('[name].css');
...

and ran yarn dev and editor.css generated and added to public/css/ but fonts and so on are not loaded for any view.

Without extension this happens as well it seems. So perhaps it is the issue without HMR and frames with inline CSS again…

8

Testing

app.build.items.precss.setLoader('minicss');
  app.hooks.action('build.before', (bud) => {
    bud.extensions.get('@roots/bud-extensions/mini-css-extract-plugin').enable(true);
  });

as mentioned by @oxyc at Compile CSS files in dev mode - #9 by oxyc .

Seems to be working. I see font styling applied on desktop, tablet and mobile in Gutenberg editor now. Do not seer two columns for tablet yet though, but perhaps

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

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

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

in editor.css don’t get applied properly. Checking some more.

Post yarn dev in Sage 10 in editor on tablet view I also get

Uncaught TypeError: Cannot read properties of null (reading 'createInfoNotice')
    at handler (editor.js:35:86)
    at Module.load (editor.js:42:20)
    at Module.register (filters.js:9:99)
    at eval (editor.js:13:59)
    at ./scripts/editor.js (editor.js:732:1)
    at options.factory (9731c5f8-594e-4c67-a921-87fcac39ec78:731:31)
    at __webpack_require__ (9731c5f8-594e-4c67-a921-87fcac39ec78:139:33)
    at __webpack_exec__ (editor.js:746:61)
    at editor.js:747:139
    at webpackJsonpCallback (9731c5f8-594e-4c67-a921-87fcac39ec78:1403:39)
blob:https://site/ccd23bf7-2100-4333-b3f9-4a704bf1e0a8

Not sure yet why