How to use @wordpress/compose - 10 common examples

),
				,
			];
		}
	),
	'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 ) {

Modal.defaultProps = {
	bodyOpenClassName: 'modal-open',
	role: 'dialog',
	title: null,
	focusOnMount: true,
	shouldCloseOnEsc: true,
	shouldCloseOnClickOutside: true,
	isDismissible: true,
	/* accessibility */
	aria: {
		labelledby: null,
		describedby: null,
	},
};

export default withInstanceId( Modal );

function ControlPointButton( {
	isOpen,
	position,
	color,
	onChange,
	gradientIndex,
	gradientAST,
	...additionalProps
} ) {
	const instanceId = useInstanceId( ControlPointButton );
	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
	return (

export default function Token( {
	value,
	status,
	title,
	displayTransform,
	isBorderless = false,
	disabled = false,
	onClickRemove = noop,
	onMouseEnter,
	onMouseLeave,
	messages,
	termPosition,
	termsCount,
} ) {
	const instanceId = useInstanceId( Token );
	const tokenClasses = classnames( 'components-form-token-field__token', {
		'is-error': 'error' === status,
		'is-success': 'success' === status,
		'is-validating': 'validating' === status,
		'is-borderless': isBorderless,
		'is-disabled': disabled,
	} );

	const onClick = () => onClickRemove( { value } );

	const transformedValue = displayTransform( value );
	const termPositionAndCount = sprintf(
		/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
		__( '%1$s (%2$s of %3$s)' ),
		transformedValue,
		termPosition,

export default function BlockManagerShowAll( { checked, onChange } ) {
	const instanceId = useInstanceId( BlockManagerShowAll );
	const id = 'edit-post-manage-blocks-modal__show-all-' + instanceId;

	return (
		<div>
			<label id="">
				{ /* translators: Checkbox toggle label */
				__( 'Show section' ) }
			</label>
			 onChange( event.target.checked ) }
			/&gt;</div>

export default function SelectControl( {
	help,
	label,
	multiple = false,
	onChange,
	options = [],
	className,
	hideLabelFromVision,
	...props
} ) {
	const instanceId = useInstanceId( SelectControl );
	const id = `inspector-select-control-${ instanceId }`;
	const onChangeValue = ( event ) => {
		if ( multiple ) {
			const selectedOptions = [ ...event.target.options ].filter( ( { selected } ) => selected );
			const newValues = selectedOptions.map( ( { value } ) => value );
			onChange( newValues );
			return;
		}
		onChange( event.target.value );
	};

	// Disable reason: A select with an onchange throws a warning

	/* eslint-disable jsx-a11y/no-onchange */
	return ! isEmpty( options ) && (