How to use the @wordpress/element.useLayoutEffect function in @wordpress/element

blocks,
	settings,
	scaleToFit = true,
	scaleAdjustment = 1,
	isScaled = true,
} ) {
	blocks = castArray( blocks );

	const previewRef = useRef( null );

	const [ isTallPreview, setIsTallPreview ] = useState( false );
	const [ previewScale, setPreviewScale ] = useState( 1 );
	const [ visibility, setVisibility ] = useState( 'hidden' );

	// Dynamically calculate the scale factor
	useLayoutEffect( () => {
		if ( ! scaleToFit ) {
			setVisibility( 'visible' );
			return;
		}
		const blockClientIds = blocks.map( ( block ) => block.clientId );

		// Timer - required to account for async render of `BlockEditorProvider`
		const timerId = setTimeout( () => {
			window.clearTimeout( timerId );
			const previewContainer = previewRef.current;

			if ( ! previewContainer ) {
				return;
			}

			const comparisonBlock = blockClientIds.reduce( ( acc, currClientId ) => {

// Make sure to allow the user to click in the text box while working on the text.
	const onClick = ( evt ) => {
		const editor = editorRef.current;
		// Refocus the editor if the container outside it is clicked.
		if ( ! editor.editorContainer.contains( evt.target ) ) {
			editor.focus();
		}
		evt.stopPropagation();
	};

	// Handle basic key commands such as bold, italic and underscore.
	const handleKeyCommand = getHandleKeyCommand( setEditorState );

	// Set focus when initially rendered
	useLayoutEffect( () => {
		editorRef.current.focus();
	}, [] );

	useEffect( () => {
		maybeEnqueueFontStyle( fontFamily );
	}, [ fontFamily, maybeEnqueueFontStyle ] );

	return (
		<element>
			
		</element>

function FillComponent( { name, children, registerFill, unregisterFill } ) {
	const slot = useSlot( name );

	const ref = useRef( {
		name,
		children,
	} );

	if ( ! ref.current.occurrence ) {
		ref.current.occurrence = ++occurrences;
	}

	useLayoutEffect( () => {
		registerFill( name, ref.current );
		return () => unregisterFill( name, ref.current );
	}, [] );

	useLayoutEffect( () => {
		ref.current.children = children;
		if ( slot && ! slot.props.bubblesVirtually ) {
			slot.forceUpdate();
		}
	}, [ children ] );

	useLayoutEffect( () => {
		if ( name === ref.current.name ) {
			// ignore initial effect
			return;
		}

isMounting.current = false;
	}, [ isSelected ] );

	// Focus the first multi selected block
	useEffect( () => {
		if ( isFirstMultiSelected ) {
			wrapper.current.focus();
		}
	}, [ isFirstMultiSelected ] );

	// Block Reordering animation
	const animationStyle = useMovingAnimation( wrapper, isSelected || isPartOfMultiSelection, isSelected || isFirstMultiSelected, enableAnimation, animateOnChange );

	// Focus the breadcrumb if the wrapper is focused on navigation mode.
	// Focus the first editable or the wrapper if edit mode.
	useLayoutEffect( () => {
		if ( isSelected ) {
			if ( isNavigationMode ) {
				breadcrumb.current.focus();
			} else {
				focusTabbable( true );
			}
		}
	}, [ isSelected, isNavigationMode ] );

	// Other event handlers

	/**
	 * Marks the block as selected when focused and not already selected. This
	 * specifically handles the case where block does not set focus on its own
	 * (via `setFocus`), typically if there is no focusable input in the block.
	 */

as: Component = 'div',
	...props
} ) {
	const registry = useSlotFillContext();
	const ref = useRef();
	const slot = useSlot( name );
	const propsAreEqual = slot && isShallowEqual( slot.fillProps, fillProps );

	useEffect( () => {
		registry.register( name, ref, fillProps );
		return () => {
			registry.unregister( name );
		};
	}, [ name ] );

	useLayoutEffect( () => {
		if ( slot && ! propsAreEqual ) {
			registry.update( name, ref, fillProps );
		}
	}, [ slot, propsAreEqual, fillProps ] );

	return ;
}

const pageRefs = useRef( [] );

	useLayoutEffect( () => {
		const observer = new ResizeObserver( ( entries ) => {
			for ( const entry of entries ) {
				const offsetWidth = entry.contentBoxSize ? entry.contentBoxSize.inlineSize : entry.contentRect.width;
				setHasHorizontalOverflow( Math.ceil( listRef.current.scrollWidth ) > Math.ceil( offsetWidth ) );
			}
		} );

		observer.observe( listRef.current );

		return () => observer.disconnect();
	}, [ pages.length ] );

	useLayoutEffect( () => {
		if ( hasHorizontalOverflow ) {
			const currentPageRef = pageRefs.current[ currentPageId ];

			if ( ! currentPageRef || ! currentPageRef.scrollIntoView ) {
				return;
			}

			currentPageRef.scrollIntoView( {
				inline: 'center',
				behavior: 'smooth',
			} );
		}
	}, [ currentPageId, hasHorizontalOverflow, pageRefs ] );

	const handleClickPage = ( page ) => () => setCurrentPage( { pageId: page.id } );

}
	}, [] );

	/**
	 * Scroll to the highlighted item when it changes.
	 */
	useEffect( () => {
		const newCurrentPage = carouselListRef.current.children.item( highlightedItemIndex );

		setCurrentPage( newCurrentPage, true, false );
	}, [ highlightedItemIndex, pageWidth, setCurrentPage ] );

	/**
	 * Set up a scroll listener to set an item as the currentPage as it crosses the center of the view.
	 */
	useLayoutEffect( () => {
		let mounted = true;
		const currentCarouselList = carouselListRef.current;

		const scrollCallback = debounce( () => {
			if ( ! mounted ) {
				return;
			}
			for ( const child of [ ...currentCarouselList.children ] ) {
				if ( child.offsetLeft >= currentCarouselList.scrollLeft ) {
					if ( child !== currentPage ) {
						setCurrentPage( child, false );
					}
					return;
				}
			}
		}, 300 );

function DropZone( { children, onDrop, pageIndex, dragIndicatorOffset } ) {
	const dropZoneElement = useRef( null );
	const [ dropZone, setDropZone ] = useState( null );
	const { actions: { registerDropZone, unregisterDropZone, resetHoverState }, state: { hoveredDropZone } } = useDropZone();

	useLayoutEffect( () => {
		setDropZone( {
			node: dropZoneElement.current,
		} );
	}, [ dropZoneElement ] );

	useLayoutEffect( () => {
		registerDropZone( dropZone );
		return () => {
			unregisterDropZone( dropZone );
			setDropZone( null );
		};
	}, [ dropZone, registerDropZone, unregisterDropZone ] );

	const getDragType = ( { dataTransfer } ) => {
		if ( dataTransfer ) {
			if ( Array.isArray( dataTransfer.types ) ) {
				if ( dataTransfer.types.includes( 'Files' ) ) {
					return 'file';
				}
				if ( dataTransfer.types.includes( 'text/html' ) ) {
					return 'html';
				}

isFullbleed,
		...rest
	},
} ) {
	const { Frame } = getDefinitionForType( type );
	const element = useRef();

	const {
		actions: { setNodeForElement, handleSelectElement },
	} = useCanvas();

	const {
		state: { selectedElements },
	} = useStory();

	useLayoutEffect( () => {
		setNodeForElement( id, element.current );
	}, [ id, setNodeForElement ] );

	const isSelected = selectedElements.includes( id );

	const box = getBox( { x, y, width, height, rotationAngle, isFullbleed } );
	const props = { ...box, ...rest, id };

	return (
		 {
				if ( ! isSelected ) {
					handleSelectElement( id, evt );
				}

const useWpAdminFullscreen = ( bodyClasses = [] ) => {
	const classes = [ ...bodyClasses, 'sensei-wp-admin-fullscreen' ];

	const setupGlobalStyles = () => {
		toggleGlobalStyles( true );
		return toggleGlobalStyles.bind( null, false );
	};

	const toggleGlobalStyles = ( enabled ) => {
		if ( enabled ) document.body.classList.add( ...classes );
		else document.body.classList.remove( ...classes );

		document.documentElement.classList.toggle( 'wp-toolbar', ! enabled );
	};

	useLayoutEffect( setupGlobalStyles, [ bodyClasses ] );
};