Writing Flow: Fix format toolbar not appearing when selecting text from block edge

packages/block-editor/src/components/writing-flow/use-selection-observer.js

@@ -214,7 +214,45 @@ export default function useSelectionObserver() {
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
-						selectBlock( startClientId );
+						// If the selection is not collapsed and falls
+						// within a RichText that doesn't have focus
+						// (e.g. the user started dragging from the block
+						// wrapper padding), dispatch a full
+						// selectionChange so the format toolbar appears.
+						const richTextElement =
+							! selection.isCollapsed &&
+							( getRichTextElement( startNode ) ||
+								getRichTextElement( endNode ) );
+
+						if (
+							richTextElement &&
+							ownerDocument.activeElement !== richTextElement
+						) {
+							const range = selection.getRangeAt( 0 );
+							const richTextData = create( {
+								element: richTextElement,
+								range,
+								__unstableIsEditableTree: true,
+							} );
+							selectionChange( {
+								start: {
+									clientId: startClientId,
+									attributeKey:
+										richTextElement.dataset
+											.wpBlockAttributeKey,
+									offset: richTextData.start ?? 0,
+								},
+								end: {
+									clientId: startClientId,
+									attributeKey:
+										richTextElement.dataset
+											.wpBlockAttributeKey,
+									offset: richTextData.end,
+								},
+							} );
+						} else {
+							selectBlock( startClientId );
+						}
 					} else {
 						multiSelect( startClientId, startClientId );
 					}

test/e2e/specs/editor/various/writing-flow.spec.js

@@ -1194,6 +1194,45 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
 		).not.toBeFocused();
 	} );
+
+	test( 'should show format toolbar when selecting text from the left edge of a block', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello world' },
+		} );
+
+		// Deselect the block.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+		);
+
+		const paragraphBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const box = await paragraphBlock.boundingBox();
+
+		// Start the drag from just before the left edge of the paragraph
+		// (on the block wrapper padding) and drag into the text.
+		const startX = box.x - 5;
+		const startY = box.y + box.height / 2;
+		const endX = box.x + box.width / 2;
+		const endY = startY;
+
+		await page.mouse.move( startX, startY );
+		await page.mouse.down();
+		await page.mouse.move( endX, endY, { steps: 10 } );
+		await page.mouse.up();
+
+		// The Bold button should be visible in the inline block toolbar.
+		await expect(
+			page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Bold' } )
+		).toBeVisible();
+	} );
 } );
 
 class WritingFlowUtils {