WordPress Blocks

Summary: Learning about WordPress Blocks, Default Blocks.

A block in WordPress is a modular unit used to create and manage content within the Gutenberg editor. Every piece of content (text, media, layout element, etc.) is a block, allowing users to build posts and pages by assembling these blocks in a visual, drag-and-drop interface. The block-based system simplifies content creation and offers flexibility, as each block can be styled and customized independently.

Text Blocks

• Paragraph Block
  • Used for adding standard text content.
  • Supports rich text editing, including bold, italic, lists, and links.
  • Automatically adjusts spacing between paragraphs.
• Heading Block
  • Allows for different heading levels (H1-H6).
  • Useful for organizing content hierarchically.
  • Can be styled with different text sizes and colors.
• Quote Block
  • Displays quotes with options for attribution.
  • Provides styling options for the quote’s appearance.
  • Ideal for highlighting important statements or testimonials.
• List Block
  • Used to create ordered or unordered lists.
  • Supports nested lists.
  • Easily customizable with different bullet styles.

Media Blocks

• Image Block
  • For inserting single images.
  • Allows for image alignment, size adjustments, and captioning.
  • Supports lazy loading and image alt text for accessibility.
• Gallery Block
  • Creates a grid of images.
  • Offers layout and size options for gallery display.
  • Can include captions for individual images.
• Cover Block
  • Combines an image or video with text overlay.
  • Ideal for creating eye-catching hero sections or promotional banners.
  • Offers options for adjusting text color and overlay opacity.
• Audio Block
  • Embeds audio files or audio players.
  • Supports various audio formats.
  • Allows users to play audio directly from the post/page.
• Video Block
  • For embedding video files or video players.
  • Supports multiple video formats.
  • Can include options for autoplay and loop.

Design & Layout Blocks

• Columns Block
  • Allows content to be organized into columns.
  • Supports multiple column layouts with adjustable widths.
  • Can nest other blocks within columns.
• Group Block
  • Used to group multiple blocks together.
  • Allows for consistent styling and layout for the contained blocks.
  • Can be used to create sections with background colors or images.
• Spacer Block
  • Inserts a space between blocks to adjust layout.
  • Can be customized for specific heights.
• Separator Block
  • Adds a horizontal line to separate content visually.
  • Options for different styles, such as solid or dashed lines.

Embed Blocks

• Embed Block
  • Supports embedding content from various platforms (e.g., YouTube, Twitter).
  • Automatically generates a preview based on the URL provided.
• Shortcode Block
  • Allows users to enter WordPress shortcodes.
  • Useful for adding dynamic content or functionality.

Widgets & Additional Functional Blocks

• Shortcode Block
  • For embedding shortcodes from plugins or themes.
  • Enables additional functionalities in posts/pages.
• Custom HTML Block
  • Allows users to add custom HTML code directly.
  • Useful for integrating third-party scripts or widgets.
• RSS Block
  • Displays content from an external RSS feed.
  • Allows for fetching and displaying recent posts from other websites.

Types of Blocks

In WordPress, blocks can be categorized into two major types based on how they function and generate content: Static Blocks and Dynamic Blocks.

Static Blocks

Static blocks are those that store and display the content exactly as it is entered into the block editor. Once the content is published or saved, it becomes part of the HTML in the database and will not change unless manually edited by the user.

• Content is saved in the WordPress database as HTML and does not rely on PHP or server-side processing to display.
• Lightweight and faster because they don’t require server-side computation each time a page is loaded.
• Typically used for simple content like text, images, or lists where the data does not need to change frequently.

• Paragraph Block: Text entered into a paragraph block will remain the same unless a user edits it.
• Image Block: Once an image is uploaded and placed in the content, it’s saved as static HTML in the post content.
• Heading Block: The heading text is stored statically and doesn’t change unless manually updated.
• List Block: Ordered or unordered lists that do not change dynamically.

Dynamic Blocks

Dynamic blocks are generated on the fly when the page is rendered, meaning that their content can change over time or be influenced by other factors like user input, data from external APIs, or the state of the WordPress site.

• Content is not saved directly as HTML in the database but is rendered dynamically using PHP functions when the post/page is displayed.
• Allows for real-time updates or pulling in content that changes frequently, such as a list of recent posts or a weather widget.
• Slightly more resource-intensive than static blocks because they require server-side processing to generate the content.

• Post List Block: Displays a dynamic list of the latest blog posts. Each time the page is loaded, the block queries the database to get the most recent posts.
• Comments Block: Displays the comments for the current post or page. Comments may change as users add or remove them.
• Calendar Block: Generates a dynamic calendar, displaying content such as post dates.
• RSS Block: Pulls and displays content from external sources using RSS feeds, meaning it can change as the external content updates.
• Search Block: Dynamically processes and displays search results based on user queries.

Simple Static Block

<?php
/**
 * Plugin Name: Simple Static Block
 */

function my_static_block_enqueue_assets() {
    wp_enqueue_script(
        'my-static-block-editor',
        plugins_url('block.js', __FILE__), // Path to block.js file
        array('wp-blocks', 'wp-editor', 'wp-element', 'wp-components', 'wp-i18n'), // Dependencies
        filemtime(plugin_dir_path(__FILE__) . 'block.js')
    );
}
add_action('enqueue_block_editor_assets', 'my_static_block_enqueue_assets');

wp.blocks.registerBlockType('my-blocks/static-block', {
    title: 'Simple Static Block',
    icon: 'smiley', // Icon for the block
    category: 'common', // Common category for general blocks
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        }
    },
    edit: function(props) {
        function onChangeContent(newContent) {
            props.setAttributes({ content: newContent });
        }

        return wp.element.createElement(
            'div',
            { className: props.className },
            wp.element.createElement(
                wp.blockEditor.RichText,
                {
                    tagName: 'p',
                    onChange: onChangeContent,
                    value: props.attributes.content,
                    placeholder: 'Write something…'
                }
            )
        );
    },
    save: function(props) {
        return wp.element.createElement(
            wp.blockEditor.RichText.Content,
            {
                tagName: 'p',
                value: props.attributes.content,
            }
        );
    }
});