How to use the @wordpress/compose.createHigherOrderComponent function in @wordpress/compose

),
				,
			];
		}
	),
	'withToolbarControls'
);

/**
 * Override the default block element to add alignment wrapper props.
 *
 * @param  {Function} BlockListBlock Original component
 * @return {Function}                Wrapped component
 */
export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => {
	const { name, attributes } = props;
	const { align } = attributes;
	const hasWideEnabled = useSelect( ( select ) => (
		!! select( 'core/block-editor' ).getSettings().alignWide
	) );

	// If an alignment is not assigned, there's no need to go through the
	// effort to validate or assign its value.
	if ( align === undefined ) {
		return ;
	}

	const validAlignments = getValidAlignments(
		getBlockSupport( name, 'align' ),
		hasBlockSupport( name, 'alignWide', true ),
		hasWideEnabled

import { createBlock } from '@wordpress/blocks';

/**
 * External dependencies
 */
import { every } from 'lodash';

/**
 * Internal dependencies
 */
import { ALLOWED_CHILD_BLOCKS } from '../constants';
import { withParentBlock } from './';

const positionTopLimit = 75;

export default createHigherOrderComponent(
	( BlockEdit ) => {
		return withParentBlock( ( props ) => {
			const { attributes, name, parentBlock } = props;

			if ( -1 === ALLOWED_CHILD_BLOCKS.indexOf( name ) || ! parentBlock || 'amp/amp-story-page' !== parentBlock.name ) {
				return ;
			}

			// If the positions are already set or the block is not selected, just return original.
			if (
				! props.isSelected ||
				0 !== attributes.positionTop ||
				0 !== attributes.positionLeft ||
				! parentBlock.innerBlocks.length
			) {
				return ;

const withContentAlignReseter = ( attributeNamesToReset = [] ) => createHigherOrderComponent(
	WrappedComponent => class extends Component {
		static defaultProps = {
			attributes: {},
			blockName: '',
		}

		componentDidMount() {
			const { blockName } = this.props

			// Go through each screen then reset attibutes if needed.
			addFilter( `stackable.${ blockName }.setAttributes`, `stackable/${ blockName }/contentAlign`, attributes => {
				const screens = [ '', 'Tablet', 'Mobile' ]
				const resetAlignments = applyFilters( 'stackable.with-content-align-reseter.attributeNamesToReset', attributeNamesToReset, blockName )

				screens.forEach( screen => {
					if ( typeof attributes[ getAttrName( '%sContentAlign', screen ) ] !== 'undefined' ) {

const allowedBlocks = [ 'core/list', 'core/quote' ];
	// Use Lodash's assign to gracefully handle if attributes are undefined
	if ( allowedBlocks.includes( settings.name ) ) {
		settings.attributes = Object.assign( settings.attributes, ColorSettingsAttributes );
	}

	return settings;
}

/**
 * Override the default edit UI to include a new block inspector control
 *
 * @param {function|Component} BlockEdit Original component.
 * @return {string} Wrapped component.
 */
const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		const allowedBlocks = [ 'core/list', 'core/quote' ];
		return (
			
				
				{ props.isSelected && allowedBlocks.includes( props.name ) &&  }
			
		);
	};
}, 'withInspectorControl' );

addFilter(
	'blocks.registerBlockType',
	'coblocks/colors/attributes',
	addAttributes
);

type: 'string',
			},
		} );
	}

	return settings;
}

/**
 * Override the default edit UI to include new toolbar controls for block
 * alignment, if block defines support.
 *
 * @param  {Function} BlockEdit Original component
 * @return {Function}           Wrapped component
 */
export const withToolbarControls = createHigherOrderComponent(
	( BlockEdit ) => (
		( 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 ) {

* External imports
 */
import { withSelect } from '@wordpress/data';
import { createHigherOrderComponent } from '@wordpress/compose';
import { isModelEntityOfModel } from '@eventespresso/validators';

const DEFAULT_OBJECT = {
	ticketEntities: [],
};

/**
 * A Hoc exposing ticket entities related to the provided DateTimeEntity.
 *
 * @return {function} A higher order component.
 */
const withEditorDateTicketEntities = createHigherOrderComponent(
	withSelect(
		( select, { dateEntity } ) => {
			const { getRelatedEntities } = select( 'eventespresso/core' );
			if ( isModelEntityOfModel( dateEntity, 'datetime' ) ) {
				const ticketEntities = getRelatedEntities(
					dateEntity,
					'ticket'
				);
				return { ticketEntities };
			}
			return DEFAULT_OBJECT;
		}
	),
	'withEditorDateTicketEntities'
);

const ifViewportMatches = ( query ) => createHigherOrderComponent(
	compose( [
		withViewportMatch( {
			isViewportMatch: query,
		} ),
		ifCondition( ( props ) => props.isViewportMatch ),
	] ),
	'ifViewportMatches'
);

{ ...mapContextToProps( context, props ) }
				/>
			) }
		
	);
}, 'withBlockEditContext' );

/**
 * A Higher Order Component used to render conditionally the wrapped
 * component only when the BlockEdit has selected state set.
 *
 * @param {Component} OriginalComponent Component to wrap.
 *
 * @return {Component} Component which renders only when the BlockEdit is selected.
 */
export const ifBlockEditSelected = createHigherOrderComponent( ( OriginalComponent ) => {
	return ( props ) => (
		
			{ ( { isSelected } ) => isSelected && (
				
			) }
		
	);
}, 'ifBlockEditSelected' );

export default ( paginationConfig = {} ) => createHigherOrderComponent(
	compose( [
		withInstanceId,
		( EntityList ) => ( props ) => {
			return ;
		},
	] ),
	'withEntityPagination'
);

const withTabbedInspector = ( tabs = null ) => createHigherOrderComponent(
	WrappedComponent => class extends Component {
		static defaultProps = {
			attributes: {},
			blockName: '',
		}

		render() {
			const { blockName } = this.props
			const blockStyleControls = applyFilters( `stackable.${ blockName }.edit.inspector.style.block`, null, this.props )

			return (
				
					{ applyFilters( `stackable.${ blockName }.edit.inspector.before`, null, this.props ) }