How to enable WordPress Toolbar (Admin Bar) in Oxygen editor

Looking to bring back the missing WP admin bar aka The Toolbar from Oxygen editor? Simply add the snippet below and you can have it just like in the WordPress admin and the frontend.

Combined with Oxygen Navigator, this makes it quick and easy to directly edit any Oxygen Template or WordPress Page from literally anywhere on the site saving a ton of time.

Install and activate Code Snippets.

Add a new Snippet titled say, Enable WP Toolbar in Oxygen editor.

Code:

// Revert admin bar removal from the Oxygen editor.
remove_action( 'init', 'ct_hide_admin_bar' );

add_action( 'init', 'wpdd_hide_admin_bar' );
/**
 * Remove admin bar from the Oxygen editor's iframe.
 */
function wpdd_hide_admin_bar() {
    if ( defined( 'OXYGEN_IFRAME' ) ) {
    	add_filter( 'show_admin_bar', '__return_false' );
    }
}

add_action( 'wp_enqueue_scripts', 'wpdd_add_oxygen_editor_inline_css' );
/**
 * Add custom CSS in the Oxygen editor.
 */
function wpdd_add_oxygen_editor_inline_css() {
    if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
		return;
	}
	
	$css = '
    	#oxygen-ui .oxygen-add-section-library-flyout-panel {
            top: calc(58px + var(--wp-admin--admin-bar--height));
            }
            
        #oxygen-ui .ct-panel-elements-managers,
        #oxygen-ui .oxygen-global-settings {
            top: calc(40px + var(--wp-admin--admin-bar--height));
        }
        
        #oxygen-ui #oxygen-sidebar {
            height: calc(100vh - 36px - var(--wp-admin--admin-bar--height));
        }
		';

	wp_add_inline_style( 'oxygen', $css );
}

We can also navigate to other parts of the site by adding custom links to the Toolbar.

Thanks to Gagan Goraya for the hint.