Gutenberg InnerBlocks передает реквизит или получает информацию

Я только начинаю изучать Гутенберг и особенно InnerBlocks. Чего я пытаюсь добиться, так это формы связи между родительским и внутренним блоками. я бы например люблю отображать, сколько внутренних блоков создано в родительском блоке

//registering Blocks
registerBlockType( 'xxx/outer-block', {
    ...
} );

registerBlockType( 'xxx/inner-block', {
    ...
    parent: [ 'xxx/outer-block' ],
    ...
} );

Из функции редактирования внешнего блока

edit: ( { attributes, setAttributes, className, isSelected } ) => {

  return (
    <div className={ className }>
      <p>There are { innerBlockCount } innerBlocks</p>
      <p>One of the inner blocks is selected: { isInnerBlockSelected }</p>
      <InnerBlocks />
    </div>
  );

Мне удалось получить innerBlockCount с помощью withSelect-функции wordpress следующим образом:

export default compose( [
    withSelect( ( select, ownProps ) => {
        const blocks = select( 'core/editor' ).getBlocksByClientId( ownProps.clientId );
        const innerBlocks = blocks.length ? blocks[ 0 ].innerBlocks : [];
        return {
            innerBlocks: innerBlocks,
            innerBlocks: select( 'core/editor' ).getBlocks( ownProps.clientId ),
            innerBlocksCount: innerBlocks.length,
        };
    } ),
    withNotices,
] )( OuterBlock );

Но мне трудно сообщить внешнему блоку, когда выбран один из внутренних блоков. Моя цель - создать что-то вроде «режима редактирования» моего блока, который автоматически включается, когда блок или один из дочерних блоков активен.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
2
0
3 157
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Рад узнать, что вы уже попробовали и что-то придумали.

Как вы уже знаете, Гутенберг — это редактор на основе React, а в компонентах реакции есть состояния, из-за которых приложение обрабатывает/использует данные, поэтому по логике Гутенберг также должен где-то хранить эти данные, и я рад сообщить вам, что это не только хранит данные, но также предоставляет геттеры и сеттеры. Гутенберг хранит эти данные в своем Модуль данных, который вы уже используете, и вот его справочная страница.

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

Для каждого модуля данных вы можете увидеть все доступные геттеры и сеттеры в консоли вашего браузера, а также протестировать их из консоли. Есть только одно условие, при котором вы должны находиться на экране редактора Гутенберга при использовании консоли.

В консоли напишите следующие методы выбора для получения геттеров и методы отправки для получения сеттеров.

  • wp.data.select('core')
  • wp.data.dispatch('core')
  • wp.data.select('core/blocks')
  • wp.data.dispatch('core/blocks')
  • wp.data.select('core/block-editor')
  • wp.data.dispatch('core/block-editor')

и многое другое, я думаю, вы поняли идею, перейдите на эту справочную страницу и передайте этот модуль в wp.data.select() или wp.data.dispatch(), а затем вы сможете получить или установить данные. Я надеюсь, что это поможет вам решить все ваши текущие проблемы и, возможно, будущие.

Не могли бы вы привести пример установки данных? Например. Атрибут блока. developer.wordpress.org/block-editor/data/…

garmoncheg 14.06.2019 22:37

@garmoncheg Я отредактировал свой ответ, поэтому, пожалуйста, просмотрите его еще раз. Вы можете обновить атрибуты с помощью следующих команд. Итак, в первой команде я получаю blockId, используя selectedBlock, который называется clientId и необходим в методе обновления, но вы можете использовать любой метод из wp.data.select('core/block-editor'), а во второй команде я обновляю атрибуты, используя этот clientId. let clientId = wp.data.select('core/block-editor').getSelectedBlock().clien‌​tId тогда wp.data.dispatch('core/editor').updateBlockAttributes([clien‌​tId], { content: 'content to update' })

Mehmood Ahmad 15.06.2019 06:54

Другие вопросы по теме