Added theme archvier and changes to blocks
This commit is contained in:
Jeremy Rangel
@ -1,73 +1,61 @@
|
||||
/**
|
||||
* Retrieves the translation of text.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
|
||||
*/
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
|
||||
import { SelectControl, BaseControl, ToggleControl,__experimentalUnitControl as UnitControl } from '@wordpress/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* Those files can contain any CSS code that gets applied to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import { SelectControl, BaseControl, ToggleControl, __experimentalUnitControl as UnitControl } from '@wordpress/components';
|
||||
import './editor.scss';
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function Edit({ attributes, setAttributes }) {
|
||||
|
||||
const [isIndependentLarge, setIsIndependentLarge] = useState(false);
|
||||
|
||||
const [paddingTop, setPaddingTop] = useState('10px');
|
||||
const [paddingRight, setPaddingRight] = useState('10px');
|
||||
const [paddingBottom, setPaddingBottom] = useState('10px');
|
||||
const [paddingLeft, setPaddingLeft] = useState('10px');
|
||||
|
||||
const { sticky } = attributes;
|
||||
|
||||
const blockRef = useRef(null); // Ref to the block container element
|
||||
|
||||
// Block props for the outer block
|
||||
const blockProps = useBlockProps();
|
||||
const blockProps = useBlockProps({
|
||||
ref: blockRef,
|
||||
});
|
||||
|
||||
// Handle the change of the sticky attribute
|
||||
const handleStickyChange = (value) => {
|
||||
setAttributes({ sticky: value });
|
||||
};
|
||||
const handleToggleChange = () => {
|
||||
setIsIndependentLarge(!isIndependentLarge);
|
||||
};
|
||||
// Use ResizeObserver to monitor height changes
|
||||
useEffect(() => {
|
||||
const blockElement = blockRef.current;
|
||||
if (!blockElement) return;
|
||||
|
||||
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 }
|
||||
};
|
||||
// ResizeObserver to monitor changes in the block's size
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
// Get the height using getBoundingClientRect (this avoids issues with offsets)
|
||||
const rect = blockElement.getBoundingClientRect();
|
||||
const height = rect.height; // Use the height property from getBoundingClientRect()
|
||||
|
||||
// Update the padding attribute with the new padding object
|
||||
setAttributes({ padding: newPadding });
|
||||
};
|
||||
// Send the height to a custom REST API endpoint
|
||||
fetch('/wp-json/lcp/v1/set-header-height', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-WP-Nonce': wpApiSettings.nonce, // Ensure you have the nonce for security
|
||||
},
|
||||
body: JSON.stringify({
|
||||
height,
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log('Height saved:', data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error saving height:', error);
|
||||
});
|
||||
});
|
||||
|
||||
// Observe the block element for resize changes
|
||||
resizeObserver.observe(blockElement);
|
||||
|
||||
// Cleanup the observer when the component unmounts
|
||||
return () => resizeObserver.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
{/* Inspector Controls: Add a SelectControl to change the sticky attribute */}
|
||||
{/* Inspector Controls */}
|
||||
<InspectorControls>
|
||||
<SelectControl
|
||||
label={__('Sticky Behavior', 'lcp')}
|
||||
@ -77,80 +65,14 @@ export default function Edit({ attributes, setAttributes }) {
|
||||
{ label: __('On Scroll', 'lcp'), value: 'onScroll' },
|
||||
{ label: __('Always', 'lcp'), value: 'always' },
|
||||
]}
|
||||
onChange={handleStickyChange}
|
||||
onChange={(value) => setAttributes({ sticky: value })}
|
||||
/>
|
||||
<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={paddingTop}
|
||||
onChange={(newValue) => {
|
||||
setPaddingTop(newValue);
|
||||
setAttributes({ paddingTop: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Left</legend>
|
||||
<UnitControl
|
||||
value={paddingLeft}
|
||||
onChange={(newValue) => {
|
||||
setPaddingLeft(newValue);
|
||||
setAttributes({ paddingLeft: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Right</legend>
|
||||
<UnitControl
|
||||
value={paddingRight}
|
||||
onChange={(newValue) => {
|
||||
setPaddingRight(newValue);
|
||||
setAttributes({ paddingRight: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
|
||||
<legend>Bottom</legend>
|
||||
<UnitControl
|
||||
value={paddingBottom}
|
||||
onChange={(newValue) => {
|
||||
setPaddingBottom(newValue);
|
||||
setAttributes({ paddingBottom: newValue });
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<UnitControl
|
||||
label="Padding Value"
|
||||
value={999}
|
||||
onChange={updatePaddingForAllSizes}
|
||||
/>
|
||||
)}
|
||||
</BaseControl>
|
||||
{/* Other controls */}
|
||||
</InspectorControls>
|
||||
|
||||
|
||||
|
||||
<InnerBlocks
|
||||
template= {[
|
||||
["core/template-part", {slug:'header'}]]
|
||||
}
|
||||
/>
|
||||
<div id="lcp-header-container">
|
||||
<InnerBlocks />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -21,5 +21,22 @@
|
||||
*/
|
||||
|
||||
/* eslint-disable no-console */
|
||||
console.log( 'Hello World! (from create-block-lcp-viewport block)' );
|
||||
/* eslint-enable no-console */
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get the element with the id "lcp-header-container"
|
||||
var headerContainer = document.getElementById('lcp-header-container');
|
||||
|
||||
// Check if the element exists
|
||||
if (headerContainer) {
|
||||
// Get the height of the header container
|
||||
var headerHeight = headerContainer.offsetHeight;
|
||||
|
||||
// Get the current value of the --lcp--header--height custom property
|
||||
var currentHeaderHeight = getComputedStyle(document.documentElement).getPropertyValue('--lcp--header--height').trim();
|
||||
|
||||
// Compare if the current value is different from the new headerHeight (in px)
|
||||
if (currentHeaderHeight !== headerHeight + 'px') {
|
||||
// If they are different, update the --lcp--header--height custom property
|
||||
document.documentElement.style.setProperty('--lcp--header--height', headerHeight + 'px');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user