Блок Wordpress Gutenberg - JQuery сгенерированный контент не сохраняется - PullRequest
Новая
       11

Блок Wordpress Gutenberg - JQuery сгенерированный контент не сохраняется

0 голосов
/ 21 февраля 2019

Я новичок в блоках Wordpress Gutenberg.Я создал плагин галереи и хочу, чтобы пользователь мог вставлять шорткод галереи, просто выбирая нужную галерею из всплывающего окна.Я использую функцию jQuery text () для успешного ввода коротких кодов из всплывающего окна, но содержимое не будет сохранено.Однако, когда я набираю какой-то текст, все работает нормально.

Вот мой Gutenberg js: 

var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
RichText = wp.editor.RichText,
blockStyle = { backgroundColor: '#0000cc', color: '#fff', padding: '1%', margin: '1%', border: 'none', boxShadow: '5px 5px 5px #000', cursor: 'pointer' };

registerBlockType( 'prtxgal/block', {
    title: 'Protex gallery',

    icon: 'images-alt',

    category: 'common',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'div',
        }
    },

    edit: function(props) {
        var content = props.attributes.content;

        function onChangeContent( newContent ) {
            props.setAttributes( { content: newContent } );
        }

        return[ el(
            'button', { className: 'button add_prtxgal', /*style: blockStyle*/}, 'Choose gallery'
            ),
            el (RichText,
            {
                tagName: 'div',
                className: props.className,
                onChange: onChangeContent,
                value: content,
            }
            ),
        ];
    },

    save: function(props) {
        var content = props.attributes.content;

        return el( RichText.Content, {
            tagName: 'div',
            className: props.className,
            value: content
        });
    },
});

1 Ответ

0 голосов
/ 22 февраля 2019

Сочетание jQuery и внешних интерфейсов, таких как React.js (в действительности это библиотека, а не среда) и Angular, не считается хорошей комбинацией, поэтому рекомендуется не использовать ее.

Причина

Фронтенд-фреймворки поддерживают состояние каждого компонента, и если мы изменим этот компонент с помощью jQuery или путем доступа к узлам с помощью JS, то эти состояния не будут обновлены в фреймворке.Для обновления состояний фреймворк предоставляет свои собственные методы в React, метод - setState(obj), в то время как в Гутенберге метод - setAttributes(obj), который фактически является оберткой вокруг React.js setState().

Предложение

Вот несколько советов, как я предлагаю вам сделать этот компонент (учитывая, что это не блок на стороне сервера).

  1. Я буду использовать JSX вместо ES5 синтаксиса JavaScript.Документы WordPress по умолчанию показывают пример кода ES5, но есть вкладка, чтобы изменить его на JSX.
  2. Я покажу кнопку Добавить элемент, которая добавляет новый элемент галереи.Реализация этой кнопки может быть такой же, как у блока core/gallery (присутствует внизу при выборе более одного изображения).
  3. Нажатие на этот элемент Add добавит новый объект в мой attributes, который также появитсяна веб-интерфейсе и из веб-интерфейса я добавляю значения в этот новый блок.Компонент Gutenberg <RichText/> очень полезен для манипулирования текстовым содержимым.
  4. Обновление вашего состояния onChange событие <RichText/>.
  5. Аналогичным образом могут быть реализованы функции обновления и удаления.
  6. Нажав на обновление, вы получите весь новый контент и сохраните его.

Примечание:

Для лучшего понимания экосистемы Гутенберга я рекомендую вам ознакомиться со следующими вещами:

  • Синтаксис ES6 также известен как ES2015.
  • React.js. Документация React очень хороший ресурс для этого.
  • Redux не полностью, а простокак обновить объект, используя логику чистых функций (чистые функции - это функции, которые не меняют ввод). Некоторые примеры из Redux Docs
  • В конце взгляните на реализации базовых блоков , представленных в Гутенберге.Начинается с простого первого, например, абзаца, цитаты, списка и т. Д.
  • Всегда обновлять состояние, используя setState() или setAttributes(), а не напрямую, путем доступа к this.props.attributes или this.props.state

Бонус

  • Вы можете получить данные в ComponentDidMount жизненном цикле React.js и затем обновить состояния.Данные можно получить через любой API или даже WordPress REST API.
...