1

I've properly registered a Gutenberg block that consists of a textarea control to store metadata for a post. In the old days, I simply rendered a wp_editor on the edit-form-advanced hook which had full TinyMCE editing capability and stored the textarea html on the transition_post_status hook.

Inside the Gutenberg environment, using the TextareaControl component, how do I bring full editing capability into the textarea control? My basic setup only shows plain text to input into the control. I guess I could hand code the html but it seems like I should be able to used the editing toolbar to achieve this.

I should add that I'm looking for full TinyMCE editing including ordered/unordered lists. The pre-formatted Toolbar isn't featured enough.


Edit: Here is the js I used to render the Gutenberg block. Pretty basic.

( function( wp ) {
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;
    var TextareaControl = wp.components.TextareaControl;
    var RichText = wp.editor.RichText;
    var AlignmentToolbar = wp.editor.AlignmentToolbar;

    registerBlockType( 'my-gutenberg/my-block', {
        title: 'The title',
        icon: 'email-alt',
        category: 'common',
        keywords: ['email'],

        attributes: {
            blockValue: {
                type: 'string',
                source: 'meta',
                meta: 'the_meta'
            }
        },

        edit: function( props ) {
            var className = props.className;
            var setAttributes = props.setAttributes;

            function updateBlockValue( blockValue ) {
                setAttributes({ blockValue });
            }

            return el(
                'div',
                { className: className },
                el( TextareaControl, {
                    label: 'The label',
                    value: props.attributes.blockValue,
                    onChange: updateBlockValue
                } )
            );
        },

        // No information saved to the block
        // Data is saved to post meta via attributes
        save: function() {
            return null;
        }
    } );

} )( window.wp );
  • You may be looking for the RichText component. If you'll post your code you'll have a better chance of someone recognizing what's wrong and how to fix it. :) – WebElaine May 15 '19 at 18:35
  • @WebElaine added the js as you suggested. – jdp May 15 '19 at 18:47
  • @WebElaine I need more than just RichText. I need some basic HTML editing capability including unordered lists. – jdp May 16 '19 at 13:05
  • That's a bit counter to how the Block Editor imagines things - each separate component is typically its own block. If you have a set/templated structure, you can add multiple types of inputs - i.e. say each block has a heading, a list, and an image - you just use multiple components and they all become part of the one block. – WebElaine May 16 '19 at 18:03
1

Here's an easy way to achieve what you wanted:

From the edit callback, return a class which extends the ClassicEdit component used with the Classic editor block. And in your block's attributes, make sure content is set (in the question, it's blockValue). Tried and tested working properly:

var el = wp.element.createElement;
var ClassicEdit; // An instance of the private ClassicEdit class.

wp.blocks.registerBlockType( 'my-gutenberg/my-block', {
    attributes: {
        content: {
            type: 'string',
            source: 'meta',
            meta: 'the_meta'
        }
    },
    edit: function( props ) {
        if ( ! ClassicEdit ) {
            var block = wp.blocks.getBlockType( 'core/freeform' );
            ClassicEdit = ( class extends block.edit {
                componentDidMount() {
                    // Call the parent method to setup TinyMCE, etc.
                    block.edit.prototype.componentDidMount.call( this );

                    // Change the toolbar's title - to your block's.
                    jQuery( '#toolbar-' + this.props.clientId )
                        .attr( 'data-placeholder', 'My Title' );
                }
            } );
        }
        return el( ClassicEdit, props );
    },
    save: function( props ) {
    },
    ...
} );

But you'd want to copy these CSS and make sure to replace the my-guternberg/my-block with the proper block name.

For advanced coding, you could copy the component file, edit it anyway you like, and use it with your block's edit option — edit: MyClassicEdit.

And here's the code I used for testing.

Preview

enter image description here

  • Thank you for the hard work you put in on this. Very kind of you. Couple of questions. 1. I thought the ClassicEditor is destined for the bit bucket by the WordPress team. 2. Not sure I understand how the block content is directed to the meta table. – jdp May 17 '19 at 12:45
  • 1) Not sure if I understand the question... but you can use the component which is used with the edit option for the "Classic" block. The WordPress Gutenberg team doesn't forbid us from using the component. 2) That is done internally by WordPress via the REST API. So just make sure your meta is registered in the REST API. And in your block attributes, set the source to meta. And have you tried the code? Did it work as expected? :) – Sally CJ May 17 '19 at 19:12
  • And while the approach in the answer does work (at least for me and for now), you might want to consider using inner blocks. You know, a block where you got the + (add block) button, which allows you to add blocks in a block. – Sally CJ May 17 '19 at 19:23
  • I will give it a go this weekend. Admittedly, I've got a LOT of work to do coming up to speed with Gutenberg. The flexibility and power of metadata in the WordPress environment has made it as much a part of the final product as the content. I don't see the benefit of porting any metadata management on the edit page into the browser side environment. – jdp May 17 '19 at 20:27
  • 1
    Thank you again. I'm switching between Classic and Gutenberg way too much. I want to move to Gutenberg but I'm much more efficient and productive in Classic. – jdp May 20 '19 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.