Changes to directory structure

2024-12-18 02:27:09 -08:00
parent d5a5f4e87b
commit 94d2c7c8a2
135 changed files with 335 additions and 5435 deletions
--- a/includes/blocks/lcp-key-points/src/edit.js
+++ b/includes/blocks/lcp-key-points/src/edit.js
@ -0,0 +1,118 @@
+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>
+            )}
+        </>
+    );
+}
+