Включение поддержки опций выравнивания «По ширине содержимого» и «Во всю ширину» для блоков Gutenberg

Gutenberg / 2 комментария

В этом уроке я покажу, как при создании темы WordPress с поддержкой Гутенберг добавить возможность выравнивания блоков во всю ширину контента и во всю ширину страницы.

Также хочу порекомендовать вам свой видеокурс по созданию блока Gutenberg.

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

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

Ещё две опции выравнивания, «По ширине содержимого» и «Во всю ширину», добавить легко и просто при помощи функции add_theme_support().

add_theme_support( 'align-wide' );

Код можно также поместить внутрь хука after_setup_theme, кстати, если не знаете, куда вставлять код, читайте это.

И результат:

выравниванием блока Обложка в Gutenberg на всю ширину страницы — Извините, немного перестарался с GIF, она почти 1MB 😁

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Комментарии — 2

Комментирование этого поста более не доступно.

Роман 29 Апр 2021
А допустим я создал кастомный блок, типа:
<section className={ className }> <InnerBlocks /> </section>
В теме прописан add_theme_support( 'align-wide' ); и у блоков ГРУППА например все ок отображается, а у кастомных нет таких элементов, чтобы расширить его на всю, как это реализовать?
- Миша 30 Апр 2021
  При создании своего кастомного блока укажите параметр:
  supports: { // если указать true, то включает поддержку всего нижеперечисленного: // left, center, right, wide и full. align: true; // но можно указать в виде массива // align: [ 'left', 'right', 'full' ]; }