Changes to blocks and styles

includes/blocks/lcp-main-area/src/block.json

@@ -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",

includes/blocks/lcp-main-area/src/edit.js

@@ -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} />

includes/blocks/lcp-main-area/src/editor.scss

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

includes/blocks/lcp-main-area/src/save.js

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