Как загрузить CSS фоновых изображений в админку

Question

Я пытаюсь создать версию своего сайта в Гутенберге и, очевидно, хочу, чтобы бэкэнд-редактор отображал то же представление, что и во внешнем интерфейсе. Итак ... У меня есть две таблицы стилей, обе помещены в тему root (и правильно ссылаются в функциях. php (и они работают правильно)

1. Файл Sass внешнего интерфейса (стили .s css)
2. и sass-файл бэкэнда (editor-styles.s css)

В обоих sass-файлах я включаю как css частичное, называемое _elements .s css, где я (помимо всего прочего) вставляю несколько пользовательских маркеров для списка:

.default-checklist-item {  //this is a <li> element
  list-style: none;
  line-height: 3rem;
  position: relative;
  padding-left: 4.5rem;
  margin-bottom: 2rem;
  text-align: left;

  &:before {
    content: "";
    background-image: url('icons/custom/checkmark-round.svg');
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: 0;
    top: 0;
    fill: green;
  }
}

Таким образом, обе таблицы стилей будут извлекать фоновое изображение с одного и того же относительного пути, но, очевидно, маркеры не будет отображаться в редакторе, так как путь к файлу здесь прикреплен к https://example.com/wp-admin/ пути:

1. В веб-интерфейсе файл отображается правильно
2. В редакторе файл (очевидно) не может быть найден в https://example.com/wp-admin/

Я действительно хочу использовать тот же стиль частично, поэтому нужно только поддерживать его одно место, и абсолютные пути невозможны, так как я работаю как в локальной, так и в промежуточной и живой среде энтс, так что делать ??

Answer 1

Как насчет:

add_action( 'admin_enqueue_scripts' , function () {

    wp_register_style( 'admin-checklist-handle' , false );
    wp_enqueue_style( 'admin-checklist-handle' );

    wp_add_inline_style( 'admin-checklist-handle' , '.default-checklist-item:before { background-image: url( "' . get_template_directory_uri() . '/icons/custom/checkmark-round.svg" )!important; }' );

} );

Это должно добавить встроенный элемент стиля в представлении администратора. И это должно переопределить ваш псевдоэлемент по умолчанию. (хотя и не проверено)