it-swarm.com.ru

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

Я пытаюсь заблокировать пользовательские столбцы, так как по умолчанию 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>

Спасибо

4
Erik Kubica

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

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

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

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

1
Swopnil Dangol

Прежде всего то, что вы написали в своем вопросе, не является блоком Гутенберга. То, что вы предоставляете для функции 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 не такая большая. Как только вы поймете идею, лежащую в основе этого, вы можете изучить его достаточно, чтобы быть продуктивным через неделю или две.

1
SnnSnn