diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json index 053f169e56128d..03baead86fe130 100644 --- a/packages/reusable-blocks/package.json +++ b/packages/reusable-blocks/package.json @@ -35,6 +35,7 @@ "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/notices": "file:../notices", + "@wordpress/url": "^2.19.0", "lodash": "^4.17.19" }, "publishConfig": { diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js index ed68dd7fec7717..ce5883402896de 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js @@ -7,7 +7,7 @@ import { withSelect } from '@wordpress/data'; * Internal dependencies */ import ReusableBlockConvertButton from './reusable-block-convert-button'; -import ReusableBlockDeleteButton from './reusable-block-delete-button'; +import ReusableBlocksManageButton from './reusable-blocks-manage-button'; function ReusableBlocksMenuItems( { clientIds, rootClientId } ) { return ( @@ -17,7 +17,7 @@ function ReusableBlocksMenuItems( { clientIds, rootClientId } ) { rootClientId={ rootClientId } /> { clientIds.length === 1 && ( - + ) } ); diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-delete-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-delete-button.js deleted file mode 100644 index ac3abd0bb471cb..00000000000000 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-delete-button.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * WordPress dependencies - */ -import { MenuItem } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { isReusableBlock } from '@wordpress/blocks'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { useCallback } from '@wordpress/element'; -import { BlockSettingsMenuControls } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { store } from '../../store'; - -function ReusableBlockDeleteButton( { clientId } ) { - const { isVisible, isDisabled, block } = useSelect( - ( select ) => { - const { getBlock } = select( 'core/block-editor' ); - const { canUser } = select( 'core' ); - const blockObj = getBlock( clientId ); - - const reusableBlock = - blockObj && isReusableBlock( blockObj ) - ? select( 'core' ).getEntityRecord( - 'postType', - 'wp_block', - blockObj.attributes.ref - ) - : null; - - return { - block: blockObj, - isVisible: - !! reusableBlock && - ( reusableBlock.isTemporary || - !! canUser( 'delete', 'blocks', reusableBlock.id ) ), - isDisabled: reusableBlock && reusableBlock.isTemporary, - }; - }, - [ clientId ] - ); - - const { - __experimentalDeleteReusableBlock: deleteReusableBlock, - } = useDispatch( store ); - - const { createSuccessNotice, createErrorNotice } = useDispatch( - 'core/notices' - ); - const onDelete = useCallback( - async function () { - try { - await deleteReusableBlock( block.attributes.ref ); - createSuccessNotice( __( 'Block deleted.' ), { - type: 'snackbar', - } ); - } catch ( error ) { - createErrorNotice( error.message, { - type: 'snackbar', - } ); - } - }, - [ block ] - ); - - if ( ! isVisible ) { - return null; - } - - return ( - - { ( { onClose } ) => ( - { - // eslint-disable-next-line no-alert - const hasConfirmed = window.confirm( - // eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace - __( - 'Are you sure you want to delete this Reusable Block?\n\n' + - 'It will be permanently removed from all posts and pages that use it.' - ) - ); - if ( hasConfirmed ) { - onDelete(); - onClose(); - } - } } - > - { __( 'Remove from Reusable blocks' ) } - - ) } - - ); -} - -export default ReusableBlockDeleteButton; diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js new file mode 100644 index 00000000000000..4357a43bc8dd98 --- /dev/null +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { MenuItem } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { isReusableBlock } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; +import { BlockSettingsMenuControls } from '@wordpress/block-editor'; +import { addQueryArgs } from '@wordpress/url'; + +function ReusableBlocksManageButton( { clientId } ) { + const { isVisible } = useSelect( + ( select ) => { + const { getBlock } = select( 'core/block-editor' ); + const { canUser } = select( 'core' ); + const blockObj = getBlock( clientId ); + + const reusableBlock = + blockObj && isReusableBlock( blockObj ) + ? select( 'core' ).getEntityRecord( + 'postType', + 'wp_block', + blockObj.attributes.ref + ) + : null; + + return { + isVisible: + !! reusableBlock && + !! canUser( 'update', 'blocks', reusableBlock.id ), + }; + }, + [ clientId ] + ); + + if ( ! isVisible ) { + return null; + } + + return ( + + { + window.location = addQueryArgs( 'edit.php', { + post_type: 'wp_block', + } ); + } } + > + { __( 'Manage Reusable blocks' ) } + + + ); +} + +export default ReusableBlocksManageButton;