#30930 - Make it easier to select "Edit visually" when in "Edit as HTML

packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { rawHandler, getBlockContent } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds, ...props } ) {
+	const { block, shouldRender } = useSelect(
+		( select ) => {
+			const firstBlockClientId = clientIds[ 0 ];
+			const { isBlockMultiSelected, getBlockMode, getBlock } =
+				select( blockEditorStore );
+			const isSingleSelected =
+				! isBlockMultiSelected( firstBlockClientId );
+			const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';
+
+			return {
+				block: getBlock( firstBlockClientId ),
+				shouldRender: isSingleSelected && isHtmlMode,
+			};
+		},
+		[ clientIds[ 0 ] ]
+	);
+
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const onClick = useCallback( () => {
+		replaceBlocks(
+			block.clientId,
+			rawHandler( { HTML: getBlockContent( block ) } )
+		);
+	}, [ block ] );
+
+	if ( ! shouldRender ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton onClick={ onClick } { ...props }>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

packages/block-editor/src/components/block-settings-menu/index.js

@@ -7,20 +7,24 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
+import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<ToolbarGroup>
-			<ToolbarItem>
-				{ ( toggleProps ) => (
-					<BlockSettingsDropdown
-						clientIds={ clientIds }
-						toggleProps={ toggleProps }
-						{ ...props }
-					/>
-				) }
-			</ToolbarItem>
-		</ToolbarGroup>
+		<>
+			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
+			<ToolbarGroup>
+				<ToolbarItem>
+					{ ( toggleProps ) => (
+						<BlockSettingsDropdown
+							clientIds={ clientIds }
+							toggleProps={ toggleProps }
+							{ ...props }
+						/>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
+		</>
 	);
 }