Wordpress Gutenberg在保存时删除表标记

我正在尝试创建一个古腾堡块来跟踪练习集。我使用RichText组件允许用户编辑我为他们预先填充的表中的默认值

块在编辑器上运行良好，保存后在文章中正确渲染。然而，当我重新加载编辑器时，我收到以下错误消息：

块验证：预期的标记名为'thead'，而不是看到'table'。

这几乎就像古腾堡正在剥离

表

标记，但留下了其他所有内容

当然，这是没有道理的，但我不确定它还能是什么

以下是我的代码，经过大量编辑以提高可读性：

const { registerBlockType } = wp.blocks;
const { AlignmentToolbar, BlockAlignmentToolbar, BlockControls, RichText, useInnerBlockProps } = wp.blockEditor;
const { Component } = wp.element;

registerBlockType('bsd-strong-post/training-session', {
  title: __('Strong Post', 'bsd-strong-post'),
  description: __('Provides a short summary of a training session', 'bsd-strong-post'),
  category: 'common',
  icon: blockIcons.weight_lifting,
  keywords: [    
    __('strength workout', 'bsd-strong-post'),
    __('strong', 'bsd-strong-post'),
    __('training', 'bsd-strong-post')
  ],
  supports: {
    html: true
  },
  attributes: {
    /* ... */,
    dayTemplateContent: {
      type: 'string',
      source: 'html',
      selector: '.bsd-strong-post-training-template'
    },
    /* ... */
  },
  /* ... */
  edit: class extends Component {
    constructor(props) {
      super(...arguments);
      this.props = props;

      /* ... */

      this.dayTemplateHandler = this.dayTemplateHandler.bind(this);
      this.onChangeBlockTemplate = this.onChangeBlockTemplate.bind(this);
    }

    /* ... */

    dayTemplateHandler(new_val) { 
      const dayTemplateList = this.state.dayTemplateList;
      
      let selectedDayTemplate = dayTemplateList.filter(item => {
        return item.value == new_val;
      })

      if (selectedDayTemplate[0]['label']) {
        this.props.setAttributes({ 
          dayTemplateId: new_val,
          dayTemplateName: selectedDayTemplate[0]['label']
        });
      }

      this.getTemplate(new_val);
    }

    getTemplate(templateId) {
      api.getDayTemplate(templateId)
      .then((data) => {
        
        if (!data.status || data.status == 0) {
          return false;
        };

        if (!data.day_template) {
          return false;
        };

        this.props.setAttributes({ 
          dayTemplateContent: data.day_template.template_content          
        });

        return data.day_template;
      }).catch((err) => {
        console.log('getTemplate caught error')
        return false;
      });
    }

    onChangeBlockTemplate(value) {
      this.props.setAttributes({
        dayTemplateContent: value
      });
    }

    /* ... */

    render() {
      const { dayTemplateHandler, onChangeBlockTemplate, phaseControlHandler, programControlHandler, updateBlockAlignment, updateTextAlignment } = this;
      const { block_alignment, dayTemplateId, dayTemplateName, dayTemplateContent, phaseId, phaseName, programAuthor, programId, programName, programPhases, text_alignment } = this.props.attributes;

      /* ... */

      return [
        <InspectorControls>
          <PanelBody title={ __('Basics', 'bsd-strong-post') }>
              <SelectControl
                label={ __('Day', 'bsd-strong-post') }
                help={ __('The training session (e.g., Day One)', 'bsd-strong-post') }
                value={ dayTemplateId }
                options={ this.state.phaseTemplates }
                onChange={ dayTemplateHandler }
              />  
            }
          </PanelBody>
        </InspectorControls>,
        <div className='bsd-strong-post-block-editor'>
          <div className={ this.props.className }>
            <RichText
              placeholder={ __('Log your lifts here') }
              value={ dayTemplateContent }
              multiline={ false }
              onChange={ onChangeBlockTemplate }
              className='bsd-strong-post-training-log'
            />
          </div>
        </div>
      ];
    } 
  },

  save: (props) => {
    return (
      <div className={ `align${props.attributes.block_alignment}` }>
        <ul className='list-unstyled'style={{ textAlign: props.attributes.text_alignment }}>
          <li>
            <strong>{ __('Program', 'bsd-strong-post') }: </strong> 
            <span className='bsd-strong-post-program'>{ props.attributes.programName }</span>
          </li>
          <li>
            <strong>{ __('Phase', 'bsd-strong-post') }: </strong> 
            <span className='bsd-strong-post-phase-ph'>{ props.attributes.phaseName }</span>
          </li>
          <li>
            <strong>{ __('Day', 'bsd-strong-post') }: </strong> 
            <span className='bsd-strong-post-day-ph'>{ props.attributes.dayTemplateName }</span>
          </li>
          <li>
            <strong>{ __('Author', 'bsd-strong-post') }: </strong> 
            <span className='bsd-strong-post-author-ph'>{ props.attributes.programAuthor }</span>
          </li>
        </ul>        
        <RichText.Content
          value={ props.attributes.dayTemplateContent }
          className='bsd-strong-post-training-log'            
        />        
      </div>
    )
  }
});

---

查看表模板并考虑到错误，我怀疑问题在于

dayTemplateContent

属性的选择器，

.bsd strong post training template

第一次保存内容时，它成功地从数据库加载模板数据并保存完整的表结构。重新加载内容时，块验证器会失败，因为

dayTemplateContent

的选择器读取表的css选择器（即thead）的子节点，并且与预期内容不匹配。参考：

---

尝试使用

包装

模板或更改选择器。

假设

onChangeBlockTemplate

生成表标记，其结构是否与core生成表标记的方式类似？或者是否有其他特定于表结构的内容未显示？@S.Walsh

onChangeBlockTemplate

仅更新道具。当用户更改InspectorControl中的select控件时，将生成该表。调用

getTemplate

，从数据库中获取表HTML。我已经更新了我的问题，包括代码和信息。但是，根据您的链接，我似乎需要更改存储默认表的方式，以及保存默认表的方式。也就是说，我不太确定如何实现它！更新：谷歌把我带到这里，会给我一个机会：仍然卡住。还没有弄明白如何以core的方式呈现表。现在深入研究代码。感谢更新/补充信息。我已经发布了一个可能的答案，因为我认为您给出的代码不需要重写，而且可能更简单。嘿@s.walsh，用

包装

模板是解决方案的一半！然后，我不得不用相同的标记将块包装到save函数中，它现在可以正常工作了。非常感谢。

Content generated by 'save' function:

<div class="wp-block-bsd-strong-post-training-session alignwide"><ul class="list-unstyled"><li><strong>Program: </strong><span class="bsd-strong-post-program">Madcow</span></li><li><strong>Phase: </strong><span class="bsd-strong-post-phase-ph">Intermediate</span></li><li><strong>Day: </strong><span class="bsd-strong-post-day-ph">Day 1</span></li><li><strong>Author: </strong><span class="bsd-strong-post-author-ph">Madcow</span></li></ul>        
        <thead>
            <tr>
                <th scope="col">Exercise</th>
                <th scope="col">Set 1</th>
                <th scope="col">Set 2</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bsd-strong-post-exercise-one">
                <td class="bsd-strong-post-exercise-name">Squat</td>
                <td class="bsd-strong-post-set-1">95 x 5</td>
                <td class="bsd-strong-post-set-2">135 x 5</td>
            </tr>
        </tbody>
    </div>

Content retrieved from post body:

<div class="wp-block-bsd-strong-post-training-session alignwide"><ul class="list-unstyled"><li><strong>Program: </strong><span class="bsd-strong-post-program">Madcow</span></li><li><strong>Phase: </strong><span class="bsd-strong-post-phase-ph">Intermediate</span></li><li><strong>Day: </strong><span class="bsd-strong-post-day-ph">Day 1</span></li><li><strong>Author: </strong><span class="bsd-strong-post-author-ph">Madcow</span></li></ul><table class='bsd-strong-post-training-template'>       
        <thead>
            <tr>
                <th scope='col'>Exercise</th>
                <th scope='col'>Set 1</th>
                <th scope='col'>Set 2</th>
            </tr>
        </thead>
        <tbody>
            <tr class='bsd-strong-post-exercise-one'>
                <td class='bsd-strong-post-exercise-name'>Squat</td>
                <td class='bsd-strong-post-set-1'>95 x 5</td>
                <td class='bsd-strong-post-set-2'>135 x 5</td>
            </tr>
        </tbody>
    </table></div>

<table class='bsd-strong-post-training-template'>       
        <thead>
            <tr>
                <th scope='col'>Exercise</th>
                <th scope='col'>Set 1</th>
                <th scope='col'>Set 2</th>
            </tr>
        </thead>
        <tbody>
            <tr class='bsd-strong-post-exercise-one'>
                <td class='bsd-strong-post-exercise-name'>Squat</td>
                <td class='bsd-strong-post-set-1'>95 x 5</td>
                <td class='bsd-strong-post-set-2'>135 x 5</td>
            </tr>
        </tbody>
    </table>