Как можно передать значение из TextControl в InnerBlocks?

Всем привет.
Интересует решение такой задачи: есть 3 блока
блок 1 -> блок 2 (родитель блок 1) -> блок 3 (родитель блок 2)
в главном блоке (блоке 1), есть настройка поля TextControl в котором происходит выбор количества колонок на фронте.
6069ef774022b856670727.png
Вопрос заключается вот в чем: как можно передать значение из TextControl в блоке 1 в блок 3?

Блок 1:
export const { registerBlockType } = wp.blocks
export const { __ } = wp.i18n
export const { TextControl } = wp.components

export const {
    InspectorControls,
    InnerBlocks,
} = wp.editor

export const ALLOWED_BLOCKS = [ 'create-block/block-2' ];

export const getBlocksTemplate = [
    [ 'create-block/block-2' ]
];

export const edit = ( props ) => {
    const {
        isSelected,
        setAttributes,
    } = props

    const {
        blockcolumns,
    } = props.attributes

    return [
        <div className={'custom-block'}>
            <wp.editor.InnerBlocks
                template={ getBlocksTemplate( ) }
                templateLock="all"
                allowedBlocks={ ALLOWED_BLOCKS } />
            {
                isSelected &&
                <InspectorControls key='inspector'>
                    <TextControl
                        label={ __( 'Count of columns' ) }
                        value={ blockcolumns }
                        type='number'
                        min={'2'}
                        max={'3'}
                        onChange={(value) => { setAttributes({ blockcolumns: parseInt(value) }); }}
                    />
                </InspectorControls>
            }
        </div>
    ];
}

export const save = ( props ) => {
    return (
        <div>
            <InnerBlocks.Content />
        </div>
    );
}

registerBlockType( 'create-block/block-1', {
    title: __( 'Block 1'),
    icon: 'admin-tools',
    category: 'media',
    attributes: {
        blockcolumns: {
            type: 'number',
            default: 2,
        }
    },
    edit: edit,
    save: save,
} )


Блок 2:
export const { registerBlockType } = wp.blocks
export const { __ } = wp.i18n

export const {
    InnerBlocks
} = wp.editor

export const ALLOWED_BLOCKS = [ 'create-block/block-3' ];

export const edit = ( props ) => {
    return [
        <div>
            <InnerBlocks templateLock="all" allowedBlocks={ ALLOWED_BLOCKS } />
        </div>
    ];
}

export const save = ( props ) => {
    return (
        <ul>
            <InnerBlocks.Content />
        </ul>
    );
}

registerBlockType( 'create-block/block-2', {
    title: __( 'Block 2' ),
    icon: 'list-view',
    category: 'media',
    parent: ['create-block/block-1'],
    edit: edit,
    save: save,
} )


Блок 3:
export const { registerBlockType } = wp.blocks
export const { __ } = wp.i18n

export const {
    RichText
} = wp.editor.InspectorControls ? wp.editor : wp.blocks

export const edit = ( props ) => {
    const {
        list_block_3
    } = props.attributes;

    const {
        setAttributes,
    } = props;

    return [
        <div>
            <RichText
                tagName="p"
                value={ list_block_3 }
                onChange={ ( value ) => {
                    setAttributes( { list_block_3: value } );
                } }
                className={'p'}
            />
        </div>
    ];
}

export const save = ( props ) => {
    const {
        list_block_3
    } = props.attributes;

    return (
        <li>
            <RichText.Content
                tagName="p"
                value={ list_block_3 }
            />
        />
        </li>
    );
}

registerBlockType( 'create-block/media-3', {
    title: __( 'Block 3' ),
    icon: 'format-aside',
    category: 'media',
    parent: ['create-block/block-2'],
    attributes: {
        list_block_3: {
            type: 'string',
            selector: 'list_block_3',
        }
    },
    edit: edit,
    save: save,
} )
  • Вопрос задан
  • 23 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы