Как создать блок шорткода Гутенберга, в котором я могу разместить контент прямо в редакторе

Question

У меня есть следующий шорткод:

function shortcode_gray_content( $atts, $content = null ) {
  $content = clean_shortcode_content($content);
  return '<div class="gray-bg"><div class="constrain content">' . do_shortcode($content) . '</div></div>';
}
add_shortcode( 'sc-gray-content', 'shortcode_gray_content' );

В классическом редакторе я могу использовать его как

[sc-gray-content]
My content goes here
[/sc-gray-content]

Приведенное выше содержимое отображается следующим образом:

<div class="gray-bg">
   <div class="constrain content">
       My content goes here
   </div>
</div>

, что означает, что я могу помещать содержимое в теги шорткода (используя его как тег контейнера) при использовании Classic Editor.

Теперь я попросил преобразовать этот шорткод в блок Гутенберга.

Я могу создать простой блок Гутенберга, который помещает что-то статичное в редактор и отображает его или блок Гутенберга для использования пользовательского типа записи.Но шорткод с возможностью добавления контента во время разработки (внутри редактора) меня никогда не просили сделать.

Я все еще новичок в разработке Гутенберга.Любое предложение о том, как это сделать, было бы чрезвычайно полезно.

РЕДАКТИРОВАТЬ:

Этот shortcode используется при написании сообщений, таких как

Paragraph
shorcode placed
Another paragraph
shortcode places again
...

Answer 1

Это шорткод, который принимает идентификатор поста и уровень заголовка - h2, h3, h4 - и выводит заголовок поста, завернутый в HTML для заголовка, коды комментируются.

файл index.js

const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper
const {TextControl,SelectControl,ServerSideRender} = wp.components; //WordPress form inputs and server-side renderer

registerBlockType( 'caldera-learn-basic-blocks/post-title', {
    title: __( 'Show a post title' ), // Block title.
    category:  __( 'common' ), //category
    attributes:  {
        id : {
            default: 1,
        },
        heading: {
            default: 'h2'
        }
    },
    //display the post title
    edit(props){
        const attributes =  props.attributes;
        const setAttributes =  props.setAttributes;

        //Function to update id attribute
        function changeId(id){
            setAttributes({id});
        }

        //Function to update heading level
        function changeHeading(heading){
            setAttributes({heading});
        }

        //Display block preview and UI
        return createElement('div', {}, [
            //Preview a block with a PHP render callback
            createElement( ServerSideRender, {
                block: 'caldera-learn-basic-blocks/post-title',
                attributes: attributes
            } ),
            //Block inspector
            createElement( InspectorControls, {},
                [
                    //A simple text control for post id
                    createElement(TextControl, {
                        value: attributes.id,
                        label: __( 'Post Title' ),
                        onChange: changeId,
                        type: 'number',
                        min: 1,
                        step: 1
                    }),
                    //Select heading level
                    createElement(SelectControl, {
                        value: attributes.heading,
                        label: __( 'Heading' ),
                        onChange: changeHeading,
                        options: [
                            {value: 'h2', label: 'H2'},
                            {value: 'h3', label: 'H3'},
                            {value: 'h4', label: 'H4'},
                        ]
                    })
                ]
            )
        ] )
    },
    save(){
        return null;//save has to exist. This all we need
    }
});

файл post-title.php

<?php
/**
 * Handler for [cl_post_title] shortcode
 *
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_shortcode_handler($atts)
{
    $atts = shortcode_atts([
        'id' => 0,
        'heading' => 'h3',
    ], $atts, 'cl_post_title');
    return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}
/**
 * Register Shortcode
 */
add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');
/**
 * Handler for post title block
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
    return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}
/**
 * Output the post title wrapped in a heading
 *
 * @param int $post_id The post ID
 * @param string $heading Allows : h2,h3,h4 only
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title($post_id, $heading)
{
    if (!in_array($heading, ['h2', 'h3', 'h4'])) {
        $heading = 'h2';
    }
    $title = get_the_title(absint($post_id));
    return "<$heading>$title</$heading>";
}
/**
 * Register block
 */
add_action('init', function () {
    // Skip block registration if Gutenberg is not enabled/merged.
    if (!function_exists('register_block_type')) {
        return;
    }
    $dir = dirname(__FILE__);
    $index_js = 'index.js';
    wp_register_script(
        'caldera-learn-basic-blocks-post-title',
        plugins_url($index_js, __FILE__),
        array(
            'wp-blocks',
            'wp-i18n',
            'wp-element',
            'wp-components'
        ),
        filemtime("$dir/$index_js")
    );
    register_block_type('caldera-learn-basic-blocks/post-title', array(
        'editor_script' => 'caldera-learn-basic-blocks-post-title',
        'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
        'attributes' => [
            'id' => [
                'default' => 1
            ],
            'heading' => [
                'default' => 'h2'
            ]
        ]
    ));
});

Этот шорткод работает нормальнов редакторе Гутенберга, и я думаю, это то, что вы ищете.