jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added lcp-ui.js and changes to blocks

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-30 17:39:30 -08:00
parent b9e2660318
commit 4b78f9f571
18 changed files with 55007 additions and 107450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
includes/blocks/lcp-button/src/block.json
View File

@ -55,17 +55,43 @@
"manualIconSvgPath":{
"type": "string"
},
"buttonHeight":{
"type": "string"
},
"buttonPadding":{
"type": "string",
"default": "10px"
"type": "object",
"default": {
"extraLarge": {
"top": "10px",
"right": "10px",
"bottom": "10px",
"left": "10px"
},
"large": {
"top": "10px",
"right": "10px",
"bottom": "10px",
"left": "10px"
},
"medium": {
"top": "10px",
"right": "10px",
"bottom": "10px",
"left": "10px"
},
"small": {
"top": "10px",
"right": "10px",
"bottom": "10px",
"left": "10px"
}
}
},
"iconHeight": {
"type": "string",
"default": "15px"
"type": "string"
},
"iconWidth": {
"type": "string",
"default": "15px"
"type": "string"
}
},
"textdomain": "lcp",

54
includes/blocks/lcp-button/src/edit.js
View File

@ -5,21 +5,20 @@ import { useState, useEffect } from '@wordpress/element';
import './editor.scss';
import { IconSelectControl } from '../components/IconSelectControl';
import { PaddingControl } from '../components/PaddingControl';
import { DimensionValueControl } from '../components/DimensionValueControl';
export default function Edit(props) {
const { attributes, setAttributes } = props;
const { buttonAction, buttonText, iconSvgId, iconSvgPath, iconSvgViewbox, displayIcon, iconSource, customUrl, buttonPadding } = attributes;
const { buttonAction, iconHeight, 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
iconSvgId: selectedIcon.iconSvgId, // Set the icon ID
iconSvgViewbox: selectedIcon.viewbox // Set the icon viewbox in the attributes
iconSvgPath: selectedIcon.iconSvgPath,
iconSvgId: selectedIcon.iconSvgId,
iconSvgViewbox: selectedIcon.viewbox
});
}
};
@ -33,13 +32,18 @@ export default function Edit(props) {
};
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'
value = `${value}px`;
}
setAttributes({ buttonPadding: value });
};
// Handle changes to icon height (from the DimensionValueControl)
const handleIconHeightChange = (newHeight) => {
console.log("New icon height:", newHeight); // Debugging line
setAttributes({ iconHeight: newHeight }); // Update the iconHeight attribute
};
const iconSourceOptions = [
{ value: 'manualSvgPath', label: 'SVG Path' },
{ value: 'iconSelector', label: 'Icon Library' },
@ -57,11 +61,9 @@ export default function Edit(props) {
<>
<InspectorControls>
<PanelBody title={__("Button Settings")}>
{/* Pass the necessary props to PaddingControl */}
<PaddingControl
onChange={handlePaddingChange}
/>
{/* Button Action */}
<SelectControl
label={__("Button Action")}
value={buttonAction}
@ -85,6 +87,12 @@ export default function Edit(props) {
checked={displayIcon}
onChange={handleToggleChange}
/>
<DimensionValueControl
value={iconHeight} // Pass the current iconHeight to the DimensionValueControl
onChange={(newHeight) => setAttributes({ iconHeight: newHeight })} // Update iconHeight when it changes
includeAuto={true}
autoReturnsNull={true}
/>
{displayIcon && (
<>
<SelectControl
@ -96,14 +104,14 @@ export default function Edit(props) {
{iconSource === 'manualSvgPath' && (
<TextareaControl
label="Icon SVG Path"
value={iconSvgPath} // Use the correct attribute `iconSvgPath`
value={iconSvgPath}
onChange={(value) => setAttributes({ iconSvgPath: value })}
/>
)}
{iconSource === 'iconSelector' && (
<IconSelectControl
iconSvgId={iconSvgId} // Pass current iconSvgId
onIconChange={handleIconChanges} // Handle icon selection
iconSvgId={iconSvgId}
onIconChange={handleIconChanges}
/>
)}
</>
@ -113,24 +121,22 @@ export default function Edit(props) {
<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 }} />
<svg style={{ height: iconHeight }} 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 */}
<span className="lcp-button-text">
{buttonText || 'Button'}
</span>
</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 }} />
<svg style={{ height: iconHeight }} 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 */}
<span className="lcp-button-text">
{buttonText || 'Button'}
</span>
</button>
)}
</div>

47
includes/blocks/lcp-button/src/save.js
View File

@ -2,35 +2,34 @@ import { useBlockProps } from '@wordpress/block-editor';
export default function save(props) {
const { attributes } = props;
const { buttonText, iconSvgPath, iconSvgViewbox, buttonAction, customUrl } = attributes; // Destructure buttonText, iconSvgPath, and iconSvgViewbox
const { buttonText, buttonPadding,iconHeight,iconSvgPath, iconSvgViewbox, buttonAction, customUrl } = attributes; // Destructure buttonText, iconSvgPath, and iconSvgViewbox
// Get the block props for the button
const blockProps = useBlockProps.save();
// Conditionally render the link or button based on buttonAction
return (
<>
{buttonAction === 'customUrl' ? (
// Render an anchor tag if buttonAction is 'customUrl'
<a href={customUrl} {...blockProps} className="lcp-button">
{/* Conditionally render the icon if iconSvgPath is set */}
{iconSvgPath && (
<svg className="lcp-icon" 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 {...blockProps} className="lcp-button">
{/* Conditionally render the icon if iconSvgPath is set */}
{iconSvgPath && (
<svg className="lcp-icon" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
)}
{/* Render the button text */}
{buttonText || 'Button'} {/* Use buttonText or fallback */}
</button>
)}
</>
<div {...useBlockProps()}>
{buttonAction === 'customUrl' ? (
<a href={customUrl} className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
{displayIcon && iconSvgPath && (
<svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
)}
<span className="lcp-button-text">
{buttonText || 'Button'}
</span>
</a>
) : (
<button className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
{displayIcon && iconSvgPath && (
<svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
)}
<span className="lcp-button-text">
{buttonText || 'Button'}
</span>
</button>
)}
</div>
);
}