How to create blocks from shortcodes?

admin管理员组

文章数量:1131371

I want to create a shortcode of myself that outputs “blocks”.

Level 1: Setting a pure text

I know how to do a simple shortcode. Let’s take this example.

add_shortcode( 'greet', 'myNiceShortCode' );
function myNiceShortCode( array $attributes )
{
    // Process attributes
    $result = "Hello, world!";
    return $result;
}

If I set then [greet volume="loud"] I see Hello, world! in its place.

Level 2: Outputting HTML

I see I can output HTML there:

$result = "<h2>Hello, world!</h2>";

I can see the Hello, world! as an <h2> in the page or post.

Level 3: My Question: How can I now output “full blocks”?

Now I want something more advanced:

I want the shortcode to output “full blocks” the same than those I could add manually. Say I want to add a full gallery block with photos being:

$data = [
    [
        // ????? What other things?
        "image" => ???? whatever to get "image-1.jpg" from the gallery,
    ],
    [
        // ????? What other things?
        "image" => ???? whatever to get "image-2.jpg" from the gallery,
    ],
];

$result = ?????? function of $data;

I mean: I know I want those 2 photos. I don’t want to spit “pure html” as then I loose all the magic of working with the block system (responsiveness, using the theme defaults, etc.) so I want just to spit out the gallery “as if I set it manually”, but all automagically outputted from my short-code.

I don’t want to print <div><img ...><img ...></div> but the gallery block itself.

Question

How can I output “something” that means “here this is not pure HTML, this is a block” to the rendering loop?

I want to create a shortcode of myself that outputs “blocks”.

Level 1: Setting a pure text

I know how to do a simple shortcode. Let’s take this example.

add_shortcode( 'greet', 'myNiceShortCode' );
function myNiceShortCode( array $attributes )
{
    // Process attributes
    $result = "Hello, world!";
    return $result;
}

If I set then [greet volume="loud"] I see Hello, world! in its place.

Level 2: Outputting HTML

I see I can output HTML there:

$result = "<h2>Hello, world!</h2>";

I can see the Hello, world! as an <h2> in the page or post.

Level 3: My Question: How can I now output “full blocks”?

Now I want something more advanced:

I want the shortcode to output “full blocks” the same than those I could add manually. Say I want to add a full gallery block with photos being:

$data = [
    [
        // ????? What other things?
        "image" => ???? whatever to get "image-1.jpg" from the gallery,
    ],
    [
        // ????? What other things?
        "image" => ???? whatever to get "image-2.jpg" from the gallery,
    ],
];

$result = ?????? function of $data;

I mean: I know I want those 2 photos. I don’t want to spit “pure html” as then I loose all the magic of working with the block system (responsiveness, using the theme defaults, etc.) so I want just to spit out the gallery “as if I set it manually”, but all automagically outputted from my short-code.

I don’t want to print <div><img ...><img ...></div> but the gallery block itself.

Question

How can I output “something” that means “here this is not pure HTML, this is a block” to the rendering loop?

• shortcode
• block-editor

Share Improve this question asked Oct 26, 2023 at 16:14 Xavi MonteroXavi Montero 10333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I want the shortcode to output “full blocks”

This is the wrong approach, instead you want a block that outputs a shortcode.

Specifically, a block that is rendered via PHP. Once you know how to do that it becomes as trivial as calling do_shortcode and inserting block attributes into the shortcode by crafting it, e.g. something like this:

do_shortcode( '[myshortcode attribute1="' . $attribute1 . "]' );

Although in your case it's usually easier to call the function that implements the shortcode directly.

You can specify a PHP file to render your block in block.json that you can call your shortcode in. You should not need a save component in your block, and you can use a server side renderer in your edit component to display the result of your shortcode in the block editor.

Once you've done this, you can ignore shortcodes and deal entirely with standard blocks and standard solutions to block problems.

本文标签： How to create blocks from shortcodes