Skip to content

Instantly share code, notes, and snippets.

@MonteLogic
Forked from ryanwelcher/block.json
Last active September 16, 2022 15:52
Show Gist options
  • Select an option

  • Save MonteLogic/1cc795c558e9d28c8bfd28e154dfb21a to your computer and use it in GitHub Desktop.

Select an option

Save MonteLogic/1cc795c558e9d28c8bfd28e154dfb21a to your computer and use it in GitHub Desktop.
/**
* 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>
);
}
/**
* 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>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment