@wordpress/block-editor 12.10.6 → 12.11.1

package/src/components/unsupported-block-details/style.native.scss

@@ -0,0 +1,56 @@
+.unsupported-block-details__container {
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.unsupported-block-details__icon {
+	size: 36;
+	height: 36;
+	padding-top: 8;
+	padding-bottom: 8;
+	color: $gray;
+}
+
+.unsupported-block-details__icon--dark {
+	color: $gray-20;
+}
+
+.unsupported-block-details__text {
+	text-align: center;
+	color: $gray-dark;
+}
+
+.unsupported-block-details__text--dark {
+	color: $white;
+}
+
+.unsupported-block-details__title {
+	padding-top: 8;
+	padding-bottom: 12;
+	font-size: 20;
+	font-weight: bold;
+	color: $gray-dark;
+}
+
+.unsupported-block-details__title--dark {
+	color: $white;
+}
+
+.unsupported-block-details__description {
+	padding-bottom: 24;
+	font-size: 16;
+	color: $gray-darken-20;
+}
+
+.unsupported-block-details__description--dark {
+	color: $gray-20;
+}
+
+.unsupported-block-details__action-button {
+	color: $blue-50;
+}
+
+.unsupported-block-details__action-button--dark {
+	color: $blue-30;
+}

package/src/components/url-input/README.md

@@ -53,7 +53,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return wp.element.createElement( wp.blockEditor.URLInputButton, {
+		return React.createElement( wp.blockEditor.URLInputButton, {
 			className: props.className,
 			url: props.attributes.url,
 			onChange: function( url, post ) {
@@ -63,7 +63,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	save: function( props ) {
-		return wp.element.createElement( 'a', {
+		return React.createElement( 'a', {
 			href: props.attributes.url,
 		}, props.attributes.text );
 	}
@@ -189,7 +189,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return wp.element.createElement( wp.blockEditor.URLInput, {
+		return React.createElement( wp.blockEditor.URLInput, {
 			className: props.className,
 			value: props.attributes.url,
 			onChange: function( url, post ) {
@@ -199,7 +199,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	save: function( props ) {
-		return wp.element.createElement( 'a', {
+		return React.createElement( 'a', {
 			href: props.attributes.url,
 		}, props.attributes.text );
 	}

package/src/components/use-on-block-drop/index.js

@@ -16,13 +16,13 @@ import { getFilesFromDataTransfer } from '@wordpress/dom';
  */
 import { store as blockEditorStore } from '../../store';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
 /** @typedef {import('./types').WPDropOperation} WPDropOperation */
 
 /**
  * Retrieve the data for a block drop event.
  *
- * @param {WPSyntheticEvent} event The drop event.
+ * @param {SyntheticEvent} event The drop event.
  *
  * @return {Object} An object with block drag and drop data.
  */

package/src/components/use-unsupported-block-editor/index.native.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+// Blocks that can't be edited through the Unsupported block editor identified by their name.
+const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
+
+/**
+ * Hook that retrieves the settings to determine if the
+ * Unsupported Block Editor can be used in a specific block.
+ *
+ * @param {string} clientId Client ID of block.
+ * @return {Object} Unsupported block editor settings.
+ */
+export default function useUnsupportedBlockEditor( clientId ) {
+	return useSelect(
+		( select ) => {
+			const { getBlock, getSettings } = select( blockEditorStore );
+			const { capabilities } = getSettings();
+
+			const block = getBlock( clientId );
+			const blockAttributes = block?.attributes || {};
+
+			const blockDetails = {
+				blockName: block?.name,
+				blockContent: serialize( block ? [ block ] : [] ),
+			};
+
+			// If the block is unsupported, use the `original` attributes to identify the block's name.
+			if ( blockDetails.blockName === 'core/missing' ) {
+				blockDetails.blockName = blockAttributes.originalName;
+				blockDetails.blockContent =
+					blockDetails.blockName === 'core/freeform'
+						? blockAttributes.content
+						: block?.originalContent;
+			}
+
+			return {
+				isUnsupportedBlockEditorSupported:
+					capabilities?.unsupportedBlockEditor === true,
+				canEnableUnsupportedBlockEditor:
+					capabilities?.canEnableUnsupportedBlockEditor === true,
+				isEditableInUnsupportedBlockEditor:
+					! UBE_INCOMPATIBLE_BLOCKS.includes(
+						blockDetails.blockName
+					),
+				...blockDetails,
+			};
+		},
+		[ clientId ]
+	);
+}

package/src/components/writing-flow/index.js

@@ -22,6 +22,7 @@ import useDragSelection from './use-drag-selection';
 import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
+import useClipboardHandler from './use-clipboard-handler';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -35,6 +36,7 @@ export function useWritingFlow() {
 		before,
 		useMergeRefs( [
 			ref,
+			useClipboardHandler(),
 			useInput(),
 			useDragSelection(),
 			useSelectionObserver(),
@@ -93,7 +95,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
  * Handles selection and navigation across blocks. This component should be
  * wrapped around BlockList.
  *
- * @param {Object}    props          Component properties.
- * @param {WPElement} props.children Children to be rendered.
+ * @param {Object}  props          Component properties.
+ * @param {Element} props.children Children to be rendered.
  */
 export default forwardRef( WritingFlow );

package/src/components/writing-flow/use-clipboard-handler.js

@@ -0,0 +1,242 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	serialize,
+	pasteHandler,
+	createBlock,
+	findTransform,
+	getBlockTransforms,
+} from '@wordpress/blocks';
+import {
+	documentHasSelection,
+	documentHasUncollapsedSelection,
+	__unstableStripHTML as stripHTML,
+} from '@wordpress/dom';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getPasteEventData } from '../../utils/pasting';
+import { store as blockEditorStore } from '../../store';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
+
+export default function useClipboardHandler() {
+	const {
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		hasMultiSelection,
+		getSettings,
+		__unstableIsFullySelected,
+		__unstableIsSelectionCollapsed,
+		__unstableIsSelectionMergeable,
+		__unstableGetSelectedBlocksWithPartialSelection,
+		canInsertBlockType,
+	} = useSelect( blockEditorStore );
+	const {
+		flashBlock,
+		removeBlocks,
+		replaceBlocks,
+		__unstableDeleteSelection,
+		__unstableExpandSelection,
+		insertBlocks,
+	} = useDispatch( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
+
+	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 ) {
+				return;
+			}
+
+			// Always handle multiple selected blocks.
+			if ( ! hasMultiSelection() ) {
+				const { target } = event;
+				const { ownerDocument } = target;
+				// If copying, only consider actual text selection as selection.
+				// Otherwise, any focus on an input field is considered.
+				const hasSelection =
+					event.type === 'copy' || event.type === 'cut'
+						? documentHasUncollapsedSelection( ownerDocument )
+						: documentHasSelection( ownerDocument );
+
+				// Let native copy behaviour take over in input fields.
+				if ( hasSelection ) {
+					return;
+				}
+			}
+
+			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
+				return;
+			}
+
+			event.preventDefault();
+
+			const isSelectionMergeable = __unstableIsSelectionMergeable();
+			const shouldHandleWholeBlocks =
+				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+			const expandSelectionIsNeeded =
+				! shouldHandleWholeBlocks && ! isSelectionMergeable;
+			if ( event.type === 'copy' || event.type === 'cut' ) {
+				if ( selectedBlockClientIds.length === 1 ) {
+					flashBlock( selectedBlockClientIds[ 0 ] );
+				}
+				// If we have a partial selection that is not mergeable, just
+				// expand the selection to the whole blocks.
+				if ( expandSelectionIsNeeded ) {
+					__unstableExpandSelection();
+				} else {
+					notifyCopy( event.type, selectedBlockClientIds );
+					let blocks;
+					// Check if we have partial selection.
+					if ( shouldHandleWholeBlocks ) {
+						blocks = getBlocksByClientId( selectedBlockClientIds );
+					} else {
+						const [ head, tail ] =
+							__unstableGetSelectedBlocksWithPartialSelection();
+						const inBetweenBlocks = getBlocksByClientId(
+							selectedBlockClientIds.slice(
+								1,
+								selectedBlockClientIds.length - 1
+							)
+						);
+						blocks = [ head, ...inBetweenBlocks, tail ];
+					}
+
+					const wrapperBlockName = event.clipboardData.getData(
+						'__unstableWrapperBlockName'
+					);
+
+					if ( wrapperBlockName ) {
+						blocks = createBlock(
+							wrapperBlockName,
+							JSON.parse(
+								event.clipboardData.getData(
+									'__unstableWrapperBlockAttributes'
+								)
+							),
+							blocks
+						);
+					}
+
+					const serialized = serialize( blocks );
+
+					event.clipboardData.setData(
+						'text/plain',
+						toPlainText( serialized )
+					);
+					event.clipboardData.setData( 'text/html', serialized );
+				}
+			}
+
+			if ( event.type === 'cut' ) {
+				// We need to also check if at the start we needed to
+				// expand the selection, as in this point we might have
+				// programmatically fully selected the blocks above.
+				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
+					removeBlocks( selectedBlockClientIds );
+				} else {
+					event.target.ownerDocument.activeElement.contentEditable = false;
+					__unstableDeleteSelection();
+				}
+			} else if ( event.type === 'paste' ) {
+				const {
+					__experimentalCanUserUseUnfilteredHTML:
+						canUserUseUnfilteredHTML,
+				} = getSettings();
+				const { plainText, html, files } = getPasteEventData( event );
+				let blocks = [];
+
+				if ( files.length ) {
+					const fromTransforms = getBlockTransforms( 'from' );
+					blocks = files
+						.reduce( ( accumulator, file ) => {
+							const transformation = findTransform(
+								fromTransforms,
+								( transform ) =>
+									transform.type === 'files' &&
+									transform.isMatch( [ file ] )
+							);
+							if ( transformation ) {
+								accumulator.push(
+									transformation.transform( [ file ] )
+								);
+							}
+							return accumulator;
+						}, [] )
+						.flat();
+				} else {
+					blocks = pasteHandler( {
+						HTML: html,
+						plainText,
+						mode: 'BLOCKS',
+						canUserUseUnfilteredHTML,
+					} );
+				}
+
+				if ( selectedBlockClientIds.length === 1 ) {
+					const [ selectedBlockClientId ] = selectedBlockClientIds;
+
+					if (
+						blocks.every( ( block ) =>
+							canInsertBlockType(
+								block.name,
+								selectedBlockClientId
+							)
+						)
+					) {
+						insertBlocks(
+							blocks,
+							undefined,
+							selectedBlockClientId
+						);
+						return;
+					}
+				}
+
+				replaceBlocks(
+					selectedBlockClientIds,
+					blocks,
+					blocks.length - 1,
+					-1
+				);
+			}
+		}
+
+		node.ownerDocument.addEventListener( 'copy', handler );
+		node.ownerDocument.addEventListener( 'cut', handler );
+		node.ownerDocument.addEventListener( 'paste', handler );
+
+		return () => {
+			node.ownerDocument.removeEventListener( 'copy', handler );
+			node.ownerDocument.removeEventListener( 'cut', handler );
+			node.ownerDocument.removeEventListener( 'paste', handler );
+		};
+	}, [] );
+}
+
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText( html ) {
+	// Manually handle BR tags as line breaks prior to `stripHTML` call
+	html = html.replace( /<br>/g, '\n' );
+
+	const plainText = stripHTML( html ).trim();
+
+	// Merge any consecutive line breaks
+	return plainText.replace( /\n\n+/g, '\n\n' );
+}

package/src/components/writing-mode-control/index.js

@@ -31,7 +31,7 @@ const WRITING_MODES = [
  * @param {string}   props.value     Currently selected writing mode.
  * @param {Function} props.onChange  Handles change in the writing mode selection.
  *
- * @return {WPElement} Writing Mode control.
+ * @return {Element} Writing Mode control.
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (

package/src/hooks/anchor.js

@@ -56,9 +56,9 @@ export function addAttribute( settings ) {
  * Override the default edit UI to include a new block inspector control for
  * assigning the anchor ID, if block supports anchor.
  *
- * @param {WPComponent} BlockEdit Original component.
+ * @param {Component} BlockEdit Original component.
  *
- * @return {WPComponent} Wrapped component.
+ * @return {Component} Wrapped component.
  */
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {

package/src/hooks/custom-class-name.js

@@ -44,9 +44,9 @@ export function addAttribute( settings ) {
  * assigning the custom class name, if block supports custom class name.
  * The control is displayed within the Advanced panel in the block inspector.
  *
- * @param {WPComponent} BlockEdit Original component.
+ * @param {Component} BlockEdit Original component.
  *
- * @return {WPComponent} Wrapped component.
+ * @return {Component} Wrapped component.
  */
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {

package/src/hooks/custom-fields.js

@@ -40,9 +40,9 @@ function addAttribute( settings ) {
  * Currently, only the `core/paragraph` block is supported and there is only a relation
  * between paragraph content and a custom field.
  *
- * @param {WPComponent} BlockEdit Original component.
+ * @param {Component} BlockEdit Original component.
  *
- * @return {WPComponent} Wrapped component.
+ * @return {Component} Wrapped component.
  */
 const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {

package/src/hooks/font-size.js

@@ -115,7 +115,7 @@ function addEditProps( settings ) {
  *
  * @param {Object} props
  *
- * @return {WPElement} Font size edit element.
+ * @return {Element} Font size edit element.
  */
 export function FontSizeEdit( props ) {
 	const {

package/src/hooks/line-height.js

@@ -17,7 +17,7 @@ export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
  *
  * @param {Object} props
  *
- * @return {WPElement} Line height edit element.
+ * @return {Element} Line height edit element.
  */
 export function LineHeightEdit( props ) {
 	const {

package/src/hooks/position.js

@@ -209,7 +209,7 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
  *
  * @param {Object} props
  *
- * @return {WPElement} Position panel.
+ * @return {Element} Position panel.
  */
 export function PositionPanel( props ) {
 	const {
@@ -296,7 +296,7 @@ export function PositionPanel( props ) {
 					>
 						<CustomSelectControl
 							__nextUnconstrainedWidth
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							className="block-editor-hooks__position-selection__select-control"
 							label={ __( 'Position' ) }
 							hideLabelFromVision

package/src/hooks/utils.js

@@ -279,8 +279,6 @@ export function useBlockSettings( name, parentLayout ) {
 		isBackgroundEnabled,
 		isLinkEnabled,
 		isTextEnabled,
-		isHeadingEnabled,
-		isButtonEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
 		'@wordpress/block-editor'
 	);

package/src/private-apis.js

@@ -24,6 +24,7 @@ import {
 } from './components/inserter/reusable-block-rename-hint';
 import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
+import { getDuotoneFilter } from './components/duotone/utils';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -33,6 +34,7 @@ lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockCanvas,
 	ExperimentalBlockEditorProvider,
+	getDuotoneFilter,
 	getRichTextValues,
 	kebabCase,
 	PrivateInserter,

package/src/store/selectors.js

@@ -1986,7 +1986,7 @@ export const getInserterItems = createSelector(
 				isDisabled: false,
 				utility: 1, // Deprecated.
 				frecency,
-				content: reusableBlock.content.raw,
+				content: reusableBlock.content?.raw,
 				syncStatus: reusableBlock.wp_pattern_sync_status,
 			};
 		};

package/src/utils/pasting.js

@@ -3,6 +3,51 @@
  */
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
+/**
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceding and trailing content.
+ *
+ * @param {string} html the html to be normalized
+ * @return {string} the normalized html
+ */
+function removeWindowsFragments( html ) {
+	const startStr = '<!--StartFragment-->';
+	const startIdx = html.indexOf( startStr );
+	if ( startIdx > -1 ) {
+		html = html.substring( startIdx + startStr.length );
+	} else {
+		// No point looking for EndFragment
+		return html;
+	}
+
+	const endStr = '<!--EndFragment-->';
+	const endIdx = html.indexOf( endStr );
+	if ( endIdx > -1 ) {
+		html = html.substring( 0, endIdx );
+	}
+
+	return html;
+}
+
+/**
+ * Removes the charset meta tag inserted by Chromium.
+ * See:
+ * - https://github.com/WordPress/gutenberg/issues/33585
+ * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
+ *
+ * @param {string} html the html to be stripped of the meta tag.
+ * @return {string} the cleaned html
+ */
+function removeCharsetMetaTag( html ) {
+	const metaTag = `<meta charset='utf-8'>`;
+
+	if ( html.startsWith( metaTag ) ) {
+		return html.slice( metaTag.length );
+	}
+
+	return html;
+}
+
 export function getPasteEventData( { clipboardData } ) {
 	let plainText = '';
 	let html = '';
@@ -24,6 +69,12 @@ export function getPasteEventData( { clipboardData } ) {
 		}
 	}
 
+	// Remove Windows-specific metadata appended within copied HTML text.
+	html = removeWindowsFragments( html );
+
+	// Strip meta tag.
+	html = removeCharsetMetaTag( html );
+
 	const files = getFilesFromDataTransfer( clipboardData );
 
 	if (