Changes to directory structure
This commit is contained in:
Jeremy Rangel
136
includes/blocks/lcp-dynamic-container/src/block.json
Normal file
136
includes/blocks/lcp-dynamic-container/src/block.json
Normal file
@ -0,0 +1,136 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/dynamic-container",
|
||||
"version": "0.1.0",
|
||||
"title": "Dynamic Container",
|
||||
"category": "widgets",
|
||||
"icon": "smiley",
|
||||
"description": "A general purpose container that uses dynamic rendering",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"align": [ "left", "right", "wide", "full" ],
|
||||
"background": {
|
||||
"backgroundImage": true,
|
||||
"backgroundSize": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"backgroundImage": true
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"gradients": true,
|
||||
"background": true,
|
||||
"link": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"background": true,
|
||||
"text": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"maxWidthExtraLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthMedium": {
|
||||
"type": "string"
|
||||
},
|
||||
"maxWidthSmall": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightExtraLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightLarge": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightMedium": {
|
||||
"type": "string"
|
||||
},
|
||||
"minHeightSmall": {
|
||||
"type": "string"
|
||||
},
|
||||
"isBox": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"entranceAnimation": {
|
||||
"type": "string"
|
||||
},
|
||||
"exitAnimation": {
|
||||
"type": "string"
|
||||
},
|
||||
|
||||
"overflow": {
|
||||
"type": "string"
|
||||
},
|
||||
"padding": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"extraLarge": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"large": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"medium": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
},
|
||||
"small": {
|
||||
"top": "0",
|
||||
"right": "0",
|
||||
"bottom": "0",
|
||||
"left": "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"margin": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"extraLarge": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"large": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"medium": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
},
|
||||
"small": {
|
||||
"top": "12px",
|
||||
"right": "0",
|
||||
"bottom": "12px",
|
||||
"left": "0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": "file:./view.js"}
|
||||
211
includes/blocks/lcp-dynamic-container/src/edit.js
Normal file
211
includes/blocks/lcp-dynamic-container/src/edit.js
Normal file
@ -0,0 +1,211 @@
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { __experimentalToggleGroupControl as ToggleGroupControl,
|
||||
__experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, BaseControl, ToggleControl, ColorPalette, Popover, Button } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* The edit function describes the structure of your block in the context of the editor.
|
||||
* This represents what the editor will render when the block is used.
|
||||
*
|
||||
* @param {Object} props - The props for the block.
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
const blockProps = useBlockProps();
|
||||
const { padding, maxWidthLarge, maxWidthMedium, maxWidthSmall, minHeightLarge, minHeightMedium, minHeightSmall, backgroundColor } = attributes; // Destructure necessary attributes
|
||||
|
||||
// State for independent padding toggle
|
||||
const [isIndependentLarge, setIsIndependentLarge] = useState(false);
|
||||
|
||||
// Toggle to show or hide the color picker popover
|
||||
const [showColorPopover, setShowColorPopover] = useState(false);
|
||||
const [selectedColor, setSelectedColor] = useState(backgroundColor || '#ffffff'); // Default color
|
||||
|
||||
// Toggle padding for individual sizes
|
||||
const handleToggleChange = () => {
|
||||
setIsIndependentLarge(!isIndependentLarge);
|
||||
};
|
||||
|
||||
// Update padding for all sizes
|
||||
const updatePaddingForAllSizes = (newValue) => {
|
||||
const newPadding = {
|
||||
extraLarge: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
large: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
medium: { top: newValue, right: newValue, bottom: newValue, left: newValue },
|
||||
small: { top: newValue, right: newValue, bottom: newValue, left: newValue }
|
||||
};
|
||||
setAttributes({ padding: newPadding });
|
||||
};
|
||||
|
||||
// Handle individual padding changes
|
||||
const handlePaddingChange = (size, position, newValue) => {
|
||||
const updatedPadding = { ...padding };
|
||||
updatedPadding[size][position] = newValue;
|
||||
setAttributes({ padding: updatedPadding });
|
||||
};
|
||||
|
||||
// Handle color change
|
||||
const handleColorChange = (color) => {
|
||||
setSelectedColor(color);
|
||||
setAttributes({ backgroundColor: color }); // Update background color
|
||||
};
|
||||
|
||||
// Handle maxWidth change for different sizes
|
||||
const handleMaxWidthChange = (value, size) => {
|
||||
setAttributes({ [`maxWidth${size}`]: value });
|
||||
};
|
||||
|
||||
// Handle minHeight change for different sizes
|
||||
const handleMinHeightChange = (value, size) => {
|
||||
setAttributes({ [`minHeight${size}`]: value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Updated attributes:", attributes);
|
||||
}, [attributes]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<ToggleGroupControl
|
||||
label="my label"
|
||||
value="vertical"
|
||||
isBlock
|
||||
__nextHasNoMarginBottom
|
||||
__next40pxDefaultSize
|
||||
>
|
||||
<ToggleGroupControlOption value="horizontal" label="Horizontal" />
|
||||
<ToggleGroupControlOption value="vertical" label="Vertical" />
|
||||
</ToggleGroupControl>
|
||||
{/* BaseControl for padding */}
|
||||
<BaseControl label="Padding - Desktop">
|
||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<span style={{ marginRight: '10px' }}>Padding</span>
|
||||
<ToggleControl
|
||||
label="Use Independent Padding"
|
||||
checked={isIndependentLarge}
|
||||
onChange={handleToggleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Padding controls */}
|
||||
{isIndependentLarge ? (
|
||||
<div style={{ display: 'grid', padding: '10px', gridTemplateColumns: '1fr 1fr', gap: '10px', justifyItems: 'center' }}>
|
||||
{/* Padding controls for top, left, right, bottom */}
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Top</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.top || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'top', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Left</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.left || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'left', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Right</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.right || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'right', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Bottom</legend>
|
||||
<UnitControl
|
||||
value={padding.extraLarge?.bottom || '10px'}
|
||||
onChange={(newValue) => handlePaddingChange('extraLarge', 'bottom', newValue)}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<UnitControl
|
||||
label="Padding Value"
|
||||
value={999} // You can replace this with an attribute value
|
||||
onChange={updatePaddingForAllSizes}
|
||||
/>
|
||||
)}
|
||||
</BaseControl>
|
||||
|
||||
{/* Max Width Controls */}
|
||||
<BaseControl label="Max Width">
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<UnitControl
|
||||
label="Large"
|
||||
value={maxWidthLarge}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Large')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Medium"
|
||||
value={maxWidthMedium}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Medium')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Small"
|
||||
value={maxWidthSmall}
|
||||
onChange={(value) => handleMaxWidthChange(value, 'Small')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
</div>
|
||||
</BaseControl>
|
||||
|
||||
{/* Min Height Controls */}
|
||||
<BaseControl label="Min Height">
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<UnitControl
|
||||
label="Large"
|
||||
value={minHeightLarge}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Large')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Medium"
|
||||
value={minHeightMedium}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Medium')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
<UnitControl
|
||||
label="Small"
|
||||
value={minHeightSmall}
|
||||
onChange={(value) => handleMinHeightChange(value, 'Small')}
|
||||
defaultUnit="px"
|
||||
/>
|
||||
</div>
|
||||
</BaseControl>
|
||||
|
||||
{/* Background color picker */}
|
||||
<BaseControl label={__('Background Color')}>
|
||||
<div>
|
||||
<Button onClick={() => setShowColorPopover(!showColorPopover)}>
|
||||
{__('Choose Background Color')}
|
||||
</Button>
|
||||
|
||||
{showColorPopover && (
|
||||
<Popover position="bottom center">
|
||||
<ColorPalette
|
||||
value={selectedColor}
|
||||
onChange={handleColorChange}
|
||||
colors={[{ name: "Primary", slug: "primary", color: "#3E5062" }, { name: "Secondary", slug: "secondary", color: "#2B3843" }, { name: "Light Color - 1", slug: "light-color-1", color: "#ECF0F5" }, { name: "Dark Gray", slug: "dark-gray", color: "#333333" }, { name: "Accent", slug: "accent", color: "#61FFB6" }]}
|
||||
disableCustomColors={false}
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{/* Color indicator */}
|
||||
<div style={{ backgroundColor: selectedColor, width: '30px', height: '30px', marginTop: '10px', borderRadius: '50%' }}></div>
|
||||
</div>
|
||||
</BaseControl>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...blockProps} style={{ maxWidth: maxWidthLarge, minHeight: minHeightLarge }}>
|
||||
<InnerBlocks />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
includes/blocks/lcp-dynamic-container/src/editor.scss
Normal file
9
includes/blocks/lcp-dynamic-container/src/editor.scss
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
border: 1px dotted #f00;
|
||||
}
|
||||
39
includes/blocks/lcp-dynamic-container/src/index.js
Normal file
39
includes/blocks/lcp-dynamic-container/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
12
includes/blocks/lcp-dynamic-container/src/save.js
Normal file
12
includes/blocks/lcp-dynamic-container/src/save.js
Normal file
@ -0,0 +1,12 @@
|
||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
export default function Save() {
|
||||
// Block props
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
12
includes/blocks/lcp-dynamic-container/src/style.scss
Normal file
12
includes/blocks/lcp-dynamic-container/src/style.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-viewport {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
25
includes/blocks/lcp-dynamic-container/src/view.js
Normal file
25
includes/blocks/lcp-dynamic-container/src/view.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Use this file for JavaScript code that you want to run in the front-end
|
||||
* on posts/pages that contain this block.
|
||||
*
|
||||
* When this file is defined as the value of the `viewScript` property
|
||||
* in `block.json` it will be enqueued on the front end of the site.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```js
|
||||
* {
|
||||
* "viewScript": "file:./view.js"
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* If you're not making any changes to this file because your project doesn't need any
|
||||
* JavaScript running in the front-end, then you should delete this file and remove
|
||||
* the `viewScript` property from `block.json`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-lcp-viewport block)' );
|
||||
/* eslint-enable no-console */
|
||||
Reference in New Issue
Block a user