0

目前我正在建造我的第一个古腾堡街区。一切似乎都很好，除了编辑器字段显示 h2 和 p 元素双精度。有什么我想念的吗？

我已经在整个互联网上搜索了这个问题，但我无法找到解决这个问题的方法。

在此处输入图像描述

下面你会看到我写的古腾堡代码。也许我错过了什么？还是有错别字？

/**
 * Block dependencies
 */
import icons from './icons';
import './editor.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const {
    registerBlockType,
} = wp.blocks;

const {
  InspectorControls,
  RichText,
  MediaUpload,
} = wp.editor;

const {
    Tooltip,
    PanelBody,
    PanelRow,
    FormToggle,
    Button,
} = wp.components;

/**
 * Register example block
 */
export default registerBlockType('mfgb/banner', {
        title: __( 'Banner Block', 'mfgb' ),
        description: __( 'Voeg een banner toe aan de website (met of zonder tekst)', 'mfgb'),
        category: 'common',
        icon: {
            background: 'rgba(254, 243, 224, 0.52)',
            src: icons.upload,
        },
        keywords: [
            __( 'Image', 'mfgb' ),
            __( 'MediaUpload', 'mfgb' ),
            __( 'Message', 'mfgb' ),
        ],
        attributes: {
            title: {
                type: 'array',
                source: 'children',
                selector: 'h2',
            },
            content: {
                type: 'array',
                source: 'children',
                selector: 'p',
            },
            backgroundImage: {
                type: 'string',
                default: '', // no image by default!
            },
            contentControl: {
                type: 'boolean',
                default: false,
            },
        },

        edit: props => {

          const { attributes: { title, content, backgroundImage, contentControl, Component },
              className, setAttributes } = props;

          const toggleContentControl = () => setAttributes( { contentControl: ! contentControl } );

          function onTitleChange(changes) {
            setAttributes({
                title: changes
            });
          }

          function onContentChange(changes) {
            setAttributes({
                content: changes
            });
          }

          function onImageSelect(imageObject) {
            setAttributes({
                backgroundImage: imageObject.sizes.full.url
            })
          }

          return ([
            <InspectorControls>

              <PanelBody
                  title={ __( 'Tekst opties', 'mfgb' ) }
              >
                  <PanelRow>
                      <label
                          htmlFor="has-text-form-toggle"
                      >
                          { __( 'Bevat deze banner tekst?', 'mfgb' ) }
                      </label>
                      <FormToggle
                          id="has-text-form-toggle"
                          label={ __( 'Bevat tekst...', 'mfgb' ) }
                          checked={ contentControl }
                          onChange={ toggleContentControl }
                      />
                  </PanelRow>
              </PanelBody>

              <PanelBody
                  title={ __( 'Selecteer een achtergrond afbeelding', 'mfgb' ) }
              >
                <PanelRow>
                    <MediaUpload
                        onSelect={onImageSelect}
                        type="image"
                        value={backgroundImage} // make sure you destructured backgroundImage from props.attributes!
                        render={ ( { open } ) => (
                            <Button
                                className={ "button button-large" }
                                onClick={ open }
                            >
                                { icons.upload }
                                { __( ' Upload Image', 'mfgb' ) }
                            </Button>
                        ) }
                    />
                    <img src={backgroundImage} />
                </PanelRow>
            </PanelBody>

            </InspectorControls>,
            <div
                className={className}
                style={{
                    backgroundImage: `url(${backgroundImage})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center'
                }}>
                <div className="overlay"></div> {/* Adding an overlay element */}

                { contentControl == true &&
                  <div>
                    <RichText
                        tagName="h2"
                        className="title" // adding a class we can target
                        value={title}
                        onChange={onTitleChange}
                        placeholder="Voer de titel in"
                    />
                    <RichText
                        tagName="p"
                        className="content" // adding a class we can target
                        value={content}
                        onChange={onContentChange}
                        placeholder="Voer de text in..."
                    />
                </div>
                }

            </div>
          ]);
        },
        save: props => {
          const { attributes, className } = props;
          const { title, content, contentControl, backgroundImage } = props.attributes;

          return (
              <div
              className={className}
              style={{
                    backgroundImage: `url(${backgroundImage})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center'
                }}>
                  <div className="overlay"></div>
                  {/* the class also needs to be added to the h2 for RichText */}
                  { contentControl == true && (
                  <h2 class="title">{title}</h2>
                  )}
                  { contentControl == true && (
                  <p class="content">{content}</p>
                  )}
              </div>
          );
        },
    },
);
4

2 回答 2

1

backgroundImage我看到的一个问题是，设置为的默认值null与''我的错误相比。当我将 backgroundImage 更改为以下内容时，它起作用了：

backgroundImage: {
  type: 'string',
  default: '', // no image by default!
},

我无法用编辑器中的两个项目复制问题。它只为我显示了一个。

值得注意的是，在保存设置中呈现 RichText 内容的工作方式与您拥有它的方式略有不同。它应该是

<RichText.Content
  tagName="h2"
  value={ title }
/>

古腾堡手册中有关 RichText 的更多信息

于 2019-01-29T15:13:08.447 回答
0

我已经经历过几次同样的情况，在挣扎了一段时间后，我意识到这个问题通常是由自定义 CSS 引起的，特别是由margin-top属性引起的。

有两个“重复”元素是正常行为，因为第一个包含您手动输入的内容，另一个用作占位符。当占位符由于第一个元素中没有自定义内容而可见时，最后一个元素会收到position: absolute导致这种奇怪行为的 a 。手动插入一些内容后，占位符会随着问题一起消失。如果您清空该字段，占位符和问题会再次出现。

因此，总而言之，避免margin-top使用与占位符一起播放的元素。希望他们能找到一种不同的方法来解决这个问题，因为有时避免使用不应该造成麻烦的东西是一种限制。

希望有帮助:)

于 2019-03-17T06:33:37.557 回答