119 lines
4.4 KiB
JavaScript
119 lines
4.4 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
||
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
|
||
import { SelectControl, FontSizePicker, TextControl } from '@wordpress/components';
|
||
import { useState, useEffect } from 'react';
|
||
import './editor.scss';
|
||
|
||
export default function Edit( { attributes, setAttributes } ) {
|
||
const { heading, pointsFontSizeLarge, headingFontSizeLarge, listStyleType } = attributes;
|
||
|
||
const fontSizes = [
|
||
{
|
||
name: __( 'Small', 'key-points' ),
|
||
slug: 'small',
|
||
size: '12px',
|
||
},
|
||
{
|
||
name: __( 'Medium', 'key-points' ),
|
||
slug: 'medium',
|
||
size: '16px',
|
||
},
|
||
{
|
||
name: __( 'Large', 'key-points' ),
|
||
slug: 'large',
|
||
size: '24px',
|
||
},
|
||
{
|
||
name: __( 'Extra Large', 'key-points' ),
|
||
slug: 'x-large',
|
||
size: '36px',
|
||
},
|
||
];
|
||
|
||
const listStyleTypeOptions = [
|
||
{ label: __( 'Disc', 'lcp' ), value: 'disc' },
|
||
{ label: __( 'Circle', 'lcp' ), value: 'circle' },
|
||
{ label: __( 'Square', 'lcp' ), value: 'square' },
|
||
{ label: __( 'None', 'lcp' ), value: 'none' },
|
||
];
|
||
|
||
// Static Lorem Ipsum key points (5 unique points)
|
||
const loremIpsumPoints = [
|
||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||
"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
||
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
|
||
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
||
];
|
||
|
||
const [keyPoints, setKeyPoints] = useState(loremIpsumPoints); // Set initial key points to the Lorem Ipsum array
|
||
|
||
return (
|
||
<>
|
||
{/* Inspector Controls */}
|
||
<InspectorControls>
|
||
{/* List Style Dropdown */}
|
||
<SelectControl
|
||
label={ __( 'List Style', 'lcp' ) }
|
||
value={ listStyleType }
|
||
options={ listStyleTypeOptions }
|
||
onChange={ ( newValue ) => {
|
||
setAttributes( { listStyleType: newValue } );
|
||
} }
|
||
/>
|
||
|
||
{/* Heading Input */}
|
||
<TextControl
|
||
label={ __( 'Heading', 'lcp' ) }
|
||
value={ heading || '' }
|
||
onChange={ ( newHeading ) => setAttributes( { heading: newHeading } ) }
|
||
/>
|
||
|
||
{/* Font Size Picker for Points */}
|
||
<FontSizePicker
|
||
fontSizes={ fontSizes }
|
||
units={ ['px', 'em', 'rem', 'vw', 'vh'] }
|
||
value={ pointsFontSizeLarge }
|
||
onChange={ ( newFontSize ) => {
|
||
if ( typeof newFontSize === 'string' ) {
|
||
setAttributes( { pointsFontSizeLarge: newFontSize } );
|
||
}
|
||
} }
|
||
fallbackFontSize={ '16px' }
|
||
/>
|
||
|
||
{/* Font Size Picker for Heading */}
|
||
<FontSizePicker
|
||
fontSizes={ fontSizes }
|
||
units={ ['px', 'em', 'rem', 'vw', 'vh'] }
|
||
value={ headingFontSizeLarge }
|
||
onChange={ ( newFontSize ) => {
|
||
if ( typeof newFontSize === 'string' ) {
|
||
setAttributes( { headingFontSizeLarge: newFontSize } );
|
||
}
|
||
} }
|
||
fallbackFontSize={ '24px' }
|
||
/>
|
||
</InspectorControls>
|
||
|
||
{/* Block Content */}
|
||
<p { ...useBlockProps() }>
|
||
{ __( 'Key Points – hello from the editor!', 'lcp' ) }
|
||
</p>
|
||
{ heading && <h2>{ heading }</h2> }
|
||
|
||
{/* Display key points */}
|
||
{ keyPoints && keyPoints.length > 0 && (
|
||
<ul style={{ listStyleType: listStyleType }}>
|
||
{keyPoints.map((point, index) => (
|
||
<li key={index} style={{ fontSize: pointsFontSizeLarge }}>
|
||
{point}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|