From 90697bb776b4836f00f1837da0049d0579ab90b9 Mon Sep 17 00:00:00 2001
From: Matias Ventura <mv@matiasventura.com>
Date: Fri, 22 Jan 2021 19:01:43 +0100
Subject: [PATCH] Image: add flow for converting to cover block from toolbar.
 (#28414)

Only display if `core/cover` is registered and single block is selected.
---
 packages/block-library/src/image/image.js | 42 +++++++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 808c02b30afdbe..0b7fb5f626c0b9 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -31,8 +31,12 @@ import {
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getPath } from '@wordpress/url';
-import { createBlock } from '@wordpress/blocks';
-import { crop, upload } from '@wordpress/icons';
+import {
+	createBlock,
+	getBlockType,
+	switchToBlockType,
+} from '@wordpress/blocks';
+import { crop, textColor, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -83,14 +87,19 @@ export default function Image( {
 } ) {
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
-	const { image, multiImageSelection } = useSelect(
+	const { block, currentId, image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( 'core' );
-			const { getMultiSelectedBlockClientIds, getBlockName } = select(
-				'core/block-editor'
-			);
+			const {
+				getMultiSelectedBlockClientIds,
+				getBlockName,
+				getSelectedBlock,
+				getSelectedBlockClientId,
+			} = select( 'core/block-editor' );
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 			return {
+				block: getSelectedBlock(),
+				currentId: getSelectedBlockClientId(),
 				image: id && isSelected ? getMedia( id ) : null,
 				multiImageSelection:
 					multiSelectedClientIds.length &&
@@ -113,7 +122,9 @@ export default function Image( {
 			] );
 		}
 	);
-	const { toggleSelection } = useDispatch( 'core/block-editor' );
+	const { replaceBlocks, toggleSelection } = useDispatch(
+		'core/block-editor'
+	);
 	const { createErrorNotice, createSuccessNotice } = useDispatch(
 		noticesStore
 	);
@@ -132,6 +143,9 @@ export default function Image( {
 		( { name, slug } ) => ( { value: slug, label: name } )
 	);
 
+	// Check if the cover block is registered.
+	const coverBlockExists = !! getBlockType( 'core/cover' );
+
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setCaptionFocused( false );
@@ -300,6 +314,20 @@ export default function Image( {
 						onError={ onUploadError }
 					/>
 				) }
+				{ ! multiImageSelection && coverBlockExists && (
+					<ToolbarGroup>
+						<ToolbarButton
+							icon={ textColor }
+							label={ __( 'Add text over image' ) }
+							onClick={ () =>
+								replaceBlocks(
+									currentId,
+									switchToBlockType( block, 'core/cover' )
+								)
+							}
+						/>
+					</ToolbarGroup>
+				) }
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Image settings' ) }>