Подключение CSS и JS в зависимости от используемых блоков в контенте

Цель этого поста – показать вам одну из встроенных функций в WordPress 5.0+, позволяющую вам делать разное, в зависимости от того, есть ли определённые блоки Gutenberg в контенте поста или страницы или нет.

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

Как определить, задействован ли блок Gutenberg на странице?

Мы будем это проверять функцией has_block(), которая кстати мне очень помогла, когда я только-только переносил все свои сайты на Gutenberg.

У функции два параметра:

  • $block_type – название блока, которое может содержать только латинские буквы в нижнем регистре, цифры и слэши и начинаться с буквы.
  • $post – ID или объект поста, либо по умолчанию будет использоваться текущий пост.

Совсем лёгкий пример ниже:

if ( has_block( 'gallery' ) ) {
	// делаем что-либо, если блок галереи используется в контенте текущего поста
}

А теперь подключаем стили и скрипты в зависимости от используемых блоков

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

И тут вам приходит на помощь этот код:

add_action( 'wp_enqueue_scripts', 'truemisha_block_frontend_scripts' );
 
function truemisha_block_frontend_scripts() {
 
	// блок не используется? ничего не делаем
	if ( ! has_block( 'truemisha/cool-block' ) ) {
		return;
	}
 
	wp_enqueue_script(
		'truemisha-cool-block-js',
		plugins_url( 'dist/truemisha-cool-block.js', __FILE__ ),
		array( 'jquery' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'dist/truemisha-cool-block.js' )
	);
 
}

Пару моментов по коду:

Миша

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

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