import { ToolbarButton, ToolbarGroup, Dropdown, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { cloneBlock } from '@wordpress/blocks';
import { BlockControls, URLInput, AlignmentToolbar } from '@wordpress/block-editor';
import { useDispatch, useSelect } from '@wordpress/data';
import { link } from '@wordpress/icons';
import { applyFilters } from '@wordpress/hooks';
import isFlexItem from '../../../utils/is-flex-item';
import getAttribute from '../../../utils/get-attribute';
import typographyOptions from '../../../extend/inspector-control/controls/typography/options';
import getDeviceType from '../../../utils/get-device-type';
import getIcon from '../../../utils/get-icon';
export default ( props ) => {
const {
attributes,
clientId,
setAttributes,
setButtonPreviewElement,
} = props;
const { insertBlocks } = useDispatch( 'core/block-editor' );
const {
getBlockParentsByBlockName,
getBlocksByClientId,
} = useSelect( ( select ) => select( 'core/block-editor' ), [] );
const {
url,
target,
relNoFollow,
relSponsored,
useDynamicData,
dynamicLinkType,
display,
displayTablet,
displayMobile,
buttonType,
} = attributes;
const POPOVER_PROPS = {
className: 'block-editor-block-settings-menu__popover',
position: 'bottom right',
};
const deviceType = getDeviceType();
const hasDynamicLink = useDynamicData && dynamicLinkType;
const showAppender = applyFilters( 'generateblocks.editor.showButtonAppender', true, props );
const showButtonLinkControl = applyFilters( 'generateblocks.editor.showButtonLinkControl', 'link' === buttonType, props );
const buttonContainerId = getBlockParentsByBlockName( clientId, 'generateblocks/button-container', true )[ 0 ];
return (
<>
<BlockControls>
<ToolbarGroup>
{ showAppender && buttonContainerId && // Add appender when using our deprecated button-container block.
<ToolbarButton
className="gblocks-add-new-button"
icon={ getIcon( 'add-button' ) }
label={ __( 'Add Button', 'generateblocks' ) }
onClick={ () => {
const thisBlock = getBlocksByClientId( clientId )[ 0 ];
const clonedBlock = cloneBlock(
thisBlock,
{
uniqueId: '',
}
);
insertBlocks( clonedBlock, undefined, buttonContainerId );
} }
showTooltip
/>
}
</ToolbarGroup>
{ ! isFlexItem( { device: deviceType, display, displayTablet, displayMobile } ) &&
<AlignmentToolbar
value={ getAttribute( 'textAlign', { attributes: attributes.typography, deviceType } ) }
onChange={ ( value ) => {
setAttributes( {
typography: {
[ getAttribute( 'textAlign', { attributes: attributes.typography, deviceType }, true ) ]: value,
},
} );
} }
alignmentControls={ typographyOptions.alignments }
/>
}
<ToolbarGroup>
{ ( ! useDynamicData || hasDynamicLink ) && showButtonLinkControl &&
<Dropdown
contentClassName="gblocks-button-link-dropdown"
popoverProps={ POPOVER_PROPS }
onClose={ () => setButtonPreviewElement( url ? 'a' : 'span' ) }
renderToggle={ ( { isOpen, onToggle } ) => (
<ToolbarButton
icon={ link }
label={ ! url ? __( 'Add Link', 'generateblocks' ) : __( 'Change Link', 'generateblocks' ) }
onClick={ onToggle }
aria-expanded={ isOpen }
isPressed={ !! url }
/>
) }
renderContent={ () => (
<>
{ ! useDynamicData &&
<URLInput
className={ 'gblocks-button-link' }
value={ url }
onChange={ ( value ) => {
setAttributes( {
url: value,
hasUrl: !! value,
} );
} }
/>
}
{ !! useDynamicData &&
<div style={ {
width: '300px',
'font-style': 'italic',
'margin-bottom': ( !! dynamicLinkType ? '15px' : '0' ),
} }>
{ __( 'This button is using a dynamic link.', 'generateblocks' ) }
</div>
}
{ applyFilters( 'generateblocks.editor.urlInputMoreOptions', '', attributes ) }
{ ( !! url || hasDynamicLink ) &&
<>
<ToggleControl
label={ __( 'Open link in a new tab', 'generateblocks' ) }
checked={ target || '' }
onChange={ ( value ) => {
setAttributes( {
target: value,
} );
} }
/>
<ToggleControl
label={ __( 'Add rel="nofollow"', 'generateblocks' ) }
checked={ relNoFollow || '' }
onChange={ ( value ) => {
setAttributes( {
relNoFollow: value,
} );
} }
/>
<ToggleControl
label={ __( 'Add rel="sponsored"', 'generateblocks' ) }
checked={ relSponsored || '' }
onChange={ ( value ) => {
setAttributes( {
relSponsored: value,
} );
} }
/>
</>
}
</>
) }
/>
}
</ToolbarGroup>
</BlockControls>
</>
);
};