block.json

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "create-block/mol-custom-blocks",
	"version": "0.1.0",
	"title": "Monte Logic's Custom Blocks",
	"category": "text",
	"icon": "flag",
	"description": "A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride.",
	"attributes": {
		"message": {
			"type": "string",
			"source": "text",
			"selector": "div"
		},
		"time": {
			"type": "string",
			"source": "text",
			"selector": "div"
		},
		"hasCreated": {
			"type": "string",
			"source": "text",
			"selector": "div"
		}
	},
	"supports": {
		"html": false
	},
	"textdomain": "mol-custom-blocks",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

edit.js

/**
 * WordPress components that create the necessary UI elements for the block
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-components/
 */
import { TextControl } from '@wordpress/components';

/**
 * 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 } from '@wordpress/block-editor';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @param {Object}   props               Properties passed to the function.
 * @param {Object}   props.attributes    Available block attributes.
 * @param {Function} props.setAttributes Function that updates individual attributes.
 *
 * @return {WPElement} Element to render.
 */
import { Card, CardBody } from '@wordpress/components';

import { useEffect } from '@wordpress/element';







export default function Edit( { attributes, setAttributes } ) {

	const blockProps = useBlockProps();
	const hasCreatedVar = attributes.hasCreated;
useEffect(() => {

	console.log( attributes  );
	if ( !attributes.hasCreated ){
	  console.log( attributes  );
	  console.log ( "Not = 1" );

	  const d = new Date();
	  console.log(d);
	  console.log("Updated time");
      attributes.time = d.toString(); 
      attributes.hasCreated = 1; 
	  console.log( attributes  );

	}
      attributes.hasCreated =+ 1;

	  console.log( attributes  );

	console.log('Inserted');
	return () => {
		console.log('Removed');
    	attributes.hasCreated = 0; 
		console.log ( attributes.hasCreated );

	};
}, []);


	return (
		<div { ...blockProps }>
		<Card>
          <CardBody value={attributes.time}><b>New Day:</b> {attributes.time}  </CardBody>
	   </Card>

		</div>
	);
}

save.js

/**
 * 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 } 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
 *
 * @param {Object} props            Properties passed to the function.
 * @param {Object} props.attributes Available block attributes.
 * @return {WPElement} Element to render.
 */

/**
 *
 * {...blockProps} renders out to: "wp-block-create-block-gutenpride"
 *
 */

export default function save( { attributes } ) {
	const blockProps = useBlockProps.save();
	return <div { ...blockProps }>{attributes.time}  </div>;
}