WordPress GUTENBERG PATTERNS - I AM ARUN CHAITANYA JAMI

“WP Gutenberg Patterns” likely refers to design patterns and block patterns available within the WordPress Gutenberg editor. Gutenberg is the default block editor introduced in WordPress 5.0, replacing the classic TinyMCE editor, and it allows users to create content using a block-based approach.

In this context, “patterns” refer to pre-designed and reusable content layouts made up of blocks. These patterns help users quickly create visually appealing and consistent content without having to build everything from scratch. Block patterns may include a combination of text, images, headings, buttons, and other block types arranged in a specific layout.

The Gutenberg editor itself comes with a variety of default block patterns that users can use for common content elements. Additionally, developers and designers can create custom block patterns for specific themes or plugins, making it easier for end-users to create content with predefined styles and layouts.

The use of block patterns enhances the overall editing experience in WordPress and empowers users to design more complex and visually attractive pages without the need for extensive custom coding or reliance on page builders. As time goes on, the collection of available block patterns is expected to grow, making content creation even more streamlined and versatile.

Wondering how to write the code?

Let’s say you want to create a pattern for a “Call to Action” (CTA) section with a heading, paragraph, and a button.

First, you’ll need to create a new plugin or add this code to your existing plugin’s file. Start by registering the custom block pattern:

// Replace 'your_plugin_namespace' with your actual plugin namespace
function your_plugin_namespace_register_custom_block_patterns() {
    $pattern = array(
        'title'      => 'Call to Action',
        'categories' => array('text'),
        'content'    => array(
            array(
                'type'     => 'core/heading',
                'content'  => 'Your CTA Heading',
                'level'    => 2,
            ),
            array(
                'type'     => 'core/paragraph',
                'content'  => 'Your CTA Text Goes Here',
            ),
            array(
                'type'     => 'core/button',
                'text'     => 'Learn More',
                'url'      => 'https://example.com',
            ),
        ),
    );

    register_block_pattern(
        'your-plugin-namespace/cta-pattern',
        $pattern
    );
}
add_action('init', 'your_plugin_namespace_register_custom_block_patterns');

2. Next, you need to enqueue the block pattern script on the editor screen:

// Replace 'your_plugin_namespace' with your actual plugin namespace
function your_plugin_namespace_enqueue_block_pattern() {
    wp_enqueue_script(
        'your-plugin-namespace-block-pattern',
        plugins_url('/block-pattern.js', __FILE__),
        array('wp-blocks', 'wp-dom-ready', 'wp-edit-post')
    );
}
add_action('enqueue_block_editor_assets', 'your_plugin_namespace_enqueue_block_pattern');

Create a new JavaScript file named block-pattern.js in your plugin directory with the following content:

wp.domReady(function() {
    const { registerBlockPattern } = wp.blockPatterns;

    // Replace 'your-plugin-namespace/cta-pattern' with your actual block pattern namespace
    registerBlockPattern('your-plugin-namespace/cta-pattern', {
        title: 'Call to Action',
        content: [
            {
                name: 'core/heading',
                attributes: {
                    content: 'Your CTA Heading',
                    level: 2,
                },
            },
            {
                name: 'core/paragraph',
                attributes: {
                    content: 'Your CTA Text Goes Here',
                },
            },
            {
                name: 'core/button',
                attributes: {
                    text: 'Learn More',
                    url: 'https://example.com',
                },
            },
        ],
    });
});

Save all the changes and activate your plugin.

Now, when you open the Gutenberg editor and search for available block patterns, you should see the “Call to Action” pattern you just created. When you insert it into your content, it will generate a pre-designed “Call to Action” section with a heading, paragraph, and a button.