newsletter-javascript.js

const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { createElement, Fragment, cloneElement } = wp.element;
const { RichText, URLInput, AlignmentToolbar, InspectorControls, BlockControls } = wp.editor;
const { createHigherOrderComponent, withState } = wp.compose;
const { Button, PanelBody, TextControl, ToggleControl, SelectControl, IconButton } = wp.components;

registerBlockType( 'hello-tools/newsletter-signup', {
  title: __( 'Newsletter signup', 'hello-tools' ),
  icon: 'email-alt',
  category: 'hello-blocks',
  supports: {
    multiple: false,
  },

  edit: ( props ) => {

    const { attributes: { headline, blurb, bgColor, bgClass, btnClass, blockClasses }, setAttributes, className, isSelected } = props;

    const setBgColor = ( value ) => {

      setAttributes( { bgColor: value } );

      switch ( value ) {
        case 'white':
          setAttributes( { bgClass: 'hello-bg--white' } );
          setAttributes( { btnClass: 'hello-btn--blue' } );
          break;
        case 'blue-gradient':
          setAttributes( { bgClass: 'hello-bg--blue-gradient hello-text--white' } );
          setAttributes( { btnClass: 'hello-btn--blue' } );
          break;
        case 'blue':
          setAttributes( { bgClass: 'hello-bg--blue hello-text--white' } );
          setAttributes( { btnClass: 'hello-btn--orange' } );
          break;
        case 'gray':
          setAttributes( { bgClass: 'hello-bg--faint-gray' } );
          setAttributes( { btnClass: 'hello-btn--blue' } );
          break;
        case 'transparent':
          setAttributes( { bgClass: 'hello-bg--transparent' } );
          setAttributes( { btnClass: 'hello-btn--blue' } );
          break;
        default:
          setAttributes( { bgClass: 'hello-bg--white' } );
          setAttributes( { btnClass: 'hello-btn--blue' } );
      }

    }

    return (
      <div className={ `text-center ${blockClasses} ${bgClass}` }>
        <div className="hello-tools-newsletter-signup__wrap text-center mx-auto">
          <InspectorControls>
            <PanelBody title={ __( 'Newsletter settings', 'hello-tools' ) }>
              <SelectControl
                label={ __( 'Background color', 'hello-tools' ) }
                value={ bgColor }
                onChange={ setBgColor }
                options={ [
                    { value: 'white', label: __( 'White', 'hello-tools' ) },
                    { value: 'blue-gradient', label: __( 'Blue Gradient', 'hello-tools' ) },
                    { value: 'blue', label: __( 'Blue', 'hello-tools' ) },
                    { value: 'gray', label: __( 'Gray', 'hello-tools' ) },
                    { value: 'transparent', label: __( 'Transparent', 'hello-tools' ) },
                ] }
              />
            </PanelBody>
          </InspectorControls>
          <TextControl
            className="hello-tools-newsletter-signup__headline h3 font-weight-bold"
            translate-name="headline"
            value={ headline }
            onChange={ value => setAttributes( { headline: value } ) }
            formattingControls={ [] }
          />
          { ( isSelected || ( blurb && blurb != '<p></p>' ) ) && ( 
            <RichText
              tagName="div"
              multiline="p"
              className="hello-tools-newsletter-signup__blurb  font-weight-bold"
              translate-name="blurb"
              onChange={ value => setAttributes( { blurb: value } ) }
              placeholder={ __( 'Subtext goes here (optional)', 'hello-tools' ) }
              value={ blurb }
              formattingControls={ [ 'link', 'italic' ] }
              focusOnInsert={ false }
            />
          ) }
          <div class="hello-tools-newsletter-signup__fieldwrap position-relative mx-auto">
            <div className="hello-tools-newsletter-signup__email px-4 mx-auto w-100 ltr-input text-left">
              { __( 'Enter email address...', 'hello-tools' ) }
            </div>
            <div className={`hello-tools-newsletter-signup__submit btn hello-btn ${btnClass}`}>
              { __( 'Subscribe', 'hello-tools' ) }
            </div>
          </div>
        </div>
      </div>
    );

  },

  save() {
    // Rendering in PHP
    return null;
  },
  
} );