How to use the @wordpress/blocks.isReusableBlock function in @wordpress/blocks

blocks.hasBlockSupport(BLOCK, 'className');

// $ExpectType boolean
blocks.hasBlockSupport(BLOCK, 'alignWide', true);

// $ExpectType boolean
blocks.hasChildBlocks('core/columns');

// $ExpectType boolean
blocks.hasChildBlocksWithInserterSupport('core/columns');

// $ExpectType boolean
blocks.isReusableBlock(BLOCK);

// $ExpectType boolean
blocks.isReusableBlock(BLOCK_INSTANCE);

// $ExpectType void
blocks.registerBlockStyle('my/foo', { name: 'foo__bar', label: 'Foobar' });

// $ExpectType Block<{}> | undefined
blocks.registerBlockType('my/foo', {
    attributes: {},
    icon: () => null,
    title: 'Foo',
    category: 'common',
});

// $ExpectType Block<{ foo: string; }> | undefined
blocks.registerBlockType<{ foo: string }>('my/foo', {
    attributes: {
        foo: {

blocks.getUnregisteredTypeHandlerName();

// $ExpectType boolean
blocks.hasBlockSupport(BLOCK, 'className');

// $ExpectType boolean
blocks.hasBlockSupport(BLOCK, 'alignWide', true);

// $ExpectType boolean
blocks.hasChildBlocks('core/columns');

// $ExpectType boolean
blocks.hasChildBlocksWithInserterSupport('core/columns');

// $ExpectType boolean
blocks.isReusableBlock(BLOCK);

// $ExpectType boolean
blocks.isReusableBlock(BLOCK_INSTANCE);

// $ExpectType void
blocks.registerBlockStyle('my/foo', { name: 'foo__bar', label: 'Foobar' });

// $ExpectType Block<{}> | undefined
blocks.registerBlockType('my/foo', {
    attributes: {},
    icon: () => null,
    title: 'Foo',
    category: 'common',
});

// $ExpectType Block<{ foo: string; }> | undefined

const { error, dragging } = this.state;

    // Insertion point can only be made visible when the side inserter is
    // not present, and either the block is at the extent of a selection or
    // is the first block in the top-level list rendering.
    const shouldShowInsertionPoint = (isPartOfMultiSelection && isFirst) || ! isPartOfMultiSelection;
    const canShowInBetweenInserter = ! isEmptyDefaultBlock && ! isPreviousBlockADefaultEmptyBlock;

    // Generate the wrapper class names handling the different states of the block.
    const wrapperClassName = classnames('editor-block-list__block', {
      'has-warning': ! isValid || !! error,
      'is-selected': shouldAppearSelected,
      'is-multi-selected': isPartOfMultiSelection,
      'is-selected-parent': shouldAppearSelectedParent,
      'is-hovered': shouldAppearHovered,
      'is-reusable': isReusableBlock(blockType),
      'is-hidden': dragging,
      'is-typing': isTypingWithinBlock,
      'is-focused': isFocusMode && (isSelected || isParentOfSelectedBlock),
      'is-focus-mode': isFocusMode,
    });

    const { onReplace } = this.props;

    // Determine whether the block has props to apply to the wrapper.
    let wrapperProps = this.props.wrapperProps;
    if (blockType.getEditWrapperProps) {
      wrapperProps = {
        ...wrapperProps,
        ...blockType.getEditWrapperProps(block.attributes),
      };
    }

// the extent of a multi-selection, or not in a multi-selection.
	const shouldShowInsertionPoint =
		( isPartOfMultiSelection && isFirstMultiSelected ) ||
		! isPartOfMultiSelection;

	// The wp-block className is important for editor styles.
	// Generate the wrapper class names handling the different states of the block.
	const wrapperClassName = classnames(
		'wp-block editor-block-list__block block-editor-block-list__block',
		{
			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
			'is-selected': shouldAppearSelected,
			'is-navigate-mode': isNavigationMode,
			'is-multi-selected': isPartOfMultiSelection,
			'is-hovered': shouldAppearHovered,
			'is-reusable': isReusableBlock( blockType ),
			'is-dragging': isDragging,
			'is-typing': isTypingWithinBlock,
			'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ),
			'is-focus-mode': isFocusMode,
			'has-child-selected': isParentOfSelectedBlock,
		},
		className
	);

	// Determine whether the block has props to apply to the wrapper.
	if ( blockType.getEditWrapperProps ) {
		wrapperProps = {
			...wrapperProps,
			...blockType.getEditWrapperProps( attributes ),
		};
	}

);

	const shouldRenderDropzone = shouldShowInsertionPoint;
	const isDragging = isDraggingBlocks && ( isSelected || isPartOfMultiSelection );

	// The wp-block className is important for editor styles.
	// Generate the wrapper class names handling the different states of the block.
	const wrapperClassName = classnames(
		'wp-block block-editor-block-list__block',
		{
			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
			'is-selected': shouldAppearSelected,
			'is-navigate-mode': isNavigationMode,
			'is-multi-selected': isMultiSelected,
			'is-hovered': shouldAppearHovered,
			'is-reusable': isReusableBlock( blockType ),
			'is-dragging': isDragging,
			'is-typing': isTypingWithinBlock,
			'is-focused': isFocusMode && ( isSelected || isAncestorOfSelectedBlock ),
			'is-focus-mode': isFocusMode,
			'has-child-selected': isAncestorOfSelectedBlock,
			'has-toolbar-captured': hasAncestorCapturingToolbars,
		},
		className
	);

	// Determine whether the block has props to apply to the wrapper.
	if ( blockType.getEditWrapperProps ) {
		wrapperProps = {
			...wrapperProps,
			...blockType.getEditWrapperProps( attributes ),
		};

<a href="{">
								{ __( 'Manage All Reusable Blocks', 'amp' ) }
							</a>
						
					) }
					{ isEmpty( suggestedItems ) &amp;&amp; isEmpty( reusableItems ) &amp;&amp; isEmpty( itemsPerCategory ) &amp;&amp; (
						<p>
							{ __( 'No blocks found.', 'amp' ) }
						</p>
					) }
				

				{ hoveredItem &amp;&amp; isReusableBlock( hoveredItem ) &amp;&amp;
					
				}
			
		);
		/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
	}
}

withSelect( ( select, { clientIds } ) => {
		const {
			getBlocksByClientId,
			canInsertBlockType,
		} = select( 'core/block-editor' );
		const {
			__experimentalGetReusableBlock: getReusableBlock,
		} = select( 'core/editor' );
		const { canUser } = select( 'core' );

		const blocks = getBlocksByClientId( clientIds );

		const isReusable = (
			blocks.length === 1 &&
			blocks[ 0 ] &&
			isReusableBlock( blocks[ 0 ] ) &&
			!! getReusableBlock( blocks[ 0 ].attributes.ref )
		);

		// Show 'Convert to Regular Block' when selected block is a reusable block
		const isVisible = isReusable || (
			// Hide 'Add to Reusable blocks' when reusable blocks are disabled
			canInsertBlockType( 'core/block' ) &&

			every( blocks, ( block ) => (
				// Guard against the case where a regular block has *just* been converted
				!! block &&

				// Hide 'Add to Reusable blocks' on invalid blocks
				block.isValid &&

				// Hide 'Add to Reusable blocks' when block doesn't support being made reusable

	const associatedBlocks = allBlocks.filter( ( block ) => isReusableBlock( block ) && block.attributes.ref === id );
	const associatedBlockClientIds = associatedBlocks.map( ( block ) => block.clientId );

return action.blocks.reduce( ( prevState, block ) => {
				let id = block.name;
				const insert = { name: block.name };
				if ( isReusableBlock( block ) ) {
					insert.ref = block.attributes.ref;
					id += '/' + block.attributes.ref;
				}

				return {
					...prevState,
					insertUsage: {
						...prevState.insertUsage,
						[ id ]: {
							time: action.time,
							count: prevState.insertUsage[ id ] ? prevState.insertUsage[ id ].count + 1 : 1,
							insert,
						},
					},
				};
			}, state );

return (
										<p>{ __( 'No blocks found.' ) }</p>
									);
								}
								return null;
							} }
						
					
				

				{ showInserterHelpPanel &amp;&amp; (
					<div>
						{ hoveredItem &amp;&amp; (
							&lt;&gt;
								
								{ ( isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ) &amp;&amp; (
									<div>
										<div>
											
										</div>
									</div>
								) }
							
						) }
						{ ! hoveredItem &amp;&amp; (</div>