@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/image-link-destinations/index.native.js

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { StyleSheet } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, check, chevronRight } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { BottomSheet, PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import styles from './style.native.scss';
-import { blockSettingsScreens } from '../block-settings';
-
-const LINK_DESTINATION_NONE = 'none';
-const LINK_DESTINATION_MEDIA = 'media';
-const LINK_DESTINATION_ATTACHMENT = 'attachment';
-const LINK_DESTINATION_CUSTOM = 'custom';
-
-function LinkDestination( {
-	children,
-	isSelected,
-	label,
-	onPress,
-	value,
-	valueStyle,
-} ) {
-	const optionIcon = usePreferredColorSchemeStyle(
-		styles.optionIcon,
-		styles.optionIconDark
-	);
-
-	return (
-		<BottomSheet.Cell
-			icon={ check }
-			iconStyle={ StyleSheet.flatten( [
-				optionIcon,
-				! isSelected && styles.unselectedOptionIcon,
-			] ) }
-			label={ label }
-			leftAlign
-			onPress={ onPress }
-			value={ value }
-			valueStyle={ valueStyle }
-			separatorType="leftMargin"
-		>
-			{ children }
-		</BottomSheet.Cell>
-	);
-}
-
-function ImageLinkDestinationsScreen( props ) {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { url = '' } = props;
-	const {
-		inputValue = url,
-		imageUrl,
-		attachmentPageUrl,
-		linkDestination,
-	} = route.params || {};
-
-	function goToLinkPicker() {
-		navigation.navigate( blockSettingsScreens.linkPicker, {
-			inputValue:
-				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
-		} );
-	}
-
-	const setLinkDestination = ( newLinkDestination ) => () => {
-		let newUrl;
-		switch ( newLinkDestination ) {
-			case LINK_DESTINATION_MEDIA:
-				newUrl = imageUrl;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				newUrl = attachmentPageUrl;
-				break;
-			default:
-				newUrl = '';
-				break;
-		}
-
-		navigation.navigate( blockSettingsScreens.settings, {
-			// The `inputValue` name is reused from LinkPicker, as it helps avoid
-			// bugs from stale values remaining in the React Navigation route
-			// parameters.
-			inputValue: newUrl,
-			// Clear link text value that may be set from LinkPicker.
-			text: '',
-		} );
-	};
-
-	return (
-		<>
-			<BottomSheet.NavBar>
-				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
-				<BottomSheet.NavBar.Heading>
-					{ __( 'Link To' ) }
-				</BottomSheet.NavBar.Heading>
-			</BottomSheet.NavBar>
-			<PanelBody>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_NONE }
-					label={ __( 'None' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
-				/>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
-					label={ __( 'Media File' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
-				/>
-				{ !! attachmentPageUrl && (
-					<LinkDestination
-						isSelected={
-							linkDestination === LINK_DESTINATION_ATTACHMENT
-						}
-						label={ __( 'Attachment Page' ) }
-						onPress={ setLinkDestination(
-							LINK_DESTINATION_ATTACHMENT
-						) }
-					/>
-				) }
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
-					label={ __( 'Custom URL' ) }
-					onPress={ goToLinkPicker }
-					value={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? inputValue
-							: ''
-					}
-					valueStyle={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? undefined
-							: styles.placeholderTextColor
-					}
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</LinkDestination>
-			</PanelBody>
-		</>
-	);
-}
-
-export default ImageLinkDestinationsScreen;

package/src/components/image-link-destinations/style.native.scss

@@ -1,16 +0,0 @@
-// used in both light and dark modes
-.placeholderTextColor {
-	color: #87a6bc;
-}
-
-.optionIcon {
-	color: $blue-50;
-}
-
-.optionIconDark {
-	color: $blue-30;
-}
-
-.unselectedOptionIcon {
-	opacity: 0;
-}

package/src/components/index.native.js

@@ -1,108 +0,0 @@
-// Block Creation Components.
-export {
-	BlockAlignmentControl,
-	BlockAlignmentToolbar,
-} from './block-alignment-control';
-export { BlockContextProvider } from './block-context';
-export {
-	default as BlockControls,
-	BlockFormatControls,
-} from './block-controls';
-export { default as BlockEdit, useBlockEditContext } from './block-edit';
-export { default as BlockIcon } from './block-icon';
-export {
-	BlockVerticalAlignmentToolbar,
-	BlockVerticalAlignmentControl,
-} from './block-vertical-alignment-control';
-export * from './colors';
-export * from './gradients';
-export * from './font-sizes';
-export { AlignmentControl, AlignmentToolbar } from './alignment-control';
-export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
-export {
-	default as InspectorControls,
-	InspectorAdvancedControls,
-} from './inspector-controls';
-export {
-	JustifyToolbar,
-	JustifyContentControl,
-} from './justify-content-control';
-export { default as LineHeightControl } from './line-height-control';
-export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
-export { default as PlainText } from './plain-text';
-export {
-	default as RichText,
-	RichTextShortcut,
-	RichTextToolbarButton,
-	__unstableRichTextInputEvent,
-} from './rich-text';
-export { default as MediaReplaceFlow } from './media-replace-flow';
-export { default as MediaPlaceholder } from './media-placeholder';
-export { default as MediaUpload } from './media-upload';
-export {
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-	MEDIA_TYPE_ANY,
-} from './media-upload/constants';
-export { default as MediaUploadProgress } from './media-upload-progress';
-export {
-	MEDIA_UPLOAD_STATE_UPLOADING,
-	MEDIA_UPLOAD_STATE_SUCCEEDED,
-	MEDIA_UPLOAD_STATE_PAUSED,
-	MEDIA_UPLOAD_STATE_FAILED,
-	MEDIA_UPLOAD_STATE_RESET,
-} from './media-upload-progress/constants';
-export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
-export { default as URLInput } from './url-input';
-export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
-export { default as BlockCaption } from './block-caption';
-export { default as Caption } from './caption';
-export { default as PanelColorSettings } from './panel-color-settings';
-export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
-export { useSettings, default as useSetting } from './use-settings';
-export {
-	RecursionProvider,
-	DeprecatedExperimentalRecursionProvider as __experimentalRecursionProvider,
-	useHasRecursion,
-	DeprecatedExperimentalUseHasRecursion as __experimentalUseHasRecursion,
-} from './recursion-provider';
-export { default as Warning } from './warning';
-export { default as ContrastChecker } from './contrast-checker';
-export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
-export { default as UnsupportedBlockDetails } from './unsupported-block-details';
-export {
-	useGlobalStyles,
-	getGlobalStyles,
-	getColorsAndGradients,
-	useMobileGlobalStylesColors,
-} from './global-styles/use-global-styles-context';
-
-export {
-	BottomSheetSettings,
-	BlockSettingsButton,
-	blockSettingsScreens,
-} from './block-settings';
-export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
-export { default as AudioPlayer } from './audio-player';
-
-export {
-	getSpacingPresetCssVar,
-	getCustomValueFromPreset,
-	isValueSpacingPreset,
-} from './spacing-sizes-control/utils';
-// Content Related Components.
-export { default as BlockList } from './block-list';
-export { default as BlockMover } from './block-mover';
-export { default as BlockToolbar } from './block-toolbar';
-export { default as BlockVariationPicker } from './block-variation-picker';
-export { default as BlockStyles } from './block-styles';
-export { default as DefaultBlockAppender } from './default-block-appender';
-export { default as __unstableEditorStyles } from './editor-styles';
-export { default as Inserter } from './inserter';
-export { default as InserterButton } from './inserter-button';
-export { useBlockProps } from './block-list/use-block-props';
-export { default as FloatingToolbar } from './floating-toolbar';
-
-// State Related Components.
-export { default as BlockEditorProvider } from './provider';

package/src/components/inner-blocks/constants.native.js

@@ -1,5 +0,0 @@
-// Hermes has a limit for the call stack depth to avoid infinite recursion.
-// When creating a deep nested structure of inner blocks, the editor might exceed
-// this limit and crash. In order to avoid this, we set a maximum depth level where
-// we stop rendering blocks.
-export const MAX_NESTING_DEPTH = 10;

package/src/components/inner-blocks/index.native.js

@@ -1,221 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __unstableGetInnerBlocksProps as getInnerBlocksProps } from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import ButtonBlockAppender from './button-block-appender';
-import DefaultBlockAppender from './default-block-appender';
-import useNestedSettingsUpdate from './use-nested-settings-update';
-import useInnerBlockTemplateSync from './use-inner-block-template-sync';
-import useBlockContext from './use-block-context';
-
-/**
- * Internal dependencies
- */
-import BlockList from '../block-list';
-import { useBlockEditContext } from '../block-edit/context';
-import useBlockSync from '../provider/use-block-sync';
-import { BlockContextProvider } from '../block-context';
-import { defaultLayout, LayoutProvider } from '../block-list/layout';
-import { store as blockEditorStore } from '../../store';
-import WarningMaxDepthExceeded from './warning-max-depth-exceeded';
-import { MAX_NESTING_DEPTH } from './constants';
-
-/**
- * This hook is used to lightly mark an element as an inner blocks wrapper
- * element. Call this hook and pass the returned props to the element to mark as
- * an inner blocks wrapper, automatically rendering inner blocks as children. If
- * you define a ref for the element, it is important to pass the ref to this
- * hook, which the hook in turn will pass to the component through the props it
- * returns. Optionally, you can also pass any other props through this hook, and
- * they will be merged and returned.
- *
- * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/inner-blocks/README.md
- *
- * @param {Object} props   Optional. Props to pass to the element. Must contain
- *                         the ref if one is defined.
- * @param {Object} options Optional. Inner blocks options.
- */
-export function useInnerBlocksProps( props = {}, options = {} ) {
-	const fallbackRef = useRef();
-	const { clientId } = useBlockEditContext();
-
-	const ref = props.ref || fallbackRef;
-	const InnerBlocks =
-		options.value && options.onChange
-			? ControlledInnerBlocks
-			: UncontrolledInnerBlocks;
-
-	return {
-		...props,
-		ref,
-		children: (
-			<InnerBlocks
-				{ ...options }
-				clientId={ clientId }
-				wrapperRef={ ref }
-			/>
-		),
-	};
-}
-
-/**
- * InnerBlocks is a component which allows a single block to have multiple blocks
- * as children. The UncontrolledInnerBlocks component is used whenever the inner
- * blocks are not controlled by another entity. In other words, it is normally
- * used for inner blocks in the post editor
- *
- * @param {Object} props The component props.
- */
-function UncontrolledInnerBlocks( props ) {
-	const {
-		clientId,
-		allowedBlocks,
-		prioritizedInserterBlocks,
-		defaultBlock,
-		directInsert,
-		__experimentalDefaultBlock,
-		__experimentalDirectInsert,
-		template,
-		templateLock,
-		templateInsertUpdatesSelection,
-		__experimentalCaptureToolbars: captureToolbars,
-		orientation,
-		renderAppender,
-		renderFooterAppender,
-		parentWidth,
-		horizontal,
-		contentResizeMode,
-		contentStyle,
-		onAddBlock,
-		onDeleteBlock,
-		marginVertical,
-		marginHorizontal,
-		horizontalAlignment,
-		filterInnerBlocks,
-		blockWidth,
-		layout = defaultLayout,
-		gridProperties,
-	} = props;
-
-	const context = useBlockContext( clientId );
-
-	const { nestingLevel, parentLock } = useSelect(
-		( select ) => {
-			const { getBlockParents, getTemplateLock, getBlockRootClientId } =
-				select( blockEditorStore );
-			return {
-				nestingLevel: getBlockParents( clientId )?.length,
-				parentLock: getTemplateLock( getBlockRootClientId( clientId ) ),
-			};
-		},
-		[ clientId ]
-	);
-
-	useNestedSettingsUpdate(
-		clientId,
-		parentLock,
-		allowedBlocks,
-		prioritizedInserterBlocks,
-		defaultBlock,
-		directInsert,
-		__experimentalDefaultBlock,
-		__experimentalDirectInsert,
-		templateLock,
-		captureToolbars,
-		orientation,
-		layout
-	);
-
-	useInnerBlockTemplateSync(
-		clientId,
-		template,
-		templateLock,
-		templateInsertUpdatesSelection
-	);
-
-	if ( nestingLevel >= MAX_NESTING_DEPTH ) {
-		return <WarningMaxDepthExceeded clientId={ clientId } />;
-	}
-
-	return (
-		<LayoutProvider value={ layout }>
-			<BlockContextProvider value={ context }>
-				<BlockList
-					marginVertical={ marginVertical }
-					marginHorizontal={ marginHorizontal }
-					rootClientId={ clientId }
-					renderAppender={ renderAppender }
-					renderFooterAppender={ renderFooterAppender }
-					withFooter={ false }
-					orientation={ orientation }
-					parentWidth={ parentWidth }
-					horizontalAlignment={ horizontalAlignment }
-					horizontal={ horizontal }
-					contentResizeMode={ contentResizeMode }
-					contentStyle={ contentStyle }
-					onAddBlock={ onAddBlock }
-					onDeleteBlock={ onDeleteBlock }
-					filterInnerBlocks={ filterInnerBlocks }
-					gridProperties={ gridProperties }
-					blockWidth={ blockWidth }
-				/>
-			</BlockContextProvider>
-		</LayoutProvider>
-	);
-}
-
-/**
- * The controlled inner blocks component wraps the uncontrolled inner blocks
- * component with the blockSync hook. This keeps the innerBlocks of the block in
- * the block-editor store in sync with the blocks of the controlling entity. An
- * example of an inner block controller is a template part block, which provides
- * its own blocks from the template part entity data source.
- *
- * @param {Object} props The component props.
- */
-function ControlledInnerBlocks( props ) {
-	useBlockSync( props );
-	return <UncontrolledInnerBlocks { ...props } />;
-}
-
-/**
- * Wrapped InnerBlocks component which detects whether to use the controlled or
- * uncontrolled variations of the InnerBlocks component. This is the component
- * which should be used throughout the application.
- *
- * @param {Object} props The component props.
- */
-const InnerBlocks = ( props ) => {
-	const { clientId } = useBlockEditContext();
-
-	const allProps = {
-		clientId,
-		...props,
-	};
-
-	// Detects if the InnerBlocks should be controlled by an incoming value.
-	return props.value && props.onChange ? (
-		<ControlledInnerBlocks { ...allProps } />
-	) : (
-		<UncontrolledInnerBlocks { ...allProps } />
-	);
-};
-
-// Expose default appender placeholders as components.
-InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
-InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
-
-useInnerBlocksProps.save = getInnerBlocksProps;
-
-InnerBlocks.Content = () => useInnerBlocksProps.save().children;
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
- */
-export default InnerBlocks;

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -1,124 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableWithoutFeedback, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import Warning from '../warning';
-import UnsupportedBlockDetails from '../unsupported-block-details';
-import { store as blockEditorStore } from '../../store';
-import { MAX_NESTING_DEPTH } from './constants';
-import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
-import {
-	useConvertToGroupButtons,
-	useConvertToGroupButtonProps,
-} from '../convert-to-group-buttons';
-
-const EMPTY_ARRAY = [];
-
-const WarningMaxDepthExceeded = ( { clientId } ) => {
-	const [ showDetails, setShowDetails ] = useState( false );
-
-	const isSelected = useSelect(
-		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
-		[ clientId ]
-	);
-
-	// We rely on the logic related to the Group/Ungroup buttons used in the block options to
-	// determine whether to use the Ungroup action.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
-		clientId,
-	] );
-	const { isUngroupable } = convertToGroupButtonProps;
-	const convertToGroupButtons = useConvertToGroupButtons( {
-		...convertToGroupButtonProps,
-	} );
-	const onUngroup = convertToGroupButtons.ungroup.onSelect;
-
-	const {
-		isUnsupportedBlockEditorSupported,
-		canEnableUnsupportedBlockEditor,
-	} = useUnsupportedBlockEditor( clientId );
-
-	/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
-	const descriptionFormat = __(
-		'Blocks nested deeper than %d levels may not render properly in the mobile editor.'
-	);
-	let description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
-	if (
-		! isUnsupportedBlockEditorSupported &&
-		! canEnableUnsupportedBlockEditor
-	) {
-		// When UBE can't be used, the description mentions using the web browser to edit the block.
-		description +=
-			' ' +
-			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
-			__(
-				'For this reason, we recommend editing the block using your web browser.'
-			);
-	}
-	// Otherwise, the description mentions using the web editor (i.e. UBE).
-	else {
-		description +=
-			' ' +
-			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
-			__(
-				'For this reason, we recommend editing the block using the web editor.'
-			);
-	}
-	// If the block can be flattened, we also suggest to ungroup the block.
-	if ( isUngroupable ) {
-		description +=
-			' ' +
-			/* translators: Alternative option included in a warning related to having blocks deeply nested. */
-			__(
-				'Alternatively, you can flatten the content by ungrouping the block.'
-			);
-	}
-
-	return (
-		<TouchableWithoutFeedback
-			disabled={ ! isSelected }
-			accessibilityLabel={ __( 'Warning message' ) }
-			accessibilityRole="button"
-			accessibilityHint={ __( 'Tap here to show more details.' ) }
-			onPress={ () => setShowDetails( true ) }
-		>
-			<View>
-				<Warning
-					message={ __(
-						'Block cannot be rendered because it is deeply nested. Tap here for more details.'
-					) }
-				/>
-				<UnsupportedBlockDetails
-					clientId={ clientId }
-					showSheet={ showDetails }
-					onCloseSheet={ () => setShowDetails( false ) }
-					title={ __( 'Deeply nested block' ) }
-					description={ description }
-					customActions={
-						isUngroupable
-							? [
-									{
-										label: __( 'Ungroup block' ),
-										onPress: onUngroup,
-									},
-							  ]
-							: EMPTY_ARRAY
-					}
-				/>
-			</View>
-		</TouchableWithoutFeedback>
-	);
-};
-
-export default WarningMaxDepthExceeded;

package/src/components/inserter/block-types-tab.native.js

@@ -1,76 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BlockTypesList from '../block-types-list';
-import useClipboardBlock from './hooks/use-clipboard-block';
-import useBlockTypeImpressions from './hooks/use-block-type-impressions';
-import { createInserterSection, filterInserterItems } from './utils';
-import useBlockTypesState from './hooks/use-block-types-state';
-
-const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
-
-function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
-	const [ rawBlockTypes, , collections ] = useBlockTypesState(
-		rootClientId,
-		onSelect,
-		true
-	);
-	const clipboardBlock = useClipboardBlock( rootClientId );
-	const filteredBlockTypes = filterInserterItems( rawBlockTypes );
-	const blockTypes = clipboardBlock
-		? [ clipboardBlock, ...filteredBlockTypes ]
-		: filteredBlockTypes;
-	const { items, trackBlockTypeSelected } =
-		useBlockTypeImpressions( blockTypes );
-
-	const handleSelect = ( ...args ) => {
-		trackBlockTypeSelected( ...args );
-		onSelect( ...args );
-	};
-
-	const collectionSections = useMemo( () => {
-		const result = [];
-		Object.keys( collections ).forEach( ( namespace ) => {
-			const data = items.filter(
-				( item ) => getBlockNamespace( item ) === namespace
-			);
-			if ( data.length > 0 ) {
-				result.push(
-					createInserterSection( {
-						key: `collection-${ namespace }`,
-						metadata: {
-							icon: collections[ namespace ].icon,
-							title: collections[ namespace ].title,
-						},
-						items: data,
-					} )
-				);
-			}
-		} );
-
-		return result;
-	}, [ items, collections ] );
-
-	const sections = [
-		createInserterSection( { key: 'default', items } ),
-		...collectionSections,
-	];
-
-	return (
-		<BlockTypesList
-			name="Blocks"
-			sections={ sections }
-			onSelect={ handleSelect }
-			listProps={ listProps }
-			label={ __( 'Blocks menu' ) }
-		/>
-	);
-}
-
-export default BlockTypesTab;