Add shuffle style to write mode toolbar (#70946)

* Add shuffle style to content only toolbar
* Only show shuffle icon if write mode is enabled
* Limit shuffle section style block toolbar button to section blocks

Author: jeryj

packages/block-editor/src/components/block-toolbar/index.js

@@ -91,6 +91,7 @@ export function PrivateBlockToolbar( {
 			getParentSectionBlock,
 			isZoomOut,
 			isNavigationMode: _isNavigationMode,
+			isSectionBlock,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -100,6 +101,7 @@ export function PrivateBlockToolbar( {
 		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
+		const isNavigationModeEnabled = _isNavigationMode();
 		const _isDefaultEditingMode = editingMode === 'default';
 		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
@@ -151,9 +153,13 @@ export function PrivateBlockToolbar( {
 			showSlots: ! _isZoomOut,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
-			showSwitchSectionStyleButton: _isZoomOut,
+			showSwitchSectionStyleButton:
+				_isZoomOut ||
+				( isNavigationModeEnabled &&
+					editingMode === 'contentOnly' &&
+					isSectionBlock( selectedBlockClientId ) ), // Zoom out or Write Mode Section Blocks
 			hasFixedToolbar: getSettings().hasFixedToolbar,
-			isNavigationMode: _isNavigationMode(),
+			isNavigationMode: isNavigationModeEnabled,
 		};
 	}, [] );