MonteLogic · September 16, 2022 15:52 · Sep 16, 2022 · Sep 16, 2022 · Sep 15, 2022 · Sep 15, 2022
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -1,2 +1,11 @@
 This gist is related to a project. Where it is scaffolded as a dynamic block using the following script: 
-"npx @wordpress/create-block mol-custom-block --variant=dynamic"
+"npx @wordpress/create-block mol-custom-block --variant=dynamic"
+
+
+
+
+
+
+
+
+https://www.twitch.tv/videos/1591609219?t=01h02m40s
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,2 @@
+This gist is related to a project. Where it is scaffolded as a dynamic block using the following script: 
+"npx @wordpress/create-block mol-custom-block --variant=dynamic"
diff --git a/save.js b/save.js
diff --git a/block.json b/block.json
@@ -9,19 +9,14 @@
 	"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"
+			"type": "string"
 		},
 		"time": {
-			"type": "string",
-			"source": "text",
-			"selector": "div"
+			"type": "string"
 		},
 		"hasCreated": {
 			"type": "string",
-			"source": "text",
-			"selector": "div"
+			"default":false
 		}
 	},
 	"supports": {

diff --git a/edit.js b/edit.js
@@ -30,53 +30,26 @@ import { Card, CardBody } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 
 
-
-
-
-
-
-export default function Edit( { attributes, setAttributes } ) {
+export default function Edit( { attributes: { hasCreated, time}, 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>
-	);
-}
-
+	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>
+	 );
+ }
 
 
diff --git a/index.js b/index.js
@@ -0,0 +1,33 @@
+/**
+ * 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,
+} );
diff --git a/index.php b/index.php
@@ -0,0 +1,25 @@
+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();
+}
+
diff --git a/save.js b/save.js
@@ -1,34 +0,0 @@
-/**
- * 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>;
-}
-
-
-
-

diff --git a/template.php b/template.php
@@ -0,0 +1,5 @@
+<?php
+$time = $attributes['time'] ?? '';?>
+<p <?php echo get_block_wrapper_attributes(); ?>>
+ <?php echo $time; ?>
+</p>
diff --git a/block.json b/block.json
@@ -0,0 +1,34 @@
+{
+	"$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"
+}
diff --git a/edit.js b/edit.js
@@ -0,0 +1,82 @@
+/**
+ * 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>
+	);
+}
+
+
+
diff --git a/save.js b/save.js
@@ -0,0 +1,34 @@
+/**
+ * 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>;
+}
+
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		This gist is related to a project. Where it is scaffolded as a dynamic block using the following script:
		"npx @wordpress/create-block mol-custom-block --variant=dynamic"