Фронтенд Фишки

Процессы

WP BOX тема включает в себя заготовки для компиляции кода и подключения зависимостей, настроенные на определенные папки проекта.

	"scripts": {
		"start-tailwind": "npx tailwindcss -i ./styles/src/tailwind.css -o ./styles/dist/tailwind.css --watch=always",
		"lint-js": "npx eslint .",
		"format-js": "npx eslint --fix .",
		"gulp": "gulp",
		"start-components": "webpack --watch --config ./webpack/webpack.components.js",
		"start-gutenberg-variations": "webpack --watch --config ./webpack/webpack.gutenberg-variations.js",
		"start-gutenberg-hooks": "webpack --watch --config ./webpack/webpack.gutenberg-hooks.js",
		"start-gutenberg-scripts": "webpack --watch --config ./webpack/webpack.gutenberg-scripts.js",
		"start-gutenberg": "wp-scripts start --config ./webpack/webpack.gutenberg.js",
		"start-svg": "wp-scripts start --config ./webpack/webpack.global-svg.js",
		"start-imgs": "wp-scripts start --config ./webpack/webpack.global-images.js",
		"start": "npm-run-all --parallel start-tailwind start-gutenberg start-components start-gutenberg-scripts start-gutenberg-hooks start-gutenberg-variations gulp"
	},

Gutenberg Блоки

public static function theme_gutenberg_blocks()
	{
		$blocks_parent_directory = get_template_directory() . '/blocks/';

		// Scan and register blocks from the parent theme directory
		self::register_blocks($blocks_parent_directory, false);

		if (is_child_theme()) {
			$blocks_child_directory = get_stylesheet_directory() . '/blocks/';
			// Scan and register blocks from the child theme directory
			self::register_blocks($blocks_child_directory, true);
		}
	}

Перегрузка Блоков, Вариации и Паттерны

Тема также предлагает еще одно решение для упрощенной и единой реализации перегрузок, вариаций и паттернов. Бэкенд классы ThemeBlocksOverrides, ThemeBlocksVariations и ThemeBlocksPatterns отвечают за поиск и подключение файлов hooks.js и filters.php, расположенных в директориях с именем блоков.

Обратите внимание на скриншот с примером, в котором создана перегрузка блока core/code, который используется на этой странице.

Примеры Блоков в Проекте

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

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

Paragraph: Это стандартный блок ядра, но модифицированный для поддержки размеров и шрифтов, указанных в конфигурации Tailwind. Ненужные настройки отключены. Теперь автор статьи не ошибется при выборе цвета, шрифта и размера, а все параграфы на сайте будут выглядеть в едином стиле.

Queried Object Template: Этот блок можно использовать для изменения отображения каждого элемента в Query (например последних новостей или других элементов). Настройки родительского блока поддерживают flexbox, и вы можете выравнивать и размещать контент по своему усмотрению.

Section Menu: Этот блок автоматически создает динамическое меню из заголовков секции, в которую добавлен. Это меню остается на экране пока пользователь просматривает секцию. Нажатие на ссылки в меню плавно прокручивает экран к соответствующему заголовку в секции. Эта секция содержит такой блок, посмотрите сами!

Кнопка Оплаты: Блок, который можно связать с продуктом, отображает стоимость, валюту и дополнительный текст. Нажатие на кнопку запускает серию скриптов, которые взаимодействуют с серверной кодом. В любом месте, где вы разместите кнопку, она вызывает всплывающее окно для ввода данных клиента, проверяет их и в конечном итоге перенаправляет пользователя в платежную систему.