@wordpress/block-editor 12.10.6 → 12.11.1

package/src/components/inserter/index.native.js

@@ -225,7 +225,7 @@ export class Inserter extends Component {
 	 *                                    pressed.
 	 * @param {boolean}  options.isOpen   Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown toggle element.
+	 * @return {Element} Dropdown toggle element.
 	 */
 	renderInserterToggle( { onToggle, isOpen } ) {
 		const {
@@ -305,7 +305,7 @@ export class Inserter extends Component {
 	 *                                   closed.
 	 * @param {boolean}  options.isOpen  Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown content element.
+	 * @return {Element} Dropdown content element.
 	 */
 	renderContent( { onClose, isOpen } ) {
 		const { clientId, isAppender } = this.props;

package/src/components/letter-spacing-control/index.js

@@ -20,7 +20,7 @@ import useSetting from '../../components/use-setting';
  * @param {Function}                props.onChange             Handles change in letter-spacing selection.
  * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
- * @return {WPElement} Letter-spacing control.
+ * @return {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
 	value,

package/src/components/media-placeholder/README.md

@@ -98,9 +98,9 @@ The `disableDropZone` prop still takes precedence over `dropZoneUIOnly` – spec
 
 ### icon
 
-Icon to display left of the title. When passed as a `String`, the icon will be resolved as a [Dashicon](https://developer.wordpress.org/resource/dashicons/). Alternatively, you can pass in a `WPComponent` such as `BlockIcon`to render instead.
+Icon to display left of the title. When passed as a `String`, the icon will be resolved as a [Dashicon](https://developer.wordpress.org/resource/dashicons/). Alternatively, you can pass in a `Component` such as `BlockIcon`to render instead.
 
--   Type: `String|WPComponent`
+-   Type: `String|Component`
 -   Required: No
 -   Platform: Web | Mobile
 
@@ -216,7 +216,7 @@ Replace implementation of the placeholder:
 ```js
 function replaceMediaPlaceholder() {
 	return function () {
-		return wp.element.createElement(
+		return React.createElement(
 			'div',
 			{},
 			'The replacement contents or components.'

package/src/components/media-upload/{constants.js → constants.native.js}

@@ -10,6 +10,5 @@ export const MEDIA_TYPE_ANY = 'any';
 
 export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
-export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
 export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );

package/src/components/media-upload/index.js

@@ -8,7 +8,7 @@ import { withFilters } from '@wordpress/components';
  * an integration with the core blocks that handle media files. By default it renders nothing but
  * it provides a way to have it overridden with the `editor.MediaUpload` filter.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const MediaUpload = () => null;
 

package/src/components/media-upload/index.native.js

@@ -39,6 +39,10 @@ import {
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
+	OPTION_TAKE_VIDEO,
+	OPTION_TAKE_PHOTO,
+	OPTION_INSERT_FROM_URL,
+	OPTION_WORDPRESS_MEDIA_LIBRARY,
 } from './constants';
 import styles from './style.scss';
 
@@ -93,7 +97,7 @@ export class MediaUpload extends Component {
 		const cameraImageSource = {
 			id: mediaSources.deviceCamera, // ID is the value sent to native.
 			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
-			label: __( 'Take a Photo' ),
+			label: OPTION_TAKE_PHOTO,
 			requiresModal: true,
 			types: [ MEDIA_TYPE_IMAGE ],
 			icon: capturePhoto,
@@ -102,7 +106,7 @@ export class MediaUpload extends Component {
 		const cameraVideoSource = {
 			id: mediaSources.deviceCamera,
 			value: mediaSources.deviceCamera,
-			label: __( 'Take a Video' ),
+			label: OPTION_TAKE_VIDEO,
 			requiresModal: true,
 			types: [ MEDIA_TYPE_VIDEO ],
 			icon: captureVideo,
@@ -120,7 +124,7 @@ export class MediaUpload extends Component {
 		const siteLibrarySource = {
 			id: mediaSources.siteMediaLibrary,
 			value: mediaSources.siteMediaLibrary,
-			label: __( 'WordPress Media Library' ),
+			label: OPTION_WORDPRESS_MEDIA_LIBRARY,
 			requiresModal: true,
 			types: [
 				MEDIA_TYPE_IMAGE,
@@ -135,7 +139,7 @@ export class MediaUpload extends Component {
 		const urlSource = {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
-			label: __( 'Insert from URL' ),
+			label: OPTION_INSERT_FROM_URL,
 			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
@@ -329,7 +333,7 @@ function URLInput( props ) {
 					autoCorrect={ false }
 					autoComplete={ Platform.isIOS ? 'url' : 'off' }
 					keyboardType="url"
-					label={ __( 'Insert from URL' ) }
+					label={ OPTION_INSERT_FROM_URL }
 					onChange={ props.onChange }
 					placeholder={ __( 'Type a URL' ) }
 					value={ props.value }

package/src/components/panel-color-settings/README.md

@@ -6,11 +6,15 @@ It is essentially a wrapper around the `PanelColorGradientSettings` component, b
 ## Usage
 
 ```jsx
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
 /**
  * WordPress dependencies
  */
 import { PanelColorSettings } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 // ...

package/src/components/plain-text/README.md

@@ -34,7 +34,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return wp.element.createElement( wp.editor.PlainText, {
+		return React.createElement( wp.editor.PlainText, {
 			className: props.className,
 			value: props.attributes.content,
 			onChange: function( content ) {

package/src/components/provider/README.md

@@ -33,7 +33,7 @@ A callback invoked when the blocks have been modified in a non-persistent manner
 
 ### `children`
 
--   **Type:** `WPElement`
+-   **Type:** `Element`
 -   **Required** `no`
 
 Children elements for which the BlockEditorProvider context should apply.

package/src/components/provider/use-block-sync.js

@@ -293,7 +293,7 @@ export default function useBlockSync( {
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;
-		} );
+		}, blockEditorStore );
 
 		return () => {
 			subscribed.current = false;

package/src/components/publish-date-time-picker/README.md

@@ -10,9 +10,9 @@ for more information.
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { Dropdown, Button } from '@wordpress/components';
 import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 
 const MyDateTimePicker = () => {
 	const [ date, setDate ] = useState( new Date() );

package/src/components/responsive-block-control/README.md

@@ -21,14 +21,12 @@ In a block's `edit` implementation, render a `<ResponsiveBlockControl />` compon
 By default the default control will be used to render the default (ie: "All") setting _as well as_ the per-viewport responsive settings.
 
 ```jsx
+import { useState } from 'react';
 import { registerBlockType } from '@wordpress/blocks';
 import {
 	InspectorControls,
 	ResponsiveBlockControl,
 } from '@wordpress/block-editor';
-
-import { useState } from '@wordpress/element';
-
 import {
 	DimensionControl,
 } from '@wordpress/components';

package/src/components/rich-text/README.md

@@ -94,7 +94,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return wp.element.createElement( wp.editor.RichText, {
+		return React.createElement( wp.editor.RichText, {
 			tagName: 'h2',
 			className: props.className,
 			value: props.attributes.content,
@@ -105,7 +105,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	save: function( props ) {
-		return wp.element.createElement( wp.editor.RichText.Content, {
+		return React.createElement( wp.editor.RichText.Content, {
 			tagName: 'h2', value: props.attributes.content
 		} );
 	}
@@ -160,7 +160,7 @@ Slot to extend the format toolbar. Use it in the edit function of a `registerFor
 wp.richText.registerFormatType( /* ... */, {
 	/* ... */
 	edit: function( props ) {
-		return wp.element.createElement(
+		return React.createElement(
 			wp.editor.RichTextToolbarButton, {
 				icon: 'editor-code',
 				title: 'My formatting button',

package/src/components/rich-text/index.native.js

@@ -41,7 +41,6 @@ import {
 	addActiveFormats,
 	getMultilineTag,
 	getAllowedFormats,
-	isShortcode,
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
@@ -417,18 +416,6 @@ function RichTextWrapper(
 
 			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';
-			}
-
 			const isPastedURL = isURL( plainText.trim() );
 			const presentEmbedHandlerPicker = () =>
 				embedHandlerPickerRef.current?.presentPicker( {

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;