Describe the bug
RichText
should be called from wp.blocks
, but the docs example calls from wp.editor
.
To Reproduce
Steps to reproduce the behavior:
ESNext
webpack
to build the example code.Uncaught TypeError: Cannot read property 'RichText' of undefined
my example component
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
registerBlockType( 'guten-blocks/first-block', {
title: __( 'Hello custom' ),
category: 'formatting',
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'p'
}
},
supports: {
// Removes support for an HTML mode.
html: false,
},
edit({attributes, setAttributes}) {
const { content } = attributes
const onChangeContent = (newContent) => setAttributes({content: newContent})
return (
<RichText
tagName="p"
onChange={ onChangeContent }
value={ content }
/>
);
},
save() {
return <p>{__( 'Hello from the saved content!' )}</p>;
},
} );
Expected behavior
use const { RichText } = wp.blocks
, it works well.
const { __ } = wp.i18n;
const { registerBlockType, RichText } = wp.blocks;
registerBlockType( 'guten-blocks/first-block', {
title: __( 'Hello custom' ),
category: 'formatting',
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'p'
}
},
supports: {
// Removes support for an HTML mode.
html: false,
},
edit({attributes, setAttributes}) {
const { content } = attributes
const onChangeContent = (newContent) => setAttributes({content: newContent})
return (
<RichText
tagName="p"
onChange={ onChangeContent }
value={ content }
/>
);
},
save() {
return <p>{__( 'Hello from the saved content!' )}</p>;
},
} );
Screenshots
Desktop (please complete the following information):
Additional context
The documentation is currently generated from master, where RichText
has been moved from blocks
to editor
. There's a proposal to change documentation generation to only run from current release version: #6514
(Closed in favor of #6514)
In case someone still steps over this issue, make sure to include 'wp-editor' in your PHP wp_enqueue_script dependencies.
Thanks @fvonellerts - I've been searching for an answer to this for some time, and this has solved my problem!
@aduth @fvonellerts
I came across this issue today and it's still occurring - my script dependencies are now:
array( 'wp-blocks', 'wp-element', 'wp-editor' )
But when I log the three parameters of the script's function (blocks
, element
and editor
respectively) I get:
I'm on WP 5.2.3, any ideas why the editor dependency isn't being correctly loaded?
UPDATE: It _does_ work, however, if I call RichText from wp.editor instead, i.e:
const RichText = wp.editor.RichText;
This then produces the following editable block (not sure if this is correct since I can't get the documented way working but it seems ok):
Most helpful comment
In case someone still steps over this issue, make sure to include 'wp-editor' in your PHP wp_enqueue_script dependencies.