Improve transformations to only transform to blocks that can be inser…

…ted on the root block

editor/components/block-settings-menu/block-transformations.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
+import { castArray, filter, first, mapKeys, noop, sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
+import { IconButton, ifCondition } from '@wordpress/components';
 import { getPossibleBlockTransformations, switchToBlockType } from '@wordpress/blocks';
 import { compose, Fragment } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -17,9 +17,16 @@ import { withSelect, withDispatch } from '@wordpress/data';
  */
 import './style.scss';
 
-function BlockTransformations( { blocks, small = false, onTransform, onClick = noop, isLocked, itemsRole } ) {
-	const possibleBlockTransformations = getPossibleBlockTransformations( blocks );
-	if ( isLocked || ! possibleBlockTransformations.length ) {
+function BlockTransformations( { blocks, small = false, onTransform, onClick = noop, inserterItems, itemsRole } ) {
+	const itemsByName = mapKeys( inserterItems, ( { name } ) => name );
+	const possibleBlockTransformations = sortBy(
+		filter(
+			getPossibleBlockTransformations( blocks ),
+			( block ) => !! itemsByName[ block.name ]
+		),
+		( block ) => -itemsByName[ block.name ].frecency,
+	);
+	if ( ! possibleBlockTransformations.length ) {
 		return null;
 	}
 	return (
@@ -52,13 +59,14 @@ function BlockTransformations( { blocks, small = false, onTransform, onClick = n
 }
 export default compose( [
 	withSelect( ( select, { uids } ) => {
-		const { getEditorSettings, getBlocksByUID } = select( 'core/editor' );
-		const { templateLock } = getEditorSettings();
+		const { getBlocksByUID, getBlockRootUID, getInserterItems } = select( 'core/editor' );
+		const rootUID = getBlockRootUID( first( castArray( uids ) ) );
 		return {
-			isLocked: !! templateLock,
 			blocks: getBlocksByUID( uids ),
+			inserterItems: getInserterItems( rootUID ),
 		};
 	} ),
+	ifCondition( ( { inserterItems } ) => inserterItems.length > 0 ),
 	withDispatch( ( dispatch, ownProps ) => ( {
 		onTransform( blocks, name ) {
 			dispatch( 'core/editor' ).replaceBlocks(

editor/components/block-switcher/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
+import { castArray, filter, first, get, mapKeys, sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -36,19 +36,27 @@ export class BlockSwitcher extends Component {
 	}
 
 	render() {
-		const { blocks, onTransform, isLocked } = this.props;
+		const { blocks, onTransform, inserterItems } = this.props;
 		const { hoveredClassName } = this.state;
 
 		if ( ! blocks || ! blocks.length ) {
 			return null;
 		}
 
-		const allowedBlocks = getPossibleBlockTransformations( blocks );
+		const itemsByName = mapKeys( inserterItems, ( { name } ) => name );
+		const possibleBlockTransformations = sortBy(
+			filter(
+				getPossibleBlockTransformations( blocks ),
+				( block ) => !! itemsByName[ block.name ]
+			),
+			( block ) => -itemsByName[ block.name ].frecency,
+		);
+
 		const sourceBlockName = blocks[ 0 ].name;
 		const blockType = getBlockType( sourceBlockName );
 		const hasStyles = blocks.length === 1 && get( blockType, [ 'styles' ], [] ).length !== 0;
 
-		if ( ! hasStyles && ( ! allowedBlocks.length || isLocked ) ) {
+		if ( ! hasStyles && ( ! possibleBlockTransformations.length ) ) {
 			return null;
 		}
 
@@ -93,13 +101,13 @@ export class BlockSwitcher extends Component {
 								<BlockStyles uid={ blocks[ 0 ].uid } onSwitch={ onClose } onHoverClassName={ this.onHoverClassName } />
 							</PanelBody>
 						}
-						{ allowedBlocks.length !== 0 && ! isLocked &&
+						{ possibleBlockTransformations.length !== 0 &&
 							<PanelBody
 								title={ __( 'Transform To:' ) }
 								initialOpen
 							>
 								<BlockTypesList
-									items={ allowedBlocks.map( ( destinationBlockType ) => ( {
+									items={ possibleBlockTransformations.map( ( destinationBlockType ) => ( {
 										id: destinationBlockType.name,
 										icon: destinationBlockType.icon,
 										title: destinationBlockType.title,
@@ -127,12 +135,12 @@ export class BlockSwitcher extends Component {
 }
 
 export default compose(
-	withSelect( ( select, ownProps ) => {
-		const { getBlock, getEditorSettings } = select( 'core/editor' );
-		const { templateLock } = getEditorSettings();
+	withSelect( ( select, { uids } ) => {
+		const { getBlocksByUID, getBlockRootUID, getInserterItems } = select( 'core/editor' );
+		const rootUID = getBlockRootUID( first( castArray( uids ) ) );
 		return {
-			blocks: ownProps.uids.map( getBlock ),
-			isLocked: !! templateLock,
+			blocks: getBlocksByUID( uids ),
+			inserterItems: getInserterItems( rootUID ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => ( {

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

@@ -62,7 +62,11 @@ describe( 'BlockSwitcher', () => {
 		const blocks = [
 			headingBlock1,
 		];
-		const wrapper = shallow( <BlockSwitcher blocks={ blocks } /> );
+		const inserterItems = [
+			{ name: 'core/paragraph', frecency: 1 },
+		];
+
+		const wrapper = shallow( <BlockSwitcher blocks={ blocks } inserterItems={ inserterItems } /> );
 
 		expect( wrapper ).toMatchSnapshot();
 	} );
@@ -92,9 +96,17 @@ describe( 'BlockSwitcher', () => {
 			headingBlock1,
 		];
 
+		const inserterItems = [
+			{ name: 'core/quote', frecency: 1 },
+			{ name: 'core/cover-image', frecency: 2 },
+			{ name: 'core/paragraph', frecency: 3 },
+			{ name: 'core/heading', frecency: 4 },
+			{ name: 'core/text', frecency: 5 },
+		];
+
 		const onTransformStub = jest.fn();
 		const getDropdown = () => {
-			const blockSwitcher = shallow( <BlockSwitcher blocks={ blocks } onTransform={ onTransformStub } /> );
+			const blockSwitcher = shallow( <BlockSwitcher blocks={ blocks } onTransform={ onTransformStub } inserterItems={ inserterItems } /> );
 			return blockSwitcher.find( 'Dropdown' );
 		};