Changes to directory structure

includes/blocks/lcp-header-container/src/save.js

@@ -0,0 +1,40 @@
+/**
+ * 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 }) {
+    // Destructure the 'sticky' attribute from the block attributes
+    const { sticky } = attributes;
+
+    // Block props
+    const blockProps = useBlockProps.save();
+
+    // Define a class based on the 'sticky' attribute
+    let stickyClass = '';
+    if (sticky === 'onScroll') {
+        stickyClass = 'lcp-sticky-on-scroll';
+    } else if (sticky === 'always') {
+        stickyClass = 'lcp-sticky';
+    } 
+    // Add the dynamic sticky class to the blockProps className
+    const className = `${blockProps.className} ${stickyClass}`;
+
+    return (
+        <div {...blockProps} className={className} id="lcp-header-container">
+            <InnerBlocks.Content />
+        </div>
+    );
+}