Question

当前，我正在构建我的第一个gutenberg块。一切似乎都很好，除了Editor字段显示h2和p元素为double之外。有什么我想念的吗？

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

在下面，您将看到我编写的古登堡代码。也许我缺少什么？还是有错字？

/**
 * 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>
          );
        },
    },
);

Answer 1

一个问题我看到的是，默认值backgroundImage设定为null与''通过对我一个错误。当我改变和backgroundImage下列它的工作：

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

我是不是能够在编辑器两个项目重复的问题。它只对我显示一个。

值得注意的是，尽管在保存设置中呈现RichText内容与您所拥有的内容有些不同。应该是

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

有关RichText here in the Gutenberg Handbook的更多信息

Answer 2

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

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

因此，总而言之，对于与占位符一起使用的元素，请避免使用margin-top。希望他们能为此找到不同的方法，因为有时使用某种本不应该引起麻烦的东西来限制自己。

希望有帮助：）

古腾堡块RichText元素在编辑器中被双重显示

2 个答案: