如何创建一个Gutenberg短代码块，我可以将内容直接放在编辑器中

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>

这意味着我可以在使用经典编辑器时将内容放入短代码标签（将其用作容器标签）中。

现在我已经要求将此短代码转换为Gutenberg块。

我可以创建一个简单的Gutenberg块，它在编辑器中放置一些静态的东西，然后渲染它或Gutenberg块来使用自定义的帖子类型。但是一个能够在设计时添加内容的短代码（在编辑器中）我从未被要求做过。

我仍然是古腾堡发展的新人。任何关于如何做的建议都会非常有帮助。

编辑：

写这样的帖子时会使用这个shortcode

Paragraph
shorcode placed
Another paragraph
shortcode places again
...

Answer 1

这是一个短代码，它带有一个帖子ID和一个标题级别 - 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'
            ]
        ]
    ));
});

这个短代码也可以在Gutenberg编辑器中正常工作，我相信这是你正在寻找的。