Всем привет.
Интересует решение такой задачи: есть 3 блока
блок 1 -> блок 2 (родитель блок 1) -> блок 3 (родитель блок 2)
в главном блоке (блоке 1), есть настройка поля TextControl в котором происходит выбор количества колонок на фронте.
Вопрос заключается вот в чем: как можно передать значение из 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,
} )