Q: Richtext Editor With H1 Title And P Subtitle

Hi So i'm trying to make a richtext block where the First line will be a h1, and when u press enter u get to type a pharagraph, I tried using the multiline attribute with a value o

Solution 1:

Your block is currently right for ONLY H2 tag. Nowhere in the code you have any code for "P" tag, hence it's not working. Try this code -

exportdefaultregisterBlockType('my-plugin/header-2', {
    title: __('h1 Title'),
    description: __('h1 title'),
    icon: 'heart',
    category: 'common',
    keywords: [
        __('richtext-block'),
        __('weconnect'),
        __('h2')
    ],
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'h2',
        },
        pcontent: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
    },
    edit: function ({ attributes, setAttributes, className, isSelected }) {
        return (
            <divclassName={className}><RichTexttagName="h2"className={className}value={attributes.content}onChange={(content) => setAttributes({ content })}
                placeholder={__('Enter text...', 'custom-block')}
                keepPlaceholderOnFocus={true}
                />

                <RichTexttagName="p"className={className}value={attributes.pcontent}onChange={(pcontent) => setAttributes({ pcontent })}
                placeholder={__('Enter p text...', 'custom-block')}
                keepPlaceholderOnFocus={true}
                />

            </div>

        );
    },
    save: function( { attributes } ) {
        return (
            <div><RichText.ContenttagName="h2"value={attributes.content } /><RichText.ContenttagName="p"value={attributes.pcontent } /></div>


        );
    }
});

Changes I made -

• Added "pcontent" attribute, every new html must needs to declare new attribute

• Added Another field for "P" content to leverage the text option on hover

• Wrapped both of the RichText in a parent div for both Edit and Save function