import { RichText, useBlockProps } from '@wordpress/block-editor';
import IconWrapper from '../../../components/icon-wrapper';
import { __ } from '@wordpress/i18n';
import Element from '../../../components/element';
import RootElement from '../../../components/root-element';
import classnames from 'classnames';
import { applyFilters, doAction } from '@wordpress/hooks';
export default function ButtonContentRenderer( props ) {
const {
attributes,
setAttributes,
isSelected,
InnerContent = RichText,
context,
name,
buttonRef,
clientId,
buttonPreviewElement,
} = props;
const {
uniqueId,
anchor,
text,
target,
relNoFollow,
relSponsored,
icon,
iconLocation,
removeText,
ariaLabel,
buttonType,
} = attributes;
const relAttributes = [];
if ( relNoFollow ) {
relAttributes.push( 'nofollow' );
}
if ( target ) {
relAttributes.push( 'noopener', 'noreferrer' );
}
if ( relSponsored ) {
relAttributes.push( 'sponsored' );
}
let htmlAttributes = {
className: classnames( {
'gb-button': true,
[ `gb-button-${ uniqueId }` ]: true,
'gb-button-text': ! icon,
} ),
rel: relAttributes && relAttributes.length > 0 && 'link' === buttonType ? relAttributes.join( ' ' ) : null,
'aria-label': !! ariaLabel ? ariaLabel : null,
id: anchor ? anchor : null,
ref: buttonRef,
};
htmlAttributes = applyFilters(
'generateblocks.frontend.htmlAttributes',
htmlAttributes,
'generateblocks/button',
attributes
);
const blockProps = useBlockProps( htmlAttributes );
const richTextFormats = applyFilters(
'generateblocks.editor.buttonDisableFormatting',
false,
props
) ? [] : [ 'core/bold', 'core/italic', 'core/strikethrough' ];
doAction( 'generateblocks.editor.renderBlock', { ...props, ref: buttonRef } );
return (
<RootElement name={ name } clientId={ clientId }>
<Element tagName={ buttonPreviewElement } htmlAttrs={ blockProps }>
<IconWrapper
hasIcon={ !! icon }
icon={ icon }
direction={ iconLocation }
hideChildren={ removeText }
showWrapper={ ! removeText && !! icon }
wrapperClassname={ 'gb-button-text' }
>
<InnerContent
name={ name }
placeholder={ __( 'Add text…', 'generateblocks' ) }
value={ text }
onChange={ ( value ) => setAttributes( { text: value } ) }
allowedFormats={ richTextFormats }
isSelected={ isSelected }
attributes={ attributes }
context={ context }
/>
</IconWrapper>
</Element>
</RootElement>
);
}