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

export function addGeneratedClassName( extraProps, blockType ) {
	// Adding the generated className
	if ( hasBlockSupport( blockType, 'className', true ) ) {
		if ( typeof extraProps.className === 'string' ) {
			// We have some extra classes and want to add the default classname
			// We use uniq to prevent duplicate classnames

			extraProps.className = uniq( [
				getBlockDefaultClassName( blockType.name ),
				...extraProps.className.split( ' ' ),
			] ).join( ' ' ).trim();
		} else {
			// There is no string in the className variable,
			// so we just dump the default name in there
			extraProps.className = getBlockDefaultClassName( blockType.name );
		}
	}
	return extraProps;
}

withSelect( ( select, block ) => {
		const multiple = hasBlockSupport( block.name, 'multiple', true );

		// For block types with `multiple` support, there is no "original
		// block" to be found in the content, as the block itself is valid.
		if ( multiple ) {
			return {};
		}

		// Otherwise, only pass `originalBlockClientId` if it refers to a different
		// block from the current one.
		const blocks = select( 'core/editor' ).getBlocks();
		const firstOfSameType = find( blocks, ( { name } ) => block.name === name );
		const isInvalid = firstOfSameType && firstOfSameType.clientId !== block.clientId;
		return {
			originalBlockClientId: isInvalid && firstOfSameType.clientId,
		};
	} ),

export function addAttribute( settings ) {
	// allow blocks to specify their own attribute definition with default values if needed.
	if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {
		return settings;
	}
	if ( hasBlockSupport( settings, 'anchor' ) ) {
		// Use Lodash's assign to gracefully handle if attributes are undefined
		settings.attributes = assign( settings.attributes, {
			anchor: {
				type: 'string',
				source: 'attribute',
				attribute: 'id',
				selector: '*',
			},
		} );
	}

	return settings;
}

( props ) => {
			const { name: blockName } = props;
			// Compute valid alignments without taking into account,
			// if the theme supports wide alignments or not.
			// BlockAlignmentToolbar takes into account the theme support.
			const validAlignments = getValidAlignments(
				getBlockSupport( blockName, 'align' ),
				hasBlockSupport( blockName, 'alignWide', true ),
			);

			const updateAlignment = ( nextAlign ) => {
				if ( ! nextAlign ) {
					const blockType = getBlockType( props.name );
					const blockDefaultAlign = get( blockType, [ 'attributes', 'align', 'default' ] );
					if ( blockDefaultAlign ) {
						nextAlign = '';
					}
				}
				props.setAttributes( { align: nextAlign } );
			};

			return [
				validAlignments.length > 0 && props.isSelected && (

export function addAttribute( settings ) {
	if ( hasBlockSupport( settings, 'anchor' ) ) {
		// Use Lodash's assign to gracefully handle if attributes are undefined
		settings.attributes = assign( settings.attributes, {
			anchor: {
				type: 'string',
				source: 'attribute',
				attribute: 'id',
				selector: '*',
			},
		} );
	}

	return settings;
}

return props => {
		const { name, clientId, attributes, setAttributes, isSelected } = props;

		const { isStackedOnMobile, noBottomMargin, noTopMargin } = attributes;

		const hasStackedControl = hasBlockSupport( name, 'stackedOnMobile' );
		const withBlockSpacing = hasBlockSupport( name, 'coBlocksSpacing' );

		return (
			
				
				{ isSelected && (
					
						{ hasStackedControl && (
							
									setAttributes( { isStackedOnMobile: ! isStackedOnMobile } )
								}
								help={
									!! isStackedOnMobile ?
										__( 'Responsiveness is enabled.', 'coblocks' ) :

return ( props ) => {
		const hasAnchor = hasBlockSupport( props.name, 'anchor' );

		if ( hasAnchor && props.isSelected ) {
			return (
				
					
					
						 {
								nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
								props.setAttributes( {
									anchor: nextValue,
								} );
							} } />

export function addSaveProps( extraProps, blockType, attributes ) {
	if ( hasBlockSupport( blockType, 'anchor' ) ) {
		extraProps.id = attributes.anchor;
	}

	return extraProps;
}

return enhance( ( { select, ...props } ) => {
		let wrapperProps = props.wrapperProps;
		let customData = {};
		const attributes = select( 'core/block-editor' ).getBlock( props.clientId )
			.attributes;
		const blockName = select( 'core/block-editor' ).getBlockName( props.clientId );

		const withBlockSpacing = hasBlockSupport( blockName, 'coBlocksSpacing' );
		let withAlignSupport = hasBlockSupport( blockName, 'align' );

		if ( [ 'core/image' ].includes( blockName ) ) {
			withAlignSupport = true;
		}

		if ( withBlockSpacing ) {
			const { noBottomMargin, noTopMargin } = attributes;

			if ( typeof noTopMargin !== 'undefined' && noTopMargin ) {
				customData = Object.assign( customData, {
					'data-coblocks-top-spacing': 1,
				} );
			}

			if ( typeof noBottomMargin !== 'undefined' && noBottomMargin ) {

return enhance( ( { select, ...props } ) => {
		let wrapperProps = props.wrapperProps;
		let customData = {};
		const attributes = select( 'core/block-editor' ).getBlock( props.clientId )
			.attributes;
		const blockName = select( 'core/block-editor' ).getBlockName( props.clientId );

		const withBlockSpacing = hasBlockSupport( blockName, 'coBlocksSpacing' );
		let withAlignSupport = hasBlockSupport( blockName, 'align' );

		if ( [ 'core/image' ].includes( blockName ) ) {
			withAlignSupport = true;
		}

		if ( withBlockSpacing ) {
			const { noBottomMargin, noTopMargin } = attributes;

			if ( typeof noTopMargin !== 'undefined' && noTopMargin ) {
				customData = Object.assign( customData, {
					'data-coblocks-top-spacing': 1,
				} );
			}

			if ( typeof noBottomMargin !== 'undefined' && noBottomMargin ) {
				customData = Object.assign( customData, {