Использование styled-components в функции save() на Gutenberg

На чтение 3 мин Опубликовано 30.12.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Возможные Решения
Заключение

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

Я пытаюсь использовать styled-components и другие компоненты React в функции save(), но это не работает, хотя styled-component отлично работает в редакторе (функция edit), вот мой код для блока:

const { __ } = wp.i18n;  
const { registerBlockType } = wp.blocks;

import styled from 'styled-components';


registerBlockType( 'gutenword-blocks/posts', {
    title: 'Styled Div',
    icon: 'admin-page',
    category: 'layout',


    edit: function( props ) {
        const StyledDiv = styled.div`
            height: 300px;
            width: 300px;
            background: red;
        `;
        return <StyledDiv></StyledDiv>;
    },

    save() {
        const StyledDiv = styled.div`
            height: 300px;
            width: 300px;
            background: red;
        `;
        return <StyledDiv></StyledDiv>;

    },
} );

Ожидаемое поведение
Блок при добавлении должен показывать красный квадрат на экране редактора и на фронтенде

Текущее поведение
Красный квадрат показывается только в редакторе, а на фронтенде ничего не отображается

Кажется, что styled components зависят от React для предоставления CSS.
Поскольку React не загружается на фронтенде WordPress, вы не видите никаких стилей.

Вы можете определить свой CSS inline или подключить таблицу стилей с помощью register_block_type.
Посмотрите эту ссылку для подключения: Применение стилей из таблицы стилей

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

Вопрос, который вы задали, касается использования библиотеки styled-components в функции save() в блоке WordPress Gutenberg. Давайте разберем, почему у вас возникла проблема и как ее можно решить.

Проблема

Вы заметили, что ваш блок работает корректно в редакторе, но не на фронтэнде. Это связано с тем, что styled-components зависит от React для предоставления стилей, а React не загружается на фронтэнде WordPress. Таким образом, стили, созданные через styled-components, теряются после публикации или предварительного просмотра страницы.

Возможные Решения

Использование встроенных стилей: Это наиболее простой метод, но может быть не самым элегантным в плане организации кода. Вы можете добавить CSS непосредственно в элемент JSX:
```
save() {
   return <div style={{ height: '300px', width: '300px', background: 'red' }}></div>;
}
```
Подключение внешних стилей с помощью register_block_type: Этот способ заключается в создании отдельного CSS-файла и его подключения к вашей теме или плагину. Этот метод более предпочтителен, так как позволяет отделить стили от логики компонента и обеспечивать их повторное использование.
- Создайте CSS-файл: Создайте файл стилей и добавьте туда необходимые CSS-классы.
```
.gutenword-styled-div {
 height: 300px;
 width: 300px;
 background: red;
}
```
- Зарегистрируйте и подключите стили в WordPress:
```
function gutenword_block_assets() {
 wp_enqueue_style(
     'gutenword-blocks-style', 
     plugins_url('path/to/your/style.css', __FILE__)
 );
}
add_action('enqueue_block_assets', 'gutenword_block_assets');
```
- Модифицируйте функцию save():
```
save() {
 return <div className="gutenword-styled-div"></div>;
}
```

Заключение

Использование styled-components внутри функции save() ограничено особенностями работы WordPress Gutenberg. Для достижения ожидаемого результата лучше использовать классические подходы стилей с помощью CSS и WordPress функционала для их подключения. Использование внешних стилей не только решает текущую проблему, но и обеспечивает гибкость и чистоту архитектуры вашего проекта.

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