Стилизованные блоки в Gutenberg: 6 ошибок, из-за которых сайт выглядит дешево

Часто проблема не в самом блоке, а в том, как в него добавляют цвет, отступы и границы. Один и тот же Gutenberg-блок может смотреться аккуратно или разваливаться на глазах — всё решают несколько мелочей.

Проверьте базу:
— один главный цвет акцента, а не пять случайных;
— одинаковые отступы сверху и снизу у похожих блоков;
— контраст текста и фона без «серого на сером»;
— скругления и тени в одном стиле по всему сайту.

Не смешивайте разные визуальные языки в одном экране: если карточки строгие, не делайте рядом «мягкий» callout с другой тенью и другим радиусом. Лучше выбрать один набор правил для всех повторяющихся блоков и закрепить его в шаблоне.

Если блок должен выделяться, используйте один приём: фон, рамку или иконку. Когда включают всё сразу, внимание не усиливается, а размазывается. В Gutenberg это особенно заметно на блоках «цитата», «инфо», «примечание» и «призыв к действию».

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