javascript - Gutenberg RichText

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.

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.

• javascript
• block-editor

Share Improve this question asked Sep 8, 2018 at 11:51 CyberJCyberJ 43755 silver badges1919 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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/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',
    },