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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user