WordPress gutenberg 自定义块无法渲染

tf7tbtn2 于 2023-06-05 发布在 WordPress

关注(0)|答案(1)|浏览(169)

bounty将在21小时后到期。此问题的答案有资格获得+50声望奖励。Phil Huhn正在寻找一个答案从一个有信誉的来源：我还没有弄清楚，真的需要帮助。

我在试着重写 gutenberg 块的短代码我在React方面没有经验，尽管我自2017年以来一直在编写Angular 2+。
我使用以下命令创建了我的块：

> npx @wordpress/create-block give-camp-blocks-plugin

我建立并经营它。我的块视觉编辑良好。我可以使用浏览器检查，它有适当的HTML。但是，切换到“代码编辑器”，所有呈现的内容如下：

<!-- wp:create-block/give-camp-blocks-plugin /-->

然后，我得到以下错误：

TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at l (http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:2:19718)
    at Object.__unstableMarkListeningStores (http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:2:20176)
    at http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:9:2223
    at p (http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:9:2121)
    at http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:9:2214
    at $e (http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:9:2643)
    at Be (http://localhost:9139/wp-includes/js/dist/data.min.js?ver=90cebfec01d1a3f0368e:9:2964)
    at hs (http://localhost:9139/wp-includes/js/dist/editor.min.js?ver=f49ef02c2dddb31edd0e:19:124768)
    at kt (http://localhost:9139/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:47633)

我将实现精简到最低限度，如下所示：

const { __ } = wp.i18n;
import metadata from './block.json';
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';
//
registerBlockType( metadata.name, {
  apiVersion: metadata.apiVersion,
  title: metadata.title,
  //
  edit: ( { attributes, setAttributes } ) => {
    const { content } = attributes;
    const blockProps = useBlockProps( {
      className: "gc-marquee"
    } );
    blockProps['role'] = 'marquee';
    blockProps['aria-label'] = __(content);
    //
    return (
      <>
      <div
        { ...blockProps }
        >
        <RichText
          className="gc-scrollingtext"
          aria-hidden="true"
          tagName="p"
          placeholder={ 'Write text here ...' }
          value={ content }
          onChange={ ( value ) => setAttributes( { content: value } ) }
        />
      </div>
      </>
    );
  },
  save: ( { attributes } ) => {
    const { content } = attributes;
    const blockProps = useBlockProps.save( {
      className: "gc-marquee"
    } );
    blockProps['role'] = 'marquee';
    blockProps['aria-label'] = __(content);
    //
    return (
      <>
      <div
        { ...blockProps }
        >
        <RichText.Content
          className="gc-scrollingtext"
          aria-hidden="true"
          tagName="p"
          value={ content }
        />
      </div>
      </>
    );
  },
} );

以下是block.json的代码片段：

{
    ...
    "attributes": {
        "content":  {
            "type": "string",
            "source": "html",
            "selector": "p",
            "default": ""
        }
    },
    ...
}

当我单击“发布并刷新”时，页面已损坏，没有显示任何内容。不是标题，不是侧边栏，什么都不显示。我不知道我做错了什么。

wordpress

来源：https://stackoverflow.com/questions/76310063/wordpress-gutenberg-custom-block-fails-to-render

1条答案

按热度按时间

1rhkuytd1#

我在Gutenberg examples中找到了答案。所以，这就是我的最小示例现在看起来的样子：

const { __ } = wp.i18n;
import metadata from './block.json';
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';
//
registerBlockType( metadata.name, {
  apiVersion: metadata.apiVersion,
  title: metadata.title,
  //
  edit: ( props ) => {
    const {
      attributes: { content, padding },
      setAttributes,
    } = props;
    const blockProps = useBlockProps( {
      className: "gc-marquee"
    } );
    blockProps['role'] = 'marquee';
    blockProps['aria-label'] = __(content);
    //
    return (
      <div
        { ...blockProps }
        >
        <RichText
          className="gc-scrollingtext"
          aria-hidden="true"
          tagName="p"
          placeholder={ 'Write text here ...' }
          value={ content }
          onChange={ ( value ) => setAttributes( { content: value } ) }
        />
      </div>
    );
  },
  //
  // <!-- wp:give-camp/gc-test-sample -->
  // <div class="wp-block-give-camp-gc-test-sample gc-marquee" aria-label="ace" role="marquee">
  //  <p class="gc-scrollingtext" aria-hidden="true">ace</p>
  // </div>
  // <!-- /wp:give-camp/gc-test-sample -->
  //
  save: ( props ) => {
    const {
      attributes: { content }
    } = props;
    const blockProps = useBlockProps.save( {
      className: "gc-marquee"
    } );
    blockProps['role'] = 'marquee';
    blockProps['aria-label'] = __(content);
    //
    return (
      <div
        { ...blockProps }
        >
        <RichText.Content
          className="gc-scrollingtext"
          aria-hidden="true"
          tagName="p"
          value={ content }
        />
      </div>
    );
  },
} );

我删除了以下内容：

<>
...
</>

我改变了调用edit和保存来使用props，但我不知道这是否真的起了作用...
所以，我得到了最低限度的例子工作，但真实的的代码仍然没有工作。回到 gutenberg 的例子，我终于得到了真实的的代码来修改edit函数（我以为它会在保存中，但它不是）。

return (
  <div
    { ...blockProps }
    style={ {
      backgroundColor: bg_color, color: text_color, fontSize: font_size,
      padding: `${padding.top} ${padding.right} ${padding.bottom} ${padding.left}`
    } }
    >
    {
      <InspectorControls key="setting">
        <PanelBody
          ...
        </PanelBody>
      </InspectorControls>
    }
    <RichText
      className="gc-scrollingtext"
      style={ { margin: 0, } }
      aria-hidden="true"
      tagName="p"
      data-milli-sec={ milli_sec }
      value={ __(content) }
      placeholder={ placeholder }
      onChange={ ( value ) => setAttributes( { content: value } ) }
    />
  </div>
);

我不得不在InspectorControls周围放置一个类。

赞(0）回复(0）举报 2023-06-05

我来回答

WordPress gutenberg 自定义块无法渲染

1条答案

相关问题

热门标签

最新问答