pa24on 30.04.2023 20:38

Как создать кастомные стили для редактора Gutenberg в WordPress?

Добрый день! Я использую редактор Gutenberg в WordPress и хотел бы создать кастомные стили для некоторых блоков. Например, мне нужно изменить цвет фона заголовков блоков "Заголовок" и "Абзац". Я пробовал использовать CSS в файле стилей темы, но это не дало результатов. Можете ли вы показать мне, как правильно создать кастомные стили для Gutenberg? Вот пример моего кода: 

.wp-block-heading {
  background-color: #ff0000;
}

.wp-block-paragraph {
  background-color: #00ff00;
}
Я ожидаю, что заголовки блоков "Заголовок" и "Абзац" будут иметь красный и зеленый фон соответственно. Однако, ничего не происходит. Что я делаю неправильно? Буду очень благодарен за вашу помощь!

Ответы:

DanKoz27 30.04.2023 20:58
Попробуйте использовать кастомный класс вместо селектора по умолчанию для стилизации блоков в Gutenberg редакторе.
RenatD25 30.04.2023 21:11
Примените свои кастомные стили через CSS классы, а не напрямую к блокам "Заголовок" и "Абзац".
olygaantonova42 30.04.2023 21:35
Убедитесь, что вы правильно добавили свои кастомные стили в файл стилей темы.
KirillG38 30.04.2023 21:51
Проверьте, правильно ли подключены ваши стили и убедитесь, что вы используете правильные селекторы для блоков "Заголовок" и "Абзац".
sabina24Inva 30.04.2023 22:05
Добрый день! Чтобы создавать кастомные стили для блоков Gutenberg в WordPress, вам нужно использовать CSS классы, применяемые к каждому блоку. Однако, вам потребуется немного изменить свой код CSS, чтобы он работал правильно. Вместо использования классов ".wp-block-heading" и ".wp-block-paragraph", вы должны использовать классы ".has-heading-color" и ".has-text-color". Эти классы автоматически применяются к блокам заголовка и абзаца, соответственно, когда вы меняете цвет текста в Gutenberg. Вот пример исправленного кода CSS: 

.has-heading-color {
  background-color: #ff0000;
}

.has-text-color {
  background-color: #00ff00;
}
Теперь, когда вы сохраните изменения, заголовки блоков "Заголовок" и "Абзац" должны иметь красный и зеленый фон соответственно. Кроме того, убедитесь, что ваш код CSS находится в файле стилей темы и правильно подключен к вашему сайту WordPress. Если вы все еще не видите результатов, возможно, ваша тема переопределяет стили Gutenberg. В этом случае, вы можете попробовать добавить ваш код CSS в файл "style.css" вашей темы или использовать плагин для настройки стилей Gutenberg. Надеюсь, это поможет вам создать кастомные стили для Gutenberg! Если у вас возникнут еще вопросы, пожалуйста, не стесняйтесь спрашивать. Удачи!

Добавить ответ