search

Automattic / isolated-block-editor

Repackages Gutenberg's editor playground as a full-featured multi-instance editor that does not require WordPress.
343 stars 50 forks source link

Register custom block pattern #208

Closed ArtMin96 closed 1 year ago

ArtMin96 commented 1 year ago

This is how I try to add a custom block pattern, but no result. How can I do this? Thanks

const settings = {
    iso: {
        //...
        patterns: [

        ]
    },

    // OR

    editor: {
        //...
        __experimentalBlockPatterns: [
            {
                "categories": [
                    "text"
                ],
                "content": "some long content",
                "description": "An example block pattern with a heading.",
                "name": "example/myplugin",
                "title": "Example block pattern"
            }
        ],
        // Default to no category patterns, reusable blocks
        __experimentalBlockPatternCategories: [
            {
                "label": "Text",
                "name": "text"
            },
            {
                "label": "Demo",
                "name": "demo"
            }
        ],
    }
}
wp.attachEditor(this.$refs.gutenberg, settings);
johngodley commented 1 year ago

Patterns need categories, content, name, and title. Categories needname,label,description`.

It's probably worth checking this kind of stuff against Gutenberg itself as this project just passes it straight through.

ArtMin96 commented 1 year ago

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/ Everything there is presented for working with wordpress. But I can't find anything for the standalone editor. It would be good to open the discussion section, in case of questions we will not open a new issue. Thank you

xpalko commented 1 year ago

@ArtMin96 Check here, working code.

https://github.com/xpalko/isolated-block-editor/commit/e73177b987b1eaba1794aa24e45bd11aad011b7f

ArtMin96 commented 1 year ago

Thanks @xpalko Is there any option so that I don't fork and change the package code?

johngodley commented 1 year ago

The current repo supports patterns fine as it just passes the data to Gutenberg - it's not necessary to fork.

Modifying the included index.html and inserting the patterns from xpalko:

<html>
    <head>
        <title>Plain Text Editor</title>
        <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
        <script src="../../build-browser/isolated-block-editor.js"></script>
        <link rel="stylesheet" href="../../build-browser/core.css" />
        <link rel="stylesheet" href="../../build-browser/isolated-block-editor.css" />
        <meta charset="UTF-8">

        <style>
            body {
                margin: 0;
                padding: 40px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
                width: 80%;
                margin: 0 auto;
            }

            textarea {
                width: 100%;
            }

            .editor {
                min-height: 200px;
                width: 100%;
            }

            .block-editor-block-list__layout p {
                font-size: 22px;
            }

            .add-another {
                margin-top: 50px;
                padding: 1em;
                font-weight: 400;
                border-radius: 9999px;
                background-color: rgba(45,55,72,1);
                color: white;
            }

            .cloner {
                display: none;
            }
        </style>
    </head>

    <body>
        <h1>Gutenberg attached to a plain textarea</h1>
        <p>The textarea can be converted into a Gutenberg editor. Any existing content will be converted into blocks. Multiple editors can be added, with a seperate edit history for each.</p>

        <div class="editors">
            <div class="editor-container cloner">
                <p>
                    <button onClick="toggleEditor( this );">Toggle Gutenberg</button>
                </p>
                <textarea rows="10"></textarea>
            </div>
            <div class="editor-container">
                <p>
                    <button onClick="toggleEditor( this );">Toggle Gutenberg</button>
                </p>
                <textarea rows="10"></textarea>
            </div>
        </div>

        <button class="add-another" onClick="addEditor()">Add another editor</button>
    </body>

    <script>
        const settings = {
            editor: {
                __experimentalBlockPatterns: [
                    {
                        "categories": [
                            "text"
                        ],
                        "content": "<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgb(238,238,238) 21%,rgb(169,184,195) 100%)\"}}} -->\n<div class=\"wp-block-group alignfull has-background\" style=\"background:linear-gradient(135deg,rgb(238,238,238) 21%,rgb(169,184,195) 100%)\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":1} -->\n<h1>Featured Articles</h1>\n<!-- /wp:heading -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://picsum.photos/200/300\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Article 1</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"red\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-red-background-color has-background\">Read more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://picsum.photos/200/300\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Article 2</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"red\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-red-background-color has-background\">Read more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://picsum.photos/200/300\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Article 3</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"red\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-red-background-color has-background\">Read more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
                        "description": "An example block pattern with a heading.",
                        "name": "example/myplugin",
                        "title": "Example block pattern"
                    }
                ],
                __experimentalBlockPatternCategories: [
                    {
                        "label": "Text",
                        "name": "text"
                    },
                    {
                        "label": "Demo",
                        "name": "demo"
                    }
                ]
            }
        };

        function toggleEditor( button ) {
            const textarea = button.parentNode.parentNode.querySelector( 'textarea' );

            if ( textarea.style.display === 'none' ) {
                wp.detachEditor( textarea );
            } else {
                wp.attachEditor( textarea, settings );
            }
        }

        function addEditor() {
            const editor = document.querySelector( '.cloner' );
            const clone = editor.cloneNode( true );

            clone.classList.remove( 'cloner' );

            editor.parentNode.appendChild( clone );
        }
    </script>
</html>
ArtMin96 commented 1 year ago

@johngodley I did that, but the pattern section is not there

const settings = {
    iso: {
        //...
    },
    editor: {
        codeEditingEnabled: true,
        allowedBlockTypes: true,
        canLockBlocks: false,
        disableCustomColors: false,
        disableCustomGradients: true,
        disableCustomFontSizes: false,
        disablePostFormats: false,
        bodyPlaceholder: this.bodyPlaceholder,
        reusableBlocks: [],
        richEditingEnabled: true,
        hasUploadPermissions: true,
        __experimentalBlockPatterns: [
            {
                "categories": [
                    "text"
                ],
                "content": "<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgb(238,238,238) 21%,rgb(169,184,195) 100%)\"}}} -->\n<div class=\"wp-block-group alignfull has-background\" style=\"background:linear-gradient(135deg,rgb(238,238,238) 21%,rgb(169,184,195) 100%)\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":1} -->\n<h1>Featured Articles</h1>\n<!-- /wp:heading -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://picsum.photos/200/300\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Article 1</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"red\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-red-background-color has-background\">Read more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://picsum.photos/200/300\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Article 2</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"red\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-red-background-color has-background\">Read more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://picsum.photos/200/300\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Article 3</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eaedem res maneant alio modo. At hoc in eo M. Non potes, nisi retexueris illa. Scrupulum, inquam, abeunti; Quantum Aristoxeni ingenium consumptum videmus in musicis?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"red\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-red-background-color has-background\">Read more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
                "description": "An example block pattern with a heading.",
                "name": "example/myplugin",
                "title": "Example block pattern"
            }
        ],
        __experimentalBlockPatternCategories: [
            {
                "label": "Text",
                "name": "text"
            },
            {
                "label": "Demo",
                "name": "demo"
            }
        ]
    },
};

wp.attachEditor(editor, settings);

user-menu

johngodley commented 1 year ago

Did you try the above example? You should work from that and see what is different with your local project.

ArtMin96 commented 1 year ago

oh. Ok. Let me try

ArtMin96 commented 1 year ago

This is what I have user-menu

johngodley commented 1 year ago

Then something is different with your local files. The above code is run directly from this repo

image

ArtMin96 commented 1 year ago

Thank you very much @johngodley and @xpalko. I will try to find the problem.

ArtMin96 commented 1 year ago

The problem was here: when I use allowBlocks, the pattern section does not work. Is this a bug?

const settings = {
    iso: {
        blocks: {
            allowBlocks: blocksArray
        },
    }
};
johngodley commented 1 year ago

I don't think so, no. Your allowed blocks will need to allow whatever blocks are used in the pattern.

ArtMin96 commented 1 year ago

ok. Thanks for help