0

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?

  • toggleFormat is from import { toggleFormat } from '@wordpress/rich-text'; – Filip Jul 3 at 9:09
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

  • cmd+u works, but the client wants a button – Filip Jul 3 at 11:20

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.