Вышел Gutenberg 8.1: добавлено копирование блоков, обновился UI паттернов

В среду команда Gutenberg выпустила версию 8.1.0 плагина. Обновление включает в себя новый функционал копирования блоков, поиск по паттернам блоков,  паттерн отзывов и изменения API. Новая версия не несет в себе каких-то примечательных для пользователей изменений, однако в целом улучшает общий опыт взаимодействия. Релиз включил в себя около 20 баг-фиксов и почти столько же улучшений. … Читать далее Вышел Gutenberg 8.1: добавлено копирование блоков, обновился UI паттернов

0

WordPress в командной строке с помощью WP-CLI

WP-CLI это утилита для работы с сайтами на WordPress в командной строке. С помощью нее вы можете устанавливать темы и плагины, обновлять их, активировать, деактивировать, обновлять ядро WordPress, управлять комментариями и многое другое. Работа с WordPress с помощью командной строки В разработке проекта WP-CLI приняли участие почти 100 разработчиков, многие из которых так же участвуют … Читать далее WordPress в командной строке с помощью WP-CLI

0

БЭМ в PHP для WordPress

К хорошему привыкаешь быстро, особенно, когда верстаешь страницу в стеке Vue + Pug + Bem!

На мой взгляд это наиболее удобный стек для верстки.

Вот как выглядит код на этом стеке:

+b.product
	+e.inner
		+e.image
		+e.info
			+e.H2.title {{ product.title }}
			+e.price._new {{ product.price }}

А так этот же код выглядит на чистом HTML:

<div class="product">
	<div class="product__inner">
		<div class="product__image"></div>
		<div class="product__info">
			<h2 class="product__title">{{ product.title }}</h2>
			<div class="product__price product__price_new">{{ product.price }}</div>
		</div>
	</div>
</div>

Как видно из примера – вместо каждого +e дописывается название, взятое из предыдущего +b.

Синтаксис таков:

  • Часть названия класса, которая идет после точки компилируется в имя дочернего элемента:+e.inner > product__inner;
  • Часть названия класса, которая идет после точки и начинается с символа нижнего подчеркивания компилируется в имя миксина: +e.price._new > product__price product__price_new;

Работая с WordPress реализовать такую роскошь для создания шаблонов сложно, хотя можно… но кому это вообще надо? )

Делая очередной шаблон страницы на WordPress я очень скучал по простому созданию классов в стиле БЭМ и решил хоть как-тот облегчить себе задачу.

Техническое задание

Без использования шаблонизатора не удастся легко и просто реализовать работу через псевдо-переменные +b и +e, поэтому придется придумать что-то попроще.

Должен быть реализован синтаксис создания классов дочерних элементов и миксинов.

  1. Если указано название класса, не начинающееся с точки, это должен быть родительский класс, например product;
  2. Если за родительским классом идет один или более классов, начинающихся с точки, после которой нет символа нижнего подчеркивания, то должно быть создано столько экземпляров дочерних классов, сколько объявлено, например: product.one.two.three > product__one product__two product__three;
  3. Если после точки идет символ нижнего подчеркивания – это миксин и он должен быть дописан к каждому классу, например: product.one.two.three._first._second > product__one product__two product__three product__one_first product__one_second product__two_first product__two_second product__three_first product__three_second.

Реализация

Я хочу, чтоб это было максимально просто, на сколько это возможно в условиях создания шаблонов в WordPress, то есть в условия написания кода на чистом PHP.

Пусть функция будет называться bem и для начала пусть она принимает один параметр – строку, которая является цепочкой частей классов:

bem('product.one.two.three._first._second');

Объявим функцию:

function bem( $classTrail = '' ) {
	if ( empty( $classTrail ) ) {
		return '';
	}
}

При этом я сразу говорю, что если на вход ничего не пришло, следует вернуть пустую строку.

Далее следует разбить строку на массив:

$classTrail = array_values( array_filter( explode( '.', $classTrail ) ) );

Следом необходимо определить переменные, которые будут хранить промежуточные данные для миксинов и классов, а так же определить начальное значение для составного класса и посчитать число элементов цепочки:

$mixins  = [];
$classes = [];
$block   = '';
$count   = sizeof( $classTrail );

Далее делаем перебор нашего массива $classTrail:

foreach ( $classTrail as $i => $item ) {
    // код
}

Первым делом следует к составному элементу $block приписать название родительского класса, в нашем случае это product. Это следует сделать только в том случае, если мы на первой итерации:

if ( 0 === $i ) {
	$block = $classTrail[ $i ];
}

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

if ( 0 === $i ) {
	$block = $classTrail[ $i ];

	if ( 1 == $count ) {
		$classes[] = $block;
	}
}

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

if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
    // код
}

И если это миксин, сразу добавим его в список миксинов:

if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
	$mixins[] = $classTrail[ $i ];
}

Если при этом в нашей цепочке всего 2 элемента, это означает, что указан родительский класс и миксин: product._new, в этом случае следует часть составного класса добавить в список классов:

if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
	$mixins[] = $classTrail[ $i ];
	if ( 2 == $count ) {
		$classes[] = $block;
	}
}

В ином случае, если это не миксин, мы понимаем, что это дочерний класс, который сразу добавим в список классов:

if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
	$mixins[] = $classTrail[ $i ];
	if ( 2 == $count ) {
		$classes[] = $block;
	}
}
else {
	$classes[] = $block . '__' . $classTrail[ $i ];
}

Таким образом мы составили список классов и миксинов:

$mixins  = [];
$classes = [];
$block   = '';
$count   = sizeof( $classTrail );
foreach ( $classTrail as $i => $item ) {
	if ( 0 === $i ) {
		$block = $classTrail[ $i ];

		if ( 1 == $count ) {
			$classes[] = $block;
		}
	}
	else {

		if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
			$mixins[] = $classTrail[ $i ];
			if ( 2 == $count ) {
				$classes[] = $block;
			}
		}
		else {
			$classes[] = $block . '__' . $classTrail[ $i ];
		}
	}
}

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

foreach ( $classes as $i => $class ) {
	foreach ( $mixins as $j => $mixin ) {
		$classes[] = $classes[ $i ] . $mixin;
	}
}

Работа практически завершена, но лично у меня есть потребность создавать различные наборы классов. Скажем одна цепочка служит для создания набора классов для описания внешнего вида, вторая для указания селекторов для использования в JS, например:

bem('product._new js.product');
// в результатае будет: product product_new js__product

Для этого нам необходимо строку разбить на массив по пробелам и весь код, написанный выше, поместить в еще один цикл:

$trails = [];

$classTrails = array_values( array_filter( explode( ' ', $classTrail ) ) );

foreach ( $classTrails as $classTrail ) {

	$classTrail = array_values( array_filter( explode( '.', $classTrail ) ) );

	$mixins  = [];
	$classes = [];
	$block   = '';
	$count   = sizeof( $classTrail );
	foreach ( $classTrail as $i => $item ) {
		if ( 0 === $i ) {
			$block = $classTrail[ $i ];

			if ( 1 == $count ) {
				$classes[] = $block;
			}
		}
		else {

			if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
				$mixins[] = $classTrail[ $i ];
				if ( 2 == $count ) {
					$classes[] = $block;
				}
			}
			else {
				$classes[] = $block . '__' . $classTrail[ $i ];
			}
		}
	}

	foreach ( $classes as $i => $class ) {
		foreach ( $mixins as $j => $mixin ) {
			$classes[] = $classes[ $i ] . $mixin;
		}
	}

	$trails = array_merge( $trails, $classes );
}

Теперь осталось вернуть результат. Его можно вернуть в виде:

  • массива;
  • строки;
  • строки вида class="product product_new".

Для этого я ввел еще два входных параметра в функции, мне удобно было именно так:

  • $toAttribute = false – венуть классы внутри атрибута class;
  • $isArray = true – вернуть массив.
bem('product._new js.product', true);
// вернет class="product product_new"

bem('product._new js.product', false, false);
// вернет 'product product_new'

bem('product._new js.product');
// вернет массив

Полный код функции

/**
 * Function that creates the classes chain in BEM style
 *
 * @param string $classTrail
 * @param bool   $toAttribute
 * @param bool   $isArray
 *
 * @return array|string
 */
function bem( $classTrail = '', $toAttribute = false, $isArray = true ) {
	if ( empty( $classTrail ) ) {
		return '';
	}

	$trails = [];

	$classTrails = array_values( array_filter( explode( ' ', $classTrail ) ) );

	foreach ( $classTrails as $classTrail ) {

		$classTrail = array_values( array_filter( explode( '.', $classTrail ) ) );

		$mixins  = [];
		$classes = [];
		$block   = '';
		$count   = sizeof( $classTrail );
		foreach ( $classTrail as $i => $item ) {
			if ( 0 === $i ) {
				$block = $classTrail[ $i ];

				if ( 1 == $count ) {
					$classes[] = $block;
				}
			}
			else {

				if ( 0 === strpos( $classTrail[ $i ], '_' ) ) {
					$mixins[] = $classTrail[ $i ];
					if ( 2 == $count ) {
						$classes[] = $block;
					}
				}
				else {
					$classes[] = $block . '__' . $classTrail[ $i ];
				}
			}
		}

		foreach ( $classes as $i => $class ) {
			foreach ( $mixins as $j => $mixin ) {
				$classes[] = $classes[ $i ] . $mixin;
			}
		}

		$trails = array_merge( $trails, $classes );
	}

	if ( ! empty( $toAttribute ) ) {
		return ' class="' . join( ' ', $trails ) . '" ';
	}

	// if $isArray is false
	if ( empty( $isArray ) ) {
		$trails = join( ' ', $trails );
	}

	// return classes as array
	return $trails;
}

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

Благодаря данной функции наш шаблон станет выглядеть так:

<div <?php echo bem( 'product', true ); ?>>
	<div <?php echo bem( 'product.inner', true ); ?>>
		<div <?php echo bem( 'product.image', true ); ?>></div>
		<div <?php echo bem( 'product.info', true ); ?>>
			<h2 <?php echo bem( 'product.title', true ); ?>>{{ product.title }}</h2>
			<div <?php echo bem( 'product.price', true ); ?>>{{ product.price }}</div>
		</div>
	</div>
</div>

Кому-то может показаться, что стало хуже… но этот только в том случае, если вы не работаете с БЭМ, да еще и в WordPress ))

Могу сказать, что на практике это упростит читабельность классов и сделает их более структурированными.

0

Создатели Gutenberg Hub запустили конструктор шаблонов блоков

Владельцы Gutenberg Hub выпустили первую версию своего конструктора шаблона блоков на прошлой неделе. Конструктор шаблонов позволяет использовать любой из 200+ шаблонов, содержащихся в библиотеке. По сути это онлайн-конструктор, который дает возможность пользователям создавать макеты страниц сайта. Впоследствии пользователи могут опубликовать полученный результат путем копирования и вставки в свой редактор.

«Я хочу ускорить процесс создания красивых страниц в Gutenberg и даже целых сайтов», – рассказал Мунир Камал, основатель Gutenberg Hub. – «Я пытаюсь двигаться в этом направлении».

Мунир выпустил расширение для браузера Chrome, которое позволяет выбирать шаблоны из имеющейся библиотеки.

«Идея состоит в том, чтобы помочь фрилансерам, разработчикам и простым пользователям быстрее создавать новые страницы сайта», – отметил он. – «У меня есть много идей, как улучшить конструктор, но я хочу сначала услышать отзывы и предложения сообщества».

Мунир называет текущую версию конструктора «прототипом», поскольку хочет сначала обкатать свою идею на практике, узнать мнение сообщества, а затем уже внедрять новый функционал.

Использование конструктора шаблонов

Создание шаблонов или полноценной страницы происходит элементарно. Пользователям нужно перейти на страницу конструктора шаблонов. Далее нужно нажать на «Add Section» – в итоге появится панель библиотеки шаблонов. В панели можно выбирать любые шаблоны, которые будут интересны пользователям. Здесь есть hero-секции, отзывы, слайдеры и т.д.

Полная страница создается путем комбинирования нескольких разделов. Пользователи могут добавлять новые разделы и структурировать их по своему усмотрению. Каждый раздел может быть удален, продублирован, перемещен вверх/вниз с помощью доступных кнопок.

Я смог сделать неплохую страницу продукта всего за пару минут.

Когда все будет готово, можно будет скопировать код шаблона и вставить его в свой редактор блоков. С этого момента редактировать секции можно будет уже на своем сайте.

Иногда может потребоваться вставка дополнительного CSS-кода – это можно сделать либо через кастомайзер, либо через плагин, такой как Blocks CSS. Некоторые опции также потребуют от пользователей установки плагинов для использования специализированных блоков.

Подобные plug-n-play системы шаблонов помогают развить платформу WordPress. Однако они должны быть интегрированы прямо в WP. Копирование и вставка со стороннего сайта – лишь ступень к этому будущему, что помогает удовлетворить потребности пользователей здесь и сейчас.

Будущее конструкторов

В перспективе в Gutenberg появится система паттернов, потому команде Gutenberg Hub в идеале лучше выпустить плагин, который будет легко интегрироваться с редактором блоков. В результате этого пользователи смогут создавать свои шаблоны, не покидая экрана редактирования записи (или хотя бы не переключаясь между вкладками браузера). Однако пока что паттерны еще далеки от включения в ядро WordPress. У разработчиков Gutenberg Hub есть время, чтобы создать хорошую библиотеку и собрать отзывы пользователей по самым популярным шаблонам и паттернам.

Мунир уже имеет несколько идей по поводу своего конструктора. «К примеру, с помощью конструктора вы сможете создавать проекты, а в рамках проектов вы сможете создавать множество страниц», – отметил он. – «Для каждого проекта вы можете определить собственный брендинг (типографику, цветовые схемы и т.д.), и все шаблоны библиотеки будут адаптироваться к этому брендингу при создании страниц в рамках конкретного проекта».

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

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

«Помимо шаблонов и конструктора я также планирую добавить кое-что связанное с Gutenberg Templates API», – отметил Мунир. Он подчеркнул, что все еще находится на стадии планирования. Если прошлая работа будет интересна сообществу, то он продолжит развивать проект. Также он работает над плагином по созданию форм для редактора блоков.

0

Внутренние адреса-ссылки WordPress

wordpress-ccылки-админки

Иногда намного быстрее набрать нужный раздел админки прямо из адресной строки чем тыкать несколько раз мышкой по ссылкам.

Комментарии/wp-admin/edit-comments.phpedit-comments
Темы/wp-admin/themes.phpthemes
Юзеры/wp-admin/users.phpusers
Плагины/wp-admin/plugins.phpplugins
Пост/wp-admin/post.phppost
Пост (новый)/wp-admin/post-new.phppost
Посты/wp-admin/edit.phpedit-post
Страницы/wp-admin/edit.phpedit-page
Тип записи/wp-admin/edit.phpedit-{$post_type}
Рубрики/wp-admin/edit-tags.phpedit-category
Метки/wp-admin/edit-tags.phpedit-post_tag
Термины/wp-admin/edit-tags.phpedit-{$taxonomy}
Медиа/wp-admin/upload.phpupload
МС Сайты/wp-admin/network/sites.phpsites-network
МС Темы/wp-admin/network/themes.phpthemes-network
МС Юзеры/wp-admin/network/users.phpusers-network
МС Плагины/wp-admin/network/plugins.phpplugins-network
0

Лучшие стартовые темы WordPress

Лучшие стартовые темы вордпресс

Underscores Underscores – возможно самая известная стартовая тема для начинающих. Она разработана и поддерживается компанией Automattic (то есть самим разработчиком WordPress). Фактически каждая тема, поставляемая со свежей копией WordPress, разработана на Underscores: Начиная свою разработку с темы Underscores, вы получаете лучшие практики WordPress в одном удобном пакете. С ней будет просто создать правильную тему, основанную на требованиях WordPress. … Читать далее Лучшие стартовые темы WordPress

0

Вышел BuddyPress 6.0

buddyPress 6.0

Команда разработчиков BuddyPress на днях выпустила первую бета-версию BuddyPress 6.0. Одной из наиболее важных функций является введение новых блоков участников и групп для редактора WordPress. Плагин теперь требует минимум PHP 5.6 и WordPress 4.8 (5.0 для использования новых блоков). «Для всех нас пришло волнующее время», – отметил Джон Джеймс Джейкоби, ведущий разработчик BuddyPress, комментируя добавление новых … Читать далее Вышел BuddyPress 6.0

0

Руководство по редактору Gutenberg

wordpress news gutenberg

Gutenberg – редактор блоков, используемый WordPress по умолчанию Если вы используете WordPress 5.0 и выше, то наверняка сталкивались с новым блочным редактором Gutenberg. С точки зрения функциональности привычный классический редактор и Gutenberg делают одно и то же: помогают создавать контент. Только помните о том, что WordPress перестанет поддерживать классический редактор после 2022 года. Gutenberg не … Читать далее Руководство по редактору Gutenberg

0

Создание плагина WordPress с нуля

Мы создадим плагин, который будет сообщать о том, какие посты (любого типа) были опубликованы в этом календарном месяце, и кто их авторы. Плагин для одного сайта Я создавал этот плагин как индивидуальное решение для одного сайта. Поэтому нет необходимости делать плагин расширяемым с помощью хуков и тщательно продумывать такие моменты, как пространство имен и перевод. … Читать далее Создание плагина WordPress с нуля

0

8 обязательных элементов потрясающего лендинга

landing page zakaz

По данным WordStream 80% поискового трафика получают только 10% целевых страниц из поисковой выдачи. Чтобы попасть в число счастливчиков, добавьте на свой лендинг эти элементы. 1. Визуальный прием Чтобы привлечь внимание аудитории, используйте интерактивные визуальные эффекты, фоновое видео с автоматическим воспроизведением или нестандартное фото. Интернет-магазин одежды MeUndies приковывает к себе внимание благодаря фотографии, размещенной на целевой странице. … Читать далее 8 обязательных элементов потрясающего лендинга

0
Авторизация
*
*



Регистрация
*
*
*
Генерация пароля