diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 39748288c4d66..8a5e83d0fd442 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -23,8 +23,8 @@ jobs:
strategy:
fail-fast: false
matrix:
- part: [1, 2, 3, 4]
- totalParts: [4]
+ part: [1, 2, 3]
+ totalParts: [3]
steps:
- uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
@@ -67,8 +67,8 @@ jobs:
strategy:
fail-fast: false
matrix:
- part: [1, 2]
- totalParts: [2]
+ part: [1, 2, 3, 4]
+ totalParts: [4]
steps:
- uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 24cb7cfeefded..f59b472bdabdd 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -269,6 +269,15 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
- **Supports:** align, anchor, color (background, gradients, link, ~~text~~)
- **Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
+## Footnotes
+
+ ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/footnotes))
+
+- **Name:** core/footnotes
+- **Category:** text
+- **Supports:** ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
+- **Attributes:**
+
## Classic
Use the classic WordPress editor. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/freeform))
diff --git a/lib/blocks.php b/lib/blocks.php
index fdbc555a2f944..8185567db1b80 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -24,6 +24,7 @@ function gutenberg_reregister_core_block_types() {
'comments',
'details',
'group',
+ 'footnotes',
'html',
'list',
'list-item',
@@ -65,6 +66,7 @@ function gutenberg_reregister_core_block_types() {
'comments-pagination-previous.php' => 'core/comments-pagination-previous',
'comments-title.php' => 'core/comments-title',
'comments.php' => 'core/comments',
+ 'footnotes.php' => 'core/footnotes',
'file.php' => 'core/file',
'home-link.php' => 'core/home-link',
'image.php' => 'core/image',
diff --git a/package-lock.json b/package-lock.json
index 2b110762c27be..1187c5cd1295c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17343,7 +17343,8 @@
"memize": "^2.1.0",
"micromodal": "^0.4.10",
"preact": "^10.13.2",
- "remove-accents": "^0.4.2"
+ "remove-accents": "^0.4.2",
+ "uuid": "^8.3.0"
}
},
"@wordpress/block-serialization-default-parser": {
@@ -17508,6 +17509,7 @@
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/api-fetch": "file:packages/api-fetch",
+ "@wordpress/block-editor": "file:packages/block-editor",
"@wordpress/blocks": "file:packages/blocks",
"@wordpress/compose": "file:packages/compose",
"@wordpress/data": "file:packages/data",
@@ -17516,6 +17518,7 @@
"@wordpress/html-entities": "file:packages/html-entities",
"@wordpress/i18n": "file:packages/i18n",
"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
+ "@wordpress/private-apis": "file:packages/private-apis",
"@wordpress/url": "file:packages/url",
"change-case": "^4.1.2",
"equivalent-key-map": "^0.2.2",
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
new file mode 100644
index 0000000000000..2e16d2834d2ce
--- /dev/null
+++ b/packages/block-editor/src/components/block-removal-warning-modal/index.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+ Modal,
+ Button,
+ __experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// In certain editing contexts, we'd like to prevent accidental removal of
+// important blocks. For example, in the site editor, the Query Loop block is
+// deemed important. In such cases, we'll ask the user for confirmation that
+// they intended to remove such block(s).
+//
+// @see https://github.com/WordPress/gutenberg/pull/51145
+export const blockTypePromptMessages = {
+ 'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+ 'core/post-content': __(
+ 'Post Content displays the content of a post or page.'
+ ),
+};
+
+export function BlockRemovalWarningModal() {
+ const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
+ ( select ) =>
+ unlock( select( blockEditorStore ) ).getRemovalPromptData()
+ );
+
+ const {
+ clearRemovalPrompt,
+ toggleRemovalPromptSupport,
+ privateRemoveBlocks,
+ } = unlock( useDispatch( blockEditorStore ) );
+
+ // Signalling the removal prompt is in place.
+ useEffect( () => {
+ toggleRemovalPromptSupport( true );
+ return () => {
+ toggleRemovalPromptSupport( false );
+ };
+ }, [ toggleRemovalPromptSupport ] );
+
+ if ( ! blockNamesForPrompt ) {
+ return;
+ }
+
+ const onConfirmRemoval = () => {
+ privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
+ clearRemovalPrompt();
+ };
+
+ return (
+
+ { blockNamesForPrompt.length === 1 ? (
+ { blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }
+ ) : (
+
+ { blockNamesForPrompt.map( ( name ) => (
+
+ { blockTypePromptMessages[ name ] }
+
+ ) ) }
+
+ ) }
+
+ { _n(
+ 'Removing this block is not advised.',
+ 'Removing these blocks is not advised.',
+ blockNamesForPrompt.length
+ ) }
+
+
+
+ { __( 'Cancel' ) }
+
+
+ { __( 'Delete' ) }
+
+
+
+ );
+}
diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
index 3881ff06f2bf3..3acaac367bd64 100644
--- a/packages/block-editor/src/components/copy-handler/index.js
+++ b/packages/block-editor/src/components/copy-handler/index.js
@@ -100,6 +100,11 @@ export function useClipboardHandler() {
return useRefEffect( ( node ) => {
function handler( event ) {
+ if ( event.defaultPrevented ) {
+ // This was likely already handled in rich-text/use-paste-handler.js.
+ return;
+ }
+
const selectedBlockClientIds = getSelectedBlockClientIds();
if ( selectedBlockClientIds.length === 0 ) {
@@ -127,7 +132,6 @@ export function useClipboardHandler() {
return;
}
- const eventDefaultPrevented = event.defaultPrevented;
event.preventDefault();
const isSelectionMergeable = __unstableIsSelectionMergeable();
@@ -197,10 +201,6 @@ export function useClipboardHandler() {
__unstableDeleteSelection();
}
} else if ( event.type === 'paste' ) {
- if ( eventDefaultPrevented ) {
- // This was likely already handled in rich-text/use-paste-handler.js.
- return;
- }
const {
__experimentalCanUserUseUnfilteredHTML:
canUserUseUnfilteredHTML,
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index 23dfdb7fd7dc6..3a814638c2f48 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -36,7 +36,8 @@ function InserterLibrary(
return {
destinationRootClientId: _rootClientId,
prioritizePatterns:
- getSettings().__experimentalPreferPatternsOnRoot,
+ getSettings().__experimentalPreferPatternsOnRoot &&
+ ! _rootClientId,
};
},
[ clientId, rootClientId ]
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index 785e6a538f715..d3b555c055afd 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -91,6 +91,7 @@ function ListViewBranch( props ) {
selectedClientIds,
level = 1,
path = '',
+ isBranchDragged = false,
isBranchSelected = false,
listPosition = 0,
fixedListWindow,
@@ -167,7 +168,8 @@ function ListViewBranch( props ) {
);
const isSelectedBranch =
isBranchSelected || ( isSelected && hasNestedBlocks );
- const showBlock = isDragged || blockInView || isSelected;
+ const showBlock =
+ isDragged || blockInView || isSelected || isBranchDragged;
return (
{ showBlock && (
@@ -176,7 +178,7 @@ function ListViewBranch( props ) {
selectBlock={ selectBlock }
isSelected={ isSelected }
isBranchSelected={ isSelectedBranch }
- isDragged={ isDragged }
+ isDragged={ isDragged || isBranchDragged }
level={ level }
position={ position }
rowCount={ rowCount }
@@ -194,7 +196,7 @@ function ListViewBranch( props ) {
{
const clientId = blockElement.dataset.block;
const isExpanded = blockElement.dataset.expanded === 'true';
+ const isDraggedBlock =
+ blockElement.classList.contains( 'is-dragging' );
// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
const nestingLevel = parseInt(
@@ -449,9 +451,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
blockIndex: getBlockIndex( clientId ),
element: blockElement,
nestingLevel: nestingLevel || undefined,
- isDraggedBlock: isBlockDrag
- ? draggedBlockClientIds.includes( clientId )
- : false,
+ isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
innerBlockCount: getBlockCount( clientId ),
canInsertDraggedBlocksAsSibling: isBlockDrag
? canInsertBlocks(
diff --git a/packages/block-editor/src/components/rich-text/content.js b/packages/block-editor/src/components/rich-text/content.js
new file mode 100644
index 0000000000000..dfd206a1ddb7e
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/content.js
@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import {
+ children as childrenSource,
+ getSaveElement,
+ __unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getMultilineTag } from './utils';
+
+export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+ // Handle deprecated `children` and `node` sources.
+ if ( Array.isArray( value ) ) {
+ deprecated( 'wp.blockEditor.RichText value prop as children type', {
+ since: '6.1',
+ version: '6.3',
+ alternative: 'value prop as string',
+ link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+ } );
+
+ value = childrenSource.toHTML( value );
+ }
+
+ const MultilineTag = getMultilineTag( multiline );
+
+ if ( ! value && MultilineTag ) {
+ value = `<${ MultilineTag }>`;
+ }
+
+ const content = { value } ;
+
+ if ( Tag ) {
+ const { format, ...restProps } = props;
+ return { content } ;
+ }
+
+ return content;
+};
+
+Content.__unstableIsRichTextContent = {};
+
+function findContent( blocks, richTextValues = [] ) {
+ if ( ! Array.isArray( blocks ) ) {
+ blocks = [ blocks ];
+ }
+
+ for ( const block of blocks ) {
+ if (
+ block?.type?.__unstableIsRichTextContent ===
+ Content.__unstableIsRichTextContent
+ ) {
+ richTextValues.push( block.props.value );
+ continue;
+ }
+
+ if ( block?.props?.children ) {
+ findContent( block.props.children, richTextValues );
+ }
+ }
+
+ return richTextValues;
+}
+
+function _getSaveElement( { name, attributes, innerBlocks } ) {
+ return getSaveElement(
+ name,
+ attributes,
+ innerBlocks.map( _getSaveElement )
+ );
+}
+
+export function getRichTextValues( blocks = [] ) {
+ getBlockProps.skipFilters = true;
+ const values = findContent(
+ ( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )
+ );
+ getBlockProps.skipFilters = false;
+ return values;
+}
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 0d61fc87f7fc7..50d05e7eb4dde 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import {
- RawHTML,
useRef,
useCallback,
forwardRef,
@@ -46,6 +45,7 @@ import { useInsertReplacementText } from './use-insert-replacement-text';
import { useFirefoxCompat } from './use-firefox-compat';
import FormatEdit from './format-edit';
import { getMultilineTag, getAllowedFormats } from './utils';
+import { Content } from './content';
export const keyboardShortcutContext = createContext();
export const inputEventContext = createContext();
@@ -419,40 +419,7 @@ function RichTextWrapper(
const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
-ForwardedRichTextContainer.Content = ( {
- value,
- tagName: Tag,
- multiline,
- ...props
-} ) => {
- // Handle deprecated `children` and `node` sources.
- if ( Array.isArray( value ) ) {
- deprecated( 'wp.blockEditor.RichText value prop as children type', {
- since: '6.1',
- version: '6.3',
- alternative: 'value prop as string',
- link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
- } );
-
- value = childrenSource.toHTML( value );
- }
-
- const MultilineTag = getMultilineTag( multiline );
-
- if ( ! value && MultilineTag ) {
- value = `<${ MultilineTag }>`;
- }
-
- const content = { value } ;
-
- if ( Tag ) {
- const { format, ...restProps } = props;
- return { content } ;
- }
-
- return content;
-};
-
+ForwardedRichTextContainer.Content = Content;
ForwardedRichTextContainer.isEmpty = ( value ) => {
return ! value || value.length === 0;
};
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 82e7a96ec8733..b0c82848db687 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -6,13 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import {
- RawHTML,
- Platform,
- useRef,
- useCallback,
- forwardRef,
-} from '@wordpress/element';
+import { Platform, useRef, useCallback, forwardRef } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import {
pasteHandler,
@@ -55,6 +49,7 @@ import {
createLinkInParagraph,
} from './utils';
import EmbedHandlerPicker from './embed-handler-picker';
+import { Content } from './content';
const classes = 'block-editor-rich-text__editable';
@@ -707,32 +702,7 @@ function RichTextWrapper(
const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
-ForwardedRichTextContainer.Content = ( {
- value,
- tagName: Tag,
- multiline,
- ...props
-} ) => {
- // Handle deprecated `children` and `node` sources.
- if ( Array.isArray( value ) ) {
- value = childrenSource.toHTML( value );
- }
-
- const MultilineTag = getMultilineTag( multiline );
-
- if ( ! value && MultilineTag ) {
- value = `<${ MultilineTag }>`;
- }
-
- const content = { value } ;
-
- if ( Tag ) {
- const { format, ...restProps } = props;
- return { content } ;
- }
-
- return content;
-};
+ForwardedRichTextContainer.Content = Content;
ForwardedRichTextContainer.isEmpty = ( value ) => {
return ! value || value.length === 0;
diff --git a/packages/block-editor/src/components/writing-flow/use-drag-selection.js b/packages/block-editor/src/components/writing-flow/use-drag-selection.js
index 87d5e93f90994..55fb078c765d3 100644
--- a/packages/block-editor/src/components/writing-flow/use-drag-selection.js
+++ b/packages/block-editor/src/components/writing-flow/use-drag-selection.js
@@ -88,7 +88,7 @@ export default function useDragSelection() {
// child elements of the content editable wrapper are editable
// and return true for this property. We only want to start
// multi selecting when the mouse leaves the wrapper.
- if ( ! target.getAttribute( 'contenteditable' ) ) {
+ if ( target.getAttribute( 'contenteditable' ) !== 'true' ) {
return;
}
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index 214072ab28e93..b22e57a51e32a 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -116,17 +116,53 @@ export default function useTabNav() {
return;
}
+ // We want to constrain the tabbing to the block and its child blocks.
+ // If the preceding form element is within a different block,
+ // such as two sibling image blocks in the placeholder state,
+ // we want shift + tab from the first form element to move to the image
+ // block toolbar and not the previous image block's form element.
+ // TODO: Should this become a utility function?
+ /**
+ * Determine whether an element is part of or is the selected block.
+ *
+ * @param {Object} selectedBlockElement
+ * @param {Object} element
+ * @return {boolean} Whether the element is part of or is the selected block.
+ */
+ const isElementPartOfSelectedBlock = (
+ selectedBlockElement,
+ element
+ ) => {
+ // Check if the element is or is within the selected block by finding the
+ // closest element with a data-block attribute and seeing if
+ // it matches our current selected block ID
+ const elementBlockId = element
+ .closest( '[data-block]' )
+ ?.getAttribute( 'data-block' );
+ const isElementSameBlock =
+ elementBlockId === getSelectedBlockClientId();
+
+ // Check if the element is a child of the selected block. This could be a
+ // child block in a group or column block, etc.
+ const isElementChildOfBlock =
+ selectedBlockElement.contains( element );
+
+ return isElementSameBlock || isElementChildOfBlock;
+ };
+
+ const nextTabbable = focus.tabbable[ direction ]( event.target );
// Allow tabbing from the block wrapper to a form element,
- // and between form elements rendered in a block,
+ // and between form elements rendered in a block and its child blocks,
// such as inside a placeholder. Form elements are generally
// meant to be UI rather than part of the content. Ideally
// these are not rendered in the content and perhaps in the
// future they can be rendered in an iframe or shadow DOM.
if (
- ( isFormElement( event.target ) ||
- event.target.getAttribute( 'data-block' ) ===
- getSelectedBlockClientId() ) &&
- isFormElement( focus.tabbable[ direction ]( event.target ) )
+ isFormElement( nextTabbable ) &&
+ isElementPartOfSelectedBlock(
+ event.target.closest( '[data-block]' ),
+ nextTabbable
+ )
) {
return;
}
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index b9ec71fc1a786..9cef7e0cda8e0 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -4,6 +4,7 @@
import * as globalStyles from './components/global-styles';
import { ExperimentalBlockEditorProvider } from './components/provider';
import { lock } from './lock-unlock';
+import { getRichTextValues } from './components/rich-text/content';
import ResizableBoxPopover from './components/resizable-box-popover';
import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
import { PrivateListView } from './components/list-view';
@@ -13,6 +14,7 @@ import { cleanEmptyObject } from './hooks/utils';
import { useBlockEditingMode } from './components/block-editing-mode';
import BlockQuickNavigation from './components/block-quick-navigation';
import { LayoutStyle } from './components/block-list/layout';
+import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
import { useLayoutClasses, useLayoutStyles } from './hooks';
/**
@@ -22,6 +24,7 @@ export const privateApis = {};
lock( privateApis, {
...globalStyles,
ExperimentalBlockEditorProvider,
+ getRichTextValues,
PrivateInserter,
PrivateListView,
ResizableBoxPopover,
@@ -31,6 +34,7 @@ lock( privateApis, {
useBlockEditingMode,
BlockQuickNavigation,
LayoutStyle,
+ BlockRemovalWarningModal,
useLayoutClasses,
useLayoutStyles,
} );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 27ff57e74919c..f28fb604c1f76 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -25,40 +25,17 @@ import {
retrieveSelectedAttribute,
START_OF_SELECTED_AREA,
} from '../utils/selection';
-import { __experimentalUpdateSettings } from './private-actions';
+import {
+ __experimentalUpdateSettings,
+ ensureDefaultBlock,
+ privateRemoveBlocks,
+} from './private-actions';
/** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
const castArray = ( maybeArray ) =>
Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
-/**
- * Action which will insert a default block insert action if there
- * are no other blocks at the root of the editor. This action should be used
- * in actions which may result in no blocks remaining in the editor (removal,
- * replacement, etc).
- */
-const ensureDefaultBlock =
- () =>
- ( { select, dispatch } ) => {
- // To avoid a focus loss when removing the last block, assure there is
- // always a default block if the last of the blocks have been removed.
- const count = select.getBlockCount();
- if ( count > 0 ) {
- return;
- }
-
- // If there's an custom appender, don't insert default block.
- // We have to remember to manually move the focus elsewhere to
- // prevent it from being lost though.
- const { __unstableHasCustomAppender } = select.getSettings();
- if ( __unstableHasCustomAppender ) {
- return;
- }
-
- dispatch.insertDefaultBlock();
- };
-
/**
* Action that resets blocks state to the specified array of blocks, taking precedence
* over any other content reflected as an edit in state.
@@ -1195,34 +1172,8 @@ export const mergeBlocks =
* should be selected
* when a block is removed.
*/
-export const removeBlocks =
- ( clientIds, selectPrevious = true ) =>
- ( { select, dispatch } ) => {
- if ( ! clientIds || ! clientIds.length ) {
- return;
- }
-
- clientIds = castArray( clientIds );
- const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
- const canRemoveBlocks = select.canRemoveBlocks(
- clientIds,
- rootClientId
- );
-
- if ( ! canRemoveBlocks ) {
- return;
- }
-
- if ( selectPrevious ) {
- dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
- }
-
- dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
-
- // To avoid a focus loss when removing the last block, assure there is
- // always a default block if the last of the blocks have been removed.
- dispatch( ensureDefaultBlock() );
- };
+export const removeBlocks = ( clientIds, selectPrevious = true ) =>
+ privateRemoveBlocks( clientIds, selectPrevious );
/**
* Returns an action object used in signalling that the block with the
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
index 0a3484154e5a7..74c83d6018969 100644
--- a/packages/block-editor/src/store/private-actions.js
+++ b/packages/block-editor/src/store/private-actions.js
@@ -3,6 +3,14 @@
*/
import { Platform } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { blockTypePromptMessages } from '../components/block-removal-warning-modal';
+
+const castArray = ( maybeArray ) =>
+ Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
+
/**
* A list of private/experimental block editor settings that
* should not become a part of the WordPress public API.
@@ -105,3 +113,188 @@ export function unsetBlockEditingMode( clientId = '' ) {
clientId,
};
}
+
+/**
+ * Yields action objects used in signalling that the blocks corresponding to
+ * the set of specified client IDs are to be removed.
+ *
+ * Compared to `removeBlocks`, this private interface exposes an additional
+ * parameter; see `forceRemove`.
+ *
+ * @param {string|string[]} clientIds Client IDs of blocks to remove.
+ * @param {boolean} selectPrevious True if the previous block
+ * or the immediate parent
+ * (if no previous block exists)
+ * should be selected
+ * when a block is removed.
+ * @param {boolean} forceRemove Whether to force the operation,
+ * bypassing any checks for certain
+ * block types.
+ */
+export const privateRemoveBlocks =
+ ( clientIds, selectPrevious = true, forceRemove = false ) =>
+ ( { select, dispatch } ) => {
+ if ( ! clientIds || ! clientIds.length ) {
+ return;
+ }
+
+ clientIds = castArray( clientIds );
+ const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+ const canRemoveBlocks = select.canRemoveBlocks(
+ clientIds,
+ rootClientId
+ );
+
+ if ( ! canRemoveBlocks ) {
+ return;
+ }
+
+ // In certain editing contexts, we'd like to prevent accidental removal
+ // of important blocks. For example, in the site editor, the Query Loop
+ // block is deemed important. In such cases, we'll ask the user for
+ // confirmation that they intended to remove such block(s). However,
+ // the editor instance is responsible for presenting those confirmation
+ // prompts to the user. Any instance opting into removal prompts must
+ // register using `toggleRemovalPromptSupport()`.
+ //
+ // @see https://github.com/WordPress/gutenberg/pull/51145
+ if (
+ ! forceRemove &&
+ // FIXME: Without this existence check, the unit tests for
+ // `__experimentalDeleteReusableBlock` in
+ // `packages/reusable-blocks/src/store/test/actions.js` fail due to
+ // the fact that the `registry` object passed to the thunk actions
+ // doesn't include this private action. This needs to be
+ // investigated to understand whether it's a real smell or if it's
+ // because not all store code has been updated to accommodate
+ // private selectors.
+ select.isRemovalPromptSupported &&
+ select.isRemovalPromptSupported()
+ ) {
+ const blockNamesForPrompt = new Set();
+
+ // Given a list of client IDs of blocks that the user intended to
+ // remove, perform a tree search (BFS) to find all block names
+ // corresponding to "important" blocks, i.e. blocks that require a
+ // removal prompt.
+ //
+ // @see blockTypePromptMessages
+ const queue = [ ...clientIds ];
+ while ( queue.length ) {
+ const clientId = queue.shift();
+ const blockName = select.getBlockName( clientId );
+ if ( blockTypePromptMessages[ blockName ] ) {
+ blockNamesForPrompt.add( blockName );
+ }
+ const innerBlocks = select.getBlockOrder( clientId );
+ queue.push( ...innerBlocks );
+ }
+
+ // If any such blocks were found, trigger the removal prompt and
+ // skip any other steps (thus postponing actual removal).
+ if ( blockNamesForPrompt.size ) {
+ dispatch(
+ displayRemovalPrompt(
+ clientIds,
+ selectPrevious,
+ Array.from( blockNamesForPrompt )
+ )
+ );
+ return;
+ }
+ }
+
+ if ( selectPrevious ) {
+ dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
+ }
+
+ dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
+
+ // To avoid a focus loss when removing the last block, assure there is
+ // always a default block if the last of the blocks have been removed.
+ dispatch( ensureDefaultBlock() );
+ };
+
+/**
+ * Action which will insert a default block insert action if there
+ * are no other blocks at the root of the editor. This action should be used
+ * in actions which may result in no blocks remaining in the editor (removal,
+ * replacement, etc).
+ */
+export const ensureDefaultBlock =
+ () =>
+ ( { select, dispatch } ) => {
+ // To avoid a focus loss when removing the last block, assure there is
+ // always a default block if the last of the blocks have been removed.
+ const count = select.getBlockCount();
+ if ( count > 0 ) {
+ return;
+ }
+
+ // If there's an custom appender, don't insert default block.
+ // We have to remember to manually move the focus elsewhere to
+ // prevent it from being lost though.
+ const { __unstableHasCustomAppender } = select.getSettings();
+ if ( __unstableHasCustomAppender ) {
+ return;
+ }
+
+ dispatch.insertDefaultBlock();
+ };
+
+/**
+ * Returns an action object used in signalling that a block removal prompt must
+ * be displayed.
+ *
+ * Contrast with `toggleRemovalPromptSupport`.
+ *
+ * @param {string|string[]} clientIds Client IDs of blocks to remove.
+ * @param {boolean} selectPrevious True if the previous block
+ * or the immediate parent
+ * (if no previous block exists)
+ * should be selected
+ * when a block is removed.
+ * @param {string[]} blockNamesForPrompt Names of blocks requiring user
+ * @return {Object} Action object.
+ */
+export function displayRemovalPrompt(
+ clientIds,
+ selectPrevious,
+ blockNamesForPrompt
+) {
+ return {
+ type: 'DISPLAY_REMOVAL_PROMPT',
+ clientIds,
+ selectPrevious,
+ blockNamesForPrompt,
+ };
+}
+
+/**
+ * Returns an action object used in signalling that a block removal prompt must
+ * be cleared, either be cause the user has confirmed or canceled the request
+ * for removal.
+ *
+ * @return {Object} Action object.
+ */
+export function clearRemovalPrompt() {
+ return {
+ type: 'CLEAR_REMOVAL_PROMPT',
+ };
+}
+
+/**
+ * Returns an action object used in signalling that a removal prompt display
+ * mechanism is available or unavailable in the current editor.
+ *
+ * Contrast with `displayRemovalPrompt`.
+ *
+ * @param {boolean} status Whether a prompt display mechanism exists.
+ * @return {Object} Action object.
+ */
+export function toggleRemovalPromptSupport( status = true ) {
+ return {
+ type: 'TOGGLE_REMOVAL_PROMPT_SUPPORT',
+ status,
+ };
+}
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index a1ae32d560239..454f3f32ba8f7 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -185,3 +185,26 @@ export const getEnabledBlockParents = createSelector(
state.blockListSettings,
]
);
+
+/**
+ * Selector that returns the data needed to display a prompt when certain
+ * blocks are removed, or `false` if no such prompt is requested.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Object|false} Data for removal prompt display, if any.
+ */
+export function getRemovalPromptData( state ) {
+ return state.removalPromptData;
+}
+
+/**
+ * Returns true if removal prompt exists, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether removal prompt exists.
+ */
+export function isRemovalPromptSupported( state ) {
+ return state.isRemovalPromptSupported;
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index b851c0293c8f1..d23f5f3058978 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1469,6 +1469,48 @@ export function isSelectionEnabled( state = true, action ) {
return state;
}
+/**
+ * Reducer returning the data needed to display a prompt when certain blocks
+ * are removed, or `false` if no such prompt is requested.
+ *
+ * @param {boolean} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object|false} Data for removal prompt display, if any.
+ */
+function removalPromptData( state = false, action ) {
+ switch ( action.type ) {
+ case 'DISPLAY_REMOVAL_PROMPT':
+ const { clientIds, selectPrevious, blockNamesForPrompt } = action;
+ return {
+ clientIds,
+ selectPrevious,
+ blockNamesForPrompt,
+ };
+ case 'CLEAR_REMOVAL_PROMPT':
+ return false;
+ }
+
+ return state;
+}
+
+/**
+ * Reducer prompt availability state.
+ *
+ * @param {boolean} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isRemovalPromptSupported( state = false, action ) {
+ switch ( action.type ) {
+ case 'TOGGLE_REMOVAL_PROMPT_SUPPORT':
+ return action.status;
+ }
+
+ return state;
+}
+
/**
* Reducer returning the initial block selection.
*
@@ -1881,6 +1923,8 @@ const combinedReducers = combineReducers( {
temporarilyEditingAsBlocks,
blockVisibility,
blockEditingModes,
+ removalPromptData,
+ isRemovalPromptSupported,
} );
function withAutomaticChangeReset( reducer ) {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 6a62f50c2a2f7..05d00f65b1fd3 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2837,10 +2837,11 @@ export function __unstableGetTemporarilyEditingAsBlocks( state ) {
}
export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
- // Prevent overlay on disabled blocks. It's redundant since disabled blocks
- // can't be selected, and prevents non-disabled nested blocks from being
- // selected.
- if ( getBlockEditingMode( state, clientId ) === 'disabled' ) {
+ // Prevent overlay on blocks with a non-default editing mode. If the mdoe is
+ // 'disabled' then the overlay is redundant since the block can't be
+ // selected. If the mode is 'contentOnly' then the overlay is redundant
+ // since there will be no controls to interact with once selected.
+ if ( getBlockEditingMode( state, clientId ) !== 'default' ) {
return false;
}
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 91ccb7552f6b4..8d145f51d4a76 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -73,7 +73,8 @@
"memize": "^2.1.0",
"micromodal": "^0.4.10",
"preact": "^10.13.2",
- "remove-accents": "^0.4.2"
+ "remove-accents": "^0.4.2",
+ "uuid": "^8.3.0"
},
"peerDependencies": {
"react": "^18.0.0",
diff --git a/packages/block-library/src/footnotes/block.json b/packages/block-library/src/footnotes/block.json
new file mode 100644
index 0000000000000..0ab992009d123
--- /dev/null
+++ b/packages/block-library/src/footnotes/block.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "core/footnotes",
+ "title": "Footnotes",
+ "category": "text",
+ "description": "",
+ "keywords": [ "references" ],
+ "textdomain": "default",
+ "usesContext": [ "postId", "postType" ],
+ "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
new file mode 100644
index 0000000000000..e90a7f82be94a
--- /dev/null
+++ b/packages/block-library/src/footnotes/edit.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { useEntityProp } from '@wordpress/core-data';
+
+export default function FootnotesEdit( { context: { postType, postId } } ) {
+ const [ meta, updateMeta ] = useEntityProp(
+ 'postType',
+ postType,
+ 'meta',
+ postId
+ );
+ const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
+ return (
+
+ { footnotes.map( ( { id, content } ) => (
+
+ {
+ if ( ! event.target.textContent.trim() ) {
+ event.target.scrollIntoView();
+ }
+ } }
+ onChange={ ( nextFootnote ) => {
+ updateMeta( {
+ ...meta,
+ footnotes: JSON.stringify(
+ footnotes.map( ( footnote ) => {
+ return footnote.id === id
+ ? {
+ content: nextFootnote,
+ id,
+ }
+ : footnote;
+ } )
+ ),
+ } );
+ } }
+ />{ ' ' }
+ ↩︎
+
+ ) ) }
+
+ );
+}
diff --git a/packages/block-library/src/footnotes/format.js b/packages/block-library/src/footnotes/format.js
new file mode 100644
index 0000000000000..7c1b190fc42af
--- /dev/null
+++ b/packages/block-library/src/footnotes/format.js
@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { v4 as createId } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { formatListNumbered as icon } from '@wordpress/icons';
+import { insertObject } from '@wordpress/rich-text';
+import {
+ RichTextToolbarButton,
+ store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name } from './block.json';
+
+export const formatName = 'core/footnote';
+export const format = {
+ title: __( 'Footnote' ),
+ tagName: 'a',
+ className: 'fn',
+ attributes: {
+ id: 'id',
+ href: 'href',
+ 'data-fn': 'data-fn',
+ },
+ contentEditable: false,
+ edit: function Edit( { value, onChange, isObjectActive } ) {
+ const registry = useRegistry();
+ const {
+ getSelectedBlockClientId,
+ getBlockRootClientId,
+ getBlockName,
+ getBlocks,
+ } = useSelect( blockEditorStore );
+ const { selectionChange, insertBlock } =
+ useDispatch( blockEditorStore );
+ function onClick() {
+ registry.batch( () => {
+ const id = createId();
+ const newValue = insertObject(
+ value,
+ {
+ type: formatName,
+ attributes: {
+ href: '#' + id,
+ id: `${ id }-link`,
+ 'data-fn': id,
+ },
+ innerHTML: '*',
+ },
+ value.end,
+ value.end
+ );
+ newValue.start = newValue.end - 1;
+
+ onChange( newValue );
+
+ // BFS search to find the first footnote block.
+ let fnBlock = null;
+ {
+ const queue = [ ...getBlocks() ];
+ while ( queue.length ) {
+ const block = queue.shift();
+ if ( block.name === name ) {
+ fnBlock = block;
+ break;
+ }
+ queue.push( ...block.innerBlocks );
+ }
+ }
+
+ // Maybe this should all also be moved to the entity provider.
+ // When there is no footnotes block in the post, create one and
+ // insert it at the bottom.
+ if ( ! fnBlock ) {
+ const clientId = getSelectedBlockClientId();
+ let rootClientId = getBlockRootClientId( clientId );
+
+ while (
+ rootClientId &&
+ getBlockName( rootClientId ) !== 'core/post-content'
+ ) {
+ rootClientId = getBlockRootClientId( rootClientId );
+ }
+
+ fnBlock = createBlock( name );
+
+ insertBlock( fnBlock, undefined, rootClientId );
+ }
+
+ selectionChange( fnBlock.clientId, id, 0, 0 );
+ } );
+ }
+
+ return (
+ %2$s ↩︎ ',
+ $footnote['id'],
+ $footnote['content']
+ );
+ }
+
+ return sprintf(
+ '%2$s ',
+ $wrapper_attributes,
+ $block_content
+ );
+}
+
+/**
+ * Registers the `core/footnotes` block on the server.
+ */
+function register_block_core_footnotes() {
+ register_post_meta(
+ 'post',
+ 'footnotes',
+ array(
+ 'show_in_rest' => true,
+ 'single' => true,
+ 'type' => 'string',
+ )
+ );
+ register_block_type_from_metadata(
+ __DIR__ . '/footnotes',
+ array(
+ 'render_callback' => 'render_block_core_footnotes',
+ )
+ );
+}
+add_action( 'init', 'register_block_core_footnotes' );
diff --git a/packages/block-library/src/footnotes/style.scss b/packages/block-library/src/footnotes/style.scss
new file mode 100644
index 0000000000000..b5540b70e6f0f
--- /dev/null
+++ b/packages/block-library/src/footnotes/style.scss
@@ -0,0 +1,18 @@
+.editor-styles-wrapper,
+.entry-content {
+ counter-reset: footnotes;
+}
+
+.fn {
+ vertical-align: super;
+ font-size: smaller;
+ counter-increment: footnotes;
+ display: inline-block;
+ text-indent: -9999999px;
+}
+
+.fn::after {
+ content: "[" counter(footnotes) "]";
+ text-indent: 0;
+ float: left;
+}
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 8f4b785e57741..acf8d54efb127 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -144,7 +144,10 @@ function GalleryEdit( props ) {
const innerBlockImages = useSelect(
( select ) => {
- return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
+ const innerBlocks =
+ select( blockEditorStore ).getBlock( clientId )?.innerBlocks ??
+ [];
+ return innerBlocks;
},
[ clientId ]
);
diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
index ee156d806d4ba..b79bd7c3877c7 100644
--- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
+++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
@@ -110,6 +110,12 @@ exports[`Gallery block rearranges gallery items 1`] = `
"
`;
+exports[`Gallery block renders gallery block placeholder correctly if the block doesn't have inner blocks 1`] = `
+"
+
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index 37c3349957aad..a64b8bf403281 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -27,6 +27,8 @@ import {
requestImageFailedRetryDialog,
requestImageUploadCancelDialog,
} from '@wordpress/react-native-bridge';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { select } from '@wordpress/data';
/**
* Internal dependencies
@@ -75,6 +77,24 @@ describe( 'Gallery block', () => {
expect( getEditorHtml() ).toMatchSnapshot();
} );
+ it( "renders gallery block placeholder correctly if the block doesn't have inner blocks", async () => {
+ const getBlockSpy = jest
+ .spyOn( select( blockEditorStore ), 'getBlock' )
+ .mockReturnValue( {
+ innerBlocks: undefined,
+ attributes: {
+ content: '',
+ },
+ } );
+
+ const screen = await addGalleryBlock();
+
+ expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
+ expect( getEditorHtml() ).toMatchSnapshot();
+
+ getBlockSpy.mockReset();
+ } );
+
it( 'selects a gallery item', async () => {
const { galleryBlock } = await initializeWithGalleryBlock( {
numberOfItems: 1,
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index b551decdb00db..d9da5067f3625 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -10,6 +10,7 @@ import {
TextareaControl,
TextControl,
ToolbarButton,
+ ToolbarGroup,
} from '@wordpress/components';
import { useViewportMatch, usePrevious } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
@@ -175,14 +176,17 @@ export default function Image( {
if (
! isExternalImage( id, url ) ||
! isSelected ||
- ! canUploadMedia ||
- externalBlob
+ ! canUploadMedia
) {
+ setExternalBlob();
return;
}
+ if ( externalBlob ) return;
+
window
- .fetch( url )
+ // Avoid cache, which seems to help avoid CORS problems.
+ .fetch( url.includes( '?' ) ? url : url + '?' )
.then( ( response ) => response.blob() )
.then( ( blob ) => setExternalBlob( blob ) )
// Do nothing, cannot upload.
@@ -370,13 +374,6 @@ export default function Image( {
label={ __( 'Crop' ) }
/>
) }
- { externalBlob && (
-
+
+
+
+ ) }
{ ! multiImageSelection && (
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 73c2f1eb1140a..2b4a0f2fb95f2 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -116,6 +116,7 @@ import * as termDescription from './term-description';
import * as textColumns from './text-columns';
import * as verse from './verse';
import * as video from './video';
+import * as footnotes from './footnotes';
import isBlockMetadataExperimental from './utils/is-block-metadata-experimental';
@@ -176,6 +177,7 @@ const getAllBlocks = () => {
textColumns,
verse,
video,
+ footnotes,
// theme blocks
navigation,
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 4a6a6fe6b4395..107fb6e6de5fd 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -503,30 +503,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
left: 0;
}
-// Without this, the block cannot be selected, nor does the right container get focus.
-// @todo: this is disruptive. Ideally we can retire a few of the containers,
-// so focus is applied naturally on the block container.
-// It's important the right container has focus, otherwise you can't press
-// "Delete" to remove the block.
-.wp-block-navigation:not(.is-editing-disabled) {
- .wp-block-navigation__responsive-container,
- .wp-block-navigation__responsive-close {
- @include break-small() {
- pointer-events: none;
-
- .wp-block-navigation__responsive-container-close,
- .block-editor-block-list__layout * {
- pointer-events: all;
- }
- }
-
- // Page List items should remain inert.
- .wp-block-pages-list__item__link {
- pointer-events: none;
- }
- }
-}
-
// The menu and close buttons need higher specificity in the editor.
.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index c5277995d10da..c4b0a37e6354d 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -55,5 +55,6 @@
@import "./text-columns/style.scss";
@import "./verse/style.scss";
@import "./video/style.scss";
+@import "./footnotes/style.scss";
@import "common.scss";
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 3300e0893d245..fff687767b7fa 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -81,12 +81,14 @@ const innerBlocksPropsProvider = {};
*/
export function getBlockProps( props = {} ) {
const { blockType, attributes } = blockPropsProvider;
- return applyFilters(
- 'blocks.getSaveContent.extraProps',
- { ...props },
- blockType,
- attributes
- );
+ return getBlockProps.skipFilters
+ ? props
+ : applyFilters(
+ 'blocks.getSaveContent.extraProps',
+ { ...props },
+ blockType,
+ attributes
+ );
}
/**
@@ -96,6 +98,12 @@ export function getBlockProps( props = {} ) {
*/
export function getInnerBlocksProps( props = {} ) {
const { innerBlocks } = innerBlocksPropsProvider;
+ const [ firstBlock ] = innerBlocks ?? [];
+ if ( ! firstBlock ) return props;
+ // If the innerBlocks passed to `getSaveElement` are not blocks but already
+ // components, return the props as is. This is the case for
+ // `getRichTextValues`.
+ if ( ! firstBlock.clientId ) return { ...props, children: innerBlocks };
// Value is an array of blocks, so defer to block serializer.
const html = serialize( innerBlocks, { isInnerBlocks: true } );
// Use special-cased raw HTML tag to avoid default escaping.
@@ -120,6 +128,9 @@ export function getSaveElement(
innerBlocks = []
) {
const blockType = normalizeBlockType( blockTypeOrName );
+
+ if ( ! blockType?.save ) return null;
+
let { save } = blockType;
// Component classes are unsupported for save since serialization must
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2759cc629a336..f33d32ed89497 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -12,12 +12,17 @@
- `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
- `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)).
+- `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
### Internal
- `ClipboardButton`: Convert to TypeScript ([#51334](https://github.com/WordPress/gutenberg/pull/51334)).
- `Toolbar`: Replace `reakit` dependency with `@ariakit/react` ([#51623](https://github.com/WordPress/gutenberg/pull/51623)).
+### Documentation
+
+- `SearchControl`: Improve documentation around usage of `label` prop ([#51781](https://github.com/WordPress/gutenberg/pull/51781)).
+
## 25.1.0 (2023-06-07)
### Enhancements
diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
index e5bfe61d265bb..663316c39b32e 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.tsx
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -13,7 +13,9 @@ import {
useState,
} from '@wordpress/element';
import { useAnchor } from '@wordpress/rich-text';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { __, _n, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -23,7 +25,7 @@ import Button from '../button';
import Popover from '../popover';
import { VisuallyHidden } from '../visually-hidden';
import { createPortal } from 'react-dom';
-import type { AutocompleterUIProps, WPCompleter } from './types';
+import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
export function getAutoCompleterUI( autocompleter: WPCompleter ) {
const useItems = autocompleter.useItems
@@ -69,8 +71,48 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
useOnClickOutside( popoverRef, reset );
+ const debouncedSpeak = useDebounce( speak, 500 );
+
+ function announce( options: Array< KeyedOption > ) {
+ if ( ! debouncedSpeak ) {
+ return;
+ }
+ if ( !! options.length ) {
+ if ( filterValue ) {
+ debouncedSpeak(
+ sprintf(
+ /* translators: %d: number of results. */
+ _n(
+ '%d result found, use up and down arrow keys to navigate.',
+ '%d results found, use up and down arrow keys to navigate.',
+ options.length
+ ),
+ options.length
+ ),
+ 'assertive'
+ );
+ } else {
+ debouncedSpeak(
+ sprintf(
+ /* translators: %d: number of results. */
+ _n(
+ 'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+ 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+ options.length
+ ),
+ options.length
+ ),
+ 'assertive'
+ );
+ }
+ } else {
+ debouncedSpeak( __( 'No results.' ), 'assertive' );
+ }
+ }
+
useLayoutEffect( () => {
onChangeOptions( items );
+ announce( items );
// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
// See https://github.com/WordPress/gutenberg/pull/41820
// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
index af9625d645915..7825526fe34a5 100644
--- a/packages/components/src/autocomplete/index.tsx
+++ b/packages/components/src/autocomplete/index.tsx
@@ -13,13 +13,8 @@ import {
useRef,
useMemo,
} from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import {
- useInstanceId,
- useDebounce,
- useMergeRefs,
- useRefEffect,
-} from '@wordpress/compose';
+import { __, _n } from '@wordpress/i18n';
+import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
import {
create,
slice,
@@ -27,7 +22,6 @@ import {
isCollapsed,
getTextContent,
} from '@wordpress/rich-text';
-import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
@@ -54,7 +48,6 @@ export function useAutocomplete( {
completers,
contentRef,
}: UseAutocompleteProps ) {
- const debouncedSpeak = useDebounce( speak, 500 );
const instanceId = useInstanceId( useAutocomplete );
const [ selectedIndex, setSelectedIndex ] = useState( 0 );
@@ -137,28 +130,6 @@ export function useAutocomplete( {
setAutocompleterUI( null );
}
- function announce( options: Array< KeyedOption > ) {
- if ( ! debouncedSpeak ) {
- return;
- }
- if ( !! options.length ) {
- debouncedSpeak(
- sprintf(
- /* translators: %d: number of results. */
- _n(
- '%d result found, use up and down arrow keys to navigate.',
- '%d results found, use up and down arrow keys to navigate.',
- options.length
- ),
- options.length
- ),
- 'assertive'
- );
- } else {
- debouncedSpeak( __( 'No results.' ), 'assertive' );
- }
- }
-
/**
* Load options for an autocompleter.
*
@@ -169,7 +140,6 @@ export function useAutocomplete( {
options.length === filteredOptions.length ? selectedIndex : 0
);
setFilteredOptions( options );
- announce( options );
}
function handleKeyDown( event: KeyboardEvent ) {
diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md
index 49d28a4e623e5..6f79d6cd9efd9 100644
--- a/packages/components/src/search-control/README.md
+++ b/packages/components/src/search-control/README.md
@@ -15,6 +15,7 @@ SearchControl components let users display a search control.
Render a user interface to input the name of an additional css class.
```jsx
+import { __ } from '@wordpress/i18n';
import { SearchControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
@@ -23,6 +24,7 @@ function MySearchControl( { className, setState } ) {
return (
-
+
diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
index dfbcd1ca2a966..32ab28944ecb1 100644
--- a/packages/edit-site/src/components/page-library/patterns-list.js
+++ b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -66,6 +66,7 @@ export default function PatternsList( { categoryId, type } ) {
className="edit-site-library__search"
onChange={ ( value ) => setFilterValue( value ) }
placeholder={ __( 'Search patterns' ) }
+ label={ __( 'Search patterns' ) }
value={ filterValue }
__nextHasNoMarginBottom
/>
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
index c0c48ff65b056..d2f2a4f9c0881 100644
--- a/packages/edit-site/src/components/page/index.js
+++ b/packages/edit-site/src/components/page/index.js
@@ -3,6 +3,11 @@
*/
import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { NavigableRegion } from '@wordpress/interface';
+
/**
* Internal dependencies
*/
@@ -14,12 +19,13 @@ export default function Page( {
actions,
children,
className,
+ hideTitleFromUI = false,
} ) {
const classes = classnames( 'edit-site-page', className );
return (
-
- { title && (
+
+ { ! hideTitleFromUI && title && (
) }
{ children }
-
-
-
- { addedBy.imageUrl ? (
-
- { addedBy.text }
-
-
- { addedBy.isCustomized && (
-
- { _x( '(Customized)', 'pattern' ) }
-
- ) }
-
- ) }
-
- );
-
- return { title, description };
-}
+import { unlock } from '../../lock-unlock';
export default function SidebarNavigationScreenPattern() {
const { params } = useNavigator();
@@ -94,14 +24,11 @@ export default function SidebarNavigationScreenPattern() {
useInitEditedEntityFromURL();
- const { title, description } = usePatternTitleAndDescription(
- postType,
- postId
- );
+ const patternDetails = usePatternDetails( postType, postId );
+ const content = useNavigationMenuContent( postType, postId );
return (
setCanvasMode( 'edit' ) }
@@ -110,7 +37,8 @@ export default function SidebarNavigationScreenPattern() {
/>
}
backPath={ '/library' }
- description={ description }
+ content={ content }
+ { ...patternDetails }
/>
);
}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
new file mode 100644
index 0000000000000..b685c766107a3
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLink } from '../routes/link';
+
+export default function TemplatePartNavigationMenuListItem( { id } ) {
+ const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+
+ const linkInfo = useLink( {
+ postId: id,
+ postType: 'wp_navigation',
+ } );
+
+ if ( ! id ) return null;
+
+ return (
+
+ { title || __( '(no title)' ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js
new file mode 100644
index 0000000000000..4171b1e782575
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item';
+
+export default function TemplatePartNavigationMenuList( { menus } ) {
+ return (
+
+ { menus.map( ( menuId ) => (
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
new file mode 100644
index 0000000000000..f451c17e00adb
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
+
+export default function TemplatePartNavigationMenu( { id } ) {
+ const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+
+ if ( ! id ) return null;
+
+ return (
+ <>
+
+ { title?.rendered || __( 'Navigation' ) }
+
+
+ { __( 'Navigation' ) }
+
+
+
+
+ { addedBy.imageUrl ? (
+
+ { addedBy.text }
+
+
+ { addedBy.isCustomized && (
+
+ { _x( '(Customized)', 'pattern' ) }
+
+ ) }
+
+ ) }
+
+ );
+
+ const footer = !! record?.modified ? (
+ ( state ) => {
+ if ( typeof state.blockInserterPanel === 'object' ) {
+ const { rootClientId, insertionIndex, filterValue } =
+ state.blockInserterPanel;
+ return { rootClientId, insertionIndex, filterValue };
+ }
+
+ if ( hasPageContentFocus( state ) ) {
+ const [ postContentClientId ] =
+ select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+ 'core/post-content'
+ );
+ if ( postContentClientId ) {
+ return {
+ rootClientId: postContentClientId,
+ insertionIndex: undefined,
+ filterValue: undefined,
+ };
+ }
+ }
+
+ return {
+ rootClientId: undefined,
+ insertionIndex: undefined,
+ filterValue: undefined,
+ };
+ }
+);
/**
* Returns the current opened/closed state of the list view panel.
diff --git a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js
index 7add778094c52..dff0ac57f78c1 100644
--- a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js
@@ -70,7 +70,7 @@ function KeyboardShortcuts() {
} );
useShortcut(
- 'core/edit-widgets//transform-heading-to-paragraph',
+ 'core/edit-widgets/transform-heading-to-paragraph',
( event ) => handleTextLevelShortcut( event, 0 )
);
@@ -79,7 +79,7 @@ function KeyboardShortcuts() {
//the hook will execute the same way every time
//eslint-disable-next-line react-hooks/rules-of-hooks
useShortcut(
- `core/edit-widgets//transform-paragraph-to-heading-${ level }`,
+ `core/edit-widgets/transform-paragraph-to-heading-${ level }`,
( event ) => handleTextLevelShortcut( event, level )
);
} );
@@ -180,7 +180,7 @@ function KeyboardShortcutsRegister() {
} );
registerShortcut( {
- name: `core/edit-widgets//transform-heading-to-paragraph`,
+ name: 'core/edit-widgets/transform-heading-to-paragraph',
category: 'block-library',
description: __( 'Transform heading to paragraph.' ),
keyCombination: {
@@ -191,7 +191,7 @@ function KeyboardShortcutsRegister() {
[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
registerShortcut( {
- name: `core/edit-widgets//transform-paragraph-to-heading-${ level }`,
+ name: `core/edit-widgets/transform-paragraph-to-heading-${ level }`,
category: 'block-library',
description: __( 'Transform paragraph to heading.' ),
keyCombination: {
diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
new file mode 100644
index 0000000000000..0097b3f0ea741
--- /dev/null
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ PanelBody,
+ Button,
+ Spinner,
+ __unstableMotion as motion,
+ __unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { upload } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+function flattenBlocks( blocks ) {
+ const result = [];
+
+ blocks.forEach( ( block ) => {
+ result.push( block );
+ result.push( ...flattenBlocks( block.innerBlocks ) );
+ } );
+
+ return result;
+}
+
+function Image( block ) {
+ const { selectBlock } = useDispatch( blockEditorStore );
+ return (
+ {
+ selectBlock( block.clientId );
+ } }
+ onKeyDown={ ( event ) => {
+ if ( event.key === 'Enter' || event.key === ' ' ) {
+ selectBlock( block.clientId );
+ event.preventDefault();
+ }
+ } }
+ key={ block.clientId }
+ alt={ block.attributes.alt }
+ src={ block.attributes.url }
+ animate={ { opacity: 1 } }
+ exit={ { opacity: 0, scale: 0 } }
+ style={ {
+ width: '36px',
+ height: '36px',
+ objectFit: 'cover',
+ borderRadius: '2px',
+ cursor: 'pointer',
+ } }
+ whileHover={ { scale: 1.08 } }
+ />
+ );
+}
+
+export default function PostFormatPanel() {
+ const [ isUploading, setIsUploading ] = useState( false );
+ const { editorBlocks, mediaUpload } = useSelect(
+ ( select ) => ( {
+ editorBlocks: select( editorStore ).getEditorBlocks(),
+ mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
+ } ),
+ []
+ );
+ const externalImages = flattenBlocks( editorBlocks ).filter(
+ ( block ) =>
+ block.name === 'core/image' &&
+ block.attributes.url &&
+ ! block.attributes.id
+ );
+ const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+ if ( ! mediaUpload || ! externalImages.length ) {
+ return null;
+ }
+
+ const panelBodyTitle = [
+ __( 'Suggestion:' ),
+
+ { __( 'External media' ) }
+ ,
+ ];
+
+ function uploadImages() {
+ setIsUploading( true );
+ Promise.all(
+ externalImages.map( ( image ) =>
+ window
+ .fetch(
+ image.attributes.url.includes( '?' )
+ ? image.attributes.url
+ : image.attributes.url + '?'
+ )
+ .then( ( response ) => response.blob() )
+ .then(
+ ( blob ) =>
+ new Promise( ( resolve, reject ) => {
+ mediaUpload( {
+ filesList: [ blob ],
+ onFileChange: ( [ media ] ) => {
+ if ( isBlobURL( media.url ) ) {
+ return;
+ }
+
+ updateBlockAttributes( image.clientId, {
+ id: media.id,
+ url: media.url,
+ } );
+ resolve();
+ },
+ onError() {
+ reject();
+ },
+ } );
+ } )
+ )
+ )
+ ).finally( () => {
+ setIsUploading( false );
+ } );
+ }
+
+ return (
+
+
+ { __(
+ 'There are some external images in the post which can be uploaded to the media library. Images coming from different domains may not always display correctly, load slowly for visitors, or be removed unexpectedly.'
+ ) }
+
+
+
+ { externalImages.map( ( image ) => {
+ return
+ { isUploading ? (
+
+ ) : (
+
+ { __( 'Upload all' ) }
+
+ ) }
+
+ );
+}
diff --git a/packages/editor/src/components/post-publish-panel/prepublish.js b/packages/editor/src/components/post-publish-panel/prepublish.js
index 656272bf64bef..193960b9cc834 100644
--- a/packages/editor/src/components/post-publish-panel/prepublish.js
+++ b/packages/editor/src/components/post-publish-panel/prepublish.js
@@ -20,6 +20,7 @@ import MaybeTagsPanel from './maybe-tags-panel';
import MaybePostFormatPanel from './maybe-post-format-panel';
import { store as editorStore } from '../../store';
import MaybeCategoryPanel from './maybe-category-panel';
+import MaybeUploadMedia from './maybe-upload-media';
function PostPublishPanelPrepublish( { children } ) {
const {
@@ -103,6 +104,7 @@ function PostPublishPanelPrepublish( { children } ) {
{ siteHome }
+ .components-spinner {
display: block;
margin: 100px auto 0;
}
diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js
index c12b431c4ceef..31936fba5ad51 100644
--- a/packages/private-apis/src/implementation.js
+++ b/packages/private-apis/src/implementation.js
@@ -16,6 +16,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
'@wordpress/commands',
'@wordpress/components',
'@wordpress/core-commands',
+ '@wordpress/core-data',
'@wordpress/customize-widgets',
'@wordpress/data',
'@wordpress/edit-post',
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index c8203fdd73c40..e02cd4f428b67 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -130,11 +130,11 @@ export default function ReusableBlockConvertButton( {
icon={ symbol }
onClick={ () => setIsModalOpen( true ) }
>
- { __( 'Create a Pattern' ) }
+ { __( 'Create pattern' ) }
{ isModalOpen && (
{
setIsModalOpen( false );
setTitle( '' );
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
index 8e8d1fa8f1ffe..a0f21ed50df8b 100644
--- a/packages/rich-text/src/component/index.js
+++ b/packages/rich-text/src/component/index.js
@@ -99,6 +99,7 @@ export function useRichText( {
const hadSelectionUpdate = useRef( false );
if ( ! record.current ) {
+ hadSelectionUpdate.current = isSelected;
setRecordFromProps();
// Sometimes formats are added programmatically and we need to make
// sure it's persisted to the block store / markup. If these formats
diff --git a/packages/rich-text/src/component/use-boundary-style.js b/packages/rich-text/src/component/use-boundary-style.js
index 214fd6862c173..9f29b24e3ecc6 100644
--- a/packages/rich-text/src/component/use-boundary-style.js
+++ b/packages/rich-text/src/component/use-boundary-style.js
@@ -9,11 +9,15 @@ import { useEffect, useRef } from '@wordpress/element';
*/
export function useBoundaryStyle( { record } ) {
const ref = useRef();
- const { activeFormats = [] } = record.current;
+ const { activeFormats = [], replacements, start } = record.current;
+ const activeReplacement = replacements[ start ];
useEffect( () => {
// There's no need to recalculate the boundary styles if no formats are
// active, because no boundary styles will be visible.
- if ( ! activeFormats || ! activeFormats.length ) {
+ if (
+ ( ! activeFormats || ! activeFormats.length ) &&
+ ! activeReplacement
+ ) {
return;
}
@@ -46,6 +50,6 @@ export function useBoundaryStyle( { record } ) {
if ( globalStyle.innerHTML !== style ) {
globalStyle.innerHTML = style;
}
- }, [ activeFormats ] );
+ }, [ activeFormats, activeReplacement ] );
return ref;
}
diff --git a/packages/rich-text/src/component/use-copy-handler.js b/packages/rich-text/src/component/use-copy-handler.js
index 6093b615a7727..45a7e1e0cfb8e 100644
--- a/packages/rich-text/src/component/use-copy-handler.js
+++ b/packages/rich-text/src/component/use-copy-handler.js
@@ -19,9 +19,10 @@ export function useCopyHandler( props ) {
function onCopy( event ) {
const { record, multilineTag, preserveWhiteSpace } =
propsRef.current;
+ const { ownerDocument } = element;
if (
isCollapsed( record.current ) ||
- ! element.contains( element.ownerDocument.activeElement )
+ ! element.contains( ownerDocument.activeElement )
) {
return;
}
@@ -41,11 +42,17 @@ export function useCopyHandler( props ) {
multilineTag || ''
);
event.preventDefault();
+
+ if ( event.type === 'cut' ) {
+ ownerDocument.execCommand( 'delete' );
+ }
}
element.addEventListener( 'copy', onCopy );
+ element.addEventListener( 'cut', onCopy );
return () => {
element.removeEventListener( 'copy', onCopy );
+ element.removeEventListener( 'cut', onCopy );
};
}, [] );
}
diff --git a/packages/rich-text/src/component/use-select-object.js b/packages/rich-text/src/component/use-select-object.js
index 0866815be1575..9ecc7ed9f147c 100644
--- a/packages/rich-text/src/component/use-select-object.js
+++ b/packages/rich-text/src/component/use-select-object.js
@@ -9,23 +9,46 @@ export function useSelectObject() {
const { target } = event;
// If the child element has no text content, it must be an object.
- if ( target === element || target.textContent ) {
+ if (
+ target === element ||
+ ( target.textContent && target.isContentEditable )
+ ) {
return;
}
const { ownerDocument } = target;
const { defaultView } = ownerDocument;
- const range = ownerDocument.createRange();
const selection = defaultView.getSelection();
+ // If it's already selected, do nothing and let default behavior
+ // happen. This means it's "click-through".
+ if ( selection.containsNode( target ) ) return;
+
+ const range = ownerDocument.createRange();
+
range.selectNode( target );
selection.removeAllRanges();
selection.addRange( range );
+
+ event.preventDefault();
+ }
+
+ function onFocusIn( event ) {
+ // When there is incoming focus from a link, select the object.
+ if (
+ event.relatedTarget &&
+ ! element.contains( event.relatedTarget ) &&
+ event.relatedTarget.tagName === 'A'
+ ) {
+ onClick( event );
+ }
}
element.addEventListener( 'click', onClick );
+ element.addEventListener( 'focusin', onFocusIn );
return () => {
element.removeEventListener( 'click', onClick );
+ element.removeEventListener( 'focusin', onFocusIn );
};
}, [] );
}
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index 863e6b984cc79..fa2befc603b7e 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -62,7 +62,7 @@ function toFormat( { tagName, attributes } ) {
}
if ( ! attributes ) {
- return { type: formatType.name, tagName };
+ return { formatType, type: formatType.name, tagName };
}
const registeredAttributes = {};
@@ -95,7 +95,12 @@ function toFormat( { tagName, attributes } ) {
unregisteredAttributes[ name ] = attributes[ name ];
}
+ if ( formatType.contentEditable === false ) {
+ delete unregisteredAttributes.contenteditable;
+ }
+
return {
+ formatType,
type: formatType.name,
tagName,
attributes: registeredAttributes,
@@ -419,6 +424,26 @@ function createFromElement( {
attributes: getAttributes( { element: node } ),
} );
+ // When a format type is declared as not editable, replace it with an
+ // object replacement character and preserve the inner HTML.
+ if ( format?.formatType?.contentEditable === false ) {
+ delete format.formatType;
+ accumulateSelection( accumulator, node, range, createEmptyValue() );
+ mergePair( accumulator, {
+ formats: [ , ],
+ replacements: [
+ {
+ ...format,
+ innerHTML: node.innerHTML,
+ },
+ ],
+ text: OBJECT_REPLACEMENT_CHARACTER,
+ } );
+ continue;
+ }
+
+ if ( format ) delete format.formatType;
+
if (
multilineWrapperTags &&
multilineWrapperTags.indexOf( tagName ) !== -1
diff --git a/packages/rich-text/src/test/helpers/index.js b/packages/rich-text/src/test/helpers/index.js
index 15aa032978c66..ae7521e55e25b 100644
--- a/packages/rich-text/src/test/helpers/index.js
+++ b/packages/rich-text/src/test/helpers/index.js
@@ -912,4 +912,29 @@ export const specWithRegistration = [
text: 'a',
},
},
+ {
+ description: 'should be non editable',
+ formatName: 'my-plugin/non-editable',
+ formatType: {
+ title: 'Non Editable',
+ tagName: 'a',
+ className: 'non-editable',
+ contentEditable: false,
+ edit() {},
+ },
+ html: 'a ',
+ value: {
+ formats: [ , ],
+ replacements: [
+ {
+ type: 'my-plugin/non-editable',
+ tagName: 'a',
+ attributes: {},
+ unregisteredAttributes: {},
+ innerHTML: 'a',
+ },
+ ],
+ text: OBJECT_REPLACEMENT_CHARACTER,
+ },
+ },
];
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
index 74cc08581e83c..805b539053a57 100644
--- a/packages/rich-text/src/to-tree.js
+++ b/packages/rich-text/src/to-tree.js
@@ -101,6 +101,12 @@ function fromFormat( {
}
}
+ // When a format is declared as non editable, make it non editable in the
+ // editor.
+ if ( isEditableTree && formatType.contentEditable === false ) {
+ elementAttributes.contenteditable = 'false';
+ }
+
return {
type: formatType.tagName === '*' ? tagName : formatType.tagName,
object: formatType.object,
@@ -291,7 +297,12 @@ export function toTree( {
}
if ( character === OBJECT_REPLACEMENT_CHARACTER ) {
- if ( ! isEditableTree && replacements[ i ]?.type === 'script' ) {
+ const replacement = replacements[ i ];
+ if ( ! replacement ) continue;
+ const { type, attributes, innerHTML } = replacement;
+ const formatType = getFormatType( type );
+
+ if ( ! isEditableTree && type === 'script' ) {
pointer = append(
getParent( pointer ),
fromFormat( {
@@ -301,14 +312,26 @@ export function toTree( {
);
append( pointer, {
html: decodeURIComponent(
- replacements[ i ].attributes[ 'data-rich-text-script' ]
+ attributes[ 'data-rich-text-script' ]
),
} );
+ } else if ( formatType?.contentEditable === false ) {
+ // For non editable formats, render the stored inner HTML.
+ pointer = append(
+ getParent( pointer ),
+ fromFormat( {
+ ...replacement,
+ isEditableTree,
+ boundaryClass: start === i && end === i + 1,
+ } )
+ );
+
+ if ( innerHTML ) append( pointer, innerHTML );
} else {
pointer = append(
getParent( pointer ),
fromFormat( {
- ...replacements[ i ],
+ ...replacement,
object: true,
isEditableTree,
} )
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index f9fe9398e5d82..5f802d0e85063 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -825,6 +825,52 @@ test.describe( 'Image', () => {
await expect( linkDom ).toBeVisible();
await expect( linkDom ).toHaveAttribute( 'href', url );
} );
+
+ test( 'should upload external image', async ( { editor } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ url: 'https://cldup.com/cXyG__fTLN.jpg',
+ },
+ } );
+
+ await editor.clickBlockToolbarButton( 'Upload external image' );
+
+ const imageBlock = editor.canvas.locator(
+ 'role=document[name="Block: Image"i]'
+ );
+ const image = imageBlock.locator( 'img[src^="http"]' );
+ const src = await image.getAttribute( 'src' );
+
+ expect( src ).toMatch( /\/wp-content\/uploads\// );
+ } );
+
+ test( 'should upload through prepublish panel', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ url: 'https://cldup.com/cXyG__fTLN.jpg',
+ },
+ } );
+
+ await page
+ .getByRole( 'button', { name: 'Publish', exact: true } )
+ .click();
+ await page.getByRole( 'button', { name: 'Upload all' } ).click();
+
+ await expect( page.locator( '.components-spinner' ) ).toHaveCount( 0 );
+
+ const imageBlock = editor.canvas.locator(
+ 'role=document[name="Block: Image"i]'
+ );
+ const image = imageBlock.locator( 'img[src^="http"]' );
+ const src = await image.getAttribute( 'src' );
+
+ expect( src ).toMatch( /\/wp-content\/uploads\// );
+ } );
} );
test.describe( 'Image - interactivity', () => {
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
index 835b05e570e99..67b48d528adc7 100644
--- a/test/e2e/specs/editor/blocks/navigation.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -62,7 +62,7 @@ test.describe( 'Navigation block', () => {
const createdMenu = await requestUtils.createNavigationMenu( {
title: 'Test Menu 1',
content:
- '',
+ '',
} );
await editor.insertBlock( { name: 'core/navigation' } );
@@ -138,7 +138,7 @@ test.describe( 'Navigation block', () => {
await requestUtils.createNavigationMenu( {
title: 'Test Menu 1',
content:
- '',
+ '',
} );
//FIXME this is needed because if the two menus are created at the same time, the API will return them in the wrong order.
@@ -148,7 +148,7 @@ test.describe( 'Navigation block', () => {
const latestMenu = await requestUtils.createNavigationMenu( {
title: 'Test Menu 2',
content:
- '',
+ '',
} );
await editor.insertBlock( { name: 'core/navigation' } );
@@ -250,7 +250,7 @@ test.describe( 'Navigation block', () => {
await requestUtils.createNavigationMenu( {
title: 'Test Menu',
content:
- '',
+ '',
} );
await editor.insertBlock( { name: 'core/navigation' } );
@@ -960,8 +960,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
await requestUtils.createNavigationMenu( {
title: 'Hidden menu',
content: `
-
-
+
+
`,
} );
await editor.insertBlock( {
@@ -1023,18 +1023,18 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
await requestUtils.createNavigationMenu( {
title: 'Hidden menu',
content: `
-
+
-
+
-
+
-
+
-
+
-
+
`,
} );
await editor.insertBlock( {
@@ -1142,9 +1142,9 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
title: 'Hidden menu',
content: `
-
+
-
+
`,
@@ -1207,7 +1207,7 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
title: 'Page list menu',
content: `
-
+
`,
} );
await editor.insertBlock( {
diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
index 0176fb45982db..53b2940fe6c75 100644
--- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
+++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
@@ -475,4 +475,32 @@ test.describe( 'Autocomplete (@firefox, @webkit)', () => {
page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
).not.toBeVisible();
} );
+
+ test( 'should allow speaking number of initial results', async ( {
+ page,
+ editor,
+ } ) => {
+ await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await page.keyboard.type( '/' );
+ await expect(
+ page.locator( `role=option[name="Image"i]` )
+ ).toBeVisible();
+ // Get the assertive live region screen reader announcement.
+ await expect(
+ page.getByText(
+ 'Initial 9 results loaded. Type to filter all available results. Use up and down arrow keys to navigate.'
+ )
+ ).toBeVisible();
+
+ await page.keyboard.type( 'heading' );
+ await expect(
+ page.locator( `role=option[name="Heading"i]` )
+ ).toBeVisible();
+ // Get the assertive live region screen reader announcement.
+ await expect(
+ page.getByText(
+ '2 results found, use up and down arrow keys to navigate.'
+ )
+ ).toBeVisible();
+ } );
} );
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
new file mode 100644
index 0000000000000..63480bd11521c
--- /dev/null
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function getFootnotes( page ) {
+ // Save post so we can check meta.
+ await page.click( 'button:text("Save draft")' );
+ await page.waitForSelector( 'button:text("Saved")' );
+ const footnotes = await page.evaluate( () => {
+ return window.wp.data
+ .select( 'core' )
+ .getEntityRecord(
+ 'postType',
+ 'post',
+ window.wp.data.select( 'core/editor' ).getCurrentPostId()
+ ).meta.footnotes;
+ } );
+ return JSON.parse( footnotes );
+}
+
+test.describe( 'Footnotes', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test( 'can be inserted', async ( { editor, page } ) => {
+ await editor.canvas.click( 'role=button[name="Add default block"i]' );
+ await page.keyboard.type( 'first paragraph' );
+ await page.keyboard.press( 'Enter' );
+ await page.keyboard.type( 'second paragraph' );
+
+ await editor.showBlockToolbar();
+ await editor.clickBlockToolbarButton( 'More' );
+ await page.locator( 'button:text("Footnote")' ).click();
+
+ await page.keyboard.type( 'first footnote' );
+
+ const id1 = await editor.canvas.evaluate( () => {
+ return document.activeElement.id;
+ } );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: { content: 'first paragraph' },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `second paragraph* `,
+ },
+ },
+ {
+ name: 'core/footnotes',
+ },
+ ] );
+
+ await editor.canvas.click( 'p:text("first paragraph")' );
+
+ await editor.showBlockToolbar();
+ await editor.clickBlockToolbarButton( 'More' );
+ await page.locator( 'button:text("Footnote")' ).click();
+
+ await page.keyboard.type( 'second footnote' );
+
+ const id2 = await editor.canvas.evaluate( () => {
+ return document.activeElement.id;
+ } );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `first paragraph* `,
+ },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `second paragraph* `,
+ },
+ },
+ {
+ name: 'core/footnotes',
+ },
+ ] );
+
+ expect( await getFootnotes( page ) ).toMatchObject( [
+ {
+ content: 'second footnote',
+ id: id2,
+ },
+ {
+ content: 'first footnote',
+ id: id1,
+ },
+ ] );
+
+ await editor.canvas.click( 'p:text("first paragraph")' );
+
+ await editor.showBlockToolbar();
+ await editor.clickBlockToolbarButton( 'Move down' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `second paragraph* `,
+ },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `first paragraph* `,
+ },
+ },
+ {
+ name: 'core/footnotes',
+ },
+ ] );
+
+ expect( await getFootnotes( page ) ).toMatchObject( [
+ {
+ content: 'first footnote',
+ id: id1,
+ },
+ {
+ content: 'second footnote',
+ id: id2,
+ },
+ ] );
+
+ await editor.canvas.click( `a[href="#${ id2 }-link"]` );
+ await page.keyboard.press( 'Backspace' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `second paragraph* `,
+ },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `first paragraph`,
+ },
+ },
+ {
+ name: 'core/footnotes',
+ },
+ ] );
+
+ expect( await getFootnotes( page ) ).toMatchObject( [
+ {
+ content: 'first footnote',
+ id: id1,
+ },
+ ] );
+
+ await editor.canvas.click( `a[href="#${ id1 }-link"]` );
+ await page.keyboard.press( 'Backspace' );
+
+ expect( await editor.getBlocks() ).toMatchObject( [
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `second paragraph`,
+ },
+ },
+ {
+ name: 'core/paragraph',
+ attributes: {
+ content: `first paragraph`,
+ },
+ },
+ {
+ name: 'core/footnotes',
+ },
+ ] );
+
+ expect( await getFootnotes( page ) ).toMatchObject( [] );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
index 834bed77e8742..d17cef9215f4a 100644
--- a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -16,11 +16,13 @@ test.describe( 'Toolbar roving tabindex', () => {
await page.keyboard.type( 'First block' );
} );
- test( 'ensures paragraph block toolbar uses roving tabindex', async ( {
+ test( 'ensures base block toolbars use roving tabindex', async ( {
editor,
page,
+ pageUtils,
ToolbarRovingTabindexUtils,
} ) => {
+ // ensures paragraph block toolbar uses roving tabindex
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Paragraph' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
@@ -34,13 +36,8 @@ test.describe( 'Toolbar roving tabindex', () => {
'Paragraph block',
'Paragraph'
);
- } );
- test( 'ensures heading block toolbar uses roving tabindex', async ( {
- editor,
- page,
- ToolbarRovingTabindexUtils,
- } ) => {
+ // test: ensures heading block toolbar uses roving tabindex
await editor.insertBlock( { name: 'core/heading' } );
await page.keyboard.type( 'Heading' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
@@ -52,13 +49,8 @@ test.describe( 'Toolbar roving tabindex', () => {
'Block: Heading',
'Heading'
);
- } );
- test( 'ensures list block toolbar uses roving tabindex', async ( {
- editor,
- page,
- ToolbarRovingTabindexUtils,
- } ) => {
+ // ensures list block toolbar uses roving tabindex
await editor.insertBlock( { name: 'core/list' } );
await page.keyboard.type( 'List' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
@@ -71,36 +63,15 @@ test.describe( 'Toolbar roving tabindex', () => {
'Block: List',
'List'
);
- } );
-
- test( 'ensures image block toolbar uses roving tabindex', async ( {
- editor,
- ToolbarRovingTabindexUtils,
- } ) => {
- await editor.insertBlock( { name: 'core/image' } );
- await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
- 'Block: Image',
- 'Image'
- );
- await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' );
- await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
- 'Block: Image',
- 'Image'
- );
- } );
- test( 'ensures table block toolbar uses roving tabindex', async ( {
- editor,
- page,
- ToolbarRovingTabindexUtils,
- pageUtils,
- } ) => {
+ // ensures table block toolbar uses roving tabindex
await editor.insertBlock( { name: 'core/table' } );
await page.keyboard.press( 'ArrowLeft' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Block: Table',
'Table'
);
+
// Move focus to the first toolbar item.
await page.keyboard.press( 'Home' );
await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' );
@@ -115,12 +86,8 @@ test.describe( 'Toolbar roving tabindex', () => {
'Block: Table',
'Table'
);
- } );
- test( 'ensures custom html block toolbar uses roving tabindex', async ( {
- editor,
- ToolbarRovingTabindexUtils,
- } ) => {
+ // ensures custom html block toolbar uses roving tabindex
await editor.insertBlock( { name: 'core/html' } );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'HTML',
@@ -133,6 +100,19 @@ test.describe( 'Toolbar roving tabindex', () => {
'Block: Custom HTML',
'Custom HTML'
);
+
+ // ensures image block toolbar uses roving tabindex
+ // This also tests if shift + tab works as expected to move focus to the toolbar when the preceding block has a form element.
+ await editor.insertBlock( { name: 'core/image' } );
+ await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+ 'Block: Image',
+ 'Image'
+ );
+ await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' );
+ await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+ 'Block: Image',
+ 'Image'
+ );
} );
test( 'ensures block toolbar remembers the last focused item', async ( {
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index 1eb5fdba0c70d..b6c124f2fbd3c 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -147,7 +147,7 @@ test.describe( 'Template Part', () => {
await editor.selectBlocks( paragraphBlock1, paragraphBlock2 );
// Convert block to a template part.
- await editor.clickBlockOptionsMenuItem( 'Create Template part' );
+ await editor.clickBlockOptionsMenuItem( 'Create template part' );
await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Test' );
await page.keyboard.press( 'Enter' );
diff --git a/test/integration/fixtures/blocks/core__footnotes.html b/test/integration/fixtures/blocks/core__footnotes.html
new file mode 100644
index 0000000000000..2a8de4f068704
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.html
@@ -0,0 +1 @@
+
diff --git a/test/integration/fixtures/blocks/core__footnotes.json b/test/integration/fixtures/blocks/core__footnotes.json
new file mode 100644
index 0000000000000..eba2053ad810f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.json
@@ -0,0 +1,8 @@
+[
+ {
+ "name": "core/footnotes",
+ "isValid": true,
+ "attributes": {},
+ "innerBlocks": []
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__footnotes.parsed.json b/test/integration/fixtures/blocks/core__footnotes.parsed.json
new file mode 100644
index 0000000000000..22375acad0285
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.parsed.json
@@ -0,0 +1,9 @@
+[
+ {
+ "blockName": "core/footnotes",
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "",
+ "innerContent": []
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__footnotes.serialized.html b/test/integration/fixtures/blocks/core__footnotes.serialized.html
new file mode 100644
index 0000000000000..2a8de4f068704
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.serialized.html
@@ -0,0 +1 @@
+