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"
		},
		"time": {
			"type": "string"
		},
		"hasCreated": {
			"type": "string",
			"default":false
		}
	},
	"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: { hasCreated, time}, setAttributes } ) {

	const blockProps = useBlockProps();
	useEffect(() => {
		if ( !hasCreated ){
			const d = new Date();
			setAttributes( { hasCreated: 1, time: d.toString()} )
		}
		// setAttributes( { hasCreated: hasCreated =+ 1} );
	}, []);


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

		 </div>
	 );
 }

index.js

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import metadata from './block.json';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
	/**
	 * @see ./edit.js
	 */
	edit: Edit,
} );

index.php

function create_block_acf_expert_block_init() {
	register_block_type(
		__DIR__ . '/build',
		array(
			'render_callback' => 'create_block_acf_expert_render_callback',
		)
	);
}
add_action( 'init', 'create_block_acf_expert_block_init' );

/**
 * Render callback function.
 *
 * @param array    $attributes The block attributes.
 * @param string   $content    The block content.
 * @param WP_Block $block      Block instance.
 *
 * @return string The rendered output.
 */
function create_block_acf_expert_render_callback( $attributes, $content, $block ) {
	ob_start();
	require plugin_dir_path( __FILE__ ) . 'build/template.php';
	return ob_get_clean();
}

save.js

template.php

<?php
$time = $attributes['time'] ?? '';?>
<p <?php echo get_block_wrapper_attributes(); ?>>
 <?php echo $time; ?>
</p>