/ Сайтостроение / Wordpress / Создание своего блока в редакторе Gutenberg

Создание своего блока в редакторе Gutenberg

29.06.2019

75

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

Создаем плагин пользовательского блока

Содержимое основного файла в одноименной папке в директории /plugins/

<?php
/**
 * Plugin Name: Custom Gutenberg Block
 * Author: John Doe
 * Version: 1.0.0
 */
  
function loadMyBlock() {
	wp_enqueue_script(
		'my-new-block',
		plugin_dir_url(__FILE__) . 'test-block.js',
		array('wp-blocks','wp-editor'),
		true
	);
}
   
add_action('enqueue_block_editor_assets', 'loadMyBlock');

В данном коде мы регистрируем новый блок и указываем что его настройки содержаться в файле скрипта test-block.js.

В скрипте используется JavaScript с библиотекой React.

Изучить React более подробно

// В этом разделе кода регистрируется новый блок, устанавливается значок и категория, а также указывается тип полей, которые он будет включать.
  
wp.blocks.registerBlockType('brad/border-box', {
	title: 'Simple Box',
	icon: 'smiley',
	category: 'common',
	attributes: {
		content: {type: 'string'},
		color: {type: 'string'}
	},
  
// Это настраивает, как будут работать поля содержимого и цвета, и устанавливает необходимые элементы
  
	edit: function(props) {
		function updateContent(event) {
			props.setAttributes({content: event.target.value})
		}
		function updateColor(value) {
			props.setAttributes({color: value.hex})
		}
		return React.createElement(
			"div",
			null,
			React.createElement(
				"h3",
				null,
				"Simple Box"
			),
			React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
			React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
		);
	},
	save: function(props) {
		return wp.element.createElement(
			"h3",
			{ style: { border: "3px solid " + props.attributes.color } },
			props.attributes.content
		);
	}
})

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Создание своего блока в редакторе Gutenberg
Сообщения woocommerce
Рекомендации для васСообщения woocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.