Fix example code

[ajitbohra]

tagName missing

fixes #6763

Description

Docs Update

Types of changes

Docs update

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[jorgefilipecosta]

Hi @ajitbohra thank you for your contribution.
Checking the documentation of RichText component https://github.com/WordPress/gutenberg/tree/master/editor/components/rich-text it seems tagName is an optional prop and the default value should be a div. So it seems the documentation was not wrong and we have a bug in RichText component where it does not work correctly if tagName was no explicitly defined.

[NathanDJohnson]

@jorgefilipecosta the tagname is defined in the edit method as p but not the save method. If tagname defaults to div then there will still be a block validation error.

This is an error in the docs regardless of if there is also a bug in the RichText component.

But don't worry, @danielbachhuber closed the issue without resolving it.

[ajitbohra]

@jorgefilipecosta

Have checked rich text docs you are right tagName is optional.
Looks like a bug as without tagName it's not rendering div.

If I am not wrong in the context of block edit/save we need to specify tagName so that it matches with the attributes schema. The example in docs needs "p" to properly get & save the data.

In rich text docs, we have tagName specified for both edit & save.

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			type: 'array',
			source: 'children',
			selector: 'h2',
		},
	},

	edit( { className, attributes, setAttributes } ) {
		return (
			<RichText
				tagName="h2"
				className={ className }
				value={ attributes.content }
				onChange={ ( content ) => setAttributes( { content } ) }
			/>
		);
	},

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

[youknowriad]

Looks like a bug as without tagName it's not rendering div.

It's intended that without tagName, it shouldn't render a wrapper. I know it does for the edit part, but this is mandatory to enable TinyMCE. You can't enable TinyMCE on a fragment.

I agree the docs should be updated.

[youknowriad]

LGTM 👍

[jorgefilipecosta]

Thank you for clarifying this @youknowriad.

@jorgefilipecosta the tagname is defined in the edit method as p but not the save method. If tagname defaults to div then there will still be a block validation error.

This is an error in the docs regardless of if there is also a bug in the RichText component.

You are right @NathanDJohnson thank you for referring this, I missed this check on the difference between edit and save. When comparing against RichText documentation I thought we might have a bug there.
I'm sorry for the confusion on my side @ajitbohra; I merged your PR thank you for the contribution 👍

[ajitbohra]

@jorgefilipecosta we were in the same boat :) thanks to @youknowriad for clarification