Gutenberg custom block: RichText underline button

admin管理员组

文章数量:1122832

I am working on a custom block for Gutenberg and part of this block is a RichText component. I am trying to add a button that underlines the text and I cannot make it work since last night. The code I have now [does not work]:

<div>
            <BlockControls
                controls={ [
                    {
                        icon: 'editor-underline',
                        title: __( 'Underline' ),
                        onClick: () => {
                          console.log(this.test.current, this)
                            this.test.current.props.onChange(toggleFormat(
                              this.test.current.props.record,
                                { type: 'core/underline' }
                            ) );
                        },
                    },
                ] }
                />
              <RichText
                  tagName="p"
                  label="Intro"
                  className={ className }
                  multiline="br"
                  ref={this.test}
                  value={ content }
                  formattingControls={[]}
                  onChange={ ( content ) => { this.props.setAttributes( { content } ) } }
              />
            </div>

Can you help me on working this thing out?

I am working on a custom block for Gutenberg and part of this block is a RichText component. I am trying to add a button that underlines the text and I cannot make it work since last night. The code I have now [does not work]:

<div>
            <BlockControls
                controls={ [
                    {
                        icon: 'editor-underline',
                        title: __( 'Underline' ),
                        onClick: () => {
                          console.log(this.test.current, this)
                            this.test.current.props.onChange(toggleFormat(
                              this.test.current.props.record,
                                { type: 'core/underline' }
                            ) );
                        },
                    },
                ] }
                />
              <RichText
                  tagName="p"
                  label="Intro"
                  className={ className }
                  multiline="br"
                  ref={this.test}
                  value={ content }
                  formattingControls={[]}
                  onChange={ ( content ) => { this.props.setAttributes( { content } ) } }
              />
            </div>

Can you help me on working this thing out?

• block-editor

Share Improve this question asked Jul 3, 2019 at 9:06 FilipFilip 11133 bronze badges 1

• toggleFormat is from import { toggleFormat } from '@wordpress/rich-text'; – Filip Commented Jul 3, 2019 at 9:09

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In a block that I am currently trying to build I am using a RichText control.

This has buttons/menu items for Bold, Italic, Code, Link, Inline Image and Strike though.

Though there isn't a button for underlining the text I can just use the key command [cmd+U] and it underlines.

This seems to work and is saved on the frontend and backend.

If it was working. There could be a few issues why it has stopped. Have you any errors in the console?

Have you tried removing the block and re-adding it?

EDIT: I am a beginner with Gutenberg block development so I am out of my depth!

You might find this useful if you haven't already come across it.

Add Formatting Buttons to Gutenberg core/paragraph BlockControls

本文标签： Gutenberg custom block RichText underline button