Вышел Gutenberg 7.8 с Patterns API и усовершенствованным интерфейсом


Некоторое количество дней вспять вышла версия 7.8 плагина Gutenberg. Команда продолжила облагораживать интерфейс редактора, что было начато еще в релизе 7.7. Самый нужный функционал версии 7.8 – добавление Patterns API для разрабов плагинов и тем.

Релиз 7.8 не может повытрепываться громоздкими инновациями, как это было в прежних версиях. В данной версии возникли маленькие улучшения, связанные с пользовательским интерфейсом и опытом взаимодействия. Обновление содержит в себе выше 20 баг-фиксов, также маленькие доработки в плане кода и экспериментальных функций.

Редактирование неизменной ссылки записи без необходимости ее сохранения сейчас работает корректно. Также юзеры могут выбирать несколько категорий для блока с крайними записями. В конце концов, экспериментальная возможность редактирования всего веб-сайта сейчас поддерживает полноэкранный режим.

Улучшения UI

Команда начала активное обновление пользовательского интерфейса еще в версии 7.7. В текущем релизе создатели продолжили начатое. Дизайнеры доработали иконки для тулбара редактора (для начертаний bold, italic и т.д.).

Одним из более приметных улучшений является обновление текста для клавиши превью записи. В прошлой версии в редакторе была клавиша с надписью «Desktop». Она выводила раскрывающийся перечень для превью записи в настольном, планшетном и мобильном режимах. В версии 7.8 текст данной нам клавиши был изменен на «Preview», что стопроцентно отвечает ее назначению.

В итоге проведенной работы редактор смотрится отлично.

Создание случайных паттернов блоков

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

Паттерны – это HTML-заготовка для 1-го либо нескольких блоков. Добавочно создатели тем и плагинов могут определять опции для этих блоков. Команда Gutenberg включила ординарную PHP-функцию для разрабов – register_pattern(). С ее помощью можно зарегистрировать произвольные паттерны.

Читайте:  Google запустили бета-версию плагина для публикации AMP-сториз в WordPress

Самый обычной метод сделать паттерн – создать его в зрительном режиме. Откройте редактор, сделайте неповторимую группу блоков. Потом переключитесь в редактор кода и скопируйте код. Отныне вы сможете зарегистрировать собственный паттерн в PHP. Регистрация делается в файле functions.php темы.

Дальше вы сможете созидать самый обычной hero-паттерн, который продемонстрирован на снимке экрана выше. В этом паттерне имеется cover-блок, заголовок, абзац и группа клавиш:

add_action( 'init', function() {

	register_pattern( 'tavern/hero-1', [
		'title'   => __( 'Hero 1' ),
		'content' =>
			'<!-- wp:cover {"customOverlayColor":"#273f60","align":"full"} -->
			
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#273f60">
				
<div class="wp-block-cover__inner-container">
					<!-- wp:heading {"align":"center"} -->
					
<h2 class="has-text-align-center">Heading Title Here</h2>

					<!-- /wp:heading -->

					<!-- wp:paragraph {"align":"center"} -->
					

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

					<!-- /wp:paragraph -->

					<!-- wp:buttons {"align":"center"} -->
					
<div class="wp-block-buttons aligncenter">
						<!-- wp:button {"className":"is-style-outline"} -->
						
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button A</a></div>

						<!-- /wp:button -->
						<!-- wp:button {"className":"is-style-outline"} -->
						
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button B</a></div>

						<!-- /wp:button -->
					</div>

					<!-- /wp:buttons -->
				</div>

			</div>

			<!-- /wp:cover -->'
	] );
} );

Внимание: приведенный выше код предназначен для экспериментальной функции, а поэтому он может изменяться в следующих версиях Gutenberg до официального прибавления API в ядро WordPress.

Источник: wptavern.com


Ваш комментарий

Ваш адрес email не будет опубликован.

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.