import blockAttributes from './attributes';
import classnames from 'classnames';
import sanitizeSVG from '../../utils/sanitize-svg';
import {
RichText,
} from '@wordpress/block-editor';
import {
applyFilters,
} from '@wordpress/hooks';
import { getBlockAttributes } from '../../block-context';
import headlineContext from '../../block-context/headline';
const allAttributes = Object.assign(
{},
getBlockAttributes(
blockAttributes,
headlineContext,
generateBlocksDefaults.headline
),
);
const deprecated = [
// v2 - remove wrapper.
{
attributes: {
...allAttributes,
content: {
type: 'array',
source: 'children',
selector: 'p,h1,h2,h3,h4,h5,h6',
},
},
supports: {
anchor: false,
className: false,
customClassName: false,
},
migrate( attributes ) {
const oldClasses = attributes.cssClasses ? attributes.cssClasses : attributes.className;
const oldAnchor = attributes.elementId ? attributes.elementId : attributes.anchor;
let currentElement = ( attributes.element ? attributes.element : generateBlocksDefaults.headline.element );
if ( attributes.icon && attributes.removeText && 'div' !== currentElement ) {
currentElement = 'div';
}
return {
...attributes,
className: oldClasses,
anchor: oldAnchor,
cssClasses: '',
elementId: '',
element: currentElement,
};
},
save( { attributes } ) {
const {
uniqueId,
elementId,
cssClasses,
element,
content,
icon,
removeText,
ariaLabel,
} = attributes;
const ConditionalWrap = ( { condition, wrap, children } ) => condition ? wrap( children ) : children;
let htmlAttributes = {
id: !! elementId ? elementId : undefined,
className: classnames( {
'gb-headline': true,
[ `gb-headline-${ uniqueId }` ]: true,
[ `${ cssClasses }` ]: '' !== cssClasses,
} ),
};
htmlAttributes = applyFilters( 'generateblocks.frontend.htmlAttributes', htmlAttributes, 'generateblocks/headline', attributes );
return (
<ConditionalWrap
condition={ icon }
wrap={ ( children ) => <div className={ classnames( {
'gb-headline-wrapper': true,
[ `gb-headline-wrapper-${ uniqueId }` ]: true,
} ) }>{ children }</div> }
>
{ icon &&
<span
className="gb-icon"
aria-label={ !! removeText && !! ariaLabel ? ariaLabel : undefined }
dangerouslySetInnerHTML={ { __html: sanitizeSVG( icon ) } }
/>
}
{ ! removeText &&
<RichText.Content
tagName={ element }
value={ content }
{ ...htmlAttributes }
/>
}
</ConditionalWrap>
);
},
},
// v1 - change default h2 to p.
{
attributes: {
...allAttributes,
element: {
type: 'string',
default: 'p',
},
content: {
type: 'array',
source: 'children',
selector: 'p,h1,h2,h3,h4,h5,h6',
},
},
save( { attributes } ) {
const {
uniqueId,
elementId,
cssClasses,
element,
content,
icon,
removeText,
ariaLabel,
} = attributes;
const ConditionalWrap = ( { condition, wrap, children } ) => condition ? wrap( children ) : children;
let htmlAttributes = {
id: !! elementId ? elementId : undefined,
className: classnames( {
'gb-headline': true,
[ `gb-headline-${ uniqueId }` ]: true,
[ `${ cssClasses }` ]: '' !== cssClasses,
} ),
};
htmlAttributes = applyFilters( 'generateblocks.frontend.htmlAttributes', htmlAttributes, 'generateblocks/headline', attributes );
return (
<ConditionalWrap
condition={ icon }
wrap={ ( children ) => <div className={ classnames( {
'gb-headline-wrapper': true,
[ `gb-headline-wrapper-${ uniqueId }` ]: true,
} ) }>{ children }</div> }
>
{ icon &&
<span
className="gb-icon"
aria-label={ !! removeText && !! ariaLabel ? ariaLabel : undefined }
dangerouslySetInnerHTML={ { __html: sanitizeSVG( icon ) } }
/>
}
{ ! removeText &&
<RichText.Content
tagName={ element }
value={ content }
{ ...htmlAttributes }
/>
}
</ConditionalWrap>
);
},
},
];
export default deprecated;