Gutenberg Example for Greg

gistfile1.txt

import './style.scss';
import './editor.scss';

// Get just the __() localization function from wp.i18n
const { __ } = wp.i18n;
// Get registerBlockType and Editable from wp.blocks
const { registerBlockType, Editable } = wp.blocks;
// Set the h2 header for the block since it is reused
const blockHeader = <h2>{ __( 'Scripture Display' ) }</h2>;

/**
 * Register example block
 */
export default registerBlockType(
    // Namespaced, hyphens, lowercase, unique name
    'jsforwp/register-demo',
    {
        // Localize title using wp.i18n.__()
        title: __( 'Scripture Display' ),
        // Category Options: common, formatting, layout, widgets, embed
        category: 'common',
        // Dashicons Options - https://goo.gl/aTM1DQ
        icon: 'wordpress-alt',
        // Limit to 3 Keywords / Phrases
        keywords: [
            __( 'Bible' ),
            __( 'Faith' ),
            __( 'Scripture' ),
        ],
        // Set for each piece of dynamic data used in your block
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'div.my-content',
            },
        },
        // Determines what is displayed in the editor
        edit: props => {
            // Event handler to update the value of the content when changed in editor
            const onChangeContent = value => {
                props.setAttributes( { content: value } );
                console.log( props.attributes.content );
            };
            // Return the markup displayed in the editor, including a core Editable field
            return <div className={props.className}>
                <p>Type the scripture you would like to display on the front end.</p>
                <Editable
                    tagname="div"
                    multiline="p"
                    className="my-content"
                    placeholder={ __( 'I.e. Genesis 1:1' ) }
                    value={ props.attributes.content }
                    onChange={ onChangeContent }
                />
            </div>;
        },
        // Determines what is displayed on the frontend
        save: props => {
            const url = 'https://www.bible.com/search/bible?q=' + props.children;
            // Return the markup to display on the frontend
            return (
                <div className={ props.className }>
                    <div className="my-content">
                        <a href={ url }>Here's a link to your scripcture { props.attributes.content }</a>
                    </div>
                </div>
            );
        },
    },
);