parent-rerender-delay.js

const { registerBlockType } = wp.blocks;
const { InnerBlocks, Inserter } = wp.blockEditor;
const { Button } = wp.components;
const { Fragment } = wp.element;
const { withSelect } = wp.data;

const allowed = ['test/test-inner-container'];

const template = [['test/test-inner-container']];

registerBlockType('test/test-inner-container', {
	title: 'Test Inner Container',
	icon: 'editor-table',
	parent: ['test/test-container'],
	edit: withSelect((select) => {
		const { hasSelectedInnerBlock, getSelectedBlockClientId } = select('core/block-editor');
		return { hasSelectedInnerBlock, selectedBlock: getSelectedBlockClientId() };
	})(({ className, hasSelectedInnerBlock, clientId }) => {
		return (
			<div className={className} style={{ border: '1px solid #555', padding: '10px' }}>
				<p>{clientId}</p>
				{hasSelectedInnerBlock(clientId, true) ? (
					<p>
						<strong>Inner block selected!</strong>
					</p>
				) : null}
				<InnerBlocks />
			</div>
		);
	}),
	save: () => {
		return null;
	},
});

registerBlockType('test/test-container', {
	title: 'Test Block',
	icon: 'editor-table',
	edit: withSelect((select, { clientId }) => {
		const { getBlock } = select('core/block-editor');

		return {
			block: getBlock(clientId),
		};
	})(({ className, clientId, block }) => {
		let blockOrder = 'Order \n';

		if (block.innerBlocks && block.innerBlocks.length) {
			block.innerBlocks.forEach((ib, index) => { // eslint-disable-line
				blockOrder += `${ib.clientId} -> ${index}\n`;
			});
		}

		console.log(blockOrder);
		return (
			<div
				className={className}
				style={{ border: '1px solid #ff0000', padding: '10px', display: 'flex' }}
			>
				<InnerBlocks
					allowedBlocks={allowed}
					template={template}
					renderAppender={() => {
						return <Inserter isAppender rootClientId={clientId} />;
					}}
				/>
			</div>
		);
	}),
	save: () => {
		return null;
	},
});