Reply To: Get post id

[chrisdavies71]

Hi Zac,

Here is the block.js file:

/**
 * BLOCK: current-rms-for-wordpress-gutenberg
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';
import icon from './icon';
import logo from './current-rms-logo.png';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { InspectorControls, } = wp.editor;
const { PanelBody, PanelRow, TextControl} = wp.components;

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise <code>undefined</code>.
 */
registerBlockType( 'cgb/current-rms-for-wordpress-gutenberg', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Current RMS' ), // Block title.
	description: 'Show your Current RMS system on your WordPress website using the new Gutenberg editor',
	icon: icon.current_rms_icon, // Block icon.
	category: 'embed', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'Hire' ),
		__( 'Sales' ),
		__( 'Store' ),
	],
	attributes: {
		apikey: {
			type: 'string',
			source: 'meta',
			meta: 'current_rms_apikey'
		},
		subdomain: {
			type: 'string',
			source: 'meta',
			meta: 'current_rms_subdomain'
		},
	},

	/**
	 * 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.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	 edit: function( props ) {
		 console.log ('output of props in edit:');
		 console.log ( props );
		const { attributes, setAttributes } = props;
		const { apikey, subdomain } = props.attributes;
		const onChangeAPIKey = value => { props.setAttributes( { apikey: value } ) };
		const onChangeSubDomain = value => { props.setAttributes( { subdomain: value } ) };

 		return ([
			<InspectorControls>
			  <PanelBody title={ __( 'API Settings' ) } >
				  <PanelRow>
						<TextControl
						  label={ __( 'API Key' ) }
							value={ apikey }
							onChange={ onChangeAPIKey }
						/>
					</PanelRow>
					<PanelRow>
					  <TextControl
						  label={ __( 'Subdomain' ) }
							value={ subdomain }
							onChange={ onChangeSubDomain }
						/>
					</PanelRow>
				</PanelBody>
			</InspectorControls>,
			// Creates a <p class='wp-block-cgb-block-cp-current-rms-plugin'></p>.
 		  <div className={ props.className }>
 				<img className="currentlogo" src="../wp-content/plugins/current-rms-for-wordpress-gutenberg/dist/assets/current-rms-logo.png" />
				{/*<img src={logo} className="currentlogo" alt="current-logo" />.*/}
 			</div>
 		]);
 	},

	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 */
	 save: function( props ) {
		 console.log ('output of props in save:');
		 console.log ( props );
 		return (
 			<div>
 				<div id="productlist">Loading...</div>
 					<script src="../wp-content/plugins/current-rms-for-wordpress-gutenberg/dist/assets/ajax.js"></script>
 			</div>
 		);
 	},
 } );