1

I'm using a plugin from LinkedIn Learning to customize into my own plugin's custom Gutenberg blocks.

After I've edited the file plugin/src/index.js (I edited the edit() & save() functions), I now have:

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

In Microsoft Visual Code, I am running the process wp-scripts start which recompiles the plugin after every save I believe. This process originally found some syntax errors for me, but I receive no more syntax errors in the output of wp-scripts start.

In a local dev WP site, when I try to add the new block, I receive an error:

This block has encountered an error and cannot be previewed

At the same time as adding the new block, in the Chrome console, I see:

Error: Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at Pd (react-dom.min.js?ver=16.9.0:47)
    at nh (react-dom.min.js?ver=16.9.0:132)
    at lh (react-dom.min.js?ver=16.9.0:126)
    at O (react-dom.min.js?ver=16.9.0:121)
    at ze (react-dom.min.js?ver=16.9.0:118)
    at react-dom.min.js?ver=16.9.0:53
    at unstable_runWithPriority (react.min.js?ver=16.9.0:26)
    at Ma (react-dom.min.js?ver=16.9.0:52)
    at mg (react-dom.min.js?ver=16.9.0:52)
    at V (react-dom.min.js?ver=16.9.0:52)

which I'm having trouble understanding.

I've set:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', true );

but there is no output on screen or in a debug log.

I've searched online for the error, and most solutions involve updating WordPress or disabling plugins. I only have Akismet & MainWP child, plus the plugin to produce the custom blocks.

Disabling Akismet & MainWP child does not resolve the issue.

How would I go about troubleshooting this error?

Help appreciated.

Improve this question

2 Answers 2

Reset to default
1

Add this additional variable to your wp-config file:

define ( 'SCRIPT_DEBUG', true);

Also, inline styling directly in react is declared differently is similar but different in many ways than pure, vanilla CSS.

For example, <ul class="home-slider content-slider lightSlider lSFade" style="height: 0px; padding-bottom: 71.9931%;">

is written in react as:

<ul className={ 'home-slider content-slider lightSlider lSFade'} style={{ paddingBottom: '71.9931%', height: 0}}> {'your content'} </ul> (my react code may not be exactly correct!)

As the above link notes, I would recommend to style your css in a separate file (which is already created for you in wp-scripts) instead of directly within react.

Improve this answer
1
  • Thanks Will, that is gold. I've edited the file into this version but the original error remains, and the script debug info is very generic.
    – Insight
    Aug 19, 2020 at 3:10
0

From my personal experience this doesn't go along well together:

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


import { ReactComponent as Logo } from "../bv-logo.svg";


import logoWhiteURL from "../purity-logo.svg";

Destructuring and import gave me the described error.

Got it fixed by recreating the SVGs like so:


const logo = el(wp.primitives.SVG,
    {width: 20, height: 20, viewBox: '0 0 64 64'},
    el('g',
        {
          'fill-rule': 'evenodd',
          fill: 'none',
        },
        el('path', {
          fill: '#3B414C',
          d: 'M-102-193h600v450h-600z',
        }),
        el('g', {
              fill: '#2FC5C0',
              'fill-rule': 'nonzero',
            },
            el('path', {
              d: 'M0 0v63.096h63.096V0H0zm60.588 60.588H2.508V2.508h58.08v58.08z',
            }),
            el('path', {
              d: 'M24.156 44.748l.924 2.508 3.168-7.524-.132-.396s-5.808-15.048-7.788-20.196l-.264-.66h-6.072l.528 1.452c3.168 8.316 9.636 24.816 9.636 24.816zM36.696 44.748l.924 2.508 3.168-7.524-.132-.396s-5.808-15.048-7.788-20.196l-.264-.66h-6.072l.528 1.452c3.3 8.316 9.636 24.816 9.636 24.816zM47.388 18.48h-6.996l3.564 9.24z',
            }),
        ),
    ),
);
updateCategory('my-blocks', {icon: logo});

If you have JSX Compilation running you could also try to do this:

registerBlockType("podkit/home-slider", {
  title: __("Home Slider", "podkit"),
  icon: 
    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 5.162h-18M15 1.196l3.75 3.966L15 9.13" stroke="#e0004d" stroke-width="1.5" stroke-linejoin="round"/></svg>,

  ...
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.