/ Сайтостроение / Wordpress / Внедряем метаполя в редактор Gutenberg

Внедряем метаполя в редактор Gutenberg

19.10.2019

61

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

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

Делать это будем в виде плагина. Создадим основной файл плагина с подключением скрипта, стилей, и создания метаполя (plugin-sidebar.php)

<?php

/*
Plugin Name: Site Gutenberg Changes
Description: Плагин изменяющие различные аспекты редактора Gutenberg.
Version: 1.0
Author: Opttour
Author URI: https://opttour.ru/
Plugin URI: 
*/

if ( ! defined( 'ABSPATH' ) ) { exit; }

function sidebar_plugin_register() {
    wp_register_script(
        'plugin-sidebar-js',
        plugins_url( 'plugin-sidebar.js', __FILE__ ),
        array(
            'wp-plugins',
            'wp-edit-post',
            'wp-element',
            'wp-components'
        )
    );
    wp_register_style(
        'plugin-sidebar-css',
        plugins_url( 'plugin-sidebar.css', __FILE__ )
    );
}
add_action( 'init', 'sidebar_plugin_register' );
 
function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );
 
function sidebar_plugin_style_enqueue() {
    wp_enqueue_style( 'plugin-sidebar-css' );
}
add_action( 'enqueue_block_assets', 'sidebar_plugin_style_enqueue' );



// Создание метаполя
register_post_meta( 'post', 'sidebar_plugin_meta_block_field', array(
    'show_in_rest' => true,
    'single' => true,
    'type' => 'string',
) );

Файл скрипта (plugin-sidebar.js), в котором и происходит все действие:

( function( wp ) {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginSidebar = wp.editPost.PluginSidebar;
    var el = wp.element.createElement;
    var Text = wp.components.TextControl;
    var withSelect = wp.data.withSelect;
    var withDispatch = wp.data.withDispatch;
 
 
	
    var mapSelectToProps = function( select ) {
        return {
            metaFieldValue: select( 'core/editor' )
                .getEditedPostAttribute( 'meta' )
                [ 'sidebar_plugin_meta_block_field' ], //идентификатор метаполя
        }
    }
 
 
 
    var mapDispatchToProps = function( dispatch ) {
        return {
            setMetaFieldValue: function( value ) {
                dispatch( 'core/editor' ).editPost(
                    { meta: { sidebar_plugin_meta_block_field: value } }
                );
            }
        }
    }
 
 
	// Вывод поля в боковой панели
    var MetaBlockField = function( props ) {
        return el( Text, {
            label: 'Произвольное поле',
            value: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    }
 
 
    var MetaBlockFieldWithData = withSelect( mapSelectToProps )( MetaBlockField );
    var MetaBlockFieldWithDataAndActions = withDispatch( mapDispatchToProps )( MetaBlockFieldWithData );
 
 
	// Регистрация боковой панели
    registerPlugin( 'my-plugin-sidebar', {
        render: function() {
            return el( PluginSidebar,
                {
                    name: 'my-plugin-sidebar',
                    icon: 'admin-post',
                    title: 'Дополнительные поля',
                },
                el( 'div',
                    { className: 'plugin-sidebar-content' },
                    el( MetaBlockFieldWithDataAndActions )
                )
            );
        }
    } );
	
} )( window.wp );

Файл со стилями (plugin-sidebar.css)

.plugin-sidebar-content {
    padding: 16px;
}

Более универсальный, сокращенный код скрипта (надо понять в чем преимущества):

( function( wp ) {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginSidebar = wp.editPost.PluginSidebar;
    var el = wp.element.createElement;
    var Text = wp.components.TextControl;
    var withSelect = wp.data.withSelect;
    var withDispatch = wp.data.withDispatch;
    var compose = wp.compose.compose;
 
    var MetaBlockField = compose(
        withDispatch( function( dispatch, props ) {
            return {
                setMetaFieldValue: function( value ) {
                    dispatch( 'core/editor' ).editPost(
                        { meta: { [ props.fieldName ]: value } }
                    );
                }
            }
        } ),
        withSelect( function( select, props ) {
            return {
                metaFieldValue: select( 'core/editor' )
                    .getEditedPostAttribute( 'meta' )
                    [ props.fieldName ],
            }
        } )
    )( function( props ) {
        return el( Text, {
            label: 'Meta Block Field',
            value: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    } );
 
    registerPlugin( 'my-plugin-sidebar', {
        render: function() {
            return el( PluginSidebar,
                {
                    name: 'my-plugin-sidebar',
                    icon: 'admin-post',
                    title: 'My plugin sidebar',
                },
                el( 'div',
                    { className: 'plugin-sidebar-content' },
                    el( MetaBlockField,
                        { fieldName: 'sidebar_plugin_meta_block_field' }
                    )
                )
            );
        }
    } );
} )( window.wp );

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Создание своего блока в редакторе Gutenberg

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

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

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

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

Внедряем метаполя в редактор Gutenberg
Интеграция Яндекс.Кассы
Рекомендации для васИнтеграция Яндекс.КассыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.