• Mr Ali

    (@afaqalijawa)


    Hi everyone,

    I’m having an issue with a custom block that I created for WordPress. The block is supposed to show up in the “Custom Blocks” category in the block editor, but it’s not appearing when I search for it.

    I’ve checked the PHP and JavaScript code for the plugin and everything seems to be correct. I’ve also tried adding some debugging code to see if the functions are being called correctly, but I’m still not able to figure out what’s causing the issue.

    Here is the PHP code for the plugin:

    <?php
    /*
    Plugin Name: Related Post Block
    Description: Adds a custom block to generate related post code snippets.
    */
    
    // Enqueue the block editor assets
    add_action('enqueue_block_editor_assets', 'related_post_block_enqueue_assets');
    
    function related_post_block_enqueue_assets() {
        // Enqueue the JavaScript file for the block
        wp_enqueue_script(
            'related-post-block',
            plugins_url('block.js', __FILE__),
            array('wp-blocks', 'wp-editor', 'wp-components', 'wp-api-fetch', 'wp-element'), // Add wp-element as a dependency
            filemtime(plugin_dir_path(__FILE__) . 'block.js')
        );
    }
    
    // Register the block category
    add_filter('block_categories', 'related_post_block_add_category');
    
    function related_post_block_add_category($categories) {
        return array_merge(
            $categories,
            array(
                array(
                    'slug'  => 'custom-blocks',
                    'title' => 'Custom Blocks',
                    'icon'  => 'admin-generic'
                )
            )
        );
    }

    And here is the JavaScript code for the block:

    (function (blocks, editor, components, apiFetch) {
        var el = blocks.element.createElement;
        var __ = wp.i18n.__;
    
        blocks.registerBlockType('custom-blocks/related-post', {
            title: __('Related Post', 'related-post-block'),
            icon: 'admin-links',
            category: 'custom-blocks',
            keywords: [__('related'), __('post')],
            attributes: {
                url: {
                    type: 'string',
                    source: 'attribute',
                    attribute: 'data-url',
                    selector: 'input[type="url"]'
                }
            },
            edit: function (props) {
                var attributes = props.attributes;
    
                function updateUrl(event) {
                    props.setAttributes({ url: event.target.value });
                }
    
                return el(
                    'div',
                    {},
                    el(
                        'input',
                        {
                            type: 'url',
                            placeholder: __('Paste the post URL', 'related-post-block'),
                            value: attributes.url,
                            onChange: updateUrl
                        }
                    ),
                    el(
                        editor.InspectorControls,
                        {},
                        el(
                            components.PanelBody,
                            { title: __('Options', 'related-post-block'), initialOpen: true },
                            el(
                                components.PanelRow,
                                {},
                                el(
                                    components.Button,
                                    {
                                        isPrimary: true,
                                        onClick: function () {
                                            var generateUrl = '/wp-json/related-post-block/v1/generate';
                                            apiFetch({ path: generateUrl, method: 'POST', body: attributes.url })
                                                .then(function (response) {
                                                    if (response && response.data) {
                                                        editor.DomUtils.insertHTML(
                                                            document.activeElement,
                                                            response.data
                                                        );
                                                    }
                                                });
                                        }
                                    },
                                    __('Generate', 'related-post-block')
                                )
                            )
                        )
                    )
                );
            },
            save: function () {
                return null; // Save is handled on the server-side
            }
        });
    })(window.wp.blocks, window.wp.editor, window.wp.components, window.wp.apiFetch);
    

    I would really appreciate any help or suggestions on how to resolve this issue. Thank you in advance!

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Custom block not showing up in block editor’ is closed to new replies.