By jdp


2019-05-15 17:48:27 8 Comments

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 );

1 comments

@Sally CJ 2019-05-16 17:29:16

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

@jdp 2019-05-17 12:45:15

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.

@Sally CJ 2019-05-17 19:12:23

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 2019-05-17 19:23:10

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.

@jdp 2019-05-17 20:27:54

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.

@Sally CJ 2019-05-18 03:13:00

I could understand what you're trying to achieve with the full-featured WYSIWYG/TinyMCE editor - it is indeed easier for those who're familiar with it more than with the block editor, but I suggested the inner blocks just in case you were not aware of it. :) And I'm looking forward to hearing from you - hopefully the code works for you as well.

@jdp 2019-05-20 01:10:51

Thank you! It worked. The ClassicEdit class is pretty powerful for something they're moving away from (eventually).

@Sally CJ 2019-05-20 02:10:42

I'm glad it worked for you! But note though, the solution may not work in future Gutenberg releases. However, when that day comes, you can always post another question. Or come back to this question. :)

@jdp 2019-05-20 14:10:19

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.

@Sally CJ 2019-05-20 18:43:25

I'm sure you are, but Gutenberg isn't that hard to learn and you'll do good with it as time passes by. Cheers. :)

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] Integrating inline tinymce editor in a component for a gutenberg block

2 Answered Questions

Gutenberg blocks not getting styled on back end

1 Answered Questions

[SOLVED] Wordpress Gutenberg blocks: Input fields are not editable

  • 2018-12-31 02:17:50
  • Marty McGee
  • 121 View
  • 3 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

2 Answered Questions

[SOLVED] Gutenberg how to make attribute to save to meta

1 Answered Questions

[SOLVED] Only show focused toolbar for Gutenberg Block with Multiple text fields

  • 2018-05-17 00:09:20
  • Nathan Johnson
  • 502 View
  • 4 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Can I remove the Rich Text box editor for a specific post?

Sponsored Content