Provide better examples and remove outdating site edit references for…

… the MainDashboardButton SlotFill (#64753)

* Provide better examples and remove outdating site edit references.

* Add experimental call out.

Co-authored-by: ryanwelcher <welcher@git.wordpress.org>
Co-authored-by: justintadlock <greenshady@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

docs/reference-guides/slotfills/main-dashboard-button.md

@@ -1,21 +1,26 @@
 # MainDashboardButton
 
-This slot allows replacing the default main dashboard button in the post editor and site editor.
+This slot allows replacing the default main dashboard button in the post editor. It is no longer available in the site editor as of WordPress 6.2.
 It's used for returning back to main wp-admin dashboard when editor is in fullscreen mode.
 
+<div class="callout callout-warning">
+	Please note that this SlotFill is still considered experimental and may change
+</div>
+
 ## Examples
 
-### Post editor example
+### Change the icon
 
-This will override the W icon button in the header.
+This will replace the W icon button in the header with a close icon.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
 import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
+import { close } from '@wordpress/icons';
 
 const MainDashboardButtonTest = () => (
 	<MainDashboardButton>
-		Custom main dashboard button content
+		<FullscreenModeClose icon={ close } />
 	</MainDashboardButton>
 );
 
@@ -24,20 +29,23 @@ registerPlugin( 'main-dashboard-button-test', {
 } );
 ```
 
-If your goal is just to replace the icon of the existing button in
-the post editor, that can be achieved in the following way:
+![The edit post screen in fullscreen mode displaying a close icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-close-icon-example.png 'Replace the W icon button in the header with a close icon')
+
+### Change the icon and link
+
+This example will change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
 import {
 	__experimentalFullscreenModeClose as FullscreenModeClose,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/edit-post';
-import { close } from '@wordpress/icons';
+import { external } from '@wordpress/icons';
 
 const MainDashboardButtonIconTest = () => (
 	<MainDashboardButton>
-		<FullscreenModeClose icon={ close } href="http://wordpress.org" />
+		<FullscreenModeClose icon={ external } href="http://wordpress.org" />
 	</MainDashboardButton>
 );
 
@@ -46,26 +54,4 @@ registerPlugin( 'main-dashboard-button-icon-test', {
 } );
 ```
 
-### Site editor example
-
-In the site editor this slot refers to the "back to dashboard" button in the navigation sidebar.
-
-```js
-import { registerPlugin } from '@wordpress/plugins';
-import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-site';
-import { __experimentalNavigationBackButton as NavigationBackButton } from '@wordpress/components';
-
-const MainDashboardButtonIconTest = () => (
-	<MainDashboardButton>
-		<NavigationBackButton
-			backButtonLabel={ __( 'Back to dashboard' ) }
-			className="edit-site-navigation-panel__back-to-dashboard"
-			href="index.php"
-		/>
-	</MainDashboardButton>
-);
-
-registerPlugin( 'main-dashboard-button-icon-test', {
-	render: MainDashboardButtonIconTest,
-} );
-```
+![The edit post screen in fullscreen mode displaying an external link icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-external-link-example.png 'Change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked')