Блог

Я создаю элемент для кнопки панели инструментов форматированного текста для wp blockeditor, который создаст возможность переноса выделенного текста в тег span. Теперь я хочу добавить атрибут ID в тег span. И внутри атрибута ID значение будет сгенерировано случайным образом.

Требуется вывод html: <span id="ABC123abc">Some Text</span>

Код:

 

    var AddAnchorButton = function(props) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'admin-links',
                title: 'Add Anchor',
                onClick: function() {
                    props.onChange(wp.richText.toggleFormat(
                        props.value, { type: 'anchor-format/add-anchor-button' }
                    ));
                },
                isActive: props.isActive,
            }
        );
    }


    wp.richText.registerFormatType(
        'anchor-format/add-anchor-button', {
            title: 'Add Anchor',
            tagName: 'span',
            className: null,
            edit: AddAnchorButton,
        }
    );


})(window.wp);
  

Я тоже боролся с этим, вот мое решение:

 save: function (props) {    
return wp.element.createElement(
  "div",
  null,
  wp.element.createElement(
    "strong",
    null,
    "dear xy,"
  ),
  wp.element.createElement(
    "p",
    {anchor: true},
    "example text "
  ),
  wp.element.createElement(
    "span",
    null,
    "hello, : ",
    wp.element.createElement(
      "a",
      {id: "personId", rel: "noreferrer noopener", href: "https://www.google.com", target: "_blank"},
      "person xy"
    )
  )
);
  

}