WordPress Gutenberg Hacks That Will Transform Your Content Creation

// Add custom block styles
function my_custom_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'         => 'highlighted-yellow',
            'label'        => __('Highlighted Yellow', 'textdomain'),
            'inline_style' => '.is-style-highlighted-yellow { background-color: #fff9c0; padding: 10px; }',
        )
    );
    
    register_block_style(
        'core/heading',
        array(
            'name'         => 'underlined-heading',
            'label'        => __('Underlined', 'textdomain'),
            'inline_style' => '.is-style-underlined-heading { border-bottom: 2px solid currentColor; padding-bottom: 0.25em; }',
        )
    );
}
add_action('init', 'my_custom_block_styles');

/* Add these to your theme's CSS or a custom CSS plugin */

/* Fade-in animation for any block */
.fade-in-block {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Glass morphism effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
}

/* Gradient text for headings */
.gradient-text {
    background: linear-gradient(90deg, #4f39fa, #da62c4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

// Register a custom testimonial pattern
function register_testimonial_pattern() {
    register_block_pattern(
        'my-theme/testimonial-box',
        array(
            'title'       => __('Testimonial Box', 'my-theme'),
            'description' => __('A styled testimonial box with quote, text, and attribution', 'my-theme'),
            'categories'  => array('text'),
            'content'     => '<!-- wp:group {"className":"testimonial-box"} -->
                <div class="wp-block-group testimonial-box">
                    <!-- wp:paragraph {"fontSize":"large","style":{"typography":{"fontStyle":"italic"}}} -->
                    <p class="has-large-font-size" style="font-style:italic;">"This product has completely transformed our business processes."</p>
                    <!-- /wp:paragraph -->
                    
                    <!-- wp:paragraph {"className":"testimonial-name"} -->
                    <p class="testimonial-name"><strong>Jane Doe</strong><br>CEO, Example Company</p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->',
        )
    );
}
add_action('init', 'register_testimonial_pattern');

// Register a custom block category
function add_custom_block_category($categories) {
    return array_merge(
        $categories,
        array(
            array(
                'slug'  => 'my-custom-blocks',
                'title' => __('My Custom Blocks', 'textdomain'),
                'icon'  => 'dashboard',
            ),
        )
    );
}
add_filter('block_categories_all', 'add_custom_block_category');

// Register a simple custom block using register_block_type
function register_cta_block() {
    register_block_type(
        'my-plugin/cta-block',
        array(
            'editor_script' => 'my-custom-blocks',
            'render_callback' => 'render_cta_block',
            'attributes' => array(
                'title' => array(
                    'type' => 'string',
                    'default' => 'Call to Action',
                ),
                'content' => array(
                    'type' => 'string',
                    'default' => 'Click the button below to learn more.',
                ),
                'buttonText' => array(
                    'type' => 'string',
                    'default' => 'Learn More',
                ),
                'buttonUrl' => array(
                    'type' => 'string',
                    'default' => '#',
                ),
            ),
        )
    );
}
add_action('init', 'register_cta_block');

<!-- Example: Interactive accordion using core blocks -->
<!-- wp:group {"className":"interactive-accordion"} -->
<div class="wp-block-group interactive-accordion">
    <!-- wp:heading {"className":"accordion-header","fontSize":"medium"} -->
    <h2 class="accordion-header has-medium-font-size">Click to expand this section</h2>
    <!-- /wp:heading -->
    
    <!-- wp:group {"className":"accordion-content"} -->
    <div class="wp-block-group accordion-content" style="display: none;">
        <!-- wp:paragraph -->
        <p>This content will be revealed when the user clicks the heading above.</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:group -->
</div>
<!-- /wp:group -->

// Add this JavaScript to your theme or a custom plugin
document.addEventListener('DOMContentLoaded', function() {
    const accordionHeaders = document.querySelectorAll('.accordion-header');
    
    accordionHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const content = this.nextElementSibling;
            
            if (content.style.display === 'none' || content.style.display === '') {
                content.style.display = 'block';
                this.classList.add('active');
            } else {
                content.style.display = 'none';
                this.classList.remove('active');
            }
        });
    });
});

// Register a custom post type with block template
function register_portfolio_post_type() {
    register_post_type('portfolio', array(
        'labels' => array(
            'name' => __('Portfolio', 'textdomain'),
            'singular_name' => __('Portfolio Item', 'textdomain'),
        ),
        'public' => true,
        'show_in_rest' => true,
        'template' => array(
            array('core/heading', array(
                'level' => 2,
                'content' => 'Project Title',
                'align' => 'center',
            )),
            array('core/image', array(
                'align' => 'wide',
            )),
            array('core/columns', array(), array(
                array('core/column', array(), array(
                    array('core/heading', array(
                        'level' => 3,
                        'content' => 'Project Details',
                    )),
                    array('core/list'),
                )),
                array('core/column', array(), array(
                    array('core/heading', array(
                        'level' => 3,
                        'content' => 'Project Description',
                    )),
                    array('core/paragraph', array(
                        'placeholder' => 'Add project description here...',
                    )),
                )),
            )),
            array('core/gallery'),
        ),
    ));
}
add_action('init', 'register_portfolio_post_type');

// Selectively load blocks to improve editor performance
function my_allowed_block_types($allowed_block_types, $editor_context) {
    // For post editing, limit to just needed blocks
    if (!empty($editor_context->post) && $editor_context->post->post_type === 'post') {
        return array(
            'core/paragraph',
            'core/heading',
            'core/list',
            'core/image',
            'core/quote',
            'core/video',
            // Add only blocks you actually use
        );
    }
    
    return $allowed_block_types;
}
add_filter('allowed_block_types_all', 'my_allowed_block_types', 10, 2);

// Add image optimization for Gutenberg images
function optimize_gutenberg_images($block_content, $block) {
    if ($block['blockName'] === 'core/image') {
        // Add lazy loading to images
        $block_content = str_replace('<img', '<img loading="lazy"', $block_content);
        
        // Add classes for responsive images if not already present
        if (strpos($block_content, 'size-full') !== false && strpos($block_content, 'img-fluid') === false) {
            $block_content = str_replace('wp-block-image', 'wp-block-image img-fluid', $block_content);
        }
    }
    
    return $block_content;
}
add_filter('render_block', 'optimize_gutenberg_images', 10, 2);

/* Landing page specific styles */
.landing-hero {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    padding: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

// Register a custom block for product features
function register_product_features_block() {
    register_block_pattern(
        'my-theme/product-features',
        array(
            'title'       => __('Product Features Grid', 'my-theme'),
            'description' => __('Display product features in a responsive grid layout', 'my-theme'),
            'categories'  => array('product'),
            'content'     => '<!-- wp:columns {"className":"product-features-grid"} -->
                <div class="wp-block-columns product-features-grid">
                    <!-- wp:column -->
                    <div class="wp-block-column">
                        <!-- wp:heading {"level":3,"className":"feature-title"} -->
                        <h3 class="feature-title">Feature 1</h3>
                        <!-- /wp:heading -->
                        
                        <!-- wp:paragraph -->
                        <p>Description of feature 1 goes here.</p>
                        <!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:column -->
                    
                    <!-- Additional columns for features 2, 3, etc. -->
                </div>
                <!-- /wp:columns -->',
        )
    );
}
add_action('init', 'register_product_features_block');