Changes to lcp button and icon selector

includes/blocks/lcp-button/components/DimensionValueControl.js

@@ -0,0 +1,47 @@
+import { __ } from '@wordpress/i18n';
+import { BaseControl, NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
+ */
+export function NumberWithUnitControl() {
+    // Example options for select control (CSS units)
+    const unitOptions = [
+        { label: __('px'), value: 'px' },
+        { label: __('rem'), value: 'rem' },
+        { label: __('em'), value: 'em' },
+        { label: __('%'), value: '%' },
+        { label: __('vh'), value: 'vh' },
+        { label: __('vw'), value: 'vw' },
+        { label: __('pt'), value: 'pt' },
+        { label: __('cm'), value: 'cm' },
+        { label: __('mm'), value: 'mm' },
+    ];
+
+    // State to manage the number and unit values
+    const [value, setValue] = React.useState(10);
+    const [unit, setUnit] = React.useState('px');
+
+    return (
+        <BaseControl label={__('Padding with Unit')}>
+            <HStack>
+                {/* Number input control */}
+                <NumberControl
+                    value={value}
+                    onChange={(newValue) => setValue(newValue)}
+                    min={0}
+                    step={1}
+                    label={__('Value')}
+                />
+
+                {/* Select dropdown control for units */}
+                <SelectControl
+                    value={unit}
+                    options={unitOptions}
+                    onChange={(newUnit) => setUnit(newUnit)}
+                    label={__('Unit')}
+                />
+            </HStack>
+        </BaseControl>
+    );
+}

includes/blocks/lcp-button/components/IconSelectControl.js

@@ -10,10 +10,10 @@ export function IconSelectControl(props) {
     useEffect(() => {
         const fetchIconData = async () => {
             try {
-                const response = await fetch('/wp-content/themes/local-content-pro/assets/json/icons.json');
+                const response = await fetch('/wp-json/lcp/v1/icons');
                 const data = await response.json();
-                if (data && data.length > 0) {
+                if (Array.isArray(data) && data.length > 0) {
-                    setIconData(data[0].svgs);  // Assuming the structure is correct
+                    setIconData(data);  // Set the fetched data directly
                 }
             } catch (error) {
                 console.error('Error fetching icons:', error);
@@ -24,15 +24,17 @@ export function IconSelectControl(props) {
     }, []);
 
     const handleIconChange = (selectedIconId) => {
-        const selectedIcon = iconData.find(icon => icon.id === selectedIconId);
+        const selectedIcon = iconData.find(icon => icon.iconSvgId === selectedIconId);
         if (selectedIcon && onIconChange) {
             // Send both icon ID and path (SVG) to the parent component
             onIconChange({
-                iconSvgId: selectedIcon.id,   // Pass icon ID to parent
+                iconSvgId: selectedIcon.iconSvgId,   // Pass icon ID to parent
-                iconSvgPath: selectedIcon.path  // Pass icon path (SVG) to parent
+                iconSvgPath: selectedIcon.iconSvgPaths,  // Pass icon paths to parent
+                viewbox: selectedIcon.selectedIconViewbox // Pass the viewbox to parent
             });
-            console.log("Selected Icon ID:", selectedIcon.id);  // Debugging output
+            console.log("Selected Icon ID:", selectedIcon.iconSvgId);  // Debugging output
-            console.log("Selected Icon Path:", selectedIcon.path);  // Debugging output
+            console.log("Selected Icon Path:", selectedIcon.iconSvgPaths);  // Debugging output
+            console.log("Selected Icon Viewbox:", selectedIcon.selectedIconViewbox); // Debugging output
         }
     };
 
@@ -41,20 +43,11 @@ export function IconSelectControl(props) {
     }
 
     const iconOptions = iconData.map((icon) => ({
-        value: icon.id,   // Use icon ID as value for the SelectControl
+        value: icon.iconSvgId,  // Use icon ID as value for the SelectControl
-        label: (
+        label: icon.name,  // Directly use the icon's name as the label
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox={icon.viewBox || "0 0 512 512"} // Default viewBox if not present
-                    style={{ width: '20px', height: '20px' }} // Control icon size
-                    dangerouslySetInnerHTML={{ __html: icon.path }} // Insert SVG path
-                />
-                <span style={{ marginLeft: '8px' }}>{icon.name}</span>  {/* Show icon name */}
-            </div>
-        ),
     }));
     
+    
     return (
         <SelectControl
             label={__('Select Icon', 'lcp')}

includes/blocks/lcp-button/components/PaddingControl.js

@@ -0,0 +1,98 @@
+import { __ } from '@wordpress/i18n';
+import { BaseControl, Button, RangeControl, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Padding Control component to manage padding values for different screen sizes.
+ */
+export function PaddingControl() {
+    return (
+        <BaseControl>
+            {/* Padding label and Unlink button */}
+            <HStack>
+                <span>{__('Padding')}</span>
+                <Button
+                    variant="secondary"
+                    aria-label={__('Unlink sides')}
+                    onClick={() => {}}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+                        <path d="M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z"></path>
+                    </svg>
+                </Button>
+            </HStack>
+
+            {/* Extra Large Padding Controls  */} 
+                {/* Will update all padding values for all screen sizes if updateAllScreenSizes is true  */}
+           
+           {/* Top and Bottom HStack */}
+            <HStack style={{ flex: 1 }}>
+                {/* Top and Bottom Icon */}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="spacing-sizes-control__icon" aria-hidden="true" focusable="false">
+                    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }}></path>
+                    <path d="m7.5 6h9v-1.5h-9z"></path>
+                    <path d="m7.5 19.5h9v-1.5h-9z"></path>
+                </svg>
+
+                {/* RangeControl wrapped in HStack with flex: 1 applied to its parent */}
+                <div style={{ flex: 1 }}>
+                    <RangeControl
+                        withInputField={false}
+                        value={10}  // Placeholder value
+                        onChange={() => {}}
+                        min={0}
+                        max={50}
+                    />
+                </div>
+
+                {/* Custom Padding Button */}
+                <Button
+                    variant="primary"
+                    onClick={() => {}}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+                        <path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"></path>
+                        <path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"></path>
+                    </svg>
+                </Button>
+            </HStack>
+
+             
+           {/* Left and Right HStack */}
+           <HStack style={{ flex: 1 }}>
+                {/* Left and Right Icon */}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="spacing-sizes-control__icon" aria-hidden="true" focusable="false">
+                    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style="opacity: 0.25;"></path>                    <path d="m7.5 6h9v-1.5h-9z"></path>
+                    <path d="m4.5 7.5v9h1.5v-9z"></path>                
+                    <path d="m18 7.5v9h1.5v-9z"></path>
+                </svg>
+                {/* RangeControl wrapped in HStack with flex: 1 applied to its parent */}
+                <div style={{ flex: 1 }}>
+                    <RangeControl
+                        withInputField={false}
+                        value={10}  // Placeholder value
+                        onChange={() => {}}
+                        min={0}
+                        max={50}
+                    />
+                </div>
+
+                {/* Custom Padding Button */}
+                <Button
+                    variant="primary"
+                    onClick={() => {}}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+                        <path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"></path>
+                        <path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"></path>
+                    </svg>
+                </Button>
+            </HStack>
+
+
+            {/* Additional controls can be added here in a VStack */}
+            <VStack>
+                {/* Placeholder for additional components */}
+            </VStack>
+        </BaseControl>
+    );
+}

includes/blocks/lcp-button/lcp-button.php

@@ -28,3 +28,42 @@ function create_block_button_block_init() {
 	register_block_type( __DIR__ . '/build' );
 }
 add_action( 'init', 'create_block_button_block_init' );
+
+
+/* REST API */
+function register_icons_rest_api_endpoint() {
+    register_rest_route( 'lcp/v1', '/icons', array(
+        'methods' => 'GET',
+        'callback' => 'get_icons_data_from_db',
+        'permission_callback' => '__return_true', // Public access; modify this if needed
+    ) );
+}
+
+add_action( 'rest_api_init', 'register_icons_rest_api_endpoint' );
+
+function get_icons_data_from_db() {
+    global $wpdb;
+
+    // Query the lcp_icons table
+    $results = $wpdb->get_results(
+        "SELECT id, name, paths, viewbox FROM {$wpdb->prefix}lcp_icons"
+    );
+
+    // If no icons are found, return an empty array
+    if ( empty( $results ) ) {
+        return [];
+    }
+
+    // Format the results for the frontend
+    $icons = array_map( function( $icon ) {
+        return [
+            'iconSvgId' => $icon->id,           // Icon ID
+            'iconSvgPaths' => $icon->paths,     // SVG paths (can be multiple)
+            'selectedIconViewbox' => $icon->viewbox, // ViewBox for the SVG
+            'name' => $icon->name,              // Add name field
+        ];
+    }, $results );
+
+    return $icons;
+}
+

includes/blocks/lcp-button/src/block.json

@@ -45,11 +45,27 @@
 			"type": "string",
 			"default": ""
 		},
+		"iconSvgViewbox": {
+			"type": "string",
+			"default": "0 0 510 510"
+		},
 		"popUpId": {
 			"type": "number"		
 		},
 		"manualIconSvgPath":{
 			"type": "string"
+		},
+		"buttonPadding":{
+			"type": "string",
+			"default": "10px"
+		},
+		"iconHeight": {
+			"type": "string",
+			"default": "15px"
+		},
+		"iconWidth": {
+			"type": "string",
+			"default": "15px"
 		}
 	},
 	"textdomain": "lcp",

includes/blocks/lcp-button/src/edit.js

@@ -4,18 +4,22 @@ import { PanelBody, SelectControl, TextControl, TextareaControl, ToggleControl }
 import { useState, useEffect } from '@wordpress/element';
 import './editor.scss';
 import { IconSelectControl } from '../components/IconSelectControl';
+import { PaddingControl } from '../components/PaddingControl';
 
 export default function Edit(props) {
     const { attributes, setAttributes } = props;
-    const { buttonAction, buttonText, iconSvgId, iconSvgPath, displayIcon, iconSource, customUrl } = attributes;
+    const { buttonAction, buttonText, iconSvgId, iconSvgPath, iconSvgViewbox, displayIcon, iconSource, customUrl, buttonPadding } = attributes;
 
     // Handle icon selection from dropdown
     const handleIconChanges = (selectedIcon) => {
         console.log("Icon changed:", selectedIcon);
         if (selectedIcon && selectedIcon.iconSvgPath) {
             console.log("Selected Icon Path: ", selectedIcon.iconSvgPath);  // Log the selected icon path for debugging
+            console.log("Selected Icon Viewbox: ", selectedIcon.viewbox);  // Log the selected icon viewbox for debugging
             setAttributes({
-                iconSvgPath: selectedIcon.iconSvgPath  // Set the SVG path in the attributes
+                iconSvgPath: selectedIcon.iconSvgPath,  // Set the SVG path in the attributes
+                iconSvgId: selectedIcon.iconSvgId,      // Set the icon ID
+                iconSvgViewbox: selectedIcon.viewbox    // Set the icon viewbox in the attributes
             });
         }
     };
@@ -28,6 +32,14 @@ export default function Edit(props) {
         setAttributes({ customUrl: value });
     };
 
+    const handlePaddingChange = (value) => {
+        // If the padding value is a number, make sure to append 'px' to it
+        if (typeof value === 'number') {
+            value = `${value}px`;  // Convert to string with 'px'
+        }
+        setAttributes({ buttonPadding: value });
+    };
+
     const iconSourceOptions = [
         { value: 'manualSvgPath', label: 'SVG Path' },
         { value: 'iconSelector', label: 'Icon Library' },
@@ -45,7 +57,11 @@ export default function Edit(props) {
         <>
             <InspectorControls>
                 <PanelBody title={__("Button Settings")}>
-                    {/* Button Function */}
+                    {/* Pass the necessary props to PaddingControl */}
+                    <PaddingControl
+
+                    />
+                    {/* Button Action */}
                     <SelectControl
                         label={__("Button Action")}
                         value={buttonAction}
@@ -95,29 +111,29 @@ export default function Edit(props) {
                 </PanelBody>
             </InspectorControls>
 
-            <>
+            <div {...useBlockProps()}>
                 {buttonAction === 'customUrl' ? (
                     // Render an anchor tag if buttonAction is 'customUrl'
-                <a href={customUrl}  className="lcp-button">
+                    <a href={customUrl} className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
                         {/* Conditionally render the icon if displayIcon is true and iconSvgPath is available */}
                         {displayIcon && iconSvgPath && (
-                        <svg className = "lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
+                            <svg className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                         )}
                         {/* Render the button text */}
                         {buttonText || 'Button'} {/* Use buttonText or fallback */}
                     </a>
                 ) : (
                     // Render a button if buttonAction is not 'customUrl'
-                <button className="lcp-button">
+                    <button className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
                         {/* Conditionally render the icon if displayIcon is true and iconSvgPath is available */}
                         {displayIcon && iconSvgPath && (
-                        <svg className = "lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 576" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
+                            <svg className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                         )}
                         {/* Render the button text */}
                         {buttonText || 'Button'} {/* Use buttonText or fallback */}
                     </button>
                 )}
-        </>
+            </div>
         </>
     );
 }

includes/blocks/lcp-button/src/save.js

@@ -2,25 +2,20 @@ import { useBlockProps } from '@wordpress/block-editor';
 
 export default function save(props) {
     const { attributes } = props;
-    const { type, popUpId, buttonText, iconSvgPath, buttonAction } = attributes; // Destructure buttonText and iconSvgPath from attributes
+    const { buttonText, iconSvgPath, iconSvgViewbox, buttonAction, customUrl } = attributes; // Destructure buttonText, iconSvgPath, and iconSvgViewbox
 
     // Get the block props for the button
     const blockProps = useBlockProps.save();
 
-    // Conditionally add data-open-popup if type is 'openPopUp' and popUpId is not empty
-    if (type === 'openPopUp' && popUpId) {
-        blockProps['data-open-popup'] = popUpId; // Add the data attribute dynamically
-    }
-
     // Conditionally render the link or button based on buttonAction
     return (
         <>
             {buttonAction === 'customUrl' ? (
                 // Render an anchor tag if buttonAction is 'customUrl'
-                <a href={attributes.customUrl} {...blockProps} className="lcp-button">
+                <a href={customUrl} {...blockProps} className="lcp-button">
                     {/* Conditionally render the icon if iconSvgPath is set */}
                     {iconSvgPath && (
-                        <svg className="lcp-icon" viewBox="0 0 576 576" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
+                        <svg className="lcp-icon" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                     )}
                     {/* Render the button text */}
                     {buttonText || 'Button'} {/* Use buttonText or fallback */}
@@ -30,7 +25,7 @@ export default function save(props) {
                 <button {...blockProps} className="lcp-button">
                     {/* Conditionally render the icon if iconSvgPath is set */}
                     {iconSvgPath && (
-                        <svg className="lcp-icon" viewBox="0 0 576 576" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
+                        <svg className="lcp-icon" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                     )}
                     {/* Render the button text */}
                     {buttonText || 'Button'} {/* Use buttonText or fallback */}