如何解决自定义Gutenberg块错误：“此块遇到错误，无法预览”

时间：2020-08-17 作者：Insight

我正在使用LinkedIn学习的一个插件来定制我自己插件的自定义Gutenberg块。

在我编辑完文件之后plugin/src/index.js （我编辑了edit() &；save() 功能），我现在有：

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>
    )
  }
});
在Microsoft Visual Code中，我正在运行进程wp-scripts start 我相信每次保存后都会重新编译插件。这个过程最初为我发现了一些语法错误，但我在的输出中没有收到更多语法错误wp-scripts start.

在本地dev WP站点中，当我尝试添加新块时，收到一个错误：

此块遇到错误，无法预览

在添加新块的同时，在Chrome控制台中，我看到：

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)
我很难理解。

我已设置：

define( \'WP_DEBUG\', true );
define( \'WP_DEBUG_LOG\', true );
define( \'WP_DEBUG_DISPLAY\', true );
但屏幕或调试日志中没有输出。

我在网上搜索过这个错误，大多数解决方案都涉及到更新WordPress或禁用插件。我只有Akismet&；MainWP子项，以及用于生成自定义块的插件。

禁用Akismet&；MainWP子级无法解决此问题。

我如何解决此错误？

感谢您的帮助。

2 个回复
SO网友:Will

将此附加变量添加到wp配置文件：

define ( \'SCRIPT_DEBUG\', true);
此外，inline styling directly in react is declared differently 与纯的香草CSS相似，但在许多方面有所不同。

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

在react中写为：

<ul className={ \'home-slider content-slider lightSlider lSFade\'} style={{ paddingBottom: \'71.9931%\', height: 0}}> {\'your content\'} </ul>（我的react代码可能不完全正确！）

正如上面的链接所指出的，我建议在一个单独的文件（已经在wp脚本中为您创建了）中设置css样式，而不是直接在react中。

SO网友:wbq

从我个人的经验来看，这两者的关系并不太好：

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


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


import logoWhiteURL from "../purity-logo.svg";
Destructuring 和import 给了我描述的错误。

通过如下方式重新创建SVG来修复它：


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});
如果您正在运行JSX编译，也可以尝试这样做：

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>,

  ...
});

标签： block-editor   小码农  

相关推荐