Footnotes: show in inserter and placehold (#52445)

* Footnotes: show in inserter and placehold * Fix placeholder block membrane; fix copy; add icon, label --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
WordPress · Jul 13, 2023 · 90151eb · 90151eb · github-actions · Jul 13, 2023
1 parent 899a719
commit 90151eb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -275,7 +275,7 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 
 - **Name:** core/footnotes
 - **Category:** text
-- **Supports:** ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
+- **Supports:** ~~html~~, ~~multiple~~, ~~reusable~~
 - **Attributes:** 
 
 ## Classic

diff --git a/packages/block-library/src/footnotes/block.json b/packages/block-library/src/footnotes/block.json
@@ -11,7 +11,6 @@
  "supports": {
  "html": false,
  "multiple": false,
- "inserter": false,
  "reusable": false
  },
  "style": "wp-block-footnotes"

diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js
@@ -1,8 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { BlockIcon, RichText, useBlockProps } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { Placeholder } from '@wordpress/components';
+import { formatListNumbered as icon } from '@wordpress/icons';
 
 export default function FootnotesEdit( { context: { postType, postId } } ) {
  const [ meta, updateMeta ] = useEntityProp(
@@ -12,8 +15,24 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
  postId
  );
  const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
+ const blockProps = useBlockProps();
+
+ if ( ! footnotes.length ) {
+ return (
+ <div { ...blockProps }>
+ <Placeholder
+ icon={ <BlockIcon icon={ icon } /> }
+ label={ __( 'Footnotes' ) }
+ instructions={ __(
+ 'Footnotes found in blocks within this document will be displayed here.'
+ ) }
+ />
+ </div>
+ );
+ }
+
  return (
- <ol { ...useBlockProps() }>
+ <ol { ...blockProps }>
  { footnotes.map( ( { id, content } ) => (
  <li key={ id }>
  <RichText