Создание пользовательских настроек для пользовательского блока Гутенберга - PullRequest
Новая
       13

Создание пользовательских настроек для пользовательского блока Гутенберга

1 голос
/ 24 мая 2019

Я создал пользовательский блок Гутенберга для социальных ссылок, но мне нужно было бы добавить поля ввода, где пользователь может вставить URL-адрес в этот социальный профиль. Вот где я хотел бы поместить поле (например, там, где в блоке абзаца есть настройки выравнивания):

enter image description here

Это мой код для блока: 

const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;

registerBlockType('social-block/social', {
    title: __('Social'),
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {type: 'string'},
        color: {type: 'string'}
    },
    edit: function (props) {

        return React.createElement(
            "div",
            {style: {
                    display: 'flex',
                    justifyContent: 'center'
                }},

            // facebook
            React.createElement(
                'a',
                {
                    'href': '',
                    'rel': 'noopener noreferrer',
                    'target': '_blank'
                },
                React.createElement(
                    'svg',
                    {
                        'xmlns': "http://www.w3.org/2000/svg",
                        'xmlns:xlink': "http://www.w3.org/1999/xlink",
                        'viewBox': "0 0 24 24",
                        'fill': "currentColor",
                        'width': "48px",
                        'height':"48px"
                    },
                    React.createElement(
                        'path',
                        {
                            'fill-rule': "evenodd",
                            'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
                        }
                    )
                ),
            ),
}
});

Я пытался реализовать https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/, но это не то поведение, которое мне нужно, у кого-нибудь есть предложение, где искать или что делать?

1 Ответ

1 голос
/ 24 мая 2019

Прежде всего, я порекомендую вам использовать синтаксис ES6, поскольку он сделает ваш код намного проще. Для ES6 всякий раз, когда вы видите какой-либо код в документах WordPress, вы можете выбрать вкладку ESNEXT в верхней части фрагмента, которая затем покажет вам код ES6.

Теперь ваш ответ. Гутенберг предоставляет нам два вида элементов управления BlockControl и InspectorControl, оба из которых предоставляют вам способ манипулировать вашим блоком, но разница в том, что BlockControl - это панель инструментов, которая появляется в верхней части блока (это та же ссылка, которую вы поделили ) в то время как InspectorControls служит опцией настройки боковой панели, то, что вы хотели сделать. Вот фактическая документация инспекторских органов управления , а вот один рабочий пример из блока изображений ядра Гутенберга.

...