Changes to blocks

includes/blocks/lcp-sidecontent/src/block.json

@@ -9,7 +9,10 @@
 	"description": "A separate content area to be nested inside the LCP viewport",
 	"example": {},
 	"supports": {
-		"html": false
+		"color": {
+			"background": true,
+			"text": false
+		}
 	},
 	"textdomain": "lcp",
 	"editorScript": "file:./index.js",

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

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
-import { useBlockProps, InnerBlocks} from '@wordpress/block-editor';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 /**
  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
@@ -30,15 +30,23 @@ import './editor.scss';
  * @return {Element} Element to render.
  */
 export default function Edit() {
-	return (<div>
-		<p { ...useBlockProps() }>
-			{ __( 'Lcp Sidecontent – hello from the editor!', 'lcp' ) }
-		</p>
-				<InnerBlocks
-				// Optional: You can provide a template or allowed blocks
-				// template={[['core/paragraph'], ['core/image']]}
+	// Block props
+	const blockProps = useBlockProps();
 
-			/>
+	// Custom appender logic (you can customize this as needed)
+	const renderAppender = () => {
+		return <InnerBlocks.ButtonBlockAppender />;
+	};
+
+	return (
+		<div {...useBlockProps}>
+			<div id="lcp-sidecontent">
+				<InnerBlocks
+					// Optional: You can provide a template or allowed blocks
+					// template={[['core/paragraph'], ['core/image']]}
+					renderAppender={renderAppender} // Add the custom appender here
+				/>
 			</div>
+		</div>
 	);
 }

includes/blocks/lcp-sidecontent/src/editor.scss

@@ -7,3 +7,16 @@
 .wp-block-create-block-lcp-sidecontent {
 	border: 1px dotted #f00;
 }
+
+#lcp-sidecontent {
+    position: absolute; /* or fixed depending on your JS logic */
+    left: 0;
+    background: #fff;
+    width: 340px; /* Fixed width of 340px */
+    height: 100%;
+    overflow: scroll;
+    z-index: 2;
+    border-right: 2px solid #eee;
+    outline: 0;
+    top: var(--my-top); /* Dynamically controlled top position via JS */
+}

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

@@ -21,8 +21,17 @@ export default function Save() {
     return (
         <div {...blockProps} id="lcp-sidecontent">
 
+            <div id="lcp-sidecontent-inner">
+
                 <InnerBlocks.Content />
-            
-        </div>
+            </div>
+            <div id="lcp-scroll-track">
+                <div id="lcp-scroll-bar">
+                    
+                </div>
+            </div>
+               
+        </div>    
+       
     );
 }

includes/blocks/lcp-sidecontent/src/view.js

@@ -21,5 +21,5 @@
  */
 
 /* eslint-disable no-console */
-console.log( 'Hello World! (from create-block-lcp-sidecontent block)' );
+
 /* eslint-enable no-console */