diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 296fb704dbfa7..5f64e2308370b 100644
--- 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 (
-
- { ( isSelected || isEditing ) && (
-
- ) }
- { element }
-
+ <>
+
+
+
+ { __( 'Convert to regular blocks' ) }
+
+
+
+
+ { ( isSelected || isEditing ) && (
+
+ ) }
+ { element }
+
+
);
}
}
@@ -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
index c3da1b33f9cfa..05a04312dfa3e 100644
--- 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
index ced651e0dde00..5eaf29ce6b97f 100644
--- 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 (
{ ( { onClose } ) => (
- <>
- { ! isReusable && (
-
- ) }
- { isReusable && (
-
- ) }
-
+
) }
);