block editor Archives - Developry Plugins

WordPress Block Editor Keyboard Shortcuts: Complete Productivity Guide

Krasen Slavov — Mon, 30 Mar 2026 09:00:00 +0000

Keyboard shortcuts transform the WordPress block editor from a point-and-click interface into a productivity powerhouse. Mastering these shortcuts can reduce content creation time by 50% or more, allowing you to write, format, and publish faster than ever before.

Why Keyboard Shortcuts Matter

Content creators who master keyboard shortcuts report dramatic productivity improvements. Instead of constantly moving your hand between keyboard and mouse, shortcuts keep your hands in typing position, maintaining flow state and reducing physical strain.

Professional writers and editors can create content up to twice as fast using shortcuts. The time savings compound across hundreds of posts, translating to significant productivity gains.

Before memorizing shortcuts, learn the most important one: Shift+Alt+H (Windows) or Shift+Control+H (Mac). This opens the keyboard shortcuts help panel, providing instant reference for all available shortcuts.

The help panel organizes shortcuts by category: Global, Selection, Block, Text formatting, and more. Keep this panel open while learning shortcuts, then gradually rely on muscle memory.

Navigation shortcuts move your cursor and selection efficiently without reaching for the mouse.

Tab moves focus to the next block toolbar or interface element. Shift+Tab moves backward. These shortcuts allow you to navigate the entire editor using only the keyboard.

Arrow keys move the text cursor within blocks. When no text is selected, Up Arrow and Down Arrow move between blocks.

Escape clears selection and moves focus to the block toolbar. Press it again to deselect the block entirely. This shortcut is essential for keyboard-only navigation.

Ctrl/Cmd+A selects all content in the current block. Press it twice to select all blocks in the editor.

Quick Block Insertion

The forward slash (/) shortcut revolutionizes block insertion. Type / to open the block inserter menu, then start typing the block name. For example:

Type /image to insert an image block
Type /heading for a heading block
Type /code for a code block
Type /quote for a quote block

This autocomplete interface is faster than clicking the block inserter button and scrolling through options.

Enter creates a new paragraph block below the current block. Shift+Enter inserts a line break within the same block without creating a new paragraph.

Text Formatting Shortcuts

Standard text formatting shortcuts work in the block editor:

Ctrl/Cmd+B – Bold text
Ctrl/Cmd+I – Italic text
Ctrl/Cmd+U – Underline text
Ctrl/Cmd+K – Insert or edit link
Ctrl/Cmd+Shift+X – Strikethrough text

These shortcuts apply formatting to selected text or toggle formatting for new text you’re about to type.

Markdown-Style Shortcuts

The block editor supports markdown-style shortcuts for rapid formatting:

Type ## followed by space to create an H2 heading
Type ### followed by space to create an H3 heading
Type * or – followed by space to create an unordered list
Type 1. followed by space to create an ordered list
Type > followed by space to create a quote block
Type “` followed by space to create a code block

These shortcuts convert the current paragraph into the specified block type, streamlining content creation without interrupting your typing flow.

Block Manipulation Shortcuts

Move and modify blocks without touching the mouse:

Ctrl/Cmd+Shift+D duplicates the selected block(s). This is invaluable when creating similar content sections or testing layout variations.

Ctrl/Cmd+Alt+T inserts a new block before the current block. Ctrl/Cmd+Alt+Y inserts a new block after. These shortcuts maintain your cursor position while adding blocks.

Ctrl/Cmd+Shift+Z (Windows) or Ctrl+Alt+Backspace (Mac) removes the selected block.

Moving Blocks

Rearrange content structure using movement shortcuts:

Ctrl/Cmd+Shift+Up Arrow moves the current block up. Ctrl/Cmd+Shift+Down Arrow moves it down.

On Mac, you can also use Option+Control+Up/Down Arrow for block movement.

These shortcuts work with multi-block selections, allowing you to move entire sections at once.

Multi-Block Selection

Select multiple blocks for bulk operations:

Shift+Click extends selection from the currently selected block to the clicked block, selecting all blocks in between.

Ctrl/Cmd+Click toggles individual blocks in and out of selection, allowing non-contiguous selections.

Once multiple blocks are selected, use movement shortcuts to relocate entire sections or delete shortcuts to remove them all at once.

Editor Mode Switching

Ctrl/Cmd+Shift+Alt+M toggles between Edit and Select modes. Select mode allows you to select blocks by clicking anywhere on them, not just the toolbar, making it easier to select and move large blocks.

Saving and Publishing

Ctrl/Cmd+S saves your current changes as a draft. This works whether you’re editing a draft, published post, or page.

While there’s no default publishing shortcut, you can navigate to the Publish button using Tab and press Enter to publish.

Undo and Redo

Ctrl/Cmd+Z undoes your last action. Ctrl/Cmd+Shift+Z (Windows) or Cmd+Shift+Z (Mac) redoes.

The block editor maintains a comprehensive undo history, tracking not just text changes but block additions, movements, and deletions.

Creating a Workflow

Combine shortcuts into efficient workflows. Here’s a typical blog post creation workflow using only keyboard shortcuts:

Press /heading to create a title
Press Down Arrow then Enter to create a paragraph
Type content, using Ctrl/Cmd+B and Ctrl/Cmd+I for formatting
Press Enter to create new paragraphs
Type /image to insert images
Use Ctrl/Cmd+Shift+D to duplicate similar sections
Press Ctrl/Cmd+S frequently to save
Use Tab to navigate to Publish, press Enter to publish

Shortcuts Cheat Sheet

Print or bookmark this quick reference:

Navigation:

Tab/Shift+Tab – Navigate interface
Escape – Clear selection
Ctrl/Cmd+A – Select all

Insertion:

/ – Block inserter
Enter – New paragraph
Shift+Enter – Line break

Formatting:

Ctrl/Cmd+B – Bold
Ctrl/Cmd+I – Italic
Ctrl/Cmd+K – Link

Blocks:

Ctrl/Cmd+Shift+D – Duplicate
Ctrl/Cmd+Shift+Up/Down – Move
Ctrl/Cmd+Alt+T/Y – Insert before/after

Editor:

Ctrl/Cmd+S – Save
Ctrl/Cmd+Z – Undo
Shift+Alt+H – Help

Conclusion

Keyboard shortcuts transform your block editor experience from slow and mouse-dependent to fast and efficient. Start by learning the most frequently used shortcuts—block insertion, formatting, and navigation. Gradually expand your repertoire, and you’ll soon find yourself creating content significantly faster than before.

External Links

Call to Action

Streamline your workflow! Block Editor Navigator Pro provides instant block navigation, search, and organization. Find any block in seconds—try it free!

The post WordPress Block Editor Keyboard Shortcuts: Complete Productivity Guide appeared first on Developry Plugins.

ACF and Gutenberg: Integrating Custom Fields with Block Editor

Krasen Slavov — Fri, 10 Oct 2025 09:00:00 +0000

ACF Blocks (ACF PRO) enable custom Gutenberg block creation through PHP registration combining block editor flexibility with ACF field power. From simple content blocks with custom fields to complex layouts with InnerBlocks and block templates, ACF Blocks eliminate React JavaScript requirements. This comprehensive guide teaches ACF Block registration, field integration, render callbacks, block templates, InnerBlocks support, and advanced techniques creating custom WordPress Gutenberg blocks with familiar ACF workflows.

What Are ACF Blocks?

ACF Blocks Concept (ACF PRO 5.8+):

ACF Blocks create custom Gutenberg blocks using PHP:

No React required: Use PHP templates
ACF Fields: Familiar field interface
Block Controls: Native block toolbar
Reusable: Save and reuse block instances
Flexible: Full block editor integration

Block vs Field Group:

Traditional Field Group:
- Attached to post type
- Single metabox location
- Fixed field order

ACF Block:
- Insertable anywhere in content
- Multiple instances per post
- Drag-and-drop positioning
- Reusable patterns

Basic Block Registration

Register Simple Block (functions.php):

function mytheme_register_acf_blocks() {
    // Check ACF function exists
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name' => 'testimonial',
            'title' => __('Testimonial', 'mytheme'),
            'description' => __('A custom testimonial block', 'mytheme'),
            'render_template' => get_template_directory() . '/blocks/testimonial.php',
            'category' => 'common',
            'icon' => 'format-quote',
            'keywords' => array('testimonial', 'quote', 'review'),
        ));
    }
}
add_action('acf/init', 'mytheme_register_acf_blocks');

Block Registration Parameters

Complete Configuration:

acf_register_block_type(array(
    // Required
    'name' => 'testimonial',
    'title' => __('Testimonial'),

    // Content
    'description' => __('A testimonial block'),
    'render_template' => 'blocks/testimonial.php',
    'render_callback' => 'mytheme_render_testimonial',

    // Appearance
    'category' => 'common',
    'icon' => 'format-quote',
    'keywords' => array('testimonial'),

    // Behavior
    'mode' => 'preview',
    'align' => 'full',
    'supports' => array(
        'align' => true,
        'mode' => false,
        'multiple' => true,
        'jsx' => true,
    ),

    // Style
    'enqueue_style' => get_template_directory_uri() . '/blocks/testimonial.css',
    'enqueue_script' => get_template_directory_uri() . '/blocks/testimonial.js',
    'enqueue_assets' => 'mytheme_testimonial_assets',

    // Advanced
    'post_types' => array('post', 'page'),
    'example' => array(
        'attributes' => array(
            'mode' => 'preview',
            'data' => array(
                'author' => 'John Doe',
                'quote' => 'Amazing service!',
            ),
        ),
    ),
));

Parameter Explanations:

name: Unique slug (no spaces)
title: Display name in inserter
description: Block description
render_template: PHP file path
render_callback: PHP function name
category: Block category
icon: Dashicon or custom SVG
keywords: Search terms
mode: 'preview', 'edit', or 'auto'
align: Default alignment
supports: Block capabilities
enqueue_style: CSS file URL
enqueue_script: JS file URL
post_types: Allowed post types
example: Preview data

Creating Block Template

Testimonial Block Template (blocks/testimonial.php):


/**
 * Testimonial Block Template
 *
 * @param array $block The block settings and attributes
 * @param string $content The block inner HTML (empty)
 * @param bool $is_preview True during AJAX preview
 * @param int $post_id The post ID this block is saved to
 */

// Get ACF fields
$author = get_field('author');
$company = get_field('company');
$quote = get_field('quote');
$photo = get_field('photo');
$rating = get_field('rating');

// Block ID
$block_id = 'testimonial-' . $block['id'];

// Block classes
$class_name = 'testimonial-block';
if (!empty($block['className'])) {
    $class_name .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
    $class_name .= ' align' . $block['align'];
}
?>

"$block_id); ?>" class="$class_name); ?>">
    <?php if ($quote) : ?>
        class="testimonial-quote">
            <?php echo esc_html($quote); ?>
        
    <?php endif; ?>

    class="testimonial-author">
        <?php if ($photo) : ?>
            "$photo['sizes']['thumbnail']); ?>"
                 alt="$author); ?>"
                 class="author-photo" />
        <?php endif; ?>

        class="author-info">
            <?php if ($author) : ?>
                class="author-name"><?php echo esc_html($author); ?>
            <?php endif; ?>

            <?php if ($company) : ?>
                class="author-company"><?php echo esc_html($company); ?>
            <?php endif; ?>

            <?php if ($rating) : ?>
                class="rating">
                    <?php for ($i = 0; $i < $rating; $i++) : ?>
                        class="star">★
                    <?php endfor; ?>
                
            <?php endif; ?>

Block Field Group

Register Fields for Block:

function mytheme_register_block_fields() {
    if (function_exists('acf_add_local_field_group')) {
        acf_add_local_field_group(array(
            'key' => 'group_testimonial_block',
            'title' => 'Testimonial Block Fields',
            'fields' => array(
                array(
                    'key' => 'field_author',
                    'label' => 'Author',
                    'name' => 'author',
                    'type' => 'text',
                    'required' => 1,
                ),
                array(
                    'key' => 'field_company',
                    'label' => 'Company',
                    'name' => 'company',
                    'type' => 'text',
                ),
                array(
                    'key' => 'field_quote',
                    'label' => 'Quote',
                    'name' => 'quote',
                    'type' => 'textarea',
                    'required' => 1,
                ),
                array(
                    'key' => 'field_photo',
                    'label' => 'Photo',
                    'name' => 'photo',
                    'type' => 'image',
                    'return_format' => 'array',
                ),
                array(
                    'key' => 'field_rating',
                    'label' => 'Rating',
                    'name' => 'rating',
                    'type' => 'range',
                    'min' => 1,
                    'max' => 5,
                    'step' => 1,
                    'default_value' => 5,
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'block',
                        'operator' => '==',
                        'value' => 'acf/testimonial',
                    ),
                ),
            ),
        ));
    }
}
add_action('acf/init', 'mytheme_register_block_fields');

Block Categories

Built-in Categories:

'common' - Common
'formatting' - Formatting
'layout' - Layout
'widgets' - Widgets
'embed' - Embeds

Custom Category:

function mytheme_block_categories($categories) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'custom-blocks',
                'title' => __('Custom Blocks', 'mytheme'),
                'icon' => 'admin-customizer',
            ),
        )
    );
}
add_filter('block_categories_all', 'mytheme_block_categories', 10, 2);

Block Icons

Dashicon Icon:

'icon' => 'format-quote'
'icon' => 'admin-users'
'icon' => 'heart'

Custom SVG Icon:

'icon' => ''

Icon with Background:

'icon' => array(
    'background' => '#7e70af',
    'foreground' => '#fff',
    'src' => 'format-quote',
)

Block Modes

Mode Options:

// Preview mode (default)
'mode' => 'preview'

// Edit mode (show fields)
'mode' => 'edit'

// Auto switch
'mode' => 'auto'

Allow Mode Switching:

'supports' => array(
    'mode' => true, // Allow users to toggle
)

Block Alignment

Set Default Alignment:

'align' => 'full'
'align' => 'wide'
'align' => 'center'

Enable Alignment Control:

'supports' => array(
    'align' => true, // Enable alignment toolbar
    'align' => array('left', 'center', 'right'), // Specific alignments
)

InnerBlocks Support

Enable Nested Blocks:

'supports' => array(
    'jsx' => true,
)

Template with InnerBlocks:

class="container-block">
    class="container-header">
        <?php echo esc_html(get_field('title')); ?>
    

    class="container-content">

Block Example (Preview)

Provide Preview Data:

'example' => array(
    'attributes' => array(
        'mode' => 'preview',
        'data' => array(
            'author' => 'Jane Smith',
            'company' => 'Acme Corp',
            'quote' => 'This is an amazing product!',
            'rating' => '5',
        ),
    ),
)

Enqueue Block Assets

Separate CSS/JS Files:

'enqueue_style' => get_template_directory_uri() . '/blocks/testimonial.css',
'enqueue_script' => get_template_directory_uri() . '/blocks/testimonial.js',

Asset Callback Function:

'enqueue_assets' => function() {
    wp_enqueue_style('testimonial-block', get_template_directory_uri() . '/blocks/testimonial.css');
    wp_enqueue_script('testimonial-block', get_template_directory_uri() . '/blocks/testimonial.js', array('jquery'), '1.0', true);
}

Render Callback

Use Function Instead of Template:

'render_callback' => 'mytheme_render_testimonial'

function mytheme_render_testimonial($block, $content = '', $is_preview = false, $post_id = 0) {
    $author = get_field('author');
    $quote = get_field('quote');

    echo '';
    echo '' . esc_html($quote) . '
';
    echo '' . esc_html($author) . '';
    echo '
';
}

Block Wrapper Attributes

Add Custom Attributes:


$block_attributes = get_block_wrapper_attributes(array(
    'class' => 'additional-class',
    'data-custom' => 'value',
));
?>

?php echo $block_attributes; ?>>

Restrict Block to Post Types

Limit Where Block Appears:

'post_types' => array('post', 'page')
'post_types' => array('portfolio')

Multiple Block Instances

Control Block Duplication:

'supports' => array(
    'multiple' => true, // Allow multiple instances
)

'supports' => array(
    'multiple' => false, // Single instance only
)

Block Templates

Pre-populate Post with Blocks:

function mytheme_register_template() {
    $post_type_object = get_post_type_object('portfolio');
    $post_type_object->template = array(
        array('acf/testimonial', array(
            'author' => 'Default Author',
            'quote' => 'Add your testimonial here',
        )),
        array('core/paragraph', array(
            'placeholder' => 'Add project description...',
        )),
    );
}
add_action('init', 'mytheme_register_template');

Complete Block Example

Hero Block with Multiple Fields:

// Registration
acf_register_block_type(array(
    'name' => 'hero',
    'title' => __('Hero Section'),
    'render_template' => 'blocks/hero.php',
    'category' => 'layout',
    'icon' => 'cover-image',
    'supports' => array(
        'align' => array('full'),
        'mode' => false,
    ),
));

// Fields
acf_add_local_field_group(array(
    'key' => 'group_hero',
    'title' => 'Hero Block',
    'fields' => array(
        array(
            'key' => 'field_hero_title',
            'label' => 'Title',
            'name' => 'title',
            'type' => 'text',
        ),
        array(
            'key' => 'field_hero_subtitle',
            'label' => 'Subtitle',
            'name' => 'subtitle',
            'type' => 'text',
        ),
        array(
            'key' => 'field_hero_bg',
            'label' => 'Background Image',
            'name' => 'background_image',
            'type' => 'image',
            'return_format' => 'url',
        ),
        array(
            'key' => 'field_hero_button',
            'label' => 'Button',
            'name' => 'button',
            'type' => 'link',
        ),
    ),
    'location' => array(
        array(
            array(
                'param' => 'block',
                'operator' => '==',
                'value' => 'acf/hero',
            ),
        ),
    ),
));

Template (blocks/hero.php):


$title = get_field('title');
$subtitle = get_field('subtitle');
$bg_image = get_field('background_image');
$button = get_field('button');

$class_name = 'hero-block';
if (!empty($block['className'])) {
    $class_name .= ' ' . $block['className'];
}
?>

class="$class_name); ?>"
         style="background-image: url($bg_image); ?>);">
    class="hero-content">
        <?php if ($title) : ?>
            class="hero-title"><?php echo esc_html($title); ?>
        <?php endif; ?>

        <?php if ($subtitle) : ?>
            class="hero-subtitle"><?php echo esc_html($subtitle); ?>
        <?php endif; ?>

        <?php if ($button) : ?>
            "$button['url']); ?>"
               class="hero-button"
               target="$button['target'] ?: '_self'); ?>">
                <?php echo esc_html($button['title']); ?>
            
        <?php endif; ?>

Best Practices

Organize Block Files:

theme/
├── blocks/
│   ├── testimonial/
│   │   ├── block.php
│   │   ├── fields.php
│   │   ├── style.css
│   │   └── script.js
│   └── hero/
│       ├── block.php
│       ├── fields.php
│       └── style.css

Use Block Wrapper:

// Good - uses wrapper
?php echo get_block_wrapper_attributes(); ?>>
    


// Better - adds custom classes
<?php
$attributes = get_block_wrapper_attributes(array(
    'class' => 'custom-class',
));
?>
?php echo $attributes; ?>>

Escape Output:

 echo esc_html($text); ?>
 echo esc_url($url); ?>
 echo esc_attr($attribute); ?>

Conclusion

ACF Blocks enable custom Gutenberg block creation through PHP registration eliminating React JavaScript requirements while maintaining block editor flexibility. Register blocks with acf_register_block_type(), create field groups targeting specific blocks, render with PHP templates accessing fields via get_field(), and implement block supports for alignment, modes, and InnerBlocks. ACF Blocks combine familiar ACF workflows with modern block editor capabilities creating maintainable custom WordPress blocks through PHP.

External Links

Call to Action

Custom block configurations need backup protection. Backup Copilot Pro backs up your WordPress ACF block files and field configurations automatically. Safeguard your Gutenberg blocks—start your free 30-day trial today!

The post ACF and Gutenberg: Integrating Custom Fields with Block Editor appeared first on Developry Plugins.

block editor Archives - Developry Plugins

WordPress Block Editor Keyboard Shortcuts: Complete Productivity Guide

Why Keyboard Shortcuts Matter

Accessing the Shortcuts Help Menu

Essential Navigation Shortcuts

Quick Block Insertion

Text Formatting Shortcuts

Markdown-Style Shortcuts

Block Manipulation Shortcuts

Moving Blocks

Multi-Block Selection

Editor Mode Switching

Saving and Publishing

Undo and Redo

Creating a Workflow

Shortcuts Cheat Sheet

Conclusion

External Links

Call to Action

ACF and Gutenberg: Integrating Custom Fields with Block Editor

What Are ACF Blocks?

Basic Block Registration

Block Registration Parameters

Creating Block Template

Block Field Group

Block Categories

Block Icons

Block Modes

Block Alignment

InnerBlocks Support

<?php echo esc_html(get_field('title')); ?>

Block Example (Preview)

Enqueue Block Assets

Render Callback

Block Wrapper Attributes

Restrict Block to Post Types

Multiple Block Instances

Block Templates

Complete Block Example

class="hero-title"><?php echo esc_html($title); ?>

Best Practices

Conclusion

External Links

Call to Action