Gutenberg: `const { RichText } = wp.editor;` does not works

Created on 14 May 2018  路  4Comments  路  Source: WordPress/gutenberg

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:

  1. Go to https://wordpress.org/gutenberg/handbook/blocks/introducing-attributes-and-editable-fields/#attributes
  2. Copy example code ESNext
  3. Run webpack to build the example code.
  4. Go to new post page
  5. See error in console like 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
2018-05-15 0 15 08

Desktop (please complete the following information):

Additional context

  • Please add the version of Gutenberg you are using in the description.
  • To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

Most helpful comment

In case someone still steps over this issue, make sure to include 'wp-editor' in your PHP wp_enqueue_script dependencies.

All 4 comments

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:
image

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):
image

Was this page helpful?
0 / 5 - 0 ratings