Гутенберг InnerBlocks передать реквизит или получить информацию - PullRequest
Новая
       21

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

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

Я только вхожу в Гутенберг и особенно в 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 с функцией wordpress withSelect следующим образом: 

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 );

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

1 Ответ

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

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

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

...