Стили Wordpress в редакторе работают только с «watch»

Question

Я использую Wordpress 5.4 с редактором Гутенберга и Webpack 4.2 для создания ресурсов. Я хочу, чтобы мои стили (app.css) загружались при редактировании страницы или сообщения.

В функциях. php, я добавил:

function add_theme_style_to_editor(){
    add_theme_support( 'editor-styles' );
    add_editor_style( 'public/build/app.css' );
}
add_action( 'after_setup_theme', 'add_theme_style_to_editor' );

Всякий раз, когда я запускаю yarn watch, все работает как положено, мои стили загружаются в редактор. Однако, если я запускаю yarn build для создания минимизированных файлов сборки, это не работает! Даже если минимизированный файл успешно создан в том же месте с тем же именем, это не имеет значения. Что может быть не так?

Редактировать: когда я удаляю из своего файла app.scss строку @import "~bootstrap/scss/bootstrap";, и я удаляю все bootstrap связанные стили, другие стили работают при создании файлов. Я до сих пор не понимаю, почему все работает нормально при работе yarn watch.

Edit2: , если я использую следующие функции в . php работает, с bootstrap и всеми. Только теперь затрагивается весь бэкэнд, а не только редактор:

function add_theme_style(){
    wp_enqueue_style( 'these-style', get_theme_file_uri( 'public/build/app.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'add_theme_style' );

Что происходит?

Если это поможет, вот пакет . json:

{
  "name": "app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "watch": "webpack --watch",
    "build": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.4.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.8.3",
    "popper.js": "^1.16.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.1"
  }
}

И webpack.config. js:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");

module.exports = {
    entry: {
        app: "./assets/app.js" // this also contains an scss-import that will result in app.css, apart from app.js
    },
    output: {
        path: path.resolve(__dirname, "public/build"),
        filename: "[name].js",
        publicPath: "public/build"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {presets: ["es2015"]}
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

Answer 1

Я думаю, что функция должна выглядеть примерно так. Документация говорит, что стиль находится в папке шаблона root, поэтому вы должны использовать get_template_directory_uri

function add_theme_style_to_editor() {
  add_theme_support('editor-styles');
  add_editor_style(get_template_directory_uri() . 'public/build/app.css');
}
add_action('after_setup_theme', 'add_theme_style_to_editor');

Вот мой пример Wordpress, см. devDependencies