Элементы Gutenberg Block RichText дважды отображаются в редакторе

Question

В настоящее время я строю свой первый блок Гутенберга.Все выглядит хорошо, за исключением того, что поле редактора показывает 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>
          );
        },
    },
);

Answer 1

Я уже сталкивался с той же ситуацией несколько раз, и после некоторого времени борьбы с ней я понял, что проблема обычно вызывается пользовательским CSS, в частности, свойством margin-top.

Это нормальное поведение - иметь два «повторяющихся» элемента, поскольку первый содержит контент, который вы вводите вручную, а другой работает как заполнитель.Когда заполнитель виден из-за отсутствия пользовательского содержимого в первом элементе, последний получает position: absolute, что вызывает такое странное поведение.После того, как вы вручную вставите некоторый контент, заполнитель исчезнет вместе с проблемой.Если вы очистите поле, заполнитель и проблема вернутся снова.

Итак, в заключение, избегайте margin-top для элементов, которые играют вместе с заполнителями.Надеюсь, что они найдут другой подход для этого, потому что иногда это своего рода ограничение - избегать использования чего-то, что не должно вызывать проблем.

Надеюсь, это поможет:)

Answer 2

Одна проблема, которую я вижу, состоит в том, что значение по умолчанию для backgroundImage устанавливается на null против '' из-за ошибки для меня.Когда я изменил backgroundImage на следующее, оно работало:

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

Я не смог продублировать проблему с двумя элементами в редакторе.Он показал только один для меня.

Стоит отметить, что рендеринг содержимого RichText в настройках сохранения работает немного иначе, чем у вас.Это должно быть

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

Подробнее о RichText здесь в Руководстве Гутенберга