41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
/**
|
|
* 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>
|
|
);
|
|
}
|