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

发表-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）短代码块，可以在其中将内容直接放在编辑器中

1 个答案: