import getIcon from '../../utils/get-icon'; /** * WordPress Dependencies */ import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import { Fragment } from '@wordpress/element'; import { BlockControls } from '@wordpress/block-editor'; import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { createHigherOrderComponent } from '@wordpress/compose'; import { cloneBlock } from '@wordpress/blocks'; import { useDispatch, useSelect } from '@wordpress/data'; /** * Add controls to the Container block toolbar. * * @param {Function} BlockEdit Block edit component. * @return {Function} BlockEdit Modified block edit component. */ const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { if ( 'generateblocks/container' !== props.name ) { return <BlockEdit { ...props } />; } const { insertBlocks } = useDispatch( 'core/block-editor' ); const { getBlockParentsByBlockName, getBlockRootClientId, getBlocksByClientId, } = useSelect( ( select ) => select( 'core/block-editor' ), [] ); const { attributes, clientId, } = props; const { isGrid, isQueryLoopItem, } = attributes; let parentGridId = false; if ( typeof getBlockParentsByBlockName === 'function' ) { parentGridId = getBlockParentsByBlockName( clientId, 'generateblocks/grid', true )[ 0 ]; } else { parentGridId = getBlockRootClientId( clientId ); } return ( <Fragment> { ! isQueryLoopItem && isGrid && parentGridId && <BlockControls> <ToolbarGroup> <ToolbarButton className="gblocks-block-control-icon gblocks-add-grid-item" icon={ getIcon( 'addContainer' ) } label={ __( 'Duplicate Grid Item', 'generateblocks' ) } onClick={ () => { const thisBlock = getBlocksByClientId( clientId )[ 0 ]; const clonedBlock = cloneBlock( thisBlock, { uniqueId: '', } ); insertBlocks( clonedBlock, undefined, parentGridId ); } } showTooltip /> </ToolbarGroup> </BlockControls> } <BlockEdit { ...props } /> </Fragment> ); }, 'withBlockControls' ); addFilter( 'editor.BlockEdit', 'generateblocks/container-block-controls', withBlockControls );