Проблема с фоновым изображением в пользовательском стиле Gutenberg

Вопрос или проблема

#intro {
    background: url(assets/main.png) ;
}

mydomain.com/wp-content/themes/mytheme/assets/main.png

mydomain.com/wp-admin/assets/main.png

add_action('wpmm_head', 'wpmm_custom_css');

    function wpmm_custom_css(){
     echo '<style>
           #intro{
    '.get_template_directory_uri().'/assets/main.png;
           }
           </style>';
    }

Ответ или решение

Проблема с фоновым изображением в Gutenberg и пользовательский стиль

Когда вы работаете с редактором Gutenberg в WordPress, может возникнуть проблема с загрузкой фоновых изображений, если вы используете функцию add_editor_style() для подключения стилей из файла style.css. Давайте подробнее рассмотрим, как это работает и как можно решить проблему, с которой вы столкнулись.

Суть проблемы

Как вы уже заметили, ваш CSS-код для фона, который выглядит следующим образом:

#intro {
    background: url(assets/main.png);
}

Работает корректно на фронтальной части сайта, и изображение загружается по правильному URL:

mydomain.com/wp-content/themes/mytheme/assets/main.png

Однако, когда вы переходите в редактор Gutenberg, WordPress пытается получить изображение по неправильному пути:

mydomain.com/wp-admin/assets/main.png

Это происходит из-за того, что редактор Gutenberg использует другой контекст для загрузки файлов стилей, и в результате относительные пути к изображениям могут указывать на неправильные каталоги.

Решение проблемы

Для того чтобы обеспечить корректную загрузку фоновых изображений в Gutenberg, можно воспользоваться одним из следующих подходов:

1. Использование абсолютного пути

Измените путь к изображению в вашем CSS, чтобы использовать абсолютный URL. Это позволит избежать путаницы с директориями. Например, измените массив CSS следующим образом:

#intro {
    background: url(<?php echo get_template_directory_uri(); ?>/assets/main.png);
}

2. Регистрация кастомного стиля через PHP

Как было упомянуто в вашем вопросе, можно добавить свой собственный стиль через PHP. Вот пример реализации:

add_action('wp_head', 'wpmm_custom_css');

function wpmm_custom_css() {
    echo '<style>
         #intro {
             background: url(' . get_template_directory_uri() . '/assets/main.png);
         }
         </style>';
}

Этот код позволит обязательно загрузить изображение с правильным URL. Функция get_template_directory_uri() возвращает корректный URL к папке вашей темы, что устраняет проблемы с путями.

3. Использование wp_enqueue_style для админки

Также вы можете добавить стили с помощью wp_enqueue_style, что является более стандартным подходом. Вот пример, как это можно сделать:

add_action( 'enqueue_block_editor_assets', 'my_custom_editor_styles' );

function my_custom_editor_styles() {
    wp_enqueue_style( 'my-custom-editor-style', get_template_directory_uri() . '/assets/style-editor.css' );
}

В файле style-editor.css укажите фон, используя абсолютный путь к изображению.

Заключение

При работе с Gutenberg и пользовательскими стилями в WordPress важно быть внимательным к путям загрузки ресурсов. Использование абсолютных путей, а также правильное подключение стилей через PHP или функции enqueue поможет избежать проблем с загрузкой изображений и других медиафайлов. Убедитесь, что выбранный вами метод соответствует стандартам кодирования WordPress, чтобы обеспечить максимальную совместимость и производительность.

Следуйте перечисленным рекомендациям, чтобы успешно устранить проблему с загрузкой фоновых изображений в Gutenberg.