Editor

Barebones includes a few editor-focused settings for WordPress admin screens, TinyMCE, and the block editor. These settings help the block editor preview feel closer to the frontend while keeping project-specific controls simple.

Editor support

Editor styles are enabled during theme setup. This allows the theme to load frontend and editor-specific styles into the block editor.

add_theme_support( 'editor-styles' );
add_theme_support( 'wp-block-styles' );

Frontend styles in the editor

Barebones loads the main frontend stylesheet into the block editor. This helps block previews inherit the same base styles used on the frontend.

function editor_styles() {
    add_editor_style( 'style.css' );
}

add_action( 'after_setup_theme', 'editor_styles' );

Editor stylesheet

The editor-styles.scss stylesheet adds a few helpful quality of live improvements to the editing experience, including:

Widening block preview images to fill their container
Scaling block previews to 80% of their normal size allowing editors to view more of each block at smaller screens or when the editing sidebar is open
Adding a background to the preview to differentiate the background of the editing page from the block preview in the middle of it
Adding a margin-bottom to the page title to separate it from the block previews below
Widening the editing sidebar to 420px

function bb_enqueue_editor_assets() {
    $style = bb_get_asset_data( '/css/editor-styles.css' );

    wp_enqueue_style(
        'bb-editor-styles',
        $style['uri'],
        [],
        $style['version']
    );
}

add_action( 'enqueue_block_editor_assets', 'bb_enqueue_editor_assets' );

// Widen block preview images to fill their container

.block-preview {
    img {
        width: 100%;
    }
}

// Scale down ACF block previews

.acf-block-preview {
    --preview-scale: 0.8;
    overflow: hidden;

    .section {
        zoom: var(--preview-scale);
    }
}

// Add margin-bottom to the page title

.editor-visual-editor__post-title-wrapper.edit-post-visual-editor__post-title-wrapper {
    margin-bottom: 24px !important;
}

// Widen the editor sidebar on large screens.

@media screen and (min-width: 1280px) {
    .interface-interface-skeleton__sidebar {
        .interface-complementary-area,
        .interface-complementary-area__fill {
            width: 420px !important;
            max-width: 50vw;
        }
    }
}

TinyMCE buttons

Barebones adds the style dropdown and horizontal rule button to the second TinyMCE toolbar.

function barebones_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    $buttons[] = 'hr';

    return $buttons;
}

add_filter( 'mce_buttons_2', 'barebones_mce_buttons_2' );

The TinyMCE style dropdown includes text size options.

These map to the frontend typography utility classes:

text-2xl
text-xl
text-lg
text-md
text-sm
text-xs

This lets editors apply consistent text sizing in WYSIWYG fields.

Front page admin link

Barebones adds a direct Front Page link under the Pages menu when a static front page is configured. This gives editors a quicker route to the site’s front page.

function front_page_on_pages_menu() {
    global $submenu;

    if ( get_option( 'page_on_front' ) ) {
        $submenu['edit.php?post_type=page'][501] = array(
            __( 'Front Page', 'barebones' ),
            'manage_options',
            get_edit_post_link( get_option( 'page_on_front' ) )
        );
    }
}

add_action( 'admin_menu', 'front_page_on_pages_menu' );