ostaladafab

Hi,

Thanks threadi!

I’ve been thinking so hard and i find a other solution :). I think the best thing to do is to use Gutenberg’s native drag and drop. I’ve developed two custom blocks. A parent block and a child block. The parent block has an innerBlock which can only receive child blocks. Here’s the simplified code.

parent block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "domain/vegetables",
    "version": "0.1.0",
    "title": "Vegetables",
    "category": "text",
    "icon": "carrot",
    "description": "A sortable list of vegetables",
    "supports": {
        "html": false
    },
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

parent index.js

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

registerBlockType(metadata, {
    edit: () => {
        const blockProps = useBlockProps();

        return (
            <div {...blockProps}>
                <InnerBlocks
                    allowedBlocks={["domain/vegetable"]}
                    template={[["domain/vegetable"]]}
                />
            </div>
        );
    },

    save: (props) => {
        const blockProps = useBlockProps.save();

        return (
            <div {...blockProps}>
                <InnerBlocks.Content />
            </div>
        );
    },
});

child block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "domain/vegetable",
    "version": "0.1.0",
    "title": "Vegetable",
    "category": "text",
    "icon": "carrot",
    "parent": ["domain/vegetables"],
    "description": "A vegetable",
    "supports": {
        "html": false
    },
    "attributes": {
        "name": {
            "type": "string"
        }
    },
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

child index.js

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import { useBlockProps, RichText } from "@wordpress/block-editor";

registerBlockType(metadata, {
    edit: (props) => {
        const blockProps = useBlockProps();
        const {
            attributes: { name },
            setAttributes,
        } = props;

        return (
            <div {...blockProps}>
                <RichText
                    {...blockProps}
                    tagName="p"
                    value={name}
                    allowedFormats={[]}
                    onChange={(name) => setAttributes({ name })}
                    placeholder={"A vegetable..."}
                />
            </div>
        );
    },

    save: (props) => {
        const blockProps = useBlockProps.save();
        const {
            attributes: { name },
        } = props;

        return (
            <div {...blockProps}>
                <p>{name}</p>
            </div>
        );
    },
});

Hello,

I worked around the problem, by creating an API route. Here is the simplified code of my plugin:

class MyPlugin{

    function __construct(){
        add_action('rest_api_init', array($this, 'register_route'), 10, 1);
    }

    function register_route($wp_rest_server){
            register_rest_route(
                'my-plugin/v1',
                '/blocks',
                array(
                    'methods' => 'GET',
                    'callback' => array($this, 'get_block_datas'),
                    'permission_callback' => function(){
                        return 'manage-option';
                    }
                )
            );
        }
    }

	function get_block_datas(){
		return WP_Block_Type_Registry::get_instance()->get_all_registered();
	}
}

new MyPlugin();

Now, the datas I was looking for is available in JS, via the API, at this route: https://mydomainname/wp-json/my-plugin/v1/blocks.

See you soon