Changes to blocks

includes/blocks/lcp-viewport/src/edit.js

@@ -6,8 +6,10 @@ import './editor.scss';
 export default function Edit({ attributes, setAttributes }) {
     const { hasSidecontent } = attributes;
 
-    // Block props
-    const blockProps = useBlockProps();
+    // Block props with custom className management
+    const blockProps = useBlockProps({
+        className: hasSidecontent ? 'has-sidecontent' : '', // Custom class
+    });
 
     // Custom template logic based on hasSidecontent
     const template = [
@@ -31,15 +33,15 @@ export default function Edit({ attributes, setAttributes }) {
                 />
             </InspectorControls>
 
-            <p>
-                {__('Lcp Viewport – hello from the editor!', 'lcp-viewport')}
-            </p>
-
-            {/* Render the InnerBlocks with conditional template */}
-            <InnerBlocks
-                template={template} // Use the template logic here
-                renderAppender={renderAppender} // Custom appender logic
-            />
+            <div id="lcp-viewport-outer">
+                <div id="lcp-viewport-inner">
+                    {/* Render the InnerBlocks with conditional template */}
+                    <InnerBlocks
+                        template={template} // Use the template logic here
+                        renderAppender={renderAppender} // Custom appender logic
+                    />
+                </div>
+            </div>
         </div>
     );
 }

includes/blocks/lcp-viewport/src/save.js

@@ -13,13 +13,13 @@ export default function Save({ attributes }) {
     const { hasSidecontent } = attributes; // Retrieve the hasSidecontent attribute
     const blockProps = useBlockProps.save();
 
-    // Conditionally add the .lcp-has-sidecontent class if hasSidecontent is true
-    const hasSidecontentClass = hasSidecontent ? 'class="lcp-has-sidecontent"' : null;
+    // Conditionally add the 'has-sidecontent' class if hasSidecontent is true
+    const className = hasSidecontent ? 'has-sidecontent' : '';
 
     return (
-        <div {...blockProps} id="lcp-viewport-outer" >
-            <div hasSidecontentClass id="lcp-viewport-inner">
-            <InnerBlocks.Content />
+        <div  class={className} id="lcp-viewport-outer">
+            <div id="lcp-viewport-inner" class={className}>
+                <InnerBlocks.Content />
             </div>
         </div>
     );

includes/blocks/lcp-viewport/src/style.scss

@@ -5,3 +5,9 @@
  * Replace them with your own styles or remove the file completely.
  */
 
+ #lcp-viewport-inner {
+    display: block;  /* Arrange the side content and main content side-by-side */
+    width: 100%;
+    position: relative; /* To ensure side content stays in place */
+
+}