Use block template to control inner blocks children #14

New Issue

Closed

opened 2022-07-25 15:58:55 +00:00 by rayelliott · 0 comments

rayelliott commented

2022-07-25 15:58:55 +00:00

Owner

Not feasible to prevent dragging of blocks.

Should have used used a block template for the inner blocks based on number of orbitals.

For an example see this Stack Overflow answer:

parent block:

registerBlockType("my-plugin/parent-block", {

    title: "Parent block",

    // Amount of columns
    attributes: {
        columns: { type: "number", default: 3 },
    }

    edit(props) {
        const { attributes: { columns } } = props;

        const onChangeColumns = (newColumns) => {
            setAttributes({ columns: newColumns });
        };

        // Either go for the template route
        // (create an inner block template based on amount of columns)
        const template = Array.from(Array(columns).keys()).map((i) => [
            "my-plugin/custom-inner-block",
        ]);
      
        // Or go for the allowed blocks route
        const allowedBlocks = ["my-plugin/custom-inner-block"];

        return (
            <div {...useBlockProps()}>

                {/* Use RangeControl in the InspectorControls to 
                    control the number of columns. */}
                <InspectorControls key="setting">
                    <div class="block-editor-block-card">
                        <fieldset>
                            <legend className="blocks-base-control__label">
                                {__("Amount of columns", "gutenpride")}
                            </legend>
                            <RangeControl
                                label="Columns"
                                value={columns}
                                onChange={(value) => onChangeColumns(value)}
                                min={1}
                                max={3}
                            />
                        </fieldset>
                    </div>
                </InspectorControls>
    
                <InnerBlocks
                    template={activeTemplate}
                    templateLock="all"
                    allowedBlocks={allowedBlocks}
                />
            </div>
        )
    },

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

    // ...
}

custom inner block:

registerBlockType("my-plugin/custom-inner-block", {

    title: "Custom Inner Block",

    edit(props) {
        const { attributes } = props;
        const { title } = attributes;

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

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

    // ...
});

Originally posted by @rayelliott in #2 (comment)

Not feasible to prevent dragging of blocks. Should have used used a block template for the inner blocks based on number of orbitals. For an example see this Stack Overflow [answer](https://stackoverflow.com/a/70886687): parent block: ```js registerBlockType("my-plugin/parent-block", { title: "Parent block", // Amount of columns attributes: { columns: { type: "number", default: 3 }, } edit(props) { const { attributes: { columns } } = props; const onChangeColumns = (newColumns) => { setAttributes({ columns: newColumns }); }; // Either go for the template route // (create an inner block template based on amount of columns) const template = Array.from(Array(columns).keys()).map((i) => [ "my-plugin/custom-inner-block", ]); // Or go for the allowed blocks route const allowedBlocks = ["my-plugin/custom-inner-block"]; return ( <div {...useBlockProps()}> {/* Use RangeControl in the InspectorControls to control the number of columns. */} <InspectorControls key="setting"> <div class="block-editor-block-card"> <fieldset> <legend className="blocks-base-control__label"> {__("Amount of columns", "gutenpride")} </legend> <RangeControl label="Columns" value={columns} onChange={(value) => onChangeColumns(value)} min={1} max={3} /> </fieldset> </div> </InspectorControls> <InnerBlocks template={activeTemplate} templateLock="all" allowedBlocks={allowedBlocks} /> </div> ) }, save() { return ( <div {...useBlockProps.save()}> <InnerBlocks.Content /> </div> ); }, // ... } ``` custom inner block: ```js registerBlockType("my-plugin/custom-inner-block", { title: "Custom Inner Block", edit(props) { const { attributes } = props; const { title } = attributes; return ( <div {...useBlockProps()}> <InnerBlocks/> </div> ); }, save() { return ( <div {...useBlockProps.save()}> <InnerBlocks.Content /> </div> ); }, // ... }); ``` _Originally posted by @rayelliott in https://git.rayelliott.dev/rayelliott/wp-red-orbital/issues/2#issuecomment-155_