index.js

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

// Import SVG as React component using @svgr/webpack.
// https://www.npmjs.com/package/@svgr/webpack
import { ReactComponent as Logo } from "../bv-logo.svg";

// Import file as base64 encoded URI using url-loader.
// https://www.npmjs.com/package/url-loader
import logoWhiteURL from "../purity-logo.svg";

// https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/
registerBlockType("podkit/home-slider", {
  title: __("Home Slider", "podkit"),
  icon: { src: Logo },
  category: "podkit",

  // https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/
  edit() {
    return (
      <section className={'ad-waypoint'} data-animate-down={'site-primary-menu-lrg'} data-animate-up={'site-primary-menu-lrg'}>
        <div className={'sec-zero-wrapper'}>
          <div className={'item'}>
              <div className={'lSSlideOuter'}>
                <div className={'lSSlideWrapper'}>
                  <ul className={'home-slider content-slider lightSlider lSFade'} style={'height: 0px, paddingBottom: 71.9931%'}>
                  <li className={'lslide'} style={'display: none'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/bag-packer_250767238-opt2.jpg") center center no-repeat, backgroundSize:cover, backgroundAttachment: fixed'}></div></li>
                  <li className={'lslide active'} style={'display: list-item'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_43604071-opt.jpg") center center no-repeat, backgroundSize: cover, backgroundAttachment: fixed'}></div></li>
                  <li className={'lslide'} style={'display: none'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_123343987-opt.jpg") center center no-repeat, backgroundSize: cover, backgroundAttachment: fixed'}></div></li>
                  <li className={'lslide'} style={'display: none'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/wind-turbines_13504843-opt.jpg") center center no-repeat, backgroundSize: cover, backgroundAttachment: fixed'}></div></li>
                </ul>
              </div>
              <ul className={'lSPager lSpg'} style={'margin-top: 5px'}>
                <li><a href="#">1</a></li>
                <li className={'active'}><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
              </ul>
            </div>
          </div>
          <div className={'sec-zero-thematic'}>
            <img src={logoWhiteURL} alt="main-brand-logo"/>
            <h3>imagination is only the begining</h3>
          </div>
          <div className={'secondary-menu'}>
            <div className={'center'}>
              <div className={'content-container'}>
                <div style={'margin-top:148px, position:absolute, width: calc(100% - 40px)'} className={'nav-rule'}></div>
                <div className={'site-navigation-head-btm'}>
                  <div className={'site-navigation-head-btm-25'}>
                    <div className={'menu-primary-bottom-menu-container'}>
                      <ul id={'menu-primary-bottom-menu'} className={'menu'}>
                        <li id={'menu-item-1124'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1124'}><a>Our clients</a></li>
                        <li id={'menu-item-1125'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1125'}><a>Relationships</a></li>
                        <li id={'menu-item-1132'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1132'}><a>Products</a></li>
                        <li id={'menu-item-1133'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1133'}><a>Latest News</a></li>
                      </ul>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    );
  },
  save() {
    return (
      <section className={'ad-waypoint'} data-animate-down={'site-primary-menu-lrg'} data-animate-up={'site-primary-menu-lrg'}>
        <div className={'sec-zero-wrapper'}>
          <div className={'item'}>
              <div className={'lSSlideOuter'}>
                <div className={'lSSlideWrapper'}>
                  <ul className={'home-slider content-slider lightSlider lSFade'} style={'height: 0px, padding-bottom: 71.9931%'}>
                  <li className={'lslide'} style={'display: none'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/bag-packer_250767238-opt2.jpg") center center no-repeat, backgroundSize:cover, backgroundAttachment: fixed'}></div></li>
                  <li className={'lslide active'} style={'display: list-item'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_43604071-opt.jpg") center center no-repeat, backgroundSize:cover, backgroundAttachment: fixed'}></div></li>
                  <li className={'lslide'} style={'display: none'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_123343987-opt.jpg") center center no-repeat, backgroundSize:cover, backgroundAttachment: fixed'}></div></li>
                  <li className={'lslide'} style={'display: none'}><div className={'sec-zero-bg'} style={'backgroundImage: url("http://purity.insightcomdes.local/wp-content/uploads/2016/03/wind-turbines_13504843-opt.jpg") center center no-repeat, background-size:cover,  background-attachment: fixed'}></div></li>
                </ul>
              </div>
              <ul className={'lSPager lSpg'} style={'margin-top: 5px'}>
                <li><a href="#">1</a></li>
                <li className={'active'}><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
              </ul>
            </div>
          </div>
          <div className={'sec-zero-thematic'}>
            <img src={logoWhiteURL} alt="main-brand-logo" />
            <h3>imagination is only the begining</h3>
          </div>
          <div className={'secondary-menu'}>
            <div className={'center'}>
              <div className={'content-container'}>
                <div style={'margin-top:148px, position:absolute, width: calc(100% - 40px)'} className={'nav-rule'}></div>
                <div className={'site-navigation-head-btm'}>
                  <div className={'site-navigation-head-btm-25'}>
                    <div className={'menu-primary-bottom-menu-container'}>
                      <ul id={'menu-primary-bottom-menu'} className={'menu'}>
                        <li id={'menu-item-1124'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1124'}><a>Our clients</a></li>
                        <li id={'menu-item-1125'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1125'}><a>Relationships</a></li>
                        <li id={'menu-item-1132'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1132'}><a>Products</a></li>
                        <li id={'menu-item-1133'} className={'menu-item menu-item-type-custom menu-item-object-custom menu-item-1133'}><a>Latest News</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    )
  }
});