@wordpress/block-editor 12.10.3 → 12.11.0

package/src/components/rich-text/use-paste-handler.js

@@ -3,7 +3,6 @@
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { getFilesFromDataTransfer } from '@wordpress/dom';
 import {
 	pasteHandler,
 	findTransform,
@@ -15,9 +14,9 @@ import { isURL } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { addActiveFormats, isShortcode } from './utils';
+import { addActiveFormats } from './utils';
 import { splitValue } from './split-value';
-import { shouldDismissPastedFiles } from '../../utils/pasting';
+import { getPasteEventData } from '../../utils/pasting';
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
 
@@ -44,33 +43,7 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			const { clipboardData } = event;
-
-			let plainText = '';
-			let html = '';
-
-			// IE11 only supports `Text` as an argument for `getData` and will
-			// otherwise throw an invalid argument error, so we try the standard
-			// arguments first, then fallback to `Text` if they fail.
-			try {
-				plainText = clipboardData.getData( 'text/plain' );
-				html = clipboardData.getData( 'text/html' );
-			} catch ( error1 ) {
-				try {
-					html = clipboardData.getData( 'Text' );
-				} catch ( error2 ) {
-					// Some browsers like UC Browser paste plain text by default and
-					// don't support clipboardData at all, so allow default
-					// behaviour.
-					return;
-				}
-			}
-
-			// Remove Windows-specific metadata appended within copied HTML text.
-			html = removeWindowsFragments( html );
-
-			// Strip meta tag.
-			html = removeCharsetMetaTag( html );
+			const { plainText, html, files } = getPasteEventData( event );
 
 			event.preventDefault();
 
@@ -103,8 +76,8 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			const files = [ ...getFilesFromDataTransfer( clipboardData ) ];
-			const isInternal = clipboardData.getData( 'rich-text' ) === 'true';
+			const isInternal =
+				event.clipboardData.getData( 'rich-text' ) === 'true';
 
 			// If the data comes from a rich text instance, we can directly use it
 			// without filtering the data. The filters are only meant for externally
@@ -128,17 +101,7 @@ export function usePasteHandler( props ) {
 				// Allows us to ask for this information when we get a report.
 				// eslint-disable-next-line no-console
 				window.console.log( 'Received items:\n\n', files );
-			}
 
-			// Process any attached files, unless we infer that the files in
-			// question are redundant "screenshots" of the actual HTML payload,
-			// as created by certain office-type programs.
-			//
-			// @see shouldDismissPastedFiles
-			if (
-				files?.length &&
-				! shouldDismissPastedFiles( files, html, plainText )
-			) {
 				const fromTransforms = getBlockTransforms( 'from' );
 				const blocks = files
 					.reduce( ( accumulator, file ) => {
@@ -176,18 +139,6 @@ export function usePasteHandler( props ) {
 
 			let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
 
-			// Force the blocks mode when the user is pasting
-			// on a new line & the content resembles a shortcode.
-			// Otherwise it's going to be detected as inline
-			// and the shortcode won't be replaced.
-			if (
-				mode === 'AUTO' &&
-				isEmpty( value ) &&
-				isShortcode( plainText )
-			) {
-				mode = 'BLOCKS';
-			}
-
 			if (
 				__unstableEmbedURLOnPaste &&
 				isEmpty( value ) &&
@@ -228,48 +179,3 @@ export function usePasteHandler( props ) {
 		};
 	}, [] );
 }
-
-/**
- * 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;
-}

package/src/components/rich-text/utils.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { regexp } from '@wordpress/shortcode';
 import { renderToString } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 
@@ -43,8 +42,6 @@ export function getAllowedFormats( { allowedFormats, disableFormats } ) {
 
 getAllowedFormats.EMPTY_ARRAY = [];
 
-export const isShortcode = ( text ) => regexp( '.*' ).test( text );
-
 /**
  * Creates a link from pasted URL.
  * Creates a paragraph block containing a link to the URL, and calls `onReplace`.

package/src/components/text-decoration-control/index.js

@@ -36,7 +36,7 @@ const TEXT_DECORATIONS = [
  * @param {Function} props.onChange    Handles change in text decoration selection.
  * @param {string}   [props.className] Additional class name to apply.
  *
- * @return {WPElement} Text decoration control.
+ * @return {Element} Text decoration control.
  */
 export default function TextDecorationControl( {
 	value,

package/src/components/text-transform-control/index.js

@@ -46,7 +46,7 @@ const TEXT_TRANSFORMS = [
  * @param {string}   props.value     Currently selected text transform.
  * @param {Function} props.onChange  Handles change in text transform selection.
  *
- * @return {WPElement} Text transform control.
+ * @return {Element} Text transform control.
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (

package/src/components/typewriter/index.js

@@ -273,7 +273,7 @@ function Typewriter( { children } ) {
  * challenges in Internet Explorer, and is simply skipped, rendering the given
  * props children instead.
  *
- * @type {WPComponent}
+ * @type {Component}
  */
 const TypewriterOrIEBypass = isIE ? ( props ) => props.children : Typewriter;
 

package/src/components/unit-control/README.md

@@ -26,8 +26,8 @@ UnitControl component allows the user to set a value as well as a unit (e.g. `px
 Renders a control (`input` and `select`) with the values `10` and `px` parsed from `10px`.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalUnitControl as UnitControl } from '@wordpress/block-editor/';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );

package/src/components/unsupported-block-details/index.native.js

@@ -0,0 +1,183 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import {
+	requestUnsupportedBlockFallback,
+	sendActionButtonPressedAction,
+	actionButtons,
+} from '@wordpress/react-native-bridge';
+import { help } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { getBlockType } from '@wordpress/blocks';
+import { useCallback, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+
+const EMPTY_ARRAY = [];
+
+const UnsupportedBlockDetails = ( {
+	clientId,
+	showSheet,
+	onCloseSheet,
+	customBlockTitle = '',
+	icon,
+	title,
+	description,
+	actionButtonLabel,
+	customActions = EMPTY_ARRAY,
+} ) => {
+	const [ sendFallbackMessage, setSendFallbackMessage ] = useState( false );
+	const [ sendButtonPressMessage, setSendButtonPressMessage ] =
+		useState( false );
+
+	const {
+		blockName,
+		blockContent,
+		isUnsupportedBlockEditorSupported,
+		canEnableUnsupportedBlockEditor,
+		isEditableInUnsupportedBlockEditor,
+	} = useUnsupportedBlockEditor( clientId );
+
+	// Styles
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__text' ],
+		styles[ 'unsupported-block-details__text--dark' ]
+	);
+	const titleStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__title' ],
+		styles[ 'unsupported-block-details__title--dark' ]
+	);
+	const descriptionStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__description' ],
+		styles[ 'unsupported-block-details__description--dark' ]
+	);
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__icon' ],
+		styles[ 'unsupported-block-details__icon--dark' ]
+	);
+	const actionButtonStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__action-button' ],
+		styles[ 'unsupported-block-details__action-button--dark' ]
+	);
+
+	const blockTitle =
+		customBlockTitle || getBlockType( blockName )?.title || blockName;
+
+	const requestFallback = useCallback( () => {
+		if (
+			canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported === false
+		) {
+			onCloseSheet();
+			setSendButtonPressMessage( true );
+		} else {
+			onCloseSheet();
+			setSendFallbackMessage( true );
+		}
+	}, [
+		canEnableUnsupportedBlockEditor,
+		isUnsupportedBlockEditorSupported,
+		onCloseSheet,
+	] );
+
+	// The description can include extra notes via WP hooks.
+	const descriptionWithNotes = applyFilters(
+		'native.unsupported_block_details_extra_note',
+		description,
+		blockName
+	);
+
+	const webEditorDefaultLabel = applyFilters(
+		'native.unsupported_block_details_web_editor_action',
+		__( 'Edit using web editor' )
+	);
+
+	const canUseWebEditor =
+		( isUnsupportedBlockEditorSupported ||
+			canEnableUnsupportedBlockEditor ) &&
+		isEditableInUnsupportedBlockEditor;
+	const actions = [
+		...[
+			canUseWebEditor && {
+				label: actionButtonLabel || webEditorDefaultLabel,
+				onPress: requestFallback,
+			},
+		],
+		...customActions,
+	].filter( Boolean );
+
+	return (
+		<BottomSheet
+			isVisible={ showSheet }
+			hideHeader
+			onClose={ onCloseSheet }
+			onModalHide={ () => {
+				if ( sendFallbackMessage ) {
+					// On iOS, onModalHide is called when the controller is still part of the hierarchy.
+					// A small delay will ensure that the controller has already been removed.
+					this.timeout = setTimeout( () => {
+						// For the Classic block, the content is kept in the `content` attribute.
+						requestUnsupportedBlockFallback(
+							blockContent,
+							clientId,
+							blockName,
+							blockTitle
+						);
+					}, 100 );
+					setSendFallbackMessage( false );
+				} else if ( sendButtonPressMessage ) {
+					this.timeout = setTimeout( () => {
+						sendActionButtonPressedAction(
+							actionButtons.missingBlockAlertActionButton
+						);
+					}, 100 );
+					setSendButtonPressMessage( false );
+				}
+			} }
+		>
+			<View style={ styles[ 'unsupported-block-details__container' ] }>
+				<Icon
+					icon={ icon || help }
+					color={ iconStyle.color }
+					size={ iconStyle.size }
+				/>
+				<Text style={ [ textStyle, titleStyle ] }>{ title }</Text>
+				{ isEditableInUnsupportedBlockEditor &&
+					descriptionWithNotes && (
+						<Text style={ [ textStyle, descriptionStyle ] }>
+							{ descriptionWithNotes }
+						</Text>
+					) }
+			</View>
+			{ actions.map( ( { label, onPress }, index ) => (
+				<TextControl
+					key={ `${ label } - ${ index }` }
+					label={ label }
+					separatorType="topFullWidth"
+					onPress={ onPress }
+					labelStyle={ actionButtonStyle }
+				/>
+			) ) }
+			<TextControl
+				label={ __( 'Dismiss' ) }
+				separatorType="topFullWidth"
+				onPress={ onCloseSheet }
+				labelStyle={ actionButtonStyle }
+			/>
+		</BottomSheet>
+	);
+};
+
+export default UnsupportedBlockDetails;

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 );