/**
* External dependencies
*/
import { isEmpty } from 'lodash'
/**
* WordPress dependencies
*/
import { RichText, useBlockProps } from '@wordpress/block-editor'
/**
* Save block for display on front
*
* @param {Object} props This component's props.
*/
export default ( props ) => {
const { steps, titleWrapper } = props.attributes
if ( isEmpty( steps ) ) {
return null
}
return (
<div { ...useBlockProps.save() }>
{ steps.map( ( step, index ) => {
if ( false === step.visible ) {
return null
}
return (
<div className="rank-math-howto-step" key={ index }>
{ step.title && (
<RichText.Content
tagName={ titleWrapper }
value={ step.title }
className="rank-math-howto-title"
/>
) }
{ step.content && (
<RichText.Content
tagName="div"
value={ step.content }
className="rank-math-howto-content"
/>
) }
</div>
)
} ) }
</div>
)
}