Omnibar: move the 'site icon in admin bar' feature from experiment to 7.1 compat

backport-changelog/7.1/11781.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11781
+
+* https://github.com/WordPress/gutenberg/pull/79807

lib/compat/wordpress-7.1/admin-bar.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Admin bar compatibility.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Replaces the home/odometer dashicon on the site-name node with the actual
+ * site icon, when one is set.
+ *
+ * Ported from https://github.com/WordPress/wordpress-develop/pull/11781.
+ *
+ * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
+ */
+function gutenberg_admin_bar_site_icon( WP_Admin_Bar $wp_admin_bar ): void {
+	if ( is_network_admin() || is_user_admin() ) {
+		return;
+	}
+
+	$node = $wp_admin_bar->get_node( 'site-name' );
+	if ( ! $node ) {
+		return;
+	}
+
+	if ( isset( $node->meta['class'] ) && false !== strpos( $node->meta['class'], 'has-site-icon' ) ) {
+		return;
+	}
+
+	/** This filter is documented in wp-includes/admin-bar.php */
+	$show_site_icons = apply_filters( 'wp_admin_bar_show_site_icons', true );
+	if ( true !== $show_site_icons || ! has_site_icon() ) {
+		return;
+	}
+
+	$site_icon_url    = get_site_icon_url( 32 );
+	$site_icon_url_2x = get_site_icon_url( 64 );
+	$srcset           = ( $site_icon_url_2x && $site_icon_url !== $site_icon_url_2x ) ? sprintf( ' srcset="%s 2x"', esc_url( $site_icon_url_2x ) ) : '';
+	$site_icon        = sprintf(
+		'<img class="site-icon" src="%s"%s alt="" width="20" height="20" />',
+		esc_url( $site_icon_url ),
+		$srcset
+	);
+
+	$wp_admin_bar->add_node(
+		array(
+			'id'    => 'site-name',
+			'title' => $site_icon . $node->title,
+			'meta'  => array( 'class' => 'has-site-icon' ),
+		)
+	);
+}
+add_action( 'admin_bar_menu', 'gutenberg_admin_bar_site_icon', 31 );
+
+/**
+ * Enqueues the styles for the admin bar site icon.
+ */
+function gutenberg_admin_bar_site_icon_styles(): void {
+	$css = <<<CSS
+		#wpadminbar .quicklinks li img.blavatar {
+			border-radius: 2px;
+		}
+		#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+		}
+		#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item:before {
+			content: none;
+		}
+		#wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
+			width: 20px;
+			height: 20px;
+			background: #f0f0f1;
+			border-radius: 2px;
+		}
+		@media screen and (max-width: 782px) {
+			#wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
+				position: absolute;
+				top: 9px;
+				left: 12px;
+				width: 28px;
+				height: 28px;
+				margin: 0;
+				border-radius: 4px;
+			}
+		}
+CSS;
+	wp_add_inline_style( 'admin-bar', $css );
+}
+add_action( 'admin_bar_init', 'gutenberg_admin_bar_site_icon_styles' );

lib/experimental/experiments/load.php

@@ -125,11 +125,6 @@ function gutenberg_initialize_experiments_settings() {
 					'label'       => __( 'New Dashboard experience', 'gutenberg' ),
 					'description' => __( 'Enables a new dashboard experience with resizable, reorderable widgets that plugins can register and users can personalize.', 'gutenberg' ),
 				),
-				array(
-					'id'          => 'gutenberg-omnibar',
-					'label'       => __( 'Toolbar UI refresh', 'gutenberg' ),
-					'description' => __( 'Previews a redesigned toolbar UI that is visually consistent everywhere. For now, it includes replacing home/odometer dashicon with site icon if set.', 'gutenberg' ),
-				),
 				array(
 					'id'          => 'gutenberg-react-19',
 					'label'       => __( 'React 19', 'gutenberg' ),

lib/load.php

@@ -120,14 +120,14 @@ function gutenberg_is_experiment_enabled( $name ) {
 }
 
 // WordPress 7.1 compat.
+require __DIR__ . '/compat/wordpress-7.1/admin-bar.php';
 require __DIR__ . '/compat/wordpress-7.1/kses.php';
 require __DIR__ . '/compat/wordpress-7.1/media.php';
 require __DIR__ . '/compat/wordpress-7.1/preload.php';
 require __DIR__ . '/compat/wordpress-7.1/classic-block.php';
 require __DIR__ . '/compat/wordpress-7.1/icons.php';
 
 // Experimental features.
-require __DIR__ . '/experimental/omnibar/load.php';
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';