Кратко

Как я могу изменить результат edit и save основного блока, не переопределяя большую часть его функциональности в своем коде?

Вопрос

Я знаком с фильтрами блоков и уже могу использовать их для добавления атрибутов или новых InspectorControls. Тем не менее, меня беспокоит, что, похоже, я не могу обновить JSX/HTML редактирования/сохранения, не перезаписывая весь блок.

Представьте себе следующую ситуацию: я хочу добавить настройку в блок core/button, чтобы добавить иконку после текста. Поэтому конечный HTML не должен быть таким

<div class="wp-block-button">
    <a class="wp-block-button__link">Hello World</a>
</div>

а вместо этого желаемый результат будет

<div class="wp-block-button">
    <a class="wp-block-button__link">Hello World</a>
    <span class="wp-block-button__icon">X</span>
</div>

Для save я, вероятно, мог бы использовать wp.element.cloneElement, чтобы добавить свой элемент в качестве дополнительного дочернего.

Но что насчет edit? Мое текущее понимание заключается в том, что, пока блок не использует SlotFills, у меня действительно нет варианта.

В обычной конфигурации, как эта

const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { name, attributes, setAttributes } = props
    if (name !== 'core/button') {
      return <BlockEdit {...props} />
    }

    const { showIcon } = attributes

    return (
      <Fragment>
        <BlockEdit {...props} />
        <InspectorControls>
          <PanelBody title={__('Показать иконку?', 'my-plugin')}>
            <ToggleControl
              label={__('Показать иконку?', 'my-plugin')}
              checked={showIcon}
              onChange={(showIcon) => setAttributes({ showIcon })}
            />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    )
  }
})

addFilter('editor.BlockEdit', 'my-plugin/add-icon-inspector', withInspectorControls)

Я мог бы убрать часть <BlockEdit {..props} /> и заново реализовать кнопку. Но глядя на исходный код редактирования, я знаю, что мне придется заново реализовать полный метод ButtonEdit, чего я хотел бы избежать.

Различные руководства, а также другие ответы на этом стеке подразумевают, что имеет смысл создать новый блок (и де-регистровать/занести в черный список основной), это все еще актуально на 2021 год?

Вы можете сделать это с помощью API форматов, например, этот код из справочника добавит тег <samp> вокруг текста:

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

const MyCustomButton = ( props ) => {
    return <RichTextToolbarButton
        icon='editor-code'
        title="Пример вывода"
        onClick={ () => {
            props.onChange( toggleFormat(
                props.value,
                { type: 'my-custom-format/sample-output' }
            ) );
        } }
        isActive={ props.isActive }
    />;
};

registerFormatType(
    'my-custom-format/sample-output', {
        title: 'Пример вывода',
        tagName: 'samp',
        className: null,
        edit: MyCustomButton,
    }
);

Точно так же вы можете использовать те же трюки, которые использует формат изображения, чтобы вставить отдельный элемент без обертывания текста:

https://github.com/WordPress/gutenberg/blob/master/packages/format-library/src/image/index.js

В частности, он импортирует insertObject:

                            insertObject( value, {
                                type: name,
                                attributes: {
                                    className: `wp-image-${ id }`,
                                    style: `width: ${ Math.min(
                                        imgWidth,
                                        150
                                    ) }px;`,
                                    url,
                                    alt,
                                },
                            } )

Где name — это имя формата, который был зарегистрирован. Результат — это встроенный тег <img>.