-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[RNMobile] Add convert to regular blocks action to Reusable block #31012
Changes from 3 commits
d85a6ce
d90905b
f6368b8
2a3fba6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,13 +19,17 @@ import { | |
rawHandler, | ||
createBlock, | ||
isUnmodifiedDefaultBlock, | ||
isReusableBlock, | ||
} from '@wordpress/blocks'; | ||
import { __, sprintf } from '@wordpress/i18n'; | ||
import { withDispatch, withSelect } from '@wordpress/data'; | ||
import { withInstanceId, compose } from '@wordpress/compose'; | ||
import { moreHorizontalMobile } from '@wordpress/icons'; | ||
import { useRef, useState } from '@wordpress/element'; | ||
import { store as noticesStore } from '@wordpress/notices'; | ||
import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; | ||
import { store as coreStore } from '@wordpress/core-data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
|
@@ -41,11 +45,13 @@ const BlockActionsMenu = ( { | |
isEmptyDefaultBlock, | ||
isFirst, | ||
isLast, | ||
reusableBlock, | ||
rootClientId, | ||
selectedBlockClientId, | ||
selectedBlockPossibleTransformations, | ||
// Dispatch | ||
createSuccessNotice, | ||
convertToRegularBlocks, | ||
duplicateBlock, | ||
onMoveDown, | ||
onMoveUp, | ||
|
@@ -58,6 +64,7 @@ const BlockActionsMenu = ( { | |
onDelete, | ||
wrapBlockMover, | ||
wrapBlockSettings, | ||
isReusableBlockType, | ||
} ) => { | ||
const [ clipboard, setCurrentClipboard ] = useState( getClipboard() ); | ||
const blockActionsMenuPickerRef = useRef(); | ||
|
@@ -175,6 +182,21 @@ const BlockActionsMenu = ( { | |
); | ||
}, | ||
}, | ||
convertToRegularBlocks: { | ||
id: 'convertToRegularBlocksOption', | ||
label: __( 'Convert to regular blocks' ), | ||
value: 'convertToRegularBlocksOption', | ||
onSelect: () => { | ||
createSuccessNotice( | ||
sprintf( | ||
/* translators: %s: name of the reusable block */ | ||
__( '%s converted to regular blocks' ), | ||
reusableBlock?.title?.raw || blockTitle | ||
) | ||
); | ||
convertToRegularBlocks(); | ||
}, | ||
}, | ||
}; | ||
|
||
const options = compact( [ | ||
|
@@ -187,6 +209,7 @@ const BlockActionsMenu = ( { | |
allOptions.cutButton, | ||
isPasteEnabled && allOptions.pasteButton, | ||
allOptions.duplicateButton, | ||
isReusableBlockType && allOptions.convertToRegularBlocks, | ||
allOptions.delete, | ||
] ); | ||
|
||
|
@@ -297,6 +320,15 @@ export default compose( | |
? getBlockTransformItems( [ selectedBlock ], rootClientId ) | ||
: []; | ||
|
||
const isReusableBlockType = block ? isReusableBlock( block ) : false; | ||
const reusableBlock = isReusableBlockType | ||
? select( coreStore ).getEntityRecord( | ||
'postType', | ||
'wp_block', | ||
block?.attributes.ref | ||
) | ||
: undefined; | ||
|
||
return { | ||
blockTitle, | ||
canInsertBlockType, | ||
|
@@ -305,29 +337,48 @@ export default compose( | |
isEmptyDefaultBlock, | ||
isFirst: firstIndex === 0, | ||
isLast: lastIndex === blockOrder.length - 1, | ||
isReusableBlockType, | ||
reusableBlock, | ||
rootClientId, | ||
selectedBlockClientId, | ||
selectedBlockPossibleTransformations, | ||
}; | ||
} ), | ||
withDispatch( | ||
( dispatch, { clientIds, rootClientId, currentIndex }, { select } ) => { | ||
( | ||
dispatch, | ||
{ clientIds, rootClientId, currentIndex, selectedBlockClientId }, | ||
{ select } | ||
) => { | ||
const { | ||
moveBlocksDown, | ||
moveBlocksUp, | ||
duplicateBlocks, | ||
removeBlocks, | ||
insertBlock, | ||
replaceBlocks, | ||
clearSelectedBlock, | ||
} = dispatch( blockEditorStore ); | ||
const { openGeneralSidebar } = dispatch( 'core/edit-post' ); | ||
const { getBlockSelectionEnd, getBlock } = select( | ||
blockEditorStore | ||
); | ||
const { createSuccessNotice } = dispatch( noticesStore ); | ||
|
||
const { | ||
__experimentalConvertBlockToStatic: convertBlockToStatic, | ||
} = dispatch( reusableBlocksStore ); | ||
|
||
return { | ||
createSuccessNotice, | ||
convertToRegularBlocks() { | ||
clearSelectedBlock(); | ||
// Convert action is executed at the end of the current JavaScript execution block | ||
// to prevent issues related to undo/redo actions. | ||
setImmediate( () => | ||
Comment on lines
+375
to
+378
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I tested these changes in a test branch (
For this reason, I decided to add the following changes to fix it:
|
||
convertBlockToStatic( selectedBlockClientId ) | ||
); | ||
}, | ||
duplicateBlock() { | ||
return duplicateBlocks( clientIds ); | ||
}, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the reusable block's title is not defined it will fallback to "Reusable block".
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Additionally I realised that the
notice
component doesn't handle content overflow (see attached screenshot).I'll fix this issue in a separate PR 🔧 .
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created the fix in this PR.