| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; |
| 3 |
import { RawHTML } from '@wordpress/element'; |
| 4 |
import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components'; |
| 5 |
|
| 6 |
const Edit = ( props ) => { |
| 7 |
const { attributes, setAttributes, context } = props; |
| 8 |
const { tag, isLink, target } = attributes; |
| 9 |
const blockProps = useBlockProps(); |
| 10 |
const { lpCourseData } = context; |
| 11 |
const tagOptions = [ |
| 12 |
{ label: 'span', value: 'span' }, |
| 13 |
{ label: 'div', value: 'div' }, |
| 14 |
{ label: 'h1', value: 'h1' }, |
| 15 |
{ label: 'h2', value: 'h2' }, |
| 16 |
{ label: 'h3', value: 'h3' }, |
| 17 |
{ label: 'h4', value: 'h4' }, |
| 18 |
{ label: 'h5', value: 'h5' }, |
| 19 |
{ label: 'h6', value: 'h6' }, |
| 20 |
]; |
| 21 |
const courseTitle = lpCourseData?.title || __( 'Course Title', 'learnpress' ); |
| 22 |
const TagName = tag; |
| 23 |
return ( |
| 24 |
<> |
| 25 |
<InspectorControls> |
| 26 |
<PanelBody title={ __( 'Settings', 'learnpress' ) }> |
| 27 |
<SelectControl |
| 28 |
label={ __( 'Tag', 'learnpress' ) } |
| 29 |
value={ tag } |
| 30 |
options={ tagOptions } |
| 31 |
onChange={ ( value ) => setAttributes( { tag: value } ) } |
| 32 |
/> |
| 33 |
<ToggleControl |
| 34 |
// Default text of WP so not need text-domain |
| 35 |
label={ __( 'Make the title a link' ) } |
| 36 |
checked={ !! isLink } |
| 37 |
onChange={ ( value ) => { |
| 38 |
props.setAttributes( { |
| 39 |
isLink: value, |
| 40 |
} ); |
| 41 |
} } |
| 42 |
/> |
| 43 |
{ props.attributes.isLink ? ( |
| 44 |
<ToggleControl |
| 45 |
label={ __( 'Open is new tab', 'learnpress' ) } |
| 46 |
checked={ !! target } |
| 47 |
onChange={ ( value ) => { |
| 48 |
props.setAttributes( { |
| 49 |
target: value, |
| 50 |
} ); |
| 51 |
} } |
| 52 |
/> |
| 53 |
) : ( |
| 54 |
'' |
| 55 |
) } |
| 56 |
</PanelBody> |
| 57 |
</InspectorControls> |
| 58 |
|
| 59 |
{ props.attributes.isLink ? ( |
| 60 |
<TagName { ...blockProps }> |
| 61 |
<a |
| 62 |
dangerouslySetInnerHTML={ { |
| 63 |
__html: courseTitle, |
| 64 |
} } |
| 65 |
></a> |
| 66 |
</TagName> |
| 67 |
) : ( |
| 68 |
<TagName |
| 69 |
{ ...blockProps } |
| 70 |
dangerouslySetInnerHTML={ { |
| 71 |
__html: courseTitle, |
| 72 |
} } |
| 73 |
/> |
| 74 |
) } |
| 75 |
</> |
| 76 |
); |
| 77 |
}; |
| 78 |
|
| 79 |
export default Edit; |
| 80 |
|
