Q: Richtext editor with h1 title and p subtitle

Question

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 of "p" but that doesn't work,

I wonder if anyone can help me out.

This is my code so far.

   /**
 * Block dependencies
 */

import './style.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

/**
 * Register block
 */
export default registerBlockType('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',
        },
    },
    edit: function ({ attributes, setAttributes, className, isSelected }) {
        return (
            <RichText
                tagName="h2"

                className={className}
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder={__('Enter text...', 'custom-block')}
                keepPlaceholderOnFocus={true}

            />
        );
    },
    save: function( { attributes } ) {
        return (
            <RichText.Content tagName="h2" value={ attributes.content } />

        );
    }
});

Answer 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 -

    export default registerBlockType('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 (
            <div className={className}>

                <RichText
                tagName="h2"
                className={className}
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder={__('Enter text...', 'custom-block')}
                keepPlaceholderOnFocus={true}
                />

                <RichText
                tagName="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.Content tagName="h2" value={ attributes.content } />
                <RichText.Content tagName="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