Post editor: Require confirmation before removing Footnotes (#52277)

* Post editor: Require confirmation before removing Footnotes

Context: #52176

* BlockRemovalWarningModal: Limit width to 40rem

* Explain that footnotes are preserved. Add warning to Site Editor

Author: mcsf

packages/block-editor/src/components/block-removal-warning-modal/index.js

@@ -50,6 +50,9 @@ export function BlockRemovalWarningModal( { rules } ) {
 		<Modal
 			title={ __( 'Are you sure?' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
+			style={ {
+				maxWidth: '40rem',
+			} }
 		>
 			{ blockNamesForPrompt.length === 1 ? (
 				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>

packages/edit-post/src/components/layout/index.js

@@ -16,7 +16,10 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	BlockBreadcrumb,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
@@ -49,6 +52,9 @@ import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
 import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -63,6 +69,12 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+const blockRemovalRules = {
+	'core/footnotes': __(
+		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
+	),
+};
+
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
@@ -202,6 +214,7 @@ function Layout( { styles } ) {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
+			<BlockRemovalWarningModal rules={ blockRemovalRules } />
 			<SettingsSidebar />
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isLargeViewport }

packages/edit-site/src/components/editor/index.js

@@ -70,6 +70,9 @@ const blockRemovalRules = {
 	'core/post-content': __(
 		'Post Content displays the content of a post or page.'
 	),
+	'core/footnotes': __(
+		'The Footnotes block displays all footnotes found in the content. Note that any footnotes in the content will persist after removing this block.'
+	),
 };
 
 export default function Editor( { isLoading } ) {