Gutenberg registerBlockType

Gutenberg function registerBlockType with all the existing attributes:

registerBlockType('my-plugin/my-block', {
    title: 'My Block',                              // Title of the block
    description: 'Description of the block',         // Description of the block
    
    icon: 'smiley',                                 // Dashicon or SVG icon for the block
    
    category: 'common',                             // Category for the block
    
    keywords: [                                     // Array of keywords for the block
        'keyword 1',
        'keyword 2',
        'keyword 3',
    ],
    
    attributes: {
        content: {
            type: 'string',                          // Type of the attribute
            default: '',                             // Default value of the attribute
        },
        
        alignment: {
            type: 'string',                          // Type of the attribute
            default: 'left',                         // Default value of the attribute
        },
        
        backgroundColor: {
            type: 'string',                          // Type of the attribute
            default: '#ffffff',                       // Default value of the attribute
        },
        
        fontSize: {
            type: 'number',                          // Type of the attribute
            default: 16,                             // Default value of the attribute
        },
        
        // Add more attributes here...
    },
    
    edit: function(props) {
        // Block edit function
        
        return (
            <div className={props.className}>
                {/* Edit block content here */}
            </div>
        );
    },
    
    save: function(props) {
        // Block save function
        
        return (
            <div>
                {/* Save block content here */}
            </div>
        );
    },
});

This example includes a table of attributes and you can add more attributes as needed. Remember to adjust the block name, title, and other values according to your specific block requirements.

Certainly! Let’s go through each option of the registerBlockType function in detail:

• title: This option defines the title of the block. It is displayed when users browse available blocks in the block editor.
• description: The description option is used to provide a brief explanation or summary of the block’s purpose or functionality. It helps users understand what the block does.
• icon: This option allows you to specify an icon that represents the block. You can use either a Dashicon or an SVG icon. The chosen icon is displayed alongside the block title and helps users visually identify the block.
• category: The category option determines the block’s placement in the block inserter. It helps users quickly locate and select the block they want. Common categories include “common,” “text,” “layout,” “widgets,” and “embeds.”
• keywords: This option lets you specify an array of keywords related to the block. Keywords are used in the block inserter search to help users find relevant blocks. You can include multiple keywords to improve discoverability.
• attributes: The attributes option is an object that defines the different data properties or attributes associated with the block. Each attribute requires a name, type, and default value. In your example, there are attributes for content, alignment, backgroundColor, and fontSize. You can add more attributes as needed for your specific block requirements.
• edit: The edit option is a function that defines the behavior and rendering of the block within the editor. It returns the JSX (JavaScript XML) code that represents the block’s editing interface. Inside this function, you can create and configure the controls and components for user interaction.
• save: The save option is a function that defines the final output of the block when it is displayed or saved. It returns the JSX code representing the rendered block’s output. This function should generate valid HTML markup for the block’s content.

These options provide a structure and configuration for your block, allowing you to define its appearance, behavior, and functionality within the WordPress block editor.

Remember to adjust the values according to your specific block requirements.