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

Гутенберг - несколько внутренних блоков в одном типе блока

0 голосов
/ 28 июня 2018

Я пытаюсь сделать пользовательский столбец блоком, так как используемый по умолчанию wordpress, используемый Гутенбергом, - не то, что мне нужно.

Итак, я посмотрел, как это работает, он использует блок InnerBlocks с определением макета, но нет способа указать тег html и класс для столбцов, так что это бесполезно для меня.

Затем я решил зациклить столбцы, используя карту, которая работает нормально, затем я добавил в каждый столбец компонент InnerBlocks, чтобы разрешить вставку других блоков в столбец, но проблема в том, что в каждом столбце разделяется содержимое InnerBlocks. , поэтому я попытался установить свойство ключа для каждого InnerBlock и столбца, чтобы быть уникальным, и их содержание по-прежнему является общим (нет, я не использую общий блок).

Похоже, Гутенберг использует один и тот же экземпляр InnerBlocks в каждом столбце.

Я пытаюсь создать тип блока, в котором вы можете динамически добавлять столбцы и в каждый столбец добавлять «карточки» с некоторой информацией.

Чтобы дать некоторое представление о том, что я делаю, вот возвращение функции редактирования: 

<section className="infonav">
            <div className="infonav__container">
                <div>
                    <button onClick={onAddBox}>{__('Add column', 'zmg-blocks')}</button>
                </div>
                <div className="infonav__row">
                    {[...new Array(columns).keys()].map((item, index) => {
                        return (
                                <div className="infonav__row__col" key={"info_cols"+index}>
                                    <div>
                                        <button onClick={onRemoveBox.bind(index)}>
                                            {__('Remove', 'zmg-blocks')}
                                        </button>
                                    </div>
                                    <InnerBlocks key={"info_boxes"+index}/>
                                </div>
                        );
                    })}
                </div>
            </div>
        </section>

Спасибо

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Прежде всего то, что вы написали в своем вопросе, не является блоком Гутенберга. То, что вы предоставляете для функции registerBlockType, не является блоком. Гутенберг блокирует изящный шорткод, что-то вроде этого: 

<!-- wp:image -->
<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
<!-- /wp:image -->

Или это: 

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

Первый называется статическим блоком, потому что в нем есть содержимое. Второй называется динамическим блоком, потому что он самозакрывающийся и не имеет содержимого. Контент будет извлечен из обратного вызова php, который вы указали при регистрации вашего блока.

Гутенберг использует React для вывода визуального представления блока на экран редактора. Метод edit объекта настроек должен возвращать реагирующий элемент, этот элемент будет использоваться для создания визуального представления блока в редакторе. Метод save также должен возвращать реагирующий элемент, но этот элемент будет преобразован в статический html и сохранен в базе данных: <figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>. Теперь у динамических блоков нет возвращаемого элемента, поскольку они возвращают ноль, поэтому в них нет содержимого, поэтому они закрываются самостоятельно. Когда сервер отвечает на запрос, он получает блок, хранящийся в базе данных, и проверяет, является ли блок статическим или динамическим. Если оно статическое, оно имеет свое содержимое, так что содержимое будет возвращено. Если он динамический, будет вызвана зарегистрированная функция обратного вызова и будет возвращено ее возвращаемое значение.

Теперь, чтобы ответить на ваш вопрос, функции сохранения и редактирования должны возвращать реагирующий элемент. Реактивный элемент должен иметь один корневой элемент, но внутренними элементами может быть любой обычный html, подобный этому: 

<div>
  <h1>Hello world</h1>
  <p>This is a sentence</p>
</div>

Это по причинам производительности. Операции DOM стоят дорого, поэтому он имеет единую точку входа в DOM. Вот почему это очень быстро. Затем он имеет свой собственный DOM, целое дерево находится в памяти. React будет проходить через дерево DOM, когда произойдет изменение, и отобразит только измененную ветвь, не будет рисовать все дерево при каждом небольшом изменении.

Важная деталь: приведенный выше код выглядит как HTML, но это не так, это jsx. React не может визуализировать HTML напрямую. Jsx будет перенесен в реактивный элемент транспортером, подобным babel.

В React также есть метод createElement, который можно использовать для создания элемента реагирования. wp реэкспортирует этот метод.

Вы можете визуализировать один реагирующий элемент в другом. Без обучения реакции вы никогда не сможете полностью понять всю мощь или потенциал блоков. Библиотека React не такая большая. Когда вы поймете идею, лежащую в ее основе, вы сможете изучить ее достаточно, чтобы продуктивно работать через неделю или две.

0 голосов
/ 12 января 2019

Похоже, что внутренние блоки Гутенберга могут использоваться только один раз в блоке

Примечание. Блок может отображать не более одного элемента InnerBlocks и InnerBlocks.Content при редактировании и сохранении соответственно. Чтобы создать отдельные расположения вложенных блоков, создайте отдельный тип блока, который отображает свои собственные InnerBlocks, и назначьте в качестве единственного типа разрешенного блока.

Источник: https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/inner-blocks

Вам необходимо создать еще один пользовательский блок (только для столбца) вместе с этим блоком, который также использует внутри него Innerblock, чтобы другие блоки могли быть вложены внутрь. Вы можете использовать allowBlocks, чтобы разрешить только ваш пользовательский столбец в этом блоке

...