Replace multiple RichText components in a single block - wp.blockEditor.RichText multiline prop is deprecated

Question

so a week or so ago my hosting provider updated my version of Wordpress (I cannot control this) and on the edit side most of my Gutenberg blocks are broken. I knew this day would come but I was unaware of the Wordpress update with my host (I can't downgrade sadly and shouldn't do that even). Thus in the editor most of my blocks are giving the following warning in the console/browser dev tools.

wp.blockEditor.RichText multiline prop is deprecated since version 6.1 and will be removed in version 6.3. Please use nested blocks (InnerBlocks) instead. See: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/

Okay, time to update my code. However I am unsure if using nested inner blocks are the solution to my problem. For example here is the edit side of one of my blocks, notice I have two RichText components within:

// edit.js file of Gutenberg Block

import {useBlockProps, RichText} from '@wordpress/block-editor';
import './editor.scss';

export default function Edit(probs) {
    return (
        <div {...useBlockProps()}>
            <div className="testimonial">
                <div className="testimonial__wrapper">
                    <div className="testimonial__header">
                        <i className="testimonial__quote__left"></i>
                            <RichText
                                tagName="blockquote"
                                value={probs.attributes.quote}
                                onChange={(content) => probs.setAttributes({ quote: content })}
                                placeholder='Enter Quote'
                                keepPlaceholderOnFocus={true}
                            />
                        <i className="testimonial__quote__right"></i>
                            <RichText
                                tagName="figcaption"
                                value={probs.attributes.source}
                                onChange={(content) => probs.setAttributes({ source: content })}
                                placeholder='Enter Source'
                                keepPlaceholderOnFocus={true}
                            />
                    </div>
                </div>
            </div>
        </div>);
}

Now I can't replace these with InnerBlocks as Innerblocks can only be used once in a block

A block can render at most a single InnerBlocks and InnerBlocks.Content element in edit and save respectively. To create distinct arrangements of nested blocks, create a separate block type which renders its own InnerBlocks and assign as the sole allowedBlocks type.

Source: https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

Okay, but as I have HTML and styling wrapped around my RichText components I don't think I can use Nested Inner Blocks as the template attribute of the InnerBlock is in a JSON format and won't support the HTML (or so I believe, perhaps I am wrong). I thought about using Parent and Child blocks and I think this is unsuitable (I am still researching this). I thought about replacing the RichText components with simple HTML input fields and captureing the onChange event of the input values. Not a great solution due to styling and needing to break in the captured text. I am currently wondering if there is an alternative component I can use like "EditableText" but I am unsure if this is suitable or supported. I also noticed that using the same custom Gutenberg blocks on a local MAMP server using the same version of Wordpress I get no errors - only the hosted version errors.

So in short if anyone has ever encountered the same problem? having to replace multiple RichText components in a single block, I would be appreciative of any advice on how you solved this issue.

Many thanks in advance.

Answer 1

Now I can't replace these with InnerBlocks as Innerblocks can only be used once in a block

A HTML tag has this same restriction yet it hasn't stopped this from being done, the answer is composition.

The core/columns block has this same problem and solves it by only allowing individual core/column blocks as its children, so it's a 2 block system. The individual core/column blocks are what hold each item.

If we apply this to your block then you would need 3 blocks:

• testimonial block
  • testimonial left
  • testimonial right

We would then need these restrictions:

• Testimonial blocks can only contain testimonial left/right blocks = Testimonial blocks contain the left and right blocks as a template when inserted. This template contains locks
• testimonial left and right blocks cannot be inserted moved or removed, these are disabled in block.json supports
• a testimonial left and right block each contain restrictions on the types of blocks they can contain

If you need a multline richtext component then you've made a mistake, what you really needed was paragraphs, for which we have paragraph blocks. Likewise don't try to reinvent lists using components, use a list block.

Even in situations were a custom block is necessary, try to build as much of its internals using core blocks as you can via composition. If you need internal structure, use an internal block if core can't provide it, and lock things if you're concerned about users changing them.

A Superior Alternative

Everybody focuses on having to build a custom block for everything, afterall assembling everything from scratch everytime with core blocks is tedious, but there is a much easier solution though, use a block pattern and get rid of your custom blocks completely.

Core blocks could recreate what you needed with group blocks/columns/quotes/paragraphs and custom CSS classes. All that's needed is for you to create a singular instance, lock the blocks position etc so the user can't break it, then register it as a pattern with a name and a preview. This eliminates 99% of your code while future proofing things and supporting global styles natively.