Classic Block: Move the convert to blocks option from menu to own too…

…lbar button (#23704)

* Move the convert to blocks option from menu to own toolbar button

* Make convert to block buttons a separate component

* implement new convert-to-blocks-button component

* Add dependency to useSelect hook

Co-authored-by: Riad Benguella <benguella@gmail.com>

* change button casing

* put default export back

* Move toolbar component back to edit

* Update end-to-end tests.

* Remove obsolete title

* Add fix for e2e test

* Remove space from type check

* Change wording of arguments

* Revise clickBlockToolbarButton param names again.

* Clearer types in JSDoc.

* Update test to match changes in helper args

Co-authored-by: Glen Davies <glen.davies@a8c.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

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

@@ -25,7 +25,6 @@ import { serialize } from '@wordpress/blocks';
 import BlockActions from '../block-actions';
 import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
-import BlockUnknownConvertButton from './block-unknown-convert-button';
 import __experimentalBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 
@@ -106,11 +105,6 @@ export function BlockSettingsDropdown( {
 								<__experimentalBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }
 								/>
-								{ count === 1 && (
-									<BlockUnknownConvertButton
-										clientId={ firstBlockClientId }
-									/>
-								) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton
 										clientId={ firstBlockClientId }

packages/block-library/src/classic/convert-to-blocks-button.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { rawHandler, serialize } from '@wordpress/blocks';
+
+const ConvertToBlocksButton = ( { clientId } ) => {
+	const { replaceBlocks } = useDispatch( 'core/block-editor' );
+	const block = useSelect(
+		( select ) => {
+			return select( 'core/block-editor' ).getBlock( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<ToolbarButton
+			onClick={ () =>
+				replaceBlocks(
+					block.clientId,
+					rawHandler( { HTML: serialize( block ) } )
+				)
+			}
+		>
+			{ __( 'Convert to blocks' ) }
+		</ToolbarButton>
+	);
+};
+
+export default ConvertToBlocksButton;

packages/block-library/src/classic/edit.js

@@ -6,10 +6,17 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { BlockControls } from '@wordpress/block-editor';
+import { Toolbar } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
 
+/**
+ * Internal dependencies
+ */
+import ConvertToBlocksButton from './convert-to-blocks-button';
+
 const { wp } = window;
 
 function isTmceEmpty( editor ) {
@@ -235,22 +242,29 @@ export default class ClassicEdit extends Component {
 		//    from the KeyboardShortcuts component to stop their propagation.
 
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
-		return [
-			<div
-				key="toolbar"
-				id={ `toolbar-${ clientId }` }
-				ref={ ( ref ) => ( this.ref = ref ) }
-				className="block-library-classic__toolbar"
-				onClick={ this.focus }
-				data-placeholder={ __( 'Classic' ) }
-				onKeyDown={ this.onToolbarKeyDown }
-			/>,
-			<div
-				key="editor"
-				id={ `editor-${ clientId }` }
-				className="wp-block-freeform block-library-rich-text__tinymce"
-			/>,
-		];
+		return (
+			<>
+				<BlockControls>
+					<Toolbar>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</Toolbar>
+				</BlockControls>
+				<div
+					key="toolbar"
+					id={ `toolbar-${ clientId }` }
+					ref={ ( ref ) => ( this.ref = ref ) }
+					className="block-library-classic__toolbar"
+					onClick={ this.focus }
+					data-placeholder={ __( 'Classic' ) }
+					onKeyDown={ this.onToolbarKeyDown }
+				/>
+				<div
+					key="editor"
+					id={ `editor-${ clientId }` }
+					className="wp-block-freeform block-library-rich-text__tinymce"
+				/>
+			</>
+		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }

packages/e2e-test-utils/README.md

@@ -46,7 +46,8 @@ Clicks a block toolbar button.
 
 _Parameters_
 
--   _buttonAriaLabel_ `string`: The aria label of the button to click.
+-   _label_ `string`: The text string of the button label.
+-   _type_ `[string]`: The type of button label: 'ariaLabel' or 'content'.
 
 <a name="clickButton" href="#clickButton">#</a> **clickButton**
 

packages/e2e-test-utils/src/click-block-toolbar-button.js

@@ -6,15 +6,25 @@ import { showBlockToolbar } from './show-block-toolbar';
 /**
  * Clicks a block toolbar button.
  *
- * @param {string} buttonAriaLabel The aria label of the button to click.
+ * @param {string} label  The text string of the button label.
+ * @param {string} [type] The type of button label: 'ariaLabel' or 'content'.
  */
-export async function clickBlockToolbarButton( buttonAriaLabel ) {
+export async function clickBlockToolbarButton( label, type = 'ariaLabel' ) {
 	await showBlockToolbar();
+	const BLOCK_TOOLBAR_SELECTOR = 'block-editor-block-toolbar';
+	let button;
 
-	const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar';
-	const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`;
+	if ( type === 'ariaLabel' ) {
+		const BUTTON_SELECTOR = `.${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ label }"]`;
+		button = await page.waitForSelector( BUTTON_SELECTOR );
+	}
+
+	if ( type === 'content' ) {
+		[ button ] = await page.$x(
+			`//*[@class='${ BLOCK_TOOLBAR_SELECTOR }']//button[contains(text(), '${ label }')]`
+		);
+	}
 
-	const button = await page.waitForSelector( BUTTON_SELECTOR );
 	await button.evaluate( ( element ) => element.scrollIntoView() );
 	await button.click();
 }

packages/e2e-tests/specs/editor/blocks/classic.test.js

@@ -15,7 +15,6 @@ import {
 	insertBlock,
 	pressKeyWithModifier,
 	clickBlockToolbarButton,
-	clickButton,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Classic', () => {
@@ -84,8 +83,7 @@ describe( 'Classic', () => {
 		);
 
 		// Convert to blocks and verify it worked correctly.
-		await clickBlockToolbarButton( 'More options' );
-		await clickButton( 'Convert to Blocks' );
+		await clickBlockToolbarButton( 'Convert to blocks', 'content' );
 		await page.waitForSelector( '.wp-block[data-type="core/gallery"]' );
 		expect( await getEditedPostContent() ).toMatch( /<!-- wp:gallery/ );
 
@@ -96,8 +94,7 @@ describe( 'Classic', () => {
 		);
 
 		// Convert to blocks again and verify it worked correctly.
-		await clickBlockToolbarButton( 'More options' );
-		await clickButton( 'Convert to Blocks' );
+		await clickBlockToolbarButton( 'Convert to blocks', 'content' );
 		await page.waitForSelector( '.wp-block[data-type="core/gallery"]' );
 		expect( await getEditedPostContent() ).toMatch( /<!-- wp:gallery/ );
 	} );