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

Added theme archvier and changes to blocks

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-01 18:09:33 -08:00
parent 21b00e1937
commit d928a0e8fd
21 changed files with 342 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
includes/blocks/lcp-header-container/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '92128317eaa465727f6e');
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '5d694dedd074dafba412');

2
includes/blocks/lcp-header-container/build/index.js
View File

@ -1 +1 @@
(()=>{"use strict";var e,t={717:()=>{const e=window.wp.blocks,t=window.wp.i18n,l=window.wp.blockEditor,n=window.wp.components,r=window.React,o=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/header-container"}');(0,e.registerBlockType)(s.UU,{edit:function({attributes:e,setAttributes:s}){const[i,a]=(0,r.useState)(!1),[d,p]=(0,r.useState)("10px"),[c,h]=(0,r.useState)("10px"),[x,g]=(0,r.useState)("10px"),[u,v]=(0,r.useState)("10px"),{sticky:f}=e,m=(0,l.useBlockProps)();return(0,o.jsxs)("div",{...m,children:[(0,o.jsxs)(l.InspectorControls,{children:[(0,o.jsx)(n.SelectControl,{label:(0,t.__)("Sticky Behavior","lcp"),value:f,options:[{label:(0,t.__)("Never","lcp"),value:"never"},{label:(0,t.__)("On Scroll","lcp"),value:"onScroll"},{label:(0,t.__)("Always","lcp"),value:"always"}],onChange:e=>{s({sticky:e})}}),(0,o.jsxs)(n.BaseControl,{label:"Padding - Desktop",children:[(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"row"},children:[(0,o.jsx)("span",{style:{marginRight:"10px"},children:"Padding"}),(0,o.jsx)(n.ToggleControl,{label:"Use Independent Padding",checked:i,onChange:()=>{a(!i)}})]}),i?(0,o.jsxs)("div",{style:{display:"grid",padding:"10px",gridTemplateColumns:"1fr 1fr",gap:"10px",justifyItems:"center"},children:[(0,o.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,o.jsx)("legend",{children:"Top"}),(0,o.jsx)(n.__experimentalUnitControl,{value:d,onChange:e=>{p(e),s({paddingTop:e})}})]}),(0,o.jsxs)("fieldset",{children:[(0,o.jsx)("legend",{children:"Left"}),(0,o.jsx)(n.__experimentalUnitControl,{value:u,onChange:e=>{v(e),s({paddingLeft:e})}})]}),(0,o.jsxs)("fieldset",{children:[(0,o.jsx)("legend",{children:"Right"}),(0,o.jsx)(n.__experimentalUnitControl,{value:c,onChange:e=>{h(e),s({paddingRight:e})}})]}),(0,o.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,o.jsx)("legend",{children:"Bottom"}),(0,o.jsx)(n.__experimentalUnitControl,{value:x,onChange:e=>{g(e),s({paddingBottom:e})}})]})]}):(0,o.jsx)(n.__experimentalUnitControl,{label:"Padding Value",value:999,onChange:e=>{s({padding:{extraLarge:{top:e,right:e,bottom:e,left:e},large:{top:e,right:e,bottom:e,left:e},medium:{top:e,right:e,bottom:e,left:e},small:{top:e,right:e,bottom:e,left:e}}})}})]})]}),(0,o.jsx)(l.InnerBlocks,{template:[["core/template-part",{slug:"header"}]]})]})},save:function({attributes:e}){const{sticky:t}=e,n=l.useBlockProps.save();let r="";"onScroll"===t?r="lcp-sticky-on-scroll":"always"===t&&(r="lcp-sticky");const s=`${n.className} ${r}`;return(0,o.jsx)("div",{...n,className:s,id:"lcp-header-container",children:(0,o.jsx)(l.InnerBlocks.Content,{})})}})}},l={};function n(e){var r=l[e];if(void 0!==r)return r.exports;var o=l[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.m=t,e=[],n.O=(t,l,r,o)=>{if(!l){var s=1/0;for(p=0;p<e.length;p++){l=e[p][0],r=e[p][1],o=e[p][2];for(var i=!0,a=0;a<l.length;a++)(!1&o||s>=o)&&Object.keys(n.O).every((e=>n.O[e](l[a])))?l.splice(a--,1):(i=!1,o<s&&(s=o));if(i){e.splice(p--,1);var d=r();void 0!==d&&(t=d)}}return t}o=o||0;for(var p=e.length;p>0&&e[p-1][2]>o;p--)e[p]=e[p-1];e[p]=[l,r,o]},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};n.O.j=t=>0===e[t];var t=(t,l)=>{var r,o,s=l[0],i=l[1],a=l[2],d=0;if(s.some((t=>0!==e[t]))){for(r in i)n.o(i,r)&&(n.m[r]=i[r]);if(a)var p=a(n)}for(t&&t(l);d<s.length;d++)o=s[d],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return n.O(p)},l=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))})();var r=n.O(void 0,[350],(()=>n(717)));r=n.O(r)})();
(()=>{"use strict";var e,n={717:()=>{const e=window.wp.blocks,n=window.React,t=window.wp.i18n,r=window.wp.blockEditor,o=window.wp.components,s=window.ReactJSXRuntime,c=JSON.parse('{"UU":"lcp/header-container"}');(0,e.registerBlockType)(c.UU,{edit:function({attributes:e,setAttributes:c}){const[l,i]=(0,n.useState)(!1),{sticky:a}=e,p=(0,n.useRef)(null),h=(0,r.useBlockProps)({ref:p});return(0,n.useEffect)((()=>{const e=p.current;if(!e)return;const n=new ResizeObserver((()=>{const n=e.getBoundingClientRect().height;fetch("/wp-json/lcp/v1/set-header-height",{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":wpApiSettings.nonce},body:JSON.stringify({height:n})}).then((e=>e.json())).then((e=>{console.log("Height saved:",e)})).catch((e=>{console.error("Error saving height:",e)}))}));return n.observe(e),()=>n.disconnect()}),[]),(0,s.jsxs)("div",{...h,children:[(0,s.jsx)(r.InspectorControls,{children:(0,s.jsx)(o.SelectControl,{label:(0,t.__)("Sticky Behavior","lcp"),value:a,options:[{label:(0,t.__)("Never","lcp"),value:"never"},{label:(0,t.__)("On Scroll","lcp"),value:"onScroll"},{label:(0,t.__)("Always","lcp"),value:"always"}],onChange:e=>c({sticky:e})})}),(0,s.jsx)("div",{id:"lcp-header-container",children:(0,s.jsx)(r.InnerBlocks,{})})]})},save:function({attributes:e}){const{sticky:n}=e,t=r.useBlockProps.save();let o="";"onScroll"===n?o="lcp-sticky-on-scroll":"always"===n&&(o="lcp-sticky");const c=`${t.className} ${o}`;return(0,s.jsx)("div",{...t,className:c,id:"lcp-header-container",children:(0,s.jsx)(r.InnerBlocks.Content,{})})}})}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var s=t[e]={exports:{}};return n[e](s,s.exports,r),s.exports}r.m=n,e=[],r.O=(n,t,o,s)=>{if(!t){var c=1/0;for(p=0;p<e.length;p++){t=e[p][0],o=e[p][1],s=e[p][2];for(var l=!0,i=0;i<t.length;i++)(!1&s||c>=s)&&Object.keys(r.O).every((e=>r.O[e](t[i])))?t.splice(i--,1):(l=!1,s<c&&(c=s));if(l){e.splice(p--,1);var a=o();void 0!==a&&(n=a)}}return n}s=s||0;for(var p=e.length;p>0&&e[p-1][2]>s;p--)e[p]=e[p-1];e[p]=[t,o,s]},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={57:0,350:0};r.O.j=n=>0===e[n];var n=(n,t)=>{var o,s,c=t[0],l=t[1],i=t[2],a=0;if(c.some((n=>0!==e[n]))){for(o in l)r.o(l,o)&&(r.m[o]=l[o]);if(i)var p=i(r)}for(n&&n(t);a<c.length;a++)s=c[a],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(p)},t=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})();var o=r.O(void 0,[350],(()=>r(717)));o=r.O(o)})();

2
includes/blocks/lcp-header-container/build/view.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => 'd4e4a494008d04e1eb42');
<?php return array('dependencies' => array(), 'version' => '187056d57d17d681fe72');

2
includes/blocks/lcp-header-container/build/view.js
View File

@ -1 +1 @@
console.log("Hello World! (from create-block-lcp-viewport block)");
document.addEventListener("DOMContentLoaded",(function(){var e=document.getElementById("lcp-header-container");if(e){var t=e.offsetHeight;getComputedStyle(document.documentElement).getPropertyValue("--lcp--header--height").trim()!==t+"px"&&document.documentElement.style.setProperty("--lcp--header--height",t+"px")}}));

30
includes/blocks/lcp-header-container/lcp-header-container.php
View File

@ -31,3 +31,33 @@ function lcp_header_container_block_init() {
);
}
add_action( 'init', 'lcp_header_container_block_init' );
/* REST API TO UPDATE OPTIONS */
// Register custom REST API endpoint
function lcp_register_rest_route() {
register_rest_route('lcp/v1', '/set-header-height', array(
'methods' => 'POST',
'callback' => 'lcp_set_header_height',
'permission_callback' => function () {
return current_user_can('manage_options'); // Ensure the user has permission
},
));
}
add_action('rest_api_init', 'lcp_register_rest_route');
// Callback to save the height to wp_options
function lcp_set_header_height(WP_REST_Request $request) {
$height = $request->get_param('height');
if (is_numeric($height)) {
update_option('lcp_header_height', $height);
return new WP_REST_Response(array('message' => 'Height saved successfully'), 200);
}
return new WP_REST_Response(array('message' => 'Invalid height value'), 400);
}

172
includes/blocks/lcp-header-container/src/edit.js
View File

@ -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
includes/blocks/lcp-header-container/src/view.js
View File

@ -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');
}
}
});