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

Changes to blocks and styles

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-01 03:08:58 -08:00
parent 741d39a962
commit 21b00e1937
45 changed files with 617 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
includes/blocks/lcp-main-area/build/block.json
View File

@ -3,7 +3,7 @@
"apiVersion": 3,
"name": "lcp/main-area",
"version": "0.1.0",
"title": "Main Content",
"title": "Content Container",
"category": "widgets",
"icon": "smiley",
"description": "Viewport container which is designed to be the parent of all other blocks",
@ -15,6 +15,10 @@
"maxWidth": {
"type": "string",
"default": "100%"
},
"expandVertical": {
"type": "boolean",
"default": true
}
},
"textdomain": "lcp-viewport",

2
includes/blocks/lcp-main-area/build/index-rtl.css
View File

@ -1 +1 @@
.wp-block-create-block-lcp-viewport{border:1px dotted red}#lcp-main-wrap{margin-right:340px}
.wp-block-create-block-lcp-viewport{border:1px dotted red}.has-sidecontent #lcp-main-container{margin-right:340px}

2
includes/blocks/lcp-main-area/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '4c475d6920d9d10f9da0');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'e74f7d37dca7635e59f9');

2
includes/blocks/lcp-main-area/build/index.css
View File

@ -1 +1 @@
.wp-block-create-block-lcp-viewport{border:1px dotted red}#lcp-main-wrap{margin-left:340px}
.wp-block-create-block-lcp-viewport{border:1px dotted red}.has-sidecontent #lcp-main-container{margin-left:340px}

2
includes/blocks/lcp-main-area/build/index.js
View File

@ -1 +1 @@
(()=>{"use strict";var e,t={998:()=>{const e=window.wp.blocks,t=window.wp.i18n,n=window.wp.blockEditor,r=window.wp.components,i=window.ReactJSXRuntime,o=JSON.parse('{"UU":"lcp/main-area"}');(0,e.registerBlockType)(o.UU,{edit:function(e){const{attributes:o,setAttributes:s}=e,{maxWidth:a="100%"}=o,l=(0,n.useBlockProps)(),c=(0,n.useInnerBlocksProps)(l);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.InspectorControls,{children:(0,i.jsx)(r.PanelBody,{title:(0,t.__)("Max Width Settings","lcp"),initialOpen:!0,children:(0,i.jsx)("div",{className:"max-width-settings",children:(0,i.jsx)(r.__experimentalUnitControl,{onChange:e=>{s({maxWidth:e})},value:a,defaultUnit:"px"})})})}),(0,i.jsx)("div",{...c,id:"lcp-main-wrap",children:(0,i.jsx)(n.InnerBlocks,{...c})})]})},save:function({attributes:e}){const{maxWidth:t="100%"}=e,r=n.useBlockProps.save(),o={maxWidth:t};return(0,i.jsx)("div",{...r,id:"lcp-main-wrap",style:o,children:(0,i.jsx)(n.InnerBlocks.Content,{})})}})}},n={};function r(e){var i=n[e];if(void 0!==i)return i.exports;var o=n[e]={exports:{}};return t[e](o,o.exports,r),o.exports}r.m=t,e=[],r.O=(t,n,i,o)=>{if(!n){var s=1/0;for(p=0;p<e.length;p++){n=e[p][0],i=e[p][1],o=e[p][2];for(var a=!0,l=0;l<n.length;l++)(!1&o||s>=o)&&Object.keys(r.O).every((e=>r.O[e](n[l])))?n.splice(l--,1):(a=!1,o<s&&(s=o));if(a){e.splice(p--,1);var c=i();void 0!==c&&(t=c)}}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]=[n,i,o]},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={57:0,350:0};r.O.j=t=>0===e[t];var t=(t,n)=>{var i,o,s=n[0],a=n[1],l=n[2],c=0;if(s.some((t=>0!==e[t]))){for(i in a)r.o(a,i)&&(r.m[i]=a[i]);if(l)var p=l(r)}for(t&&t(n);c<s.length;c++)o=s[c],r.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return r.O(p)},n=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))})();var i=r.O(void 0,[350],(()=>r(998)));i=r.O(i)})();
(()=>{"use strict";var e,n={998:()=>{const e=window.wp.blocks,n=window.wp.i18n,t=window.wp.blockEditor,r=window.wp.components,i=window.ReactJSXRuntime,s=JSON.parse('{"UU":"lcp/main-area"}');(0,e.registerBlockType)(s.UU,{edit:function(e){const{attributes:s,setAttributes:a}=e,{maxWidth:o="100%",expandVertical:l=!0}=s,c=(0,t.useBlockProps)(),p=(0,t.useInnerBlocksProps)(c);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.InspectorControls,{children:(0,i.jsx)(r.PanelBody,{title:(0,n.__)("Max Width Settings","lcp"),initialOpen:!0,children:(0,i.jsxs)("div",{className:"max-width-settings",children:[(0,i.jsx)(r.__experimentalUnitControl,{onChange:e=>{a({maxWidth:e})},value:o,defaultUnit:"px"}),(0,i.jsx)(r.ToggleControl,{label:(0,n.__)("Enable Vertical Expansion","lcp"),checked:l,onChange:e=>{a({expandVertical:e})}})]})})}),(0,i.jsx)("div",{...p,id:"lcp-main-container",style:{minHeight:"200px"},children:(0,i.jsx)(t.InnerBlocks,{...p})})]})},save:function({attributes:e}){const{maxWidth:n="100%",expandVertical:r}=e,s=t.useBlockProps.save(),a=r?`${s.className} lcp-grow-vertical`:s.className,o={maxWidth:n};return(0,i.jsx)("div",{...s,id:"lcp-main-container",className:a,style:o,children:(0,i.jsx)(t.InnerBlocks.Content,{})})}})}},t={};function r(e){var i=t[e];if(void 0!==i)return i.exports;var s=t[e]={exports:{}};return n[e](s,s.exports,r),s.exports}r.m=n,e=[],r.O=(n,t,i,s)=>{if(!t){var a=1/0;for(p=0;p<e.length;p++){t=e[p][0],i=e[p][1],s=e[p][2];for(var o=!0,l=0;l<t.length;l++)(!1&s||a>=s)&&Object.keys(r.O).every((e=>r.O[e](t[l])))?t.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(p--,1);var c=i();void 0!==c&&(n=c)}}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,i,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 i,s,a=t[0],o=t[1],l=t[2],c=0;if(a.some((n=>0!==e[n]))){for(i in o)r.o(o,i)&&(r.m[i]=o[i]);if(l)var p=l(r)}for(n&&n(t);c<a.length;c++)s=a[c],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 i=r.O(void 0,[350],(()=>r(998)));i=r.O(i)})();

7
includes/blocks/lcp-main-area/src/block.json
View File

@ -3,7 +3,7 @@
"apiVersion": 3,
"name": "lcp/main-area",
"version": "0.1.0",
"title": "Main Content",
"title": "Content Container",
"category": "widgets",
"icon": "smiley",
"description": "Viewport container which is designed to be the parent of all other blocks",
@ -16,7 +16,12 @@
"type": "string",
"default": "100%"
},
"expandVertical": {
"type": "boolean",
"default": true
}
},
"textdomain": "lcp-viewport",
"editorScript": "file:./index.js",

16
includes/blocks/lcp-main-area/src/edit.js
View File

@ -1,11 +1,11 @@
import { __ } from '@wordpress/i18n';
import { useBlockProps, InnerBlocks, useInnerBlocksProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, __experimentalUnitControl as UnitControl } from '@wordpress/components';
import { PanelBody, ToggleControl, __experimentalUnitControl as UnitControl } from '@wordpress/components';
import './editor.scss';
export default function Edit(props) {
const { attributes, setAttributes } = props;
const { maxWidth = '100%' } = attributes; // Default value for maxWidth if not set
const { maxWidth = '100%', expandVertical = true } = attributes; // Default value for maxWidth if not set
// Function to handle the change of maxWidth
const handleMaxWidthChange = (value) => {
@ -20,6 +20,11 @@ export default function Edit(props) {
maxWidth: maxWidth,
};
const handleExpandVerticalChange = (value) => {
setAttributes({ expandVertical: value });
};
return (
<>
{/* Inspector Controls for maxWidth */}
@ -32,12 +37,17 @@ export default function Edit(props) {
value={maxWidth} // Current value of maxWidth
defaultUnit="px" // Optional: default unit for UnitControl
/>
<ToggleControl
label={__('Enable Vertical Expansion', 'lcp')}
checked={expandVertical} // Bind to expandVertical attribute
onChange={handleExpandVerticalChange} // Function to update expandVertical
/>
</div>
</PanelBody>
</InspectorControls>
{/* Main block content */}
<div {...innerBlocksProps} id="lcp-main-wrap">
<div {...innerBlocksProps} id="lcp-main-container" style={{minHeight:'200px'}}>
<InnerBlocks {...innerBlocksProps} />

2
includes/blocks/lcp-main-area/src/editor.scss
View File

@ -8,6 +8,6 @@
border: 1px dotted #f00;
}
#lcp-main-wrap {
.has-sidecontent #lcp-main-container {
margin-left:340px
}

32
includes/blocks/lcp-main-area/src/save.js
View File

@ -1,32 +1,22 @@
/**
* 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 } from '@wordpress/block-editor';
/**
* The save function defines the way in which the different attributes should
* be combined into the final markup, which is then serialized by the block
* editor into `post_content`.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
*
* @return {Element} Element to render.
*/
export default function Save( {attributes} ) {
const { maxWidth = '100%' } = attributes; // Destructure maxWidth from attributes (with a default value)
export default function Save( { attributes } ) {
const { maxWidth = '100%', expandVertical } = attributes; // Destructure maxWidth and expandVertical from attributes (with default values)
// Define the block props
const blockProps = useBlockProps.save();
// Prepare the className based on expandVertical attribute
const className = expandVertical ? `${blockProps.className} lcp-grow-vertical` : blockProps.className;
// Define the style object
const style = {
maxWidth: maxWidth,
};
return (
<div {...blockProps} id="lcp-main-wrap" style={style}>
<InnerBlocks.Content />
return (
<div {...blockProps} id="lcp-main-container" className={className} style={style}>
<InnerBlocks.Content />
</div>
);
}