Revert "Removed block transforms from the toolbars. #6473" (#6566)

We decided that transforms should be a primary action, and we will iterate further to have transforms fit nicely in the toolbars.

edit-post/components/header/header-toolbar/index.js

@@ -15,6 +15,7 @@ import {
 	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
+	MultiBlocksSwitcher,
 	NavigableToolbar,
 } from '@wordpress/editor';
 
@@ -33,6 +34,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
 			<TableOfContents />
+			<MultiBlocksSwitcher />
 			{ hasFixedToolbar && isLargeViewport && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar />

editor/components/block-switcher/index.js

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Dropdown, Dashicon, IconButton, Toolbar, NavigableMenu } from '@wordpress/components';
+import { getBlockType, getPossibleBlockTransformations, switchToBlockType, BlockIcon, withEditorSettings } from '@wordpress/blocks';
+import { compose } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Module Constants
+ */
+const { DOWN } = keycodes;
+
+export function BlockSwitcher( { blocks, onTransform, isLocked } ) {
+	const allowedBlocks = getPossibleBlockTransformations( blocks );
+
+	if ( isLocked || ! allowedBlocks.length ) {
+		return null;
+	}
+
+	const sourceBlockName = blocks[ 0 ].name;
+	const blockType = getBlockType( sourceBlockName );
+
+	return (
+		<Dropdown
+			className="editor-block-switcher"
+			contentClassName="editor-block-switcher__popover"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const openOnArrowDown = ( event ) => {
+					if ( ! isOpen && event.keyCode === DOWN ) {
+						event.preventDefault();
+						event.stopPropagation();
+						onToggle();
+					}
+				};
+				const label = __( 'Change block type' );
+
+				return (
+					<Toolbar>
+						<IconButton
+							className="editor-block-switcher__toggle"
+							icon={ <BlockIcon icon={ blockType.icon } /> }
+							onClick={ onToggle }
+							aria-haspopup="true"
+							aria-expanded={ isOpen }
+							label={ label }
+							tooltip={ label }
+							onKeyDown={ openOnArrowDown }
+						>
+							<Dashicon icon="arrow-down" />
+						</IconButton>
+					</Toolbar>
+				);
+			} }
+			renderContent={ ( { onClose } ) => (
+				<div>
+					<span
+						className="editor-block-switcher__menu-title"
+					>
+						{ __( 'Transform into:' ) }
+					</span>
+					<NavigableMenu
+						role="menu"
+						aria-label={ __( 'Block types' ) }
+					>
+						{ allowedBlocks.map( ( { name, title, icon } ) => (
+							<IconButton
+								key={ name }
+								onClick={ () => {
+									onTransform( blocks, name );
+									onClose();
+								} }
+								className="editor-block-switcher__menu-item"
+								icon={ (
+									<span className="editor-block-switcher__block-icon">
+										<BlockIcon icon={ icon } />
+									</span>
+								) }
+								role="menuitem"
+							>
+								{ title }
+							</IconButton>
+						) ) }
+					</NavigableMenu>
+				</div>
+			) }
+		/>
+	);
+}
+
+export default compose(
+	withSelect( ( select, ownProps ) => {
+		return {
+			blocks: ownProps.uids.map( ( uid ) => select( 'core/editor' ).getBlock( uid ) ),
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => ( {
+		onTransform( blocks, name ) {
+			dispatch( 'core/editor' ).replaceBlocks(
+				ownProps.uids,
+				switchToBlockType( blocks, name )
+			);
+		},
+	} ) ),
+	withEditorSettings( ( settings ) => {
+		const { templateLock } = settings;
+
+		return {
+			isLocked: !! templateLock,
+		};
+	} ),
+)( BlockSwitcher );

editor/components/block-switcher/multi-blocks-switcher.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import BlockSwitcher from './';
+
+export function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) {
+	if ( ! isMultiBlockSelection ) {
+		return null;
+	}
+	return (
+		<BlockSwitcher key="switcher" uids={ selectedBlockUids } />
+	);
+}
+
+export default withSelect(
+	( select ) => {
+		const selectedBlockUids = select( 'core/editor' ).getMultiSelectedBlockUids();
+		return {
+			isMultiBlockSelection: selectedBlockUids.length > 1,
+			selectedBlockUids,
+		};
+	}
+)( MultiBlocksSwitcher );

editor/components/block-switcher/style.scss

@@ -0,0 +1,52 @@
+.editor-block-switcher {
+	position: relative;
+
+	.components-toolbar {
+		border-left: none;
+	}
+}
+
+.editor-block-switcher__toggle {
+	width: auto;
+	margin: 0;
+	padding: 8px;
+	border-radius: 0;
+
+	&:focus:before {
+		top: -3px;
+		right: -3px;
+		bottom: -3px;
+		left: -3px;
+	}
+}
+
+.editor-block-switcher__popover .components-popover__content {
+	width: 200px;
+}
+
+.editor-block-switcher__menu {
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
+	background: $white;
+	padding: 3px 3px 0;
+}
+
+.editor-block-switcher__menu-title {
+	display: block;
+	padding: 6px;
+	color: $dark-gray-300;
+}
+
+.editor-block-switcher__menu-item {
+	color: $dark-gray-500;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: 6px;
+	text-align: left;
+
+	.editor-block-switcher__block-icon {
+		margin-right: 8px;
+		height: 20px;
+	}
+}

editor/components/block-switcher/test/__snapshots__/index.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockSwitcher should render switcher with blocks 1`] = `
+<Dropdown
+  className="editor-block-switcher"
+  contentClassName="editor-block-switcher__popover"
+  renderContent={[Function]}
+  renderToggle={[Function]}
+/>
+`;

editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiBlocksSwitcher should return a BlockSwitcher element matching the snapshot. 1`] = `
+<WithSelect(WithDispatch(WithEditorSettings(BlockSwitcher)))
+  key="switcher"
+  uids={
+    Array [
+      "an-uid",
+      "another-uid",
+    ]
+  }
+/>
+`;