Gutenberg: Documentation Wrong

[NathanDJohnson]

Trying to create a new block exactly as in the docs at

https://github.com/WordPress/gutenberg/blob/master/docs/blocks/introducing-attributes-and-editable-fields.md

results in a block validation error.

[ajitbohra]

@NathanDJohnson kindly provide more information Code / Console Error

Wild guess

• If I am not wrong you are using the latest stable version of Gutenberg probably 2.8 or older
• The code sample in docs is generated from master branch and contains changes which will not work with the stable version

Refer this doc(v2.8) instead:
https://github.com/WordPress/gutenberg/blob/v2.8.0/docs/blocks/introducing-attributes-and-editable-fields.md

[NathanDJohnson]

I am using 2.8 because that's what's on WordPress.org.

No. That documentation still produces block validation error.

`Block validation: Block validation failed for "gutenberg-boilerplate-esnext/hello-world-step-03" (Object).

Expected:

Actual:

ggg
(anonymous) @ index.js?ver=1525813954:18
`

[ajitbohra]

@NathanDJohnson can you share the code?

[NathanDJohnson]

<?php
/*
 * Plugin Name: Test
 */
 defined( 'ABSPATH' ) || exit;

 add_action( 'enqueue_block_editor_assets', 'gutenberg_examples_03_esnext_enqueue_block_editor_assets' );

 function gutenberg_examples_03_esnext_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'gutenberg-examples-03_esnext',
        plugins_url( 'block.build.js', __FILE__ ),
        array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.build.js' )
    );

    wp_enqueue_style(
        'gutenberg-examples-03_esnext-editor',
        plugins_url( 'editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );
 }

 add_action( 'enqueue_block_assets', 'gutenberg_examples_03_esnext_enqueue_block_assets' );

 function gutenberg_examples_03_esnext_enqueue_block_assets() {
    wp_enqueue_style(
        'gutenberg-examples-03_esnext',
        plugins_url( 'style.css', __FILE__ ),
        array( 'wp-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );
 }

block.js
```const { registerBlockType, RichText, source } = wp.blocks;

registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', {
title: 'Hello World (Step 3)',

icon: 'universal-access-alt',

category: 'layout',

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

edit( { attributes, className, setAttributes } ) {
    const { content } = attributes;

    function onChangeContent( newContent ) {
        setAttributes( { content: newContent } );
    }

    return (
        <RichText
            tagName="p"
            className={ className }
            onChange={ onChangeContent }
            value={ content }
        />
    );
},

save( { attributes, className } ) {
    const { content } = attributes;

    return (
        <RichText.Content className={ className } value={ content } />
    );
},

} );

block.build.js

/*/ (function(modules) { // webpackBootstrap
// // The module cache
// var installedModules = {};
//
// // The require function
// function __webpack_require__(moduleId) {
//
// // Check if module is in cache
// if(installedModules[moduleId]) {
// return installedModules[moduleId].exports;
// }
// // Create a new module (and put it into the cache)
// var module = installedModules[moduleId] = {
// i: moduleId,
// l: false,
// exports: {}
// };
//
// // Execute the module function
// modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
//
// // Flag the module as loaded
// module.l = true;
//
// // Return the exports of the module
// return module.exports;
// }
//
//
// // expose the modules object (__webpack_modules__)
// __webpack_require__.m = modules;
//
// // expose the module cache
// __webpack_require__.c = installedModules;
//
// // define getter function for harmony exports
// __webpack_require__.d = function(exports, name, getter) {
// if(!__webpack_require__.o(exports, name)) {
// Object.defineProperty(exports, name, {
// configurable: false,
// enumerable: true,
// get: getter
// });
// }
// };
//
// // getDefaultExport function for compatibility with non-harmony modules
// __webpack_require__.n = function(module) {
// var getter = module && module.__esModule ?
// function getDefault() { return module['default']; } :
// function getModuleExports() { return module; };
// __webpack_require__.d(getter, 'a', getter);
// return getter;
// };
//
// // Object.prototype.hasOwnProperty.call
// __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
//
// // __webpack_public_path__
// __webpack_require__.p = "";
//
// // Load entry module and return exports
// return __webpack_require__(__webpack_require__.s = 0);
// })
/**********************/
// ([
/ 0 /
/**/ (function(module, exports) {

var _wp$blocks = wp.blocks,
registerBlockType = _wp$blocks.registerBlockType,
RichText = _wp$blocks.RichText,
source = _wp$blocks.source;

registerBlockType('gutenberg-boilerplate-esnext/hello-world-step-03', {
title: 'Hello World (Step 3)',

icon: 'universal-access-alt',

category: 'layout',

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

edit: function edit(_ref) {
    var attributes = _ref.attributes,
        className = _ref.className,
        setAttributes = _ref.setAttributes;
    var content = attributes.content;


    function onChangeContent(newContent) {
        setAttributes({ content: newContent });
    }

    return wp.element.createElement(RichText, {
        tagName: 'p',
        className: className,
        onChange: onChangeContent,
        value: content
    });
},
save: function save(_ref2) {
    var attributes = _ref2.attributes,
        className = _ref2.className;
    var content = attributes.content;


    return wp.element.createElement(RichText.Content, { className: className, value: content });
}

});

// })
/*/ ]);
```

[ajitbohra]

@NathanDJohnson yes example code is not working kindly use the following for save:

<RichText.Content tagName="p" className={ className } value={ content } />

tagName="p" is missing

[NathanDJohnson]

I'm still getting a validation error. It's saving without the <p> tag.

<!-- wp:gutenberg-boilerplate-esnext/hello-world-step-03 -->
Hello World
<!-- /wp:gutenberg-boilerplate-esnext/hello-world-step-03 -->

[ajitbohra]

@NathanDJohnson delete the block and reinsert it

[ajitbohra]

@NathanDJohnson https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/#validation docs with details on validation why it happens.

[NathanDJohnson]

I've deleted the block, rebuild the js, force-refreshed the page, verified that the updated js is loaded, re-inserted the block, saved the new page, refreshed the page again, and still get a validation error.

[ajitbohra]

@NathanDJohnson

Have tested the following code and its working as expected.

const { registerBlockType, RichText } = wp.blocks;

registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', {
    title: 'Hello World (Step 3)',

    icon: 'universal-access-alt',

    category: 'layout',

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

    edit( { attributes, className, setAttributes } ) {
        const { content } = attributes;

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },

    save( { attributes, className } ) {
        const { content } = attributes;

        return (
            <RichText.Content tagName="p" className={ className } value={ content } />
        );
    },
} );

[NathanDJohnson]

Copying and pasting that works. I must have had another typo in there somewhere. Thanks.

[NathanDJohnson]

@danielbachhuber thanks for closing the issue without resolving it.

[danielbachhuber]

@NathanDJohnson Sorry. I read:

Copying and pasting that works. I must have had another typo in there somewhere. Thanks.

If there's a bug with the documentation, we can fix it.

[ajitbohra]

@danielbachhuber

Its missing prop:

_Not Working_

<RichText.Content value={ attributes.content } />

_Working_

<RichText.Content tagName="h2" value={ attributes.content } />

We have PR for the same https://github.com/WordPress/gutenberg/pull/6787
Probably we have a bug with Richtext as discussed on PR