Replace WordPress Logo in Gutenberg Fullscreen Mode

First of all let me show you guys what WordPress logo do I mean. You can find it in the top left part of the screen.

Default WordPress logo in Gutenberg fullscreen mode

And here is what we are going to achieve in this tutorial:

How to change WordPress logo in Gutenberg editor fullscreen mode

As you may notice I used a custom photo of me but you may use an SVG icon if you want.

If you are looking for some ways of hooking this logo, I will disappoint you right now. There is no hooks for that, but you can easily do it with CSS.

/* hides the logo */
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon svg{
	display: none;
}
/* adds a custom image */
body.is-fullscreen-mode .edit-post-header a.components-button.has-icon:before{
	background-image: url( 'YOUR IMAGE URL' );
	background-size: cover;
	/* you can the image paddings with the parameters below*/
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
}

That’s all.

Oh, no, one more thing, in case you don’t know where to add the CSS.

It can be easily inserted with admin_head hook.

add_action( 'admin_head', 'misha_custom_fullscreeneditor_logo' );

function misha_custom_fullscreeneditor_logo(){

	// it is not a necessary thing but it prevents this CSS to be added on every WordPress admin page
	$screen = get_current_screen();
	if( ! $screen->is_block_editor ) {
		return;
	}

	echo '<style>
	HERE
	</style>';

}

The admin_head snippet may go to your current or child theme functions.php file or to a custom plugin.

How to change WordPress logo in Gutenberg editor fullscreen mode

Does it work for Gutenberg Full Site Editing? Yes and no. Well, it is working but you have to add a couple more CSS selectors to the code.

body.is-fullscreen-mode .edit-post-header a.components-button.has-icon svg,
body.is-fullscreen-mode .edit-site-navigation-toggle button.components-button.has-icon svg{
	display: none;
}

body.is-fullscreen-mode .edit-post-header a.components-button.has-icon:before,
body.is-fullscreen-mode .edit-site-navigation-toggle button.components-button.has-icon:before{
	background-image: url( 'YOUR IMAGE URL' );
	background-size: cover;
}

And here we are:

WordPress gutenberg full site editing custom icon
Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter