How to open popup window in block editor with custom buttons?

Question

I am new to wordpress.

I want to open a popup from a custom button in the block editor, and return a value to the text being edited.

I create the button like this:

https://developer.wordpress.org/block-editor/tutorials/format-api/1-register-format/

funtions.php

function my_custom_format_script_register() {
    wp_register_script(
        'my-custom-format-js',
        plugins_url( 'my-custom-format.js', __FILE__ ),
        array( 'wp-rich-text' )
    );
}
add_action( 'init', 'my_custom_format_script_register' );

function my_custom_format_enqueue_assets_editor() {
    wp_enqueue_script( 'my-custom-format-js' );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_format_enqueue_assets_editor' );

https://developer.wordpress.org/block-editor/tutorials/format-api/2-toolbar-button/

my-custom-format.js:

( function( wp ) {
        var MyCustomButton = function( props ) {
            return wp.element.createElement(
                wp.editor.RichTextToolbarButton, {
                    icon: 'editor-code',
                    title: 'Sample output',
                    onClick: function() {
                        console.log( 'toggle format' );
                    },
                }
            );
        }
        wp.richText.registerFormatType(
            'my-custom-format/sample-output', {
                title: 'Sample output',
                tagName: 'samp',
                className: null,
                edit: MyCustomButton,
            }
        );
    } )( window.wp );

The button is created without problems but …In the custom button click event onClick: function () {….}, how do I call a pop-up window to return a value to the text being edited?

Would it be with AJAX?

Thank you very much for the help

0
, , , dpc 4 years 2020-05-24T22:10:42-05:00 0 Answers 99 views 0

Leave an answer

Browse
Browse