1

I'm using the RichText API for a custom block:

<RichText
  tagName="a"
  className="button"
  placeholder={ __( 'Button text...' ) }
  value={ buttonText }
  onChange={ ( value ) => setAttributes( { buttonText: value } ) }
 />

I am using a as the tag name because I want the element to be a link but I'm not sure how to add a URL. Is it possible to add a href attribute? Adding href="some URL" to RichText does not work. I looked through the documentation and Googled it but couln't find any guidance.

1

Please paste the full code, According to official Gutenberg button block. You need to have additional block attributes to use for button link,text -

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

<RichText.Content
    tagName="a"
    className={ linkClass }
    href={ url }
    title={ title }
    style={ buttonStyle }
    value={ text }
/>

As you can see, there's a URL, Title & Text attributes.

url: {
        type: 'string',
        source: 'attribute',
        selector: 'a',
        attribute: 'href',
    },
    title: {
        type: 'string',
        source: 'attribute',
        selector: 'a',
        attribute: 'title',
    },
    text: {
        type: 'array',
        source: 'children',
        selector: 'a',
    },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.