WordPress Gutenberg:이 블록에 예기치 않거나 잘못된 콘텐츠가 포함되어 있습니다.

WordPress Gutenberg:이 블록에 예기치 않거나 잘못된 콘텐츠가 포함되어 있습니다.

매우 간단한 텍스트 블록을 만들고 있습니다.처음 추가할 때 블록이 잘 작동합니다.페이지를 새로 고치고 블록을 편집하려고 하면 "This block contains in unexpected or invalid contents" 메시지가 나타납니다.html 유효성 검사를 해제하려고 했지만 소용이 없습니다.또한 resolve를 클릭한 후: 현재 블록과 변환 후 블록에 동일한 코드가 포함되어 있습니다.

http://prntscr.com/lwv18b
http://prntscr.com/lwv1e1

이것은 내 index.js 파일 코드입니다.

<pre>
/**
 * Block dependencies
 */
import icon from './icon';
import './style.css';

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




/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/richtext',
    {
        title: __('Bizbike Small Description', 'jsforwpblocks'),
        description: __('Default title', 'jsforwpblocks'),
        category: 'common',
        icon: 'text',
        keywords: [
            __('Text', 'jsforwpblocks'),
            __('Call to Action', 'jsforwpblocks'),
            __('Message', 'jsforwpblocks'),
        ],
        attributes: {
            message: {
                type: 'array',
                source: 'children',
                selector: '.message-body',
            }
        },
        supports: {
            // html: false,
            className: false,
            customClassName: false,
            html: false,
            htmlValidation: false,
        },
        edit: props => {
            const { attributes: { message }, className, setAttributes } = props;
            const onChangeMessage = message => { setAttributes({ message }) };
            return (
                <div id="small-text" className={className}>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder={__('Place the title', 'jsforwpblocks')}
                        onChange={onChangeMessage}
                        value={message}
                    />
                </div>
            );
        },
        save: props => {
            const { attributes: { message } } = props;
            return (
                <div>
                    <div class="commute text-center">
                        {message}
                    </div>
                </div>
            );
        },
    },
);

</pre>

이러한 오류를 진단하려면 브라우저 콘솔을 열고(+cmdopti Mac의 Chrome에서 Console 탭을 선택한 다음 다음과 같은 "Block validation" 오류를 찾습니다.

blocks.blocks?ver=6.2.5:8545 블록 검증:블록 유효성 검사 실패:avorg/block-rss

({name: "avorg/block-rss", 제목: "RSS 링크", 아이콘: {…}, 카테고리: "widgets", 속성: {…}).

생성된 콘텐츠save기능:

<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"></path></svg></a></div>

게시 본문에서 검색된 내용:

<div class="wp-block-avorg-block-rss"><a href="http://google.com" target="_blank" rel="noopener noreferrer"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-rss" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"></path></svg></a></div>

이 오류는 취득된HTML과 에 의해 생성된HTML에 의해 발생합니다.save기능이 일치하지 않습니다.이는 WordPress가 속성을 삽입할 때 발생할 수 있습니다.rel또는 블록이 사용된 이후 블록의 정의가 변경된 경우.

이 문제를 해결하려면 다음 중 하나를 수행해야 합니다.

1. 편집자 인터페이스를 클릭하여 블록 인스턴스를 블록의 수정된 정의와 일치하도록 업데이트합니다.
2. 블록을 구축한 경우,save반환되는 HTML이 데이터베이스에 유지되는 HTML과 동일하도록 함수를 설정합니다.

제 경우엔, 제가 이 모든 걸 할 수 있도록save함수 포함rel="noopener noreferrer"생성된<a>WordPress가 이 속성을 주입하면 블록 인스턴스의 HTML과 my가 생성하는 HTML이 일치하지 않게 됩니다.save기능.

편집 기능의 HTML 노드가 저장 기능의 HTML 노드와 일치하지 않기 때문에 오류가 발생합니다.

편집 기능에는 다음이 있습니다.

<div id="small-text" className={className}>
  <div>
    <p></p>
  </div>
</div>

저장 기능에는 1개의 추가 div-가 있습니다.

<div>
  <div class="commute text-center">
    <div>
      <p></p>
    </div>
  </div>
</div>

저도 비슷한 문제가 있는데 속성 정의를 잘못 설정했기 때문입니다.

는 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, message 타입으로서의 (「」)string는 '출처'가 되어야 합니다html하시는 RichText 및 #small-text★★★★★★★★★★★★★★★★★★:

    ...
    attributes: {
        message: {
            type: 'string',
            source: 'html',
            selector: '#small-text',
        }
    },

일반적으로 유형, 소스 및 셀렉터를 적절히 설정하기 위해 Attribute 설정에 주의하십시오.자세한 내용은 공식 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/53847264/wordpress-gutenberg-this-block-contains-unexpected-or-invalid-content