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
WordPress · Jul 5, 2023 · e6426ea · e6426ea
1 parent 454452e
commit e6426ea
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-removal-warning-modal/index.js b/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>

diff --git a/packages/edit-post/src/components/layout/index.js b/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 }

diff --git a/packages/edit-site/src/components/editor/index.js b/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 } ) {