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.