Showcase: Update Pattern block to benefit from new user permission re…

…solutions
WordPress · Jul 16, 2024 · 23ea0c1 · 23ea0c1
1 parent a9b931e
commit 23ea0c1
Showing 1 changed file with 58 additions and 31 deletions.
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
@@ -121,6 +121,51 @@ export default function ReusableBlockEditRecursionWrapper( props ) {
 	);
 }
 
+function ReusableBlockControl( {
+	recordId,
+	canOverrideBlocks,
+	hasContent,
+	handleEditOriginal,
+	resetContent,
+} ) {
+	const canUserEdit = useSelect(
+		( select ) =>
+			!! select( coreStore ).canUser( 'update', {
+				kind: 'postType',
+				name: 'wp_block',
+				id: recordId,
+			} ),
+		[ recordId ]
+	);
+
+	return (
+		<>
+			{ canUserEdit && !! handleEditOriginal && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton onClick={ handleEditOriginal }>
+							{ __( 'Edit original' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+
+			{ canOverrideBlocks && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ resetContent }
+							disabled={ ! hasContent }
+						>
+							{ __( 'Reset' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+		</>
+	);
+}
+
 function ReusableBlockEdit( {
 	name,
 	attributes: { ref, content },
@@ -143,29 +188,20 @@ function ReusableBlockEdit( {
 
 	const {
 		innerBlocks,
-		userCanEdit,
 		onNavigateToEntityRecord,
 		editingMode,
 		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
-			const { canUser } = select( coreStore );
 			const {
 				getBlocks,
 				getSettings,
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const canEdit = canUser( 'update', {
-				kind: 'postType',
-				name: 'wp_block',
-				id: ref,
-			} );
-
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
 				innerBlocks: getBlocks( patternClientId ),
-				userCanEdit: canEdit,
 				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
@@ -175,7 +211,7 @@ function ReusableBlockEdit( {
 				),
 			};
 		},
-		[ patternClientId, ref ]
+		[ patternClientId ]
 	);
 
 	// Sync the editing mode of the pattern block with the inner blocks.
@@ -256,27 +292,18 @@ function ReusableBlockEdit( {
 
 	return (
 		<>
-			{ userCanEdit && onNavigateToEntityRecord && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton onClick={ handleEditOriginal }>
-							{ __( 'Edit original' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-
-			{ canOverrideBlocks && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ resetContent }
-							disabled={ ! content }
-						>
-							{ __( 'Reset' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
+			{ hasResolved && (
+				<ReusableBlockControl
+					recordId={ ref }
+					canOverrideBlocks={ canOverrideBlocks }
+					hasContent={ !! content }
+					handleEditOriginal={
+						onNavigateToEntityRecord
+							? handleEditOriginal
+							: undefined
+					}
+					resetContent={ resetContent }
+				/>
 			) }
 
 			{ children === null ? (