Changes to lcp button and icon selector
This commit is contained in:
Jeremy Rangel
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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) {
|
||||
setIconData(data[0].svgs); // Assuming the structure is correct
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
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
|
||||
iconSvgPath: selectedIcon.path // Pass icon path (SVG) to parent
|
||||
iconSvgId: selectedIcon.iconSvgId, // Pass icon ID 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 Path:", selectedIcon.path); // Debugging output
|
||||
console.log("Selected Icon ID:", selectedIcon.iconSvgId); // 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
|
||||
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>
|
||||
),
|
||||
value: icon.iconSvgId, // Use icon ID as value for the SelectControl
|
||||
label: icon.name, // Directly use the icon's name as the label
|
||||
}));
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<SelectControl
|
||||
label={__('Select Icon', 'lcp')}
|
||||
|
||||
98
includes/blocks/lcp-button/components/PaddingControl.js
Normal file
98
includes/blocks/lcp-button/components/PaddingControl.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
<>
|
||||
{buttonAction === 'customUrl' ? (
|
||||
// Render an anchor tag if buttonAction is 'customUrl'
|
||||
<a href={customUrl} className="lcp-button">
|
||||
{/* 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 }} />
|
||||
)}
|
||||
{/* Render the button text */}
|
||||
{buttonText || 'Button'} {/* Use buttonText or fallback */}
|
||||
</a>
|
||||
) : (
|
||||
// Render a button if buttonAction is not 'customUrl'
|
||||
<button className="lcp-button">
|
||||
{/* 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 }} />
|
||||
)}
|
||||
{/* Render the button text */}
|
||||
{buttonText || 'Button'} {/* Use buttonText or fallback */}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
<div {...useBlockProps()}>
|
||||
{buttonAction === 'customUrl' ? (
|
||||
// Render an anchor tag if buttonAction is 'customUrl'
|
||||
<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={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" 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={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
|
||||
)}
|
||||
{/* Render the button text */}
|
||||
{buttonText || 'Button'} {/* Use buttonText or fallback */}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user