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

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { rawHandler, getBlockContent } from '@wordpress/blocks';
+import { ToolbarButton } 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 BlockVisuallyConvertButton( { 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 (
+		<ToolbarButton
+			title={ __( 'Edit visually' ) }
+			onClick={ onClick }
+			{ ...props }
+		>
+			{ __( 'Edit visually' ) }
+		</ToolbarButton>
+	);
+}

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

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