@gechiui/block-editor/src/components/ungroup-button/index.native.js

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { store as blocksStore } from '@gechiui/blocks';
import { ToolbarGroup, ToolbarButton } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { withSelect, withDispatch } from '@gechiui/data';
import { compose } from '@gechiui/compose';

/**
 * Internal dependencies
 */
import UngroupIcon from './icon';
import { store as blockEditorStore } from '../../store';

export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
	if ( ! isUngroupable ) {
		return null;
	}
	return (
		<ToolbarGroup>
			<ToolbarButton
				title={ __( 'Ungroup' ) }
				icon={ UngroupIcon }
				onClick={ onConvertFromGroup }
			/>
		</ToolbarGroup>
	);
}

export default compose( [
	withSelect( ( select ) => {
		const { getSelectedBlockClientId, getBlock } = select(
			blockEditorStore
		);

		const { getGroupingBlockName } = select( blocksStore );

		const selectedId = getSelectedBlockClientId();
		const selectedBlock = getBlock( selectedId );

		const groupingBlockName = getGroupingBlockName();

		const isUngroupable =
			selectedBlock &&
			selectedBlock.innerBlocks &&
			!! selectedBlock.innerBlocks.length &&
			selectedBlock.name === groupingBlockName;
		const innerBlocks = isUngroupable ? selectedBlock.innerBlocks : [];

		return {
			isUngroupable,
			clientId: selectedId,
			innerBlocks,
		};
	} ),
	withDispatch( ( dispatch, { clientId, innerBlocks, onToggle = noop } ) => {
		const { replaceBlocks } = dispatch( blockEditorStore );

		return {
			onConvertFromGroup() {
				if ( ! innerBlocks.length ) {
					return;
				}

				replaceBlocks( clientId, innerBlocks );

				onToggle();
			},
		};
	} ),
] )( UngroupButton );