Move reusable-to-static-block button to toolbar.

WordPress · Jul 20, 2020 · 70addc8 · 70addc8
1 parent f598d43
commit 70addc8
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 74 deletions.
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
@@ -7,10 +7,17 @@ import { partial } from 'lodash';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { Placeholder, Spinner, Disabled } from '@wordpress/components';
+import {
+	Placeholder,
+	Spinner,
+	Disabled,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
+	BlockControls,
 	BlockEditorProvider,
 	BlockList,
 	WritingFlow,
@@ -105,6 +112,7 @@ class ReusableBlockEdit extends Component {
 
 	render() {
 		const {
+			convertToStatic,
 			isSelected,
 			reusableBlock,
 			isFetching,
@@ -148,21 +156,32 @@ class ReusableBlockEdit extends Component {
 		}
 
 		return (
-			<div className="block-library-block__reusable-block-container">
-				{ ( isSelected || isEditing ) && (
-					<ReusableBlockEditPanel
-						isEditing={ isEditing }
-						title={ title !== null ? title : reusableBlock.title }
-						isSaving={ isSaving && ! reusableBlock.isTemporary }
-						isEditDisabled={ ! canUpdateBlock }
-						onEdit={ this.startEditing }
-						onChangeTitle={ this.setTitle }
-						onSave={ this.save }
-						onCancel={ this.stopEditing }
-					/>
-				) }
-				{ element }
-			</div>
+			<>
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton onClick={ convertToStatic }>
+							{ __( 'Convert to regular blocks' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+				<div className="block-library-block__reusable-block-container">
+					{ ( isSelected || isEditing ) && (
+						<ReusableBlockEditPanel
+							isEditing={ isEditing }
+							title={
+								title !== null ? title : reusableBlock.title
+							}
+							isSaving={ isSaving && ! reusableBlock.isTemporary }
+							isEditDisabled={ ! canUpdateBlock }
+							onEdit={ this.startEditing }
+							onChangeTitle={ this.setTitle }
+							onSave={ this.save }
+							onCancel={ this.stopEditing }
+						/>
+					) }
+					{ element }
+				</div>
+			</>
 		);
 	}
 }
@@ -197,6 +216,7 @@ export default compose( [
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
 		const {
+			__experimentalConvertBlockToStatic: convertBlockToStatic,
 			__experimentalFetchReusableBlocks: fetchReusableBlocks,
 			__experimentalUpdateReusableBlock: updateReusableBlock,
 			__experimentalSaveReusableBlock: saveReusableBlock,
@@ -207,6 +227,9 @@ export default compose( [
 			fetchReusableBlock: partial( fetchReusableBlocks, ref ),
 			onChange: partial( updateReusableBlock, ref ),
 			onSave: partial( saveReusableBlock, ref ),
+			convertToStatic() {
+				convertBlockToStatic( ownProps.clientId );
+			},
 		};
 	} ),
 ] )( ReusableBlockEdit );
diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
@@ -225,11 +225,7 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Surprised greeting block' );
 
 		// Convert block to a regular block
-		await clickBlockToolbarButton( 'More options' );
-		const convertButton = await page.waitForXPath(
-			'//button[text()="Convert to Regular Block"]'
-		);
-		await convertButton.click();
+		await clickBlockToolbarButton( 'Convert to regular blocks', 'content' );
 
 		// Check that we have a paragraph block on the page
 		const block = await page.$(
@@ -331,11 +327,7 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Multi-selection reusable block' );
 
 		// Convert block to a regular block
-		await clickBlockToolbarButton( 'More options' );
-		const convertButton = await page.waitForXPath(
-			'//button[text()="Convert to Regular Block"]'
-		);
-		await convertButton.click();
+		await clickBlockToolbarButton( 'Convert to regular blocks', 'content' );
 
 		// Check that we have two paragraph blocks on the page
 		expect( await getEditedPostContent() ).toMatchSnapshot();

diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
@@ -8,15 +8,15 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
- * Menu controls to convert block(s) to reusable block or vice-versa.
+ * Menu control to convert block(s) to reusable block.
  *
  * @param {Object}   props           Component props.
  * @param {string[]} props.clientIds Client ids of selected blocks.
  *
- * @return {import('@wordpress/element').WPComponent} The menu controls or null.
+ * @return {import('@wordpress/element').WPComponent} The menu control or null.
  */
 export default function ReusableBlockConvertButton( { clientIds } ) {
-	const { isReusable, isVisible } = useSelect(
+	const canConvert = useSelect(
 		( select ) => {
 			const { canUser } = select( 'core' );
 			const { getBlocksByClientId, canInsertBlockType } = select(
@@ -28,71 +28,53 @@ export default function ReusableBlockConvertButton( { clientIds } ) {
 
 			const blocks = getBlocksByClientId( clientIds ) ?? [];
 
-			const _isReusable =
+			const isReusable =
 				blocks.length === 1 &&
 				blocks[ 0 ] &&
 				isReusableBlock( blocks[ 0 ] ) &&
 				!! getReusableBlock( blocks[ 0 ].attributes.ref );
 
-			// Show 'Convert to Regular Block' when selected block is a reusable block.
-			const _isVisible =
-				_isReusable ||
-				// Hide 'Add to Reusable blocks' when reusable blocks are disabled.
-				( canInsertBlockType( 'core/block' ) &&
-					blocks.every(
-						( block ) =>
-							// Guard against the case where a regular block has *just* been converted.
-							!! block &&
-							// Hide 'Add to Reusable blocks' on invalid blocks.
-							block.isValid &&
-							// Hide 'Add to Reusable blocks' when block doesn't support being made reusable.
-							hasBlockSupport( block.name, 'reusable', true )
-					) &&
-					// Hide 'Add to Reusable blocks' when current doesn't have permission to do that.
-					!! canUser( 'create', 'blocks' ) );
+			const _canConvert =
+				// Hide when this is already a reusable block.
+				! isReusable &&
+				// Hide when reusable blocks are disabled.
+				canInsertBlockType( 'core/block' ) &&
+				blocks.every(
+					( block ) =>
+						// Guard against the case where a regular block has *just* been converted.
+						!! block &&
+						// Hide on invalid blocks.
+						block.isValid &&
+						// Hide when block doesn't support being made reusable.
+						hasBlockSupport( block.name, 'reusable', true )
+				) &&
+				// Hide when current doesn't have permission to do that.
+				!! canUser( 'create', 'blocks' );
 
-			return {
-				isReusable: _isReusable,
-				isVisible: _isVisible,
-			};
+			return _canConvert;
 		},
 		[ clientIds ]
 	);
 
 	const {
 		__experimentalConvertBlockToReusable: convertBlockToReusable,
-		__experimentalConvertBlockToStatic: convertBlockToStatic,
 	} = useDispatch( 'core/editor' );
 
-	if ( ! isVisible ) {
+	if ( ! canConvert ) {
 		return null;
 	}
 
 	return (
 		<BlockSettingsMenuControls>
 			{ ( { onClose } ) => (
-				<>
-					{ ! isReusable && (
-						<MenuItem
-							onClick={ () => {
-								convertBlockToReusable( clientIds );
-								onClose();
-							} }
-						>
-							{ __( 'Add to Reusable blocks' ) }
-						</MenuItem>
-					) }
-					{ isReusable && (
-						<MenuItem
-							onClick={ () => {
-								convertBlockToStatic( clientIds[ 0 ] );
-								onClose();
-							} }
-						>
-							{ __( 'Convert to Regular Block' ) }
-						</MenuItem>
-					) }
-				</>
+				<MenuItem
+					onClick={ () => {
+						convertBlockToReusable( clientIds );
+						onClose();
+					} }
+				>
+					{ __( 'Add to Reusable blocks' ) }
+				</MenuItem>
 			) }
 		</BlockSettingsMenuControls>
 	);