3

I'm trying to enter text via Rich Text by function. but cursor automatically getting outside the RichText. I already import essential component which need on it. I also tried it by onKeyUp instead on onChange but also not working.

It's working good when i'm trying it without the ArticleContent function, but not working when trying with this ArticleContent function.

See the photo, here i need to click every time on the rich text each for each character.

Below is my codes (It's not working)

registerBlockType('vixmi-support/test', {
    title: __('Test Block'),
    icon : {
        src       : 'media-spreadsheet'
    },
    category   : 'vixmi',
    description: 'Sample desc',
    keywords   : [
        __( 'Single Article' ),
        __( 'Article' ),
    ],

    supports:{
        align : true,
        anchor: true
    },

    // custom attributes
    attributes:{
        title: {
            type    : 'string',
            source  : 'html',
            selector: 'h4',
        },
        articleLayout: {
            type   : 'string',
            default: 'left',
        }
    },


    edit: ( {attributes, setAttributes} ) => {
        const{
            title, content, buttonTitle, buttonLink, linkTarget, articleLayout
        } = attributes;

        function UpdateArticleTitle(newTitle){
            setAttributes( { title:newTitle } )
        }
        function UpdateActionLayout(event){
            setAttributes( { articleLayout:event.target.value } )
        }

        function ArticleContent(props){
            const{
                title
            } = props.attributes;
            return(
                <RichText
                    key         = "editablec"
                    tagName     = "h4"
                    placeholder = "Article title"
                    value       = { title }
                    onChange    = { UpdateArticleTitle } />
            )
        }

        return([
            <div className="sample">
                <ArticleContent attributes={ attributes }/>
            </div>
        ])
    },
    save: ( {attributes} ) => {
        const{
            title
        } = attributes;

        return(
            <div className="sample">
                <h4>{title}</h4>
            </div>
        )
    },

});
Feroz Ahmed
  • 931
  • 10
  • 16

1 Answers1

2

I'm not at all sure why this is happening, but after struggling with it myself I found that doing the equivalent of { ArticleContent( { attributes: attributes } ) } rather than <ArticleContent attributes={ attribbutes }/> solves the issue.

The practical difference is that RichText is not actually wrapped by a component, but why that makes any difference is beyond me even after browsing the Gutenberg code for about an hour.

Stefan Fisk
  • 1,563
  • 13
  • 19
  • I can confirm this. Simply wrapping `
    ` around, solves the issue. So I just use it in the editor, but don't save it like this.
     – Frizzant Aug 09 '22 at 09:31